https://www.bareminerals.com/cdn/shop/t/1716/assets/section-nosto-…?v=109061404948679788981790177393

1class NostoWelcomeBackBanner extends HTMLElement{constructor(){super(),this.placementId="",this.heading="",this.content="",this.ctaText="",this.products=[]}static get observedAttributes(){return["placement-id","heading","content","cta-text"]}attributeChangedCallback(name,oldValue,newValue){this[name.replace(/-([a-z])/g,(_,c)=>c.toUpperCase())]=newValue,name!=="placement-id"&&this.render()}connectedCallback(){this.init()}async init(){const response=await window.__NOSTO_RECOMMENDER__.fetchSinglePlacement({placementID:this.placementId});if(!response||!response.recommendations){console.warn("Nosto recommendations not available",{response,placement:this.placementId});return}const recommendation=response.recommendations[this.placementId];this.products=recommendation?.products||[],this.render()}_renderProductCards(){let html="";for(let i=0;i<4;i++){const product=this.products[i];product&&(html+=`
2        <li class="nosto-banner__product${i===3?" nosto-banner__product--desktop-only":""}">
3          <a href="${product.url}" class="nosto-banner__product-link">
4            <img src="${product.image_url}" class="nosto-banner__product-img" />
5            <span class="nosto-banner__cta">${this.ctaText}</span>
6          </a>
7        </li>
8      `)}return html}attachEventListeners(){const closeButton=this.querySelector(".js-nosto-banner__close-btn");closeButton&&closeButton.addEventListener("click",()=>this.closeBanner())}closeBanner(){const banner=this.querySelector(".nosto-banner");banner&&(banner.classList.add("hidden"),banner.setAttribute("aria-hidden","true"),setTimeout(()=>{window.scrollTo({top:0,left:0,behavior:"smooth"}),document.documentElement.scrollTop=0,document.body.scrollTop=0},10),(document.querySelector("main")||document.body).focus())}render(){if(!this.products.length){this.innerHTML="";return}this.innerHTML=`
9      <section class="nosto-banner">
10        <div class="nosto-banner__info">
11          <h3 class="nosto-banner__heading">${this.heading}</h3>
12          <p class="nosto-banner__content${this.content===""?" nosto-banner__content--hidden":""}">${this.content}</p>
13        </div>
14        <ul class="nosto-banner__products">${this._renderProductCards()}</ul>
15      </section>
16    `}}customElements.define("nosto-welcome-back-banner",NostoWelcomeBackBanner);
17//# sourceMappingURL=/cdn/shop/t/1716/assets/section-nosto-welcome-back-banner.js.map?v=109061404948679788981790177393