zz-shopify-components 0.24.1-beta.1 → 0.24.1-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.24.1-beta.1",
+  "version": "0.24.1-beta.3",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",

package/snippets/zz-accessories-preview-swiper.liquid

@@ -191,32 +191,51 @@
   });
 
   window.accessoriesPointClickHandler = async function(variantId) {
-    try {
-      const res = await fetch(window.routes.cart_add_url, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Accept': 'application/json'
+    const data = {
+      items: [
+        {
+          id: variantId,
+          quantity: 1,
         },
-        body: JSON.stringify({
-          items: [{ id: variantId, quantity: 1 }]
-        })
+      ],
+      sections: 'cart-drawer,cart-icon-bubble',
+    };
+    const cart = document.querySelector('cart-drawer');
+
+    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: variantId,
+            errors: response.errors || response.description,
+            message: response.message,
+          });
+        } 
+
+          publish(PUB_SUB_EVENTS.cartUpdate, {
+            source: 'product-form',
+            productVariantId: variantId,
+            cartData: response,
+          });
+        cart.renderContents(response, false);
+        zzShowToast('1 item added to Cart', { type: 'success' });
+
+      })
+      .catch((e) => {
+        console.error(e);
+      })
+      .finally(() => {
+        if (cart && cart.classList.contains('is-empty'))
+          cart.classList.remove('is-empty');
       });
-      const data = await res.json();
-      if (data && data.status) {
-        console.error('Add to cart error:', data);
-        alert(data.message || 'Failed to add to cart');
-        return;
-      }
-      const cartDrawer = document.querySelector('cart-drawer');
-      if (cartDrawer && typeof cartDrawer.renderContents === 'function') {
-        cartDrawer.renderContents(data);
-        if (typeof cartDrawer.open === 'function') cartDrawer.open();
-      } else {
-        window.location.href = window.routes.cart_url;
-      }
-    } catch (e) {
-      console.error(e);
-    }
   };
 </script>

package/snippets/zz-product-preview.liquid

@@ -2,7 +2,7 @@
   <div class='product-container tw-flex tw-items-center tw-justify-center'>
     {% comment %} 左侧产品预览 {% endcomment %}
     <div
-      class='product-preview lg:tw-w-[760px] tw-w-full tw-aspect-square'
+      class='product-preview  tw-w-full tw-aspect-square md:tw-aspect-[16/9]'
       data-test-locator='productPreview'
     >
       <div

package/snippets/zz-product-swiper.liquid

@@ -1,8 +1,13 @@
 <zz-product-swiper class=' tw-w-full product-swiper-container tw-h-full tw-relative'>
   <div class='swiper product-swiper-list tw-w-full tw-h-full tw-relative'>
     <div class='swiper-wrapper'>
-      {% for image in product.selected_or_first_available_variant.metafields.custom.images.value %}
+      {% assign product_images = product.selected_or_first_available_variant.metafields.custom.images.value | default: product.images %}
+      {% for image in product_images %}
         <div class='swiper-slide tw-flex tw-justify-center'>
+          {% assign fetchpriority = 'auto' %}
+          {% if forloop.first %}
+            {% assign fetchpriority = 'high' %}
+          {% endif %}
           {{
             image
             | image_url: width: 3000
@@ -10,7 +15,8 @@
               loading: 'lazy',
               class: 'tw-w-auto tw-h-full tw-max-w-full tw-object-cover tw-m-auto',
               sizes: '(min-width: 750px) 700px, calc(100vw - 30px)',
-              widths: '3000, 4000, 5000'
+              widths: '3000, 4000, 5000',
+              fetchpriority: fetchpriority
           }}
         </div>
       {% endfor %}
@@ -27,7 +33,7 @@
   <div class=' tw-absolute tw-bottom-[20px] tw-left-1/2 tw-transform tw-translate-x-[-50%] tw-z-10 tw-w-[80%] '>
     <div class='swiper product-swiper-list-thumbs tw-opacity-0'>
       <div class='swiper-wrapper tw-flex tw-justify-center'>
-        {% for image in product.selected_or_first_available_variant.metafields.custom.images.value %}
+        {% for image in product_images %}
           <div class='swiper-slide !tw-w-auto tw-opacity-30'>
             {{
               image