zz-shopify-components 0.12.0 → 0.12.1-beta.1

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

@@ -0,0 +1,361 @@
+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.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();
+        }
+      );
+    }
+  }
+  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} `
+    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;
+    }
+    const main = document
+      .querySelector('.product-version-option input:checked')
+      ?.closest('.product-version-option');
+
+    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));
+
+    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');
+      const beforeEl = this.querySelector('.before');
+      const mbPriceEl = this.querySelector('.mb_price');
+      const mbBeforeEl = this.querySelector('.mb_before');
+
+      if (priceEl) priceEl.textContent = priceText;
+      if (beforeEl) beforeEl.textContent = showBefore ? beforeText : '';
+      if (mbPriceEl) mbPriceEl.textContent = priceText;
+      if (mbBeforeEl) mbBeforeEl.textContent = showBefore ? beforeText : '';
+
+      // 计算折扣
+      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) {
+    return price.toString().replace(/,/g, '') || 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

@@ -236,6 +236,14 @@ body.zz-dialog-open {
   background: #FC6C0F;
   color: #fff;
 }
+.zz-btn.zz-btn-primary.zz-btn-blue {
+  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;
@@ -261,7 +269,16 @@ 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;
+  border: 1.5px solid #378DDD;
+}
 .zz-btn.zz-btn-round.zz-btn-black {
   background: transparent;
   color: #000000;
@@ -281,6 +298,18 @@ body.zz-dialog-open {
   border-radius: 30px;
 }
 
+.zz-btn-link.zz-btn-blue {
+  color: #378DDD;
+}
+.zz-btn-link.zz-btn-orange {
+  color: #FC6C0F;
+}
+.zz-btn-link.zz-btn-white {
+  color: #fff;
+}
+.zz-btn-link.zz-btn-black {
+  color: #000000;
+}
 
 .zz-btn:hover {
   opacity: 0.8;
@@ -328,6 +357,9 @@ body.zz-dialog-open {
       }
 }
 
+.zz-btn-shape-round {
+  border-radius: 90px;
+}
 .zz-video {
   border-radius: inherit; 
 }
@@ -338,7 +370,7 @@ body.zz-dialog-open {
   display: grid;
   place-items: center;
   pointer-events: none; /* 不阻挡点击 */
-  z-index: 2147483647;  /* 最高层 */
+  z-index: 9999;  /* 最高层 */
 }
 .zz-toast-box{
   pointer-events: auto;
@@ -347,25 +379,29 @@ body.zz-dialog-open {
   padding: 12px 16px;
   border-radius: 12px;
   background: #fff;
-  color: #b42318;                     /* 错误红 */
-  border: 1px solid rgba(180,35,24,.25);
-  box-shadow: 0 10px 30px rgba(0,0,0,.15);
-  font: 14px/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,'PingFang SC','Hiragino Sans GB','Microsoft Yahei',sans-serif;
-  text-align: center;
+  color: #161110;
+  box-shadow: 0px 2px 16px 0px #00000026;
+  font-size: 14px;
+  text-align: left;
   word-break: break-word;
   transform: translateZ(0) scale(.96);
   opacity: 0;
   transition: transform .18s ease, opacity .18s ease;
+  line-height: 1.2;
+  display: inline-flex;
+
+}
+.zz-toast-icon {
+  margin-right: 4px;
+  padding: 0px 2px;
+}
+@media screen and (min-width: 1024px) {
+  .zz-toast-msg{
+    font-size: 16px;
+  }
+  
 }
 .zz-toast-box.show{
   opacity: 1;
   transform: translateZ(0) scale(1);
 }
-.zz-toast-title{
-  display:inline-block;
-  margin-bottom: 2px;
-  font-weight: 600;
-}
-.zz-toast-msg{
-  display:block;
-}

package/assets/zz-components.js

@@ -172,6 +172,47 @@ if (!customElements.get('zz-video-button')) {
   let toastEl = null;
   let hideTimer = null;
 
+  const toastIcon = {
+    error: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g clip-path="url(#clip0_19382_20972)">
+              <circle cx="9" cy="9" r="9" fill="#FF4D4F"/>
+              <path d="M6.24231 6.17188L11.8992 11.8287" stroke="white" stroke-linecap="round"/>
+              <path d="M6.24231 11.8281L11.8992 6.17127" stroke="white" stroke-linecap="round"/>
+              </g>
+              <defs>
+              <clipPath id="clip0_19382_20972">
+              <rect width="18" height="18" fill="white"/>
+              </clipPath>
+              </defs>
+          </svg>
+          `,
+    success: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_19382_20921)">
+                <circle cx="9" cy="9" r="9" fill="#5BC726"/>
+                <path d="M5 9L7.82843 11.8284L12.7782 6.87868" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+                </g>
+                <defs>
+                <clipPath id="clip0_19382_20921">
+                <rect width="18" height="18" fill="white"/>
+                </clipPath>
+                </defs>
+            </svg>
+            `,
+    warning: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g clip-path="url(#clip0_19382_20989)">
+              <circle cx="9" cy="9" r="9" fill="#FAAD14"/>
+              <path d="M8.99994 5L8.99994 10" stroke="white" stroke-linecap="round"/>
+              <circle cx="9.00001" cy="12.8" r="0.8" fill="white"/>
+              </g>
+              <defs>
+              <clipPath id="clip0_19382_20989">
+              <rect width="18" height="18" fill="white"/>
+              </clipPath>
+              </defs>
+            </svg>
+            `,
+  };
+
   function createToast() {
     const layer = document.createElement('div');
     layer.className = 'zz-toast-layer';
@@ -182,51 +223,46 @@ if (!customElements.get('zz-video-button')) {
     box.className = 'zz-toast-box';
     box.setAttribute('role', 'alert');
 
-    // const title = document.createElement('span');
-    // title.className = 'zz-toast-title';
-    // title.textContent = '错误';
-
     const msg = document.createElement('span');
     msg.className = 'zz-toast-msg';
 
-    // box.appendChild(title);
+    const icon = document.createElement('span');
+    icon.className = 'zz-toast-icon';
+
+    box.appendChild(icon);
     box.appendChild(msg);
     layer.appendChild(box);
     document.body.appendChild(layer);
 
-    return { layer, box, msg };
+    return { layer, box, msg, icon };
   }
 
   /**
    * 显示错误 Toast
    * @param {string} message - 要显示的错误文字
-   * @param {{duration?:number,title?:string}} [opts]
+   * @param {{duration?:number,type?:string}} [opts]
    */
   function zzShowToast(message, opts = {}) {
-
     if (!toastEl) {
       toastEl = createToast();
     }
 
-    // 可选标题（默认“错误”）
-    if(opts.title) {
-      toastEl.title.textContent = opts.title;
-    }
-
     // 更新文本
     toastEl.msg.textContent = message ?? '';
+    if (opts.type) {
+      toastEl.icon.innerHTML = toastIcon[opts.type];
+    } else {
+      toastEl.icon.innerHTML = '';
+    }
 
     // 重新插入到 body 末尾，保证在最上层
     document.body.appendChild(toastEl.layer);
-
     // 显示动画
     requestAnimationFrame(() => {
       toastEl.box.classList.add('show');
     });
-
     // 清理上一次的计时器
     clearTimeout(hideTimer);
-
     const duration = Math.max(500, Number(opts.duration || 2000));
     hideTimer = setTimeout(() => {
       toastEl.box.classList.remove('show');
@@ -241,4 +277,3 @@ if (!customElements.get('zz-video-button')) {
   // 暴露到全局
   window.zzShowToast = zzShowToast;
 })();
-

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;
+          }
+        }
+      }
+    );
+  }
+});