https://sstories.com.ua/cdn/shop/t/12/assets/notification-drawer.js?v=169405694464040122881790850286

1class NotificationDrawer{constructor(){this.drawer=null,this.overlay=null,this.currentProduct=null,this.currentVariant=null,this.buttonUpdateTimeout=null,this.init()}init(){this.createDrawerHTML(),this.bindEvents(),this.handleVariantChanges(),this.initializeButtonState(),this.checkForSuccessMessage()}initializeButtonState(){let attempts=0;const maxAttempts=10,tryUpdateState=()=>{attempts++;const variantInput=document.querySelector('input[name="id"]');(variantInput?this.getVariantData(variantInput.value):null)||attempts>=maxAttempts?(this.updateCurrentVariant(),this.updateButtonState()):setTimeout(tryUpdateState,200)};setTimeout(tryUpdateState,100)}checkForSuccessMessage(){if(new URLSearchParams(window.location.search).get("contact_posted")==="true"){const newUrl=new URL(window.location.href);newUrl.searchParams.delete("contact_posted"),window.history.replaceState({},"",newUrl.toString()),setTimeout(()=>{this.openWithSuccessMessage()},500)}}async openWithSuccessMessage(){this.updateProductData(),this.overlay.classList.add("active"),this.drawer.classList.add("active"),document.body.style.overflow="hidden",this.showSuccessMessageInDrawer()}successScreenHTML(){const productTitle=this.escapeHtml(this.currentProduct.title),variantTitle=this.escapeHtml(this.currentVariant.title),hasVariant=this.currentVariant.title!=="Default Title";return`
2      <div class="preorder-success">
3        <svg class="preorder-success__mark" viewBox="0 0 52 52" aria-hidden="true" focusable="false">
4          <circle class="preorder-success__mark-circle" cx="26" cy="26" r="24"/>
5          <path class="preorder-success__mark-check" d="M15 27.5l7.5 7.5L37.5 20"/>
6        </svg>
7
8        <h2 class="preorder-success__title">\u041F\u0435\u0440\u0435\u0434\u0437\u0430\u043C\u043E\u0432\u043B\u0435\u043D\u043D\u044F \u043F\u0440\u0438\u0439\u043D\u044F\u0442\u043E</h2>
9
10        <p class="preorder-success__product">
11          ${productTitle}${hasVariant?`<span class="preorder-success__variant">${variantTitle}</span>`:""}
12        </p>
13
14        <p class="preorder-success__note">
15          \u041D\u0430\u0448 \u043C\u0435\u043D\u0435\u0434\u0436\u0435\u0440 \u0437\u0432\u2019\u044F\u0436\u0435\u0442\u044C\u0441\u044F \u0437 \u0432\u0430\u043C\u0438 \u043D\u0430\u0439\u0431\u043B\u0438\u0436\u0447\u0438\u043C \u0447\u0430\u0441\u043E\u043C, \u0449\u043E\u0431 \u043F\u0456\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0438 \u0434\u0435\u0442\u0430\u043B\u0456
16          \u0437\u0430\u043C\u043E\u0432\u043B\u0435\u043D\u043D\u044F, \u0442\u0435\u0440\u043C\u0456\u043D\u0438 \u0434\u043E\u0441\u0442\u0430\u0432\u043A\u0438 \u0442\u0430 \u0441\u043F\u043E\u0441\u0456\u0431 \u043E\u043F\u043B\u0430\u0442\u0438.
17        </p>
18
19        <button type="button" class="preorder-success__btn" onclick="notificationDrawer.close()">
20          \u041F\u0440\u043E\u0434\u043E\u0432\u0436\u0438\u0442\u0438 \u043F\u043E\u043A\u0443\u043F\u043A\u0438
21        </button>
22      </div>
23    `}setDrawerHeading(text){const heading=this.drawer.querySelector(".notification-drawer__header h2");heading&&(heading.textContent=text)}showSuccessMessageInDrawer(){this.setDrawerHeading("\u0414\u044F\u043A\u0443\u0454\u043C\u043E \u0437\u0430 \u0437\u0430\u043C\u043E\u0432\u043B\u0435\u043D\u043D\u044F"),this.drawer.querySelector("#notification-drawer-content").innerHTML=this.successScreenHTML()}createDrawerHTML(){this.overlay=document.createElement("div"),this.overlay.className="notification-drawer__overlay",this.overlay.addEventListener("click",()=>this.close()),this.drawer=document.createElement("div"),this.drawer.className="notification-drawer",this.drawer.innerHTML=`
24      <div class="notification-drawer__header">
25        <button type="button" class="notification-drawer__close" aria-label="\u0417\u0430\u043A\u0440\u0438\u0442\u0438">&times;</button>
26        <h2>\u041F\u043E\u0432\u0456\u0434\u043E\u043C\u0438\u0442\u0438 \u043A\u043E\u043B\u0438 \u0431\u0443\u0434\u0435 \u0432 \u043D\u0430\u044F\u0432\u043D\u043E\u0441\u0442\u0456</h2>
27      </div>
28      <div class="notification-drawer__content" id="notification-drawer-content">
29        <!-- Content will be loaded here -->
30      </div>
31    `,this.drawer.querySelector(".notification-drawer__close").addEventListener("click",()=>this.close()),document.body.appendChild(this.overlay),document.body.appendChild(this.drawer)}bindEvents(){document.addEventListener("click",e=>{if(e.target.matches('button[name="add"]')||e.target.closest('button[name="add"]')){const button=e.target.matches('button[name="add"]')?e.target:e.target.closest('button[name="add"]');if(this.isProductSoldOut())return e.preventDefault(),e.stopPropagation(),this.open(),!1}}),document.addEventListener("submit",e=>{if(e.target.matches('form[data-type="add-to-cart-form"]')){const button=e.target.querySelector('button[name="add"]');button&&(button.hasAttribute("data-soldout")||this.isProductSoldOut())&&(e.preventDefault(),e.stopPropagation(),this.open())}}),document.addEventListener("keydown",e=>{e.key==="Escape"&&this.isOpen()&&this.close()})}handleVariantChanges(){document.addEventListener("change",e=>{(e.target.matches('input[name="id"]')||e.target.matches('select[name="id"]'))&&setTimeout(()=>{this.updateCurrentVariant(),this.updateButtonState()},100)}),document.addEventListener("change",e=>{(e.target.matches('input[type="radio"][name*="option"]')||e.target.matches('select[name*="option"]'))&&setTimeout(()=>{this.updateCurrentVariant(),this.updateButtonState()},100)}),document.addEventListener("change",e=>{e.target.form&&e.target.form.matches('form[data-type="add-to-cart-form"]')&&setTimeout(()=>{this.updateCurrentVariant(),this.updateButtonState()},150)}),document.addEventListener("variant:change",()=>{setTimeout(()=>{this.updateCurrentVariant(),this.updateButtonState()},100)});const variantInput=document.querySelector('input[name="id"]');if(variantInput){new MutationObserver(mutations=>{mutations.forEach(mutation=>{mutation.type==="attributes"&&mutation.attributeName==="value"&&(this.updateCurrentVariant(),this.updateButtonState())})}).observe(variantInput,{attributes:!0,attributeFilter:["value"]});let lastValue=variantInput.value;setInterval(()=>{variantInput.value!==lastValue&&(lastValue=variantInput.value,this.updateCurrentVariant(),this.updateButtonState())},500)}}updateCurrentVariant(){const variantInput=document.querySelector('input[name="id"]');if(variantInput){const variantData=this.getVariantData(variantInput.value);this.currentVariant={id:variantInput.value,available:variantData?variantData.available:!1,title:this.getVariantTitle()}}}getVariantData(variantId){const variantScripts=document.querySelectorAll('script[type="application/json"]');for(let script of variantScripts)try{const data=JSON.parse(script.textContent);if(Array.isArray(data)&&data.length>0&&data[0].id){const variant=data.find(variant2=>variant2.id.toString()===variantId.toString());if(variant)return variant}}catch{continue}return window.variantData?window.variantData.find(variant=>variant.id.toString()===variantId.toString()):null}updateButtonState(){this.buttonUpdateTimeout&&clearTimeout(this.buttonUpdateTimeout),this.buttonUpdateTimeout=setTimeout(()=>{this.doUpdateButtonState()},200)}doUpdateButtonState(){const addButton=document.querySelector('button[name="add"]'),buttonText=addButton?.querySelector(".cta");if(!addButton||!buttonText)return;const variantInput=document.querySelector('input[name="id"]');if(!variantInput)return;const variantData=this.getVariantData(variantInput.value);variantData&&variantData.available?(addButton.removeAttribute("data-soldout"),buttonText.textContent="\u0417\u0430\u043C\u043E\u0432\u0438\u0442\u0438"):(addButton.setAttribute("data-soldout","true"),buttonText.textContent="\u041E\u0424\u041E\u0420\u041C\u0418\u0422\u0418 \u041F\u0415\u0420\u0415\u0414\u0417\u0410\u041C\u041E\u0412\u041B\u0415\u041D\u041D\u042F")}isProductSoldOut(){const variantInput=document.querySelector('input[name="id"]');if(variantInput){const variantData=this.getVariantData(variantInput.value);return variantData&&!variantData.available}const addButton=document.querySelector('button[name="add"]');return addButton&&addButton.hasAttribute("data-soldout")}

31async open(){this.updateProductData(),this.setDrawerHeading("\u041F\u043E\u0432\u0456\u0434\u043E\u043C\u0438\u0442\u0438 \u043A\u043E\u043B\u0438 \u0431\u0443\u0434\u0435 \u0432 \u043D\u0430\u044F\u0432\u043D\u043E\u0441\u0442\u0456"),await this.loadFormContent(),this.overlay.classList.add("active"),this.drawer.classList.add("active"),document.body.style.overflow="hidden",setTimeout(()=>{const firstInput=this.drawer.querySelector('input[type="text"], input[type="email"]');firstInput&&firstInput.focus()},300)}close(){this.overlay.classList.remove("active"),this.drawer.classList.remove("active"),document.body.style.overflow=""}isOpen(){return this.drawer.classList.contains("active")}updateProductData(){const productTitleElement=document.querySelector(".title h1, .title h2"),productTitle=productTitleElement?productTitleElement.textContent.trim():"",variantInput=document.querySelector('input[name="id"]'),variantTitle=this.getVariantTitle();this.currentProduct={title:productTitle,id:variantInput?variantInput.form?.getAttribute("data-product-id"):null},this.currentVariant={id:variantInput?variantInput.value:null,title:variantTitle}}getVariantTitle(){const variantInput=document.querySelector('input[name="id"]');if(variantInput){const variantData=this.getVariantData(variantInput.value);if(variantData&&variantData.public_title&&variantData.public_title!=="Default Title")return variantData.public_title}const selectedOptions=[];return document.querySelectorAll('input[type="radio"]:checked[name*="option"]').forEach(input=>{input.value&&input.value!==""&&selectedOptions.push(input.value)}),document.querySelectorAll('select[name*="option"]').forEach(select=>{select.value&&select.value!==""&&selectedOptions.push(select.value)}),selectedOptions.length>0?selectedOptions.join(" / "):"Default Title"}async loadFormContent(){const content=this.drawer.querySelector("#notification-drawer-content"),productTitle=this.escapeHtml(this.currentProduct.title),variantTitle=this.escapeHtml(this.currentVariant.title),formHTML=`
32      <div data-product-notification-heading>
33        <h2 class="product__notification__title h3">${productTitle}</h2>
34        ${this.currentVariant.title!=="Default Title"?`<p class="product__notification__variant subheading" data-variant-title>${variantTitle}</p>`:""}
35      </div>
36      
37             <form action="/contact" method="post" id="NotificationForm--${this.currentVariant.id}" data-notification-form data-variant-id="${this.currentVariant.id}" accept-charset="UTF-8">
38         <input type="hidden" name="form_type" value="contact">
39         <input type="hidden" name="utf8" value="\u2713">
40         <input type="hidden" name="return_to" value="${window.location.pathname}?contact_posted=true">
41        
42        <div class="product__notification__form">
43          <label for="NotificationFormName" class="visually-hidden">\u0406\u043C'\u044F</label>
44          <input type="text" class="contactFormName field" id="NotificationFormName" name="contact[name]" placeholder="\u0406\u043C'\u044F" autocapitalize="words" required>
45
46          <label for="NotificationFormPhone" class="visually-hidden">\u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0443</label>
47          <input type="tel" class="contactFormPhone field" id="NotificationFormPhone" name="contact[phone]" placeholder="\u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0443" pattern="[0-9\\-\\+\\s\\(\\)]*" required>
48
49          <label for="NotificationFormEmail" class="visually-hidden">\u0412\u0430\u0448\u0430 \u0435\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430 \u043F\u043E\u0448\u0442\u0430</label>
50          <input type="email" class="contactFormEmail field" id="NotificationFormEmail" name="contact[email]" placeholder="\u0412\u0430\u0448\u0430 \u0435\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430 \u043F\u043E\u0448\u0442\u0430" autocorrect="off" autocapitalize="off" required>
51
52          <label for="NotificationFormProduct" class="visually-hidden">\u041F\u043E\u0432\u0456\u0434\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u043F\u0440\u043E \u0442\u043E\u0432\u0430\u0440</label>
53          <input type="hidden" id="NotificationFormProduct" name="contact[\u043F\u043E\u0432\u0456\u0434\u043E\u043C\u043B\u0435\u043D\u043D\u044F-\u043F\u0440\u043E-\u0442\u043E\u0432\u0430\u0440]" autocapitalize="words" value="${productTitle} - ${variantTitle}" data-notification-product>
54
55          <button type="submit" name="subscribe" class="btn btn--primary btn--solid">

56            <span>\u041E\u0424\u041E\u0420\u041C\u0418\u0422\u0418 \u041F\u0415\u0420\u0415\u0414\u0417\u0410\u041C\u041E\u0412\u041B\u0415\u041D\u041D\u042F</span>
57          </button>
58        </div>
59      </form>
60    `;content.innerHTML=formHTML;const form=content.querySelector("form");form&&form.addEventListener("submit",e=>this.handleFormSubmit(e))}async handleFormSubmit(e){const form=e.target,submitButton=form.querySelector('button[type="submit"]'),webhook=window.SStoriesPreorder;if(webhook&&e.preventDefault(),document.querySelectorAll(".form-errors").forEach(error=>error.remove()),submitButton&&(submitButton.classList.add("loading"),submitButton.disabled=!0),!webhook)return;let delivered=!1;try{delivered=await webhook.send(form)}catch{delivered=!1}if(delivered){this.showSuccessMessageInDrawer();return}form.submit()}showSuccessMessage(){this.showSuccessMessageInDrawer()}showErrorMessage(){const content=this.drawer.querySelector("#notification-drawer-content");if(!content.querySelector(".form-errors")){const errorDiv=document.createElement("div");errorDiv.className="form-errors",errorDiv.innerHTML="<p>\u0412\u0438\u043D\u0438\u043A\u043B\u0430 \u043F\u043E\u043C\u0438\u043B\u043A\u0430. \u0421\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0449\u0435 \u0440\u0430\u0437.</p>",content.insertBefore(errorDiv,content.firstChild)}}escapeHtml(text){const map={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"};return text?text.replace(/[&<>"']/g,m=>map[m]):""}}document.addEventListener("DOMContentLoaded",()=>{window.notificationDrawer=new NotificationDrawer}),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{window.notificationDrawer||(window.notificationDrawer=new NotificationDrawer)}):window.notificationDrawer||(window.notificationDrawer=new NotificationDrawer);
61//# sourceMappingURL=/cdn/shop/t/12/assets/notification-drawer.js.map?v=169405694464040122881790850286