zz-shopify-components 0.12.1-beta.0 → 0.12.1-beta.2

package/assets/zz-buy-now-product-bar.js

@@ -0,0 +1,401 @@
+class BuyNowBottomBar extends HTMLElement {
+  loading = false;
+  bindProducts = [];
+  mainProductId = '';
+  currency = '';
+  showMore = false;
+  isEduProduct = false;
+  isLoggedIn = false;
+  isEduVerified = false;
+  eduPageUrl = '';
+  constructor() {
+    super();
+    this.cart =
+      document.querySelector('cart-notification') ||
+      document.querySelector('cart-drawer');
+    this.careGuide = this.dataset.careGuide;
+    this.hasCare = this.dataset.hasCare || false;
+    this.init();
+    this.currency = this.dataset.currency;
+    this.isocode = this.dataset.isocode;
+    this.isEduProduct = this.dataset.isEduProduct === 'true';
+    this.isLoggedIn = this.dataset.isLoggedIn === 'true';
+    this.isEduVerified = this.dataset.isEduVerified === 'true';
+    this.eduPageUrl = this.dataset.eduPageUrl;
+  }
+
+  init() {
+    this.querySelector('button').addEventListener('click', async () => {
+      this.handleToPay();
+    });
+
+    if (this.querySelector('.show-more-btn')) {
+      this.querySelector('.show-more-btn').addEventListener(
+        'click',
+        async () => {
+          this.toggleShowMoreDesc();
+        }
+      );
+    }
+    window.addEventListener('pageshow', () => {
+      this.updatePrice();
+    });
+  }
+  handleAddToCart() {
+    this.getMainProduct();
+    this.getBindProduct();
+    this.onSubmitHandler();
+  }
+  showCareChooseDialog() {
+    const careDialog = document.querySelector(
+      'product-detail-dialog-hovercare-choose'
+    );
+    if (careDialog) {
+      careDialog.showModal();
+    }
+  }
+
+  handleToPay() {
+    this.getMainProduct();
+    const cartUrl = `/cart/${this.mainProductId}:${this.mainProductQuantity}?checkout&currency=${this.isocode}`;
+
+    window.location.href = cartUrl;
+  }
+
+  async onSubmitHandler() {
+    const data = {
+      items: [
+        {
+          id: this.mainProductId,
+          quantity: 1,
+        },
+        ...this.bindProducts,
+      ],
+      sections: 'cart-drawer,cart-icon-bubble',
+    };
+
+    this.toggleLoading();
+    await fetch(`${routes.cart_add_url}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/javascript',
+      },
+      body: JSON.stringify(data),
+    })
+      .then((response) => response.json())
+      .then((response) => {
+        if (response.status) {
+          publish(PUB_SUB_EVENTS.cartError, {
+            source: 'product-form',
+            productVariantId: this.mainProductId,
+            errors: response.errors || response.description,
+            message: response.message,
+          });
+        } else if (!this.cart) {
+          window.location = window.routes.cart_url;
+          return;
+        }
+
+        if (!this.error)
+          publish(PUB_SUB_EVENTS.cartUpdate, {
+            source: 'product-form',
+            productVariantId: this.mainProductId,
+            cartData: response,
+          });
+        this.error = false;
+        const quickAddModal = this.closest('quick-add-modal');
+        if (quickAddModal) {
+          document.body.addEventListener(
+            'modalClosed',
+            () => {
+              setTimeout(() => {
+                this.cart.renderContents(response);
+              });
+            },
+            { once: true }
+          );
+          quickAddModal.hide(true);
+        } else {
+          this.cart.renderContents(response);
+        }
+      })
+      .catch((e) => {
+        console.error(e);
+      })
+      .finally(() => {
+        if (this.cart && this.cart.classList.contains('is-empty'))
+          this.cart.classList.remove('is-empty');
+        this.toggleLoading();
+      });
+  }
+
+  getMainProduct() {
+    this.mainProductId = document.querySelector(
+      'product-buy-now-selector'
+    ).currentVariantId;
+    this.mainProductQuantity = document.querySelector(
+      'product-buy-now-counter input'
+    ).value;
+  }
+  getBindProduct() {
+    this.bindProducts = [];
+    const tags = Array.from(document.querySelectorAll('accessory-product'));
+    tags.forEach((item) => {
+      if (item.isSelected) {
+        this.bindProducts.push({
+          id: item.currentId,
+          quantity: item.getNumber(),
+        });
+      }
+    });
+    const careTags = Array.from(document.querySelectorAll('care-product'));
+    if (careTags && careTags.length) {
+      careTags.forEach((item) => {
+        if (item.isShow && item.isSelected) {
+          this.bindProducts.push({
+            id: item.currentId,
+            quantity: 1,
+          });
+        }
+      });
+    }
+
+    const careDialog = document.querySelector(
+      'product-detail-dialog-hovercare-choose'
+    );
+    if (careDialog && careDialog.chooseId) {
+      this.bindProducts.push({
+        id: careDialog.chooseId,
+        quantity: 1,
+      });
+    }
+  }
+
+  toggleLoading() {
+    this.loading = !this.loading;
+    this.querySelector('.buy-loading').classList.toggle('tw-hidden');
+  }
+
+  toggleShowMoreDesc() {
+    const tipEl = this.querySelector('.bar-tip');
+    const svg = this.querySelector('.show-more-btn');
+
+    this.showMore = !this.showMore;
+
+    gsap.to(svg, {
+      rotation: this.showMore ? 180 : 0,
+      duration: 0.3,
+    });
+
+    tipEl.classList.toggle('show-more-desc', this.showMore);
+  }
+
+  // available: "true" or "false"
+  toggleAddToCartButton(available) {
+    const button = this.querySelector('button');
+    const btnText = this.querySelector('.buy-now-bottom-bar-btn-text');
+    if (!button) {
+      return;
+    }
+
+    if (button.disabled && available === 'true') {
+      button.disabled = false;
+      btnText.textContent = this.dataset.btnText;
+    } else if (!button.disabled && available === 'false') {
+      button.disabled = true;
+      btnText.textContent = this.dataset.btnOutOfStockText;
+    }
+  }
+
+  updatePrice() {
+    if (!window.Decimal) {
+      return;
+    }
+    console.log('this.isocode', this.isocode);
+    console.log('this.currency', this.currency);
+    const main = document
+      .querySelector('.product-version-option input:checked')
+      ?.closest('.product-version-option');
+    const mainProductQuantity = document.querySelector(
+      'product-buy-now-counter input'
+    ).value;
+    const {
+      price: mainPrice,
+      before: mainBefore,
+      available: mainAvailable,
+    } = main.dataset;
+
+    let total_price = new Decimal(this.handlePrice(mainPrice));
+    let total_before = new Decimal(this.handlePrice(mainBefore));
+    total_price = total_price.times(mainProductQuantity);
+    total_before = total_before.times(mainProductQuantity);
+
+    console.log('total_price', total_price);
+    console.log('total_before', total_before);
+    this.toggleAddToCartButton(mainAvailable);
+
+    // 找到被选中的附加产品
+    const selectedAccessories = Array.from(
+      document.querySelectorAll('accessory-product')
+    ).filter((item) => item.isSelected);
+
+    for (const item of selectedAccessories) {
+      const count = parseInt(item.getNumber(), 10);
+      const priceEl = item.querySelector('.current-price');
+      if (!priceEl) {
+        console.warn('找不到 .current-price 元素');
+        continue;
+      }
+
+      const { price, before } = priceEl.dataset;
+
+      const currentPrice = new Decimal(this.handlePrice(price));
+      const originPrice = new Decimal(this.handlePrice(before));
+
+      total_price = total_price.plus(currentPrice.times(count));
+
+      const actualBefore = currentPrice.greaterThan(originPrice)
+        ? currentPrice.times(count)
+        : originPrice.times(count);
+      total_before = total_before.plus(actualBefore);
+    }
+
+    // 找到care 商品
+    const bindCares = Array.from(document.querySelectorAll('care-product'));
+    bindCares.forEach((item) => {
+      const count = parseInt(item.getNumber(), 10) || 0; // 确保 count 是有效数字
+
+      if (item.isShow && item.isSelected) {
+        const priceEl = item.querySelector('.current-price');
+        if (priceEl) {
+          const { price, before } = priceEl.dataset;
+
+          const currentPrice = new Decimal(this.handlePrice(price));
+          const originPrice = new Decimal(this.handlePrice(before));
+
+          total_price = total_price.plus(currentPrice.times(count));
+
+          const actualBefore = currentPrice.lessThan(originPrice)
+            ? originPrice.times(count)
+            : currentPrice.times(count);
+          total_before = total_before.plus(actualBefore);
+        } else {
+          console.warn('找不到 .current-price 元素');
+        }
+      }
+    });
+
+    // 计算加个
+    const priceText = this.currency + total_price.toString();
+    const beforeText = this.currency + total_before.toString();
+    const showBefore = total_before.greaterThan(total_price);
+    requestAnimationFrame(() => {
+      const priceEl = this.querySelector('.price');
+      if (priceEl) {
+        priceEl.textContent = Shopify.formatMoneyFromDecimal(total_price);
+      }
+
+      const beforeEl = this.querySelector('.before');
+      if (beforeEl) {
+        beforeEl.textContent = Shopify.formatMoneyFromDecimal(total_before);
+      }
+
+      const mbPriceEl = this.querySelector('.mb_price');
+      if (mbPriceEl) {
+        mbPriceEl.textContent = Shopify.formatMoneyFromDecimal(total_price);
+      }
+
+      const mbBeforeEl = this.querySelector('.mb_before');
+      if (mbBeforeEl) {
+        mbBeforeEl.textContent = Shopify.formatMoneyFromDecimal(total_before);
+      }
+
+      // 计算折扣
+      const discountEl = this.querySelectorAll('.price-discouter');
+      if (discountEl.length > 0) {
+        const percent = total_price.times(100).dividedBy(total_before);
+        const discountPercent = 100 - percent;
+        const discountValue = total_before.minus(total_price);
+
+        discountEl.forEach((el) => {
+          if (total_before.greaterThan(total_price)) {
+            el.classList.remove('tw-hidden');
+            el.textContent =
+              this.dataset.discountType === 'percent'
+                ? '- ' + Math.round(discountPercent) + '%'
+                : 'Save ' + this.currency + discountValue;
+          } else {
+            el.classList.add('tw-hidden');
+          }
+        });
+      }
+    });
+
+    // const toggleClass = (el, show) => {
+    //   if (!el) return;
+    //   el.classList.toggle('tw-hidden', !show);
+    // };
+
+    // toggleClass(beforeEl, showBefore);
+    // toggleClass(mbBeforeEl, showBefore);
+
+    this.updatePayPal(total_price.toString());
+  }
+  handlePrice(price) {
+    console.log('handlePrice', price);
+    if (!price) return 0;
+    if (this.currency === '€') {
+      return this.handleEuroPrice(price);
+    }
+    return price.toString().replace(/,/g, '') || 0;
+  }
+  handleEuroPrice(price) {
+    let result = price.toString();
+    const priceFormat = this.dataset.priceFormat || '';
+    if (priceFormat.includes('amount_with_comma_separator')) {
+      result = result.replace('.', '');
+      result = result.replace(',', '.');
+    } else {
+      result = result.replace(/,/g, '');
+    }
+    return result || 0;
+  }
+
+  updatePayPal(price) {
+    if (!price) return;
+
+    clearTimeout(this._paypalTimer);
+
+    const paypalEls = document.querySelectorAll('.product-buy-paypal');
+
+    if (!this.paypalLoading) {
+      this.paypalLoading = true;
+      paypalEls.forEach((el) => {
+        el.classList.add('tw-daisy-loading');
+      });
+    }
+
+    paypalEls.forEach((el) => {
+      el.dataset.ppAmount = price;
+    });
+
+    this._paypalTimer = setTimeout(() => {
+      paypalEls.forEach((el) => {
+        el.classList.remove('tw-daisy-loading');
+      });
+      this.paypalLoading = false;
+    }, 800);
+  }
+  // 有预期到货时间不展示
+  toggleShowTitleDesc(available) {
+    const barTitleDesc = this.querySelector('.bar-title-desc');
+    if (!available) {
+      barTitleDesc.classList.add('tw-hidden');
+    } else {
+      barTitleDesc.classList.remove('tw-hidden');
+    }
+  }
+}
+
+customElements.define('buy-now-bottom-bar', BuyNowBottomBar);

package/assets/zz-components.css

@@ -6,7 +6,9 @@
   border-radius: 32px;
   background: #F5F5F6;
 }
-
+html, body {
+  overflow-x: hidden;
+}
 .zz-radio-tabs-black.zz-radio-tabs {
   background: #FFFFFF14;
 }
@@ -240,6 +242,10 @@ body.zz-dialog-open {
   background: #378DDD;
   color: #fff;
 }
+.zz-btn.zz-btn-primary.zz-btn-yellow {
+  background: linear-gradient(139.02deg, #FFEB00 0.01%, #FFD400 100.55%);
+  color: #000000;
+}
 .zz-btn.zz-btn-primary-round.zz-btn-black {
   background: #000000;
   color: #fff;
@@ -265,6 +271,11 @@ body.zz-dialog-open {
   color: #FC6C0F;
   border: 1.5px solid #FC6C0F;
 }
+.zz-btn.zz-btn-default.zz-btn-yellow {
+  background: transparent;
+  color: #000;
+  border: 1.5px solid #FFEB00;
+}
 .zz-btn.zz-btn-default.zz-btn-blue {
   background: transparent;
   color: #378DDD;

package/assets/zz-photo-swiper.js

@@ -0,0 +1,85 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+  if (!customElements.get('photo-swiper')) {
+    customElements.define(
+      'photo-swiper',
+      class PhotoSwiper extends HTMLElement {
+        swiper = null; // swiper实例
+
+        constructor() {
+          super();
+          // 初始化swiper
+          // if (!this.swiper) {
+          //   this.initSwiper();
+          // }
+        }
+
+        // connectedCallback() {
+        //   this.initSwiper();
+        // }
+
+        disconnectedCallback() {
+          if (this.swiper) {
+            this.swiper.destroy();
+            this.swiper = null;
+          }
+        }
+
+        initSwiper() {
+          const swiperContainer = this.querySelector('.swiper');
+          if (!swiperContainer) return;
+
+          const slides = swiperContainer.querySelectorAll('.swiper-slide');
+          const imageCount = slides.length;
+
+          this.swiper = new Swiper(swiperContainer, {
+            slidesPerView: 1,
+            spaceBetween: 0,
+            pagination: {
+              el: this.querySelector('.swiper-pagination'),
+              type: 'bullets',
+              clickable: true,
+              dynamicBullets: false,
+            },
+            navigation: {
+              nextEl: '.swiper-button-next',
+              prevEl: '.swiper-button-prev',
+            },
+            effect: 'slide',
+            fadeEffect: {
+              crossFade: true,
+            },
+            loop: imageCount > 1,
+            observer: true,
+            observeParents: true,
+            speed: 500,
+            on: {
+              init: function () {
+                const paginationEl = this.pagination.el;
+                const prevButton = swiperContainer.querySelector(
+                  '.swiper-button-prev'
+                );
+                const nextButton = swiperContainer.querySelector(
+                  '.swiper-button-next'
+                );
+
+                if (imageCount <= 1) {
+                  if (paginationEl) paginationEl.style.display = 'none';
+                  if (prevButton) prevButton.style.display = 'none';
+                  if (nextButton) nextButton.style.display = 'none';
+                }
+              },
+            },
+          });
+        }
+        // 销毁
+        destroySwiper() {
+          if (this.swiper) {
+            // 完全销毁swiper，包括所有事件监听器和DOM元素
+            this.swiper.destroy(true, true);
+            this.swiper = null;
+          }
+        }
+      }
+    );
+  }
+});