1import{S as Splide}from"./splide.esm-Cg9MkWOe.js";import{P as Price}from"./ProductPrice--l97YCzz.js";import{D,g}from"./preact.module-B5ZnQuyU.js";import{i as isAuthorized}from"./utils-D8tYCXRD.js";import"./currency-DRNmrEpZ.js";class RecentlyViewedCarousel extends HTMLElement{constructor(){super(),this.products=[]}connectedCallback(){this.loadRecentlyViewedProducts(),this.setupEventListeners(),this.renderCarousel()}setupEventListeners(){document.addEventListener("recentlyViewedUpdated",this.renderCarousel.bind(this))}loadRecentlyViewedProducts(){var _a;const storedProducts=localStorage.getItem("recentlyViewed");storedProducts&&(this.products=JSON.parse(storedProducts));const themeVarsProduct=(_a=window.ThemeVars)==null?void 0:_a.product;themeVarsProduct&&this.addProduct(themeVarsProduct)}addProduct(product){this.products.some(p=>p.id===product.id)||(this.products.unshift(product),this.updateProducts(this.products))}updateProducts(products){this.products=products,localStorage.setItem("recentlyViewed",JSON.stringify(this.products)),document.dispatchEvent(new CustomEvent("recentlyViewedUpdated"))}renderCarousel(){var _a,_b;console.log("this.products: ",this.products),this.products.length>3?(this.innerHTML=` 2 <div class="recently-viewed-carousel__wrapper"> 3 <div class="splide"> 4 <div class="splide__track"> 5 <div class="splide__list"> 6 ${this.products.map(product=>` 7 <div class="splide__slide"> 8 ${this.createProductCard(product).outerHTML} 9 </div> 10 `).join("")} 11 </div> 12 </div> 13 ${this.renderCarouselControls()} 14 </div> 15 </div> 16 `,this.initializeCarousel()):(_b=(_a=this.closest(".product-carousel"))==null?void 0:_a.querySelector(".product-carousel__heading"))==null||_b.remove()}createProductCard(product){var _a,_b,_c,_d,_e,_f;const card=document.createElement("div");card.className="product-card",isAuthorized(product,window.themeVars.customer)||card.classList.add("product-card--locked");const isSingleVariantOutOfStock=!product.available&&((_a=product.tags)==null?void 0:_a.includes("single-variant-out-of-stock")),hasBisEnabled=isSingleVariantOutOfStock&&((_b=product.tags)==null?void 0:_b.includes("back-in-stock"));isSingleVariantOutOfStock&&card.classList.add("product-card--single-variant-out-of-stock");const priceContainer=document.createElement("div");priceContainer.className="product-card__price";let showOptions=!0,detailsBtnText=window.themeVars.strings.product.btnDetails,detailsBtnClass="product-card__details-cta btn btn-transparent btn-small";product.tags.includes("personalised")&&(showOptions=!1,detailsBtnText=window.themeVars.strings.product.btnPersonalise,detailsBtnClass="product-card__details-cta btn btn-black btn-small btn-personalise");const liCount=[product.abv&&1,product.style&&1,product.size&&String(product.size)!=="0"&&1].filter(Boolean).length;let showEfpBadge=!0;product.variants.every(variant=>variant.real_compare_at_price)&&(showEfpBadge=!1),product.variants.forEac
16h(variant=>{variant.bundle_item&&(variant.bundle_item.description="",variant.bundle_item.content="")}),D(g(Price,{product}),priceContainer);const buttonText=product.preOrder==="true"?window.themeVars.strings.product.pre_order:window.themeVars.strings.product.btnOptions;return card.innerHTML=` 17 <div class="product-card__content"> 18 <div class="product-card__images${isSingleVariantOutOfStock?" product-card__images--out-of-stock":""}"> 19 <div class="product-card__badge-wrapper"> 20 ${isSingleVariantOutOfStock?`<span class="product-card__badge badge badge-yellow">${window.themeVars.strings.product.soldOut}</span>`:""} 21 ${product.customBadge!=="no input"&&product.customBadge!==void 0&&!isSingleVariantOutOfStock?`<span class="product-card__badge badge badge-orange">${product.customBadge}</span>`:""} 22 ${product.saleBadge&&!isSingleVariantOutOfStock?`<span class="product-card__badge badge badge-red">${product.saleBadge}</span>`:""} 23 </div> 24 <div class="responsive-image product-card__image"> 25 <img width="315" height="315" src="${(_c=product.images[0])==null?void 0:_c.src}" alt="${product.title}" /> 26 </div> 27 ${product.images.length>1?` 28 <div class="responsive-image product-card__image product-card__image--rollover"> 29 <img width="315" height="315" src="${(_d=product.images[1])==null?void 0:_d.src}" alt="${product.title} rollover" /> 30 </div> 31 `:""} 32 ${isAuthorized(product,window.themeVars.customer)?"":` 33 <div class="product-lock" aria-hidden="true"> 34 <div class="product-lock__wrapper"> 35 <div class="product-lock__content"> 36 <span aria-hidden="true" dangerouslySetInnerHTML={{ __html: window.themeVars.icons.lock }}></span> 37 <div class="product-lock__text"> 38 <p class="product-lock__title">${window.themeVars.strings.product.lockedTitle}</p> 39 <p class="product-lock__desc"> 40 <a href="${window.themeVars.strings.product.logInLink}">${window.themeVars.strings.product.logIn}</a> 41 ${window.themeVars.strings.product.lockedText} 42 <a href="${window.themeVars.strings.product.signUpLink}">${window.themeVars.strings.product.signUp}</a> 43 </p> 44 </div> 45 </div> 46 <div class="product-lock__buttons"> 47 <a href="${window.themeVars.strings.product.logInLink}" class="product__log-in btn btn-white btn-white--outline">${window.themeVars.strings.product.logIn}</a> 48 <a href="${window.themeVars.strings.product.signUpLink}" class="product__sign-up btn btn-white btn-white--outline">${window.themeVars.strings.product.signUp}</a> 49 </div> 50 </div> 51 </div> 52 `} 53 </div> 54 ${product.abv||product.style||product.size&&String(product.size)!=="0"?` 55 <div class="product-card__info outside"> 56 <ul class=" 57 product-card__info-wrapper 58 product-card__info-wrapper--${liCount}-items 59 "> 60 ${product.abv?` 61 <li class="product-card__info-item"> 62 <span class="product-card__info-label">${window.themeVars.strings.product.details.abv}</span> 63 <span class="product-card__info-value">${product.abv}%</span> 64 </li> 65 `:""} 66 ${product.style?` 67 <li class="product-card__info-item"> 68 <span class="product-card__info-label">${window.themeVars.strings.product.details.style}</span> 69 <span class="product-card__info-value">${product.style}</span> 70 </li> 71 `:""} 72 ${product.size&&String(product.size)!=="0"?` 73 <li class="product-card__info-item"> 74 <span class="product-card__info-label">${window.themeVars.strings.product.details.size}</span>
75 <span class="product-card__info-value">${product.size}</span> 76 </li> 77 `:""} 78 </ul> 79 </div> 80 `:""} 81 <div class="product-card__details"> 82 <div class="product-card__wrapper"> 83 <h3 class="product-card__title heading-4">${product.title}</h3> 84 ${product.subtitle?`<p class="product-card__subtitle text-md-body">${product.subtitle}</p>`:""} 85 ${product.abv||product.style||product.size&&String(product.size)!=="0"&&String(product.size)!=="no input"?` 86 <div class="product-card__info inside"> 87 <ul class=" 88 product-card__info-wrapper 89 product-card__info-wrapper--${liCount}-items 90 "> 91 ${product.abv?` 92 <li class="product-card__info-item"> 93 <span class="product-card__info-label">${window.themeVars.strings.product.details.abv}</span> 94 <span class="product-card__info-value">${product.abv}%</span> 95 </li> 96 `:""} 97 ${product.style?` 98 <li class="product-card__info-item"> 99 <span class="product-card__info-label">${window.themeVars.strings.product.details.style}</span> 100 <span class="product-card__info-value">${product.style}</span> 101 </li> 102 `:""} 103 ${product.size&&String(product.size)!=="0"?` 104 <li class="product-card__info-item"> 105 <span class="product-card__info-label">${window.themeVars.strings.product.details.size}</span> 106 <span class="product-card__info-value">${product.size}</span> 107 </li> 108 `:""} 109 </ul> 110 </div> 111 `:""} 112 ${window.themeVars.customer.staff&&showEfpBadge?` 113 <p class="product-card__staff-member-badge staff-member-badge"> 114 <span>${window.themeVars.icons.checkmark}</span> 115 ${window.themeVars.strings.product.staffDiscount} 116 </p> 117 `:window.themeVars.customer.efpMember&&showEfpBadge?` 118 <p class="product-card__efp-member-badge efp-member-badge"> 119 <span>${window.themeVars.icons.checkmark}</span> 120 ${window.themeVars.strings.product.efpDiscount} 121 </p> 122 `:""} 123 124 ${product.hidePricePlp!=="true"?'<p class="product-card__price-container"></p>':""} 125 126 127 </div> 128 </div> 129 <div class="product-card__buttons"> 130 ${product.stockistButtonLink&&product.stockistButtonText?`<a 131 href="${product.stockistButtonLink}" 132 class="product-card__options-cta btn btn-black btn-small" 133 > 134 ${product.stockistButtonText} 135 </a>`:`${showOptions&&!isSingleVariantOutOfStock?` 136 <uwp-quickshop-button data-product='${JSON.stringify(product)}'> 137 <button 138 aria-label="${window.themeVars.strings.product.quickshopLabel}${product.title}" 139 data-quickshop="${product.handle}" 140 class="product-card__options-cta btn btn-black btn-small" 141 > 142 ${buttonText} 143 </button> 144 </uwp-quickshop-button>`:isSingleVariantOutOfStock&&hasBisEnabled?`<button type="button" class="product-card__options-cta btn btn-black btn-small" data-bis-trigger data-product="${product.id}" data-variant="${(_e=product.variants[0])==null?void 0:_e.id}"><span>${window.themeVars.strings.product.notifyMe}</span></button>`:""} `} 145 <a href="${window.Shopify.routes.root}products/${product.handle}" class="${detailsBtnClass}" aria-label="${window.themeVars.strings.product.linkLabel}${product.title}">${detailsBtnText}</a> 146 </div> 147 148 ${hasBisEnabled?`<uwp-product-notify-me data-product-id="${product.id}" data-variant-id="" product-data='${JSON.stringify(product)}' is-visible="false"></uwp-product-notify-me>`:""} 149 </div> 150 `,(_f=card.querySelector(".product-card__price-container"))==null||_f.appendChild(priceContainer),hasBisEnabled&&setTimeout(()=>{const bisButton=card.querySelector(`[data-bis-trigger][data-product="${product.id}"]`),bisPopup=card.querySelector(`uwp-product-notify-me[data-product-id="${product.id}"]`);if(bisButton&&bisPopup){const handleBisClick=()=>{bisPopup.setAttribute("is-visible","true")};bisButton.addEventListener("click",handleBisClick)}},100),card}renderCarouselControls(){return`
151 <div class="carousel-controls"> 152 <div class="carousel-controls__scrollbar-track"> 153 <div class="carousel-controls__scrollbar-progress" js-carousel-controls="scrollbarProgress"></div> 154 </div> 155 <div class="carousel-controls__arrow-wrapper splide__arrows splide__arrows--ltr"> 156 <button class="splide__arrow carousel-controls__arrow splide__arrow--prev" type="button" aria-label="Previous"> 157 ${window.themeVars.icons.chevronLeft} 158 </button> 159 <button class="splide__arrow carousel-controls__arrow splide__arrow--next" type="button" aria-label="Next"> 160 ${window.themeVars.icons.chevronRight} 161 </button> 162 </div> 163 </div> 164 `}initializeCarousel(){const splideElement=this.querySelector(".splide");if(splideElement){const splide=new Splide(splideElement,{type:"loop",perPage:3,perMove:1,pagination:!0,padding:{right:"10%"},gap:16,arrows:!0,breakpoints:{640:{perPage:1,padding:{right:"20%"}}}}).mount(),scrollBar=this.querySelector("[js-carousel-controls='scrollbarProgress']");scrollBar&&splide.on("mounted move",()=>{const end=splide.Components.Controller.getEnd()+1,rate=Math.min((splide.index+1)/end,1);scrollBar.style.width=String(100*rate)+"%"})}else console.error("Splide element not found")}}customElements.define("uwp-recently-viewed-carousel",RecentlyViewedCarousel); 165//# sourceMappingURL=/cdn/shop/t/271/assets/recently-viewed-Cs24S5du.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.