zz-shopify-components 0.13.0 → 0.15.0

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

@@ -17,6 +17,7 @@ class BuyNowBottomBar extends HTMLElement {
     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';
@@ -36,6 +37,9 @@ class BuyNowBottomBar extends HTMLElement {
         }
       );
     }
+    window.addEventListener('pageshow', () => {
+      this.updatePrice();
+    });
   }
   handleAddToCart() {
     this.getMainProduct();
@@ -53,12 +57,12 @@ class BuyNowBottomBar extends HTMLElement {
 
   handleToPay() {
     this.getMainProduct();
-    const cartUrl = `/cart/${this.mainProductId}:${this.mainProductQuantity} `
+    const cartUrl = `/cart/${this.mainProductId}:${this.mainProductQuantity}?checkout&currency=${this.isocode}`;
+
     window.location.href = cartUrl;
   }
 
   async onSubmitHandler() {
-
     const data = {
       items: [
         {
@@ -127,10 +131,12 @@ class BuyNowBottomBar extends HTMLElement {
   }
 
   getMainProduct() {
-    this.mainProductId =
-      document.querySelector('product-buy-now-selector').currentVariantId;
-    this.mainProductQuantity =
-      document.querySelector('product-buy-now-counter input').value;
+    this.mainProductId = document.querySelector(
+      'product-buy-now-selector'
+    ).currentVariantId;
+    this.mainProductQuantity = document.querySelector(
+      'product-buy-now-counter input'
+    ).value;
   }
   getBindProduct() {
     this.bindProducts = [];
@@ -206,10 +212,14 @@ class BuyNowBottomBar extends HTMLElement {
     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,
@@ -218,7 +228,11 @@ class BuyNowBottomBar extends HTMLElement {
 
     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);
 
     // 找到被选中的附加产品
@@ -278,14 +292,24 @@ class BuyNowBottomBar extends HTMLElement {
     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');
-      const mbBeforeEl = this.querySelector('.mb_before');
+      if (mbPriceEl) {
+        mbPriceEl.textContent = Shopify.formatMoneyFromDecimal(total_price);
+      }
 
-      if (priceEl) priceEl.textContent = priceText;
-      if (beforeEl) beforeEl.textContent = showBefore ? beforeText : '';
-      if (mbPriceEl) mbPriceEl.textContent = priceText;
-      if (mbBeforeEl) mbBeforeEl.textContent = showBefore ? beforeText : '';
+      const mbBeforeEl = this.querySelector('.mb_before');
+      if (mbBeforeEl) {
+        mbBeforeEl.textContent = Shopify.formatMoneyFromDecimal(total_before);
+      }
 
       // 计算折扣
       const discountEl = this.querySelectorAll('.price-discouter');
@@ -319,8 +343,24 @@ class BuyNowBottomBar extends HTMLElement {
     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;

package/assets/zz-components.css

@@ -6,7 +6,7 @@
   border-radius: 32px;
   background: #F5F5F6;
 }
-html, body {
+body {
   overflow-x: hidden;
 }
 .zz-radio-tabs-black.zz-radio-tabs {

package/blocks/zz-flex-layout-widget.liquid

@@ -183,6 +183,17 @@
       "label": "移动端圆角大小",
       "default": 0
     },
+    {
+      "type": "select",
+      "id": "pc_mobile_show",
+      "label": "PC/移动端分开显示",
+      "options": [
+        { "value": "pc_mobile_show", "label": "PC/移动端都显示" },
+        { "value": "pc_only", "label": "PC端显示" },
+        { "value": "mobile_only", "label": "移动端显示" }
+      ],
+      "default": "pc_mobile_show"
+    },
     {
       "type": "header",
       "content": "动画设置"
@@ -256,13 +267,18 @@
 {% endschema %}
 
 <style>
-  #shopify-block-{{ block.id }} {
-    {% if block.settings.mobile_width == 0 %}
-      width: 100%;
-      flex: 1;
-    {% else %}
-      width: {{ block.settings.mobile_width }}%;
-    {% endif %}
+  @media (max-width: 1024px) {
+    #shopify-block-{{ block.id }} {
+      {% if block.settings.mobile_width == 0 %}
+        width: 100%;
+        flex: 1;
+      {% else %}
+        width: {{ block.settings.mobile_width }}%;
+      {% endif %}
+      {% if block.settings.pc_mobile_show == "pc_only" %}
+        display: none;
+      {% endif %}
+    }
   }
   #shopify-block-{{ block.id }} .flex-layout-widget-container {
     width: 100%;
@@ -288,6 +304,9 @@
       {% else %}
         width: {{ block.settings.pc_width }}%;
       {% endif %}
+      {% if block.settings.pc_mobile_show == "mobile_only" %}
+        display: none;
+      {% endif %}
     }
     #shopify-block-{{ block.id }} .flex-layout-widget-container {
       width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/sections/zz-product-buy-now.liquid

@@ -276,10 +276,19 @@
   #shopify-section-{{ section.id }} .product-version-option:has(input[type='radio']:checked) {
     border-color: #FFD400;
   }
-  body {
-    background: #fff;
-    padding-bottom: 160px !important;
+  @media (max-width: 750px) {
+    body {
+      background: #fff;
+      padding-bottom: 118px !important;
+    }
+  }
+  @media (min-width: 750px) {
+    body {
+      background: #fff;
+      padding-bottom: 72px !important;
+    }
   }
+  
 </style>
 <script defer src='{{ 'zz-product-buy-now-select.js' | asset_url }}'></script>
 

package/snippets/zz-buy-now-bottom-bar.liquid

@@ -22,7 +22,9 @@
   data-care-guide='{{ care_guide_type }}'
   data-is-edu-product='{{ is_edu_product }}'
   data-is-logged-in='{{ is_logged_in }}'
+  data-price-format='{{ shop.money_format  }}'
   data-is-edu-verified='{{ is_edu_verified }}'
+  data-isocode='{{ localization.country.currency.iso_code }}'
   data-edu-page-url='{{ shop.metafields.custom.edu_home_page.value.url }}'
   class=' tw-left-0 tw-right-0 tw-max-w-screen tw-bg-white tw-bottom-0 tw-z-50 !tw-fixed  buy-now-bottom-bar'
 >