1import{LitElement,css,html,nothing}from"@lit";import{addToCart,t}from"@nova/utils";import styles from"@nova/styles";import{swiperStyles}from"@vendor/swiper-styles";class NovaMiniCartRecommendations extends LitElement{static properties={recommendations:{type:Array},title:{type:String},addToCartErrorId:{type:Number,state:!0}};constructor(){super(),this.recommendations=[],this.title="",this._recommendationsSyncKey="",this.addToCartErrorId=null}disconnectedCallback(){this._destroyCarousel(),super.disconnectedCallback()}updated(changedProperties){if(changedProperties.has("recommendations")){const syncKey=this.recommendations.map(recommendation=>recommendation.id).join(",");if(syncKey===this._recommendationsSyncKey)return;this._recommendationsSyncKey=syncKey,this._syncCarousel()}}_destroyCarousel=()=>{this.$carousel&&typeof this.$carousel.destroy=="function"&&this.$carousel.destroy(!0,!0),this.$carousel=null};_syncCarousel=()=>{if(this._destroyCarousel(),this.recommendations.length<=1)return;const carouselEl=this.shadowRoot?.querySelector(".js-mini-cart-recommendations-carousel");carouselEl&&this._initializeCarousel(carouselEl)};_initializeCarousel=carouselEl=>{this.$carousel=new Swiper(carouselEl,{init:!1,spaceBetween:5,slidesPerView:1.2,preventClicks:!1,preventClicksPropagation:!1,slidesOffsetAfter:15,slidesOffsetBefore:15,navigation:{nextEl:this.shadowRoot.querySelector(".mini-cart-recommendations__carousel-next"),prevEl:this.shadowRoot.querySelector(".mini-cart-recommendations__carousel-prev")},pagination:{el:carouselEl.querySelector(".swiper-pagination"),type:"progressbar"},breakpoints:{1024:{slidesPerView:1.3}},keyboard:{enabled:!0}}),this.$carousel.init(),this.$carousel.enable()};_renderRecommendationCard=recommendation=>{const swatchCount=recommendation.swatch_values?.length??0,chooseOptionsLabel=`${t("cart.general.choose_options","Choose options for")} ${recommendation.title}`,addToCartLabel=`${t("products.product.add_to_cart","Add to cart")} ${recommendation.title}`;return html` 2 <div class="mini-cart-recommendation"> 3 <div class="mini-cart-recommendation__image"> 4 <img src="${recommendation.image}" alt="${recommendation.title}"> 5 ${recommendation.badge_data?html` 6 <p 7 class="mini-cart-recommendation__badge-data" 8 style=" 9 --badge-background-color: ${recommendation.badge_data.colour}; 10 --badge-font-color: ${recommendation.badge_data.font_colour}; 11 "> 12 ${recommendation.badge_data.label} 13 </p> 14 `:nothing} 15 </div> 16 <div class="mini-cart-recommendation__content"> 17 <a href="${recommendation.url}" class="mini-cart-recommendation__title-link"> 18 <h6 class="mini-cart-recommendation__title">${recommendation.title}</h6> 19 </a> 20 <p class="mini-cart-recommendation__active-swatch-value"> 21 ${recommendation.active_swatch_value} 22 ${swatchCount>1?html` 23 <a href="${recommendation.url}" class="mini-cart-recommendation__swatch-values">+${swatchCount-1} Colors</a>`:nothing} 24 </p> 25 <div class="mini-cart-recommendation__price-container"> 26 <span class="mini-cart-recommendation__price-value">${recommendation.price}</span> 27 ${recommendation.variants_size>1?html` 28 <a href="${recommendation.url}" class="mini-cart-recommendation__add-to-cart" aria-label="${chooseOptionsLabel}"> 29 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"> 30 <path d="M7 0V14" stroke="black"/> 31 <path d="M0 7L14 7" stroke="black"/> 32 </svg> 33 </a> 34 `:html` 35 <button type="button" @click="${()=>this._handleAddToCart(recommendation)}" class="mini-cart-recommendation__add-to-cart" aria-label="${addToCartLabel}"> 36 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"> 37 <path d="M7 0V14" stroke="black"/> 38 <path d="M0 7L14 7" stroke="black"/> 39 </svg> 40 </button> 41 `} 42 </div> 43 ${this.addToCartErrorId===recommendation.id?html` 44 <p class="mini-cart-recommendation__error" role="alert"> 45 ${t("cart.general.cart_error","There was an error while updating your cart. Please try again.")} 46 </p> 47 `:nothing} 48 </div> 49 </div> 50 `};_handleAddToCart=async recommendation=>{this.addToCartErrorId=null;try{await addToCart({id:recommendation.id,quantity:1},!1),document.dispatchEvent(new CustomEvent("nova:cart:refresh",{bubbles:!0,composed:!0,detail:{scrollToTop:!0}}))}catch{this.addToCartErrorId=recommendation.id}};render(){const previousSlideLabel=t("accessibility.previous_slide","Slide left"),nextSlideLabel=t("accessibility.next_slide","Slide right"),paginationLabel=t("general.slider.name","Slider");return html` 51 <div class="mini-cart-recommendations"> 52 ${this.title||this.recommendations.length>1?html` 53 <div class="mini-cart-recommendations__header"> 54 ${this.title?html`<h3 class="mini-cart-recommendations__title">${this.title}</h3>`:html`<span class="mini-cart-recommendations__title"></span>`} 55 ${this.recommendations.length>1?html` 56 <div class="mini-cart-recommendations__carousel-navigation"> 57 <button type="button" class="carousel--icon-container mini-cart-recommendations__carousel-prev" aria-label="${previousSlideLabel}"> 58 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14" fill="none" aria-hidden="true"> 59 <path d="M7.12382 13.1869L0.707153 6.77024L7.12382 0.353577M0.707153 6.77024L19.9572 6.77024" stroke="black"/> 60 </svg> 61 </button> 62 <button type="button" class="carousel--icon-container mini-cart-recommendations__carousel-next" aria-label="${nextSlideLabel}"> 63 <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none" aria-hidden="true"> 64 <path d="M13.7083 4.08336L20.125 10.5L13.7083 16.9167M20.125 10.5L0.875001 10.5" stroke="black"/> 65 </svg> 66 </button> 67 </div> 68 `:nothing} 69 </div> 70 `:nothing} 71 ${this.recommendations.length>1?html`
72 <div class="mini-cart-recommendations__carousel js-mini-cart-recommendations-carousel"> 73 <div class="swiper-wrapper"> 74 ${this.recommendations.map(recommendation=>html` 75 <div class="swiper-slide"> 76 ${this._renderRecommendationCard(recommendation)} 77 </div> 78 `)} 79 </div> 80 <div class="swiper-pagination" role="navigation" aria-label="${paginationLabel}"></div> 81 </div> 82 `:html` 83 ${this._renderRecommendationCard(this.recommendations[0])} 84 `} 85 </div> 86 `}static styles=[swiperStyles,styles.flex,css` 87 :host { 88 max-width: var(--size); 89 display: contents; 90 } 91 .mini-cart-recommendations { 92 width: 100%; 93 display: flex; 94 flex-direction: column; 95 gap: var(--nova-space-sm); 96 padding-block: var(--nova-space-md); 97 background-color: var(--nova-color-grey-100); 98 margin-bottom: 1px; 99 @media screen and (min-width: 1024px) { 100 padding-block: var(--nova-space-sm); 101 gap: var(--nova-space-xsm); 102 } 103 } 104 .mini-cart-recommendations__header { 105 display: flex; 106 align-items: center; 107 justify-content: space-between; 108 gap: var(--nova-space-sm); 109 padding-inline: var(--nova-space-sm); 110 @media screen and (min-width: 1024px) { 111 padding-inline: var(--nova-space-xsm); 112 } 113 } 114 .mini-cart-recommendations__title { 115 font: var(--nova-body-font); 116 letter-spacing: var(--nova-body-letter-spacing); 117 text-transform: var(--nova-body-text-transform); 118 font-size: 12px; 119 font-weight: 300; 120 line-height: 110%; 121 color: var(--nova-color-black); 122 margin: 0; 123 } 124 .mini-cart-recommendation { 125 background-color: var(--nova-color-white); 126 padding: var(--nova-space-xs) var(--nova-space-sm) var(--nova-space-xs) var(--nova-space-xs); 127 gap: var(--nova-space-md); 128 display: flex; 129 align-items: center; 130 @media screen and (min-width: 1024px) { 131 padding-right: var(--nova-space-xsm); 132 gap: var(--nova-space-sm); 133 } 134 } 135 .mini-cart-recommendation__image { 136 display: flex; 137 align-items: center; 138 justify-content: center; 139 width: 120px; 140 height: 120px; 141 position: relative; 142 } 143 .mini-cart-recommendation__image img { 144 width: 100%; 145 height: 100%; 146 object-fit: cover; 147 } 148 .mini-cart-recommendation__content { 149 flex: 1; 150 display: flex; 151 flex-direction: column; 152 gap: var(--nova-space-xs); 153 position: relative; 154 } 155 .mini-cart-recommendation__title-link { 156 text-decoration: none; 157 } 158 .mini-cart-recommendation__title { 159 font: var(--nova-body-font); 160 letter-spacing: var(--nova-body-letter-spacing); 161 text-transform: var(--nova-body-text-transform); 162 font-size: 14px; 163 font-weight: 300; 164 line-height: 120%; 165 color: var(--nova-color-grey-600); 166 margin: 0; 167 } 168 .mini-cart-recommendation__price-container { 169 display: flex; 170 align-items: center; 171 gap: var(--nova-space-2xs); 172 justify-content: space-between; 173 } 174 .mini-cart-recommendation__price-value { 175 font: var(--nova-body-font); 176 letter-spacing: var(--nova-body-letter-spacing); 177 text-transform: var(--nova-body-text-transform); 178 color: var(--nova-color-grey-600); 179 font-size: 14px; 180 font-weight: 300; 181 line-height: 120%; 182 } 183 .mini-cart-recommendation__badge-data { 184 font: var(--nova-body-font); 185 letter-spacing: var(--nova-body-letter-spacing); 186 color: var(--nova-color-white); 187 position: absolute; 188 top: var(--nova-space-xs); 189 left: var(--nova-space-xs); 190 background-color: var(--badge-background-color); 191 color: var(--badge-font-color); 192 padding: var(--nova-space-2xs) var(--nova-space-xs); 193 border-radius: 1000px; 194 font-size: 12px; 195 font-weight: 300; 196 line-height: 110%; 197 pointer-events: none; 198 margin: 0; 199 } 200 .mini-cart-recommendation__active-swatch-value, 201 .mini-cart-recommendation__swatch-values { 202 font: var(--nova-body-font); 203 letter-spacing: var(--nova-body-letter-spacing); 204 text-transform: var(--nova-body-text-transform); 205 color: var(--nova-color-grey-400); 206 font-size: 12px; 207 font-weight: 400; 208 line-height: 120%; 209 cursor: pointer; 210 } 211 .mini-cart-recommendation__active-swatch-value { 212 display: flex; 213 align-items: center; 214 gap: var(--nova-space-2xs); 215 margin: 0; 216 } 217 .mini-cart-recommendation__swatch-values { 218 text-decoration: underline; 219 } 220 .mini-cart-recommendations__carousel { 221 overflow: hidden; 222 position: relative; 223 padding-bottom: 18px; 224 } 225 .mini-cart-recommendations__carousel .swiper-pagination { 226 top: auto; 227 bottom: 0; 228 left: 15px; 229 right: 15px; 230 width: calc(100% - 30px); 231 background: var(--nova-color-grey-200); 232 border-radius: 0; 233 overflow: hidden; 234 --swiper-pagination-progressbar-size: 3px; 235 } 236 .mini-cart-recommendations__carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { 237 background-color: var(--nova-color-grey-600); 238 } 239 .mini-cart-recommendations__carousel-navigation { 240 display: flex; 241 align-items: center; 242 gap: var(--nova-space-xsm); 243 } 244 @media screen and (max-width: 1023px) { 245 .mini-cart-recommendations__carousel-navigation { 246 display: none; 247 } 248 } 249 .carousel--icon-container { 250 width: 21px; 251 height: 21px; 252 display: flex; 253 align-items: center; 254 justify-content: center; 255 border-radius: 100%; 256 background-color: transparent; 257 color: var(--nova-color-grey-600); 258 cursor: pointer; 259 transition: opacity 0.2s; 260 border: none; 261 padding: 0; 262 margin: 0; 263 font: inherit; 264 265 &.swiper-button-disabled { 266 opacity: 0.3; 267 pointer-events: none; 268 } 269 } 270 .mini-cart-recommendation__add-to-cart { 271 background-color: var(--nova-color-white); 272 border: 1px solid var(--nova-color-grey-600); 273 border-radius: 100%; 274 cursor: pointer; 275 padding: 0; 276 margin: 0; 277 display: flex; 278 align-items: center; 279 justify-content: center; 280 width: 26px;
281 height: 26px; 282 } 283 .mini-cart-recommendation__error { 284 font: var(--nova-body-caption); 285 letter-spacing: var(--nova-caption-letter-spacing); 286 color: var(--nova-color-error, #b42318); 287 margin: 0; 288 } 289 `]}customElements.define("nova-mini-cart-recommendations",NovaMiniCartRecommendations); 290//# sourceMappingURL=/cdn/shop/t/335/assets/component-mini-cart-recommendations.js.map?v=79282395618827345861790628824
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.