https://idhoki88.pages.dev/assets/js/product-info.js

1/** Shopify CDN: Minification failed
2
3Line 19:4 Transforming class syntax to the configured target environment ("es5") is not supported yet
4Line 20:17 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
5Line 31:23 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
6Line 40:10 Transforming const to the configured target environment ("es5") is not supported yet
7Line 47:26 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
8Line 56:26 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
9Line 57:8 Transforming const to the configured target environment ("es5") is not supported yet
10Line 64:8 Transforming let to the configured target environment ("es5") is not supported yet
11Line 65:8 Transforming const to the configured target environment ("es5") is not supported yet
12Line 75:24 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
13... and 12 more hidden warnings
14
15**/
16if (!customElements.get('product-info')) {
17  customElements.define(
18    'product-info',
19    class ProductInfo extends HTMLElement {
20      constructor() {
21        super();
22        this.input = this.querySelector('.quantity__input');
23        this.currentVariant = this.querySelector('.product-variant-id');
24        this.variantSelects = this.querySelector('variant-radios');
25        this.submitButton = this.querySelector('[type="submit"]');
26      }
27
28      cartUpdateUnsubscriber = undefined;
29      variantChangeUnsubscriber = undefined;
30
31      connectedCallback() {
32        if (!this.input) return;
33        this.quantityForm = this.querySelector('.product-form__quantity');
34        if (!this.quantityForm) return;
35        this.setQuantityBoundries();
36        if (!this.dataset.originalSection) {
37          this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, this.fetchQuantityRules.bind(this));
38        }
39        this.variantChangeUnsubscriber = subscribe(PUB_SUB_EVENTS.variantChange, (event) => {
40          const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section;
41          if (event.data.sectionId !== sectionId) return;
42          this.updateQuantityRules(event.data.sectionId, event.data.html);
43          this.setQuantityBoundries();
44        });
45      }
46
47      disconnectedCallback() {
48        if (this.cartUpdateUnsubscriber) {
49          this.cartUpdateUnsubscriber();
50        }
51        if (this.variantChangeUnsubscriber) {
52          this.variantChangeUnsubscriber();
53        }
54      }
55
56      setQuantityBoundries() {
57        const data = {
58          cartQuantity: this.input.dataset.cartQuantity ? parseInt(this.input.dataset.cartQuantity) : 0,
59          min: this.input.dataset.min ? parseInt(this.input.dataset.min) : 1,
60          max: this.input.dataset.max ? parseInt(this.input.dataset.max) : null,
61          step: this.input.step ? parseInt(this.input.step) : 1,
62        };
63
64        let min = data.min;
65        const max = data.max === null ? data.max : data.max - data.cartQuantity;
66        if (max !== null) min = Math.min(min, max);
67        if (data.cartQuantity >= data.min) min = Math.min(min, data.step);
68
69        this.input.min = min;
70        this.input.max = max;
71        this.input.value = min;
72        publish(PUB_SUB_EVENTS.quantityUpdate, undefined);
73      }
74
75      fetchQuantityRules() {
76        if (!this.currentVariant || !this.currentVariant.value) return;
77        this.querySelector('.quantity__rules-cart .loading-overlay').classList.remove('hidden');
78        fetch(`${this.dataset.url}?variant=${this.currentVariant.value}&section_id=${this.dataset.section}`)
79          .then((response) => {
80            return response.text();
81          })
82          .then((responseText) => {
83            const html = new DOMParser().parseFromString(responseText, 'text/html');
84            this.updateQuantityRules(this.dataset.section, html);
85            this.setQuantityBoundries();
86          })
87          .catch((e) => {
88            console.error(e);
89          })
90          .finally(() => {
91            this.querySelector('.quantity__rules-cart .loading-overlay').classList.add('hidden');
92          });
93      }
94
95      updateQuantityRules(sectionId, html) {
96        const quantityFormUpdated = html.getElementById(`Quantity-Form-${sectionId}`);
97        const selectors = ['.quantity__input', '.quantity__rules', '.quantity__label'];
98        for (let selector of selectors) {
99          const current = this.quantityForm.querySelector(selector);
100          const updated = quantityFormUpdated.querySelector(selector);
101          if (!current || !updated) continue;
102          if (selector === '.quantity__input') {
103            const attributes = ['data-cart-quantity', 'data-min', 'data-max', 'step'];
104            for (let attribute of attributes) {
105              const valueUpdated = updated.getAttribute(attribute);
106              if (valueUpdated !== null) current.setAttribute(attribute, valueUpdated);
107            }
108          } else {
109            current.innerHTML = updated.innerHTML;
110          }
111        }
112      }
113    }
114  );
115}