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

package/package.json

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

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

@@ -14,9 +14,16 @@
               widths: '3000, 4000, 5000'
           }}
           {% for block in accessories_points %}
+            {% assign accessories_point_variant = block.settings.accessories_product.selected_or_first_available_variant %}
+            {% for v in block.settings.accessories_product.variants %}
+              {% if v.metafields.custom.acc_point.value %}
+                {% assign accessories_point_variant = v %}
+                {% break %}
+              {% endif %}
+            {% endfor %}
             {% if block.settings.swiper_index == accessories_points_index %}
               <div
-                onclick='window.accessoriesPointClickHandler(event, {{ block.settings.accessories_product.selected_or_first_available_variant.id }})'
+                onclick='window.accessoriesPointClickHandler(event, {{ accessories_point_variant.id }})'
                 data-point-swiper-index='{{ block.settings.swiper_index }}'
                 class='product-accessories-point-item tw-absolute tw-rounded-full tw-backdrop-blur-[20px] tw-gap-[12px] tw-flex tw-items-center tw-justify-center tw-bg-[rgba(255,255,255,0.8)] lg:tw-py-[6px] tw-py-[4px] lg:tw-pl-[8px] tw-pl-[4px] tw-pr-[20px] tw-z-50 tw-cursor-pointer'
                 style='left: {{ block.settings.point_x }}%; top: {{ block.settings.point_y }}%;'
@@ -27,7 +34,7 @@
                   viewBox='0 0 36 36'
                   fill='none'
                   xmlns='http://www.w3.org/2000/svg'
-                  class="tw-block buy-icon tw-w-[36px] tw-h-[36px]"
+                  class='tw-block buy-icon tw-w-[36px] tw-h-[36px]'
                 >
                   <rect width="36" height="36" rx="18" fill="#FC6C0F"/>
                   <path d="M8 10H9.51521C10.2098 10 10.8135 10.4769 10.9744 11.1526L11.4143 13M11.4143 13L13.3341 21.0632C13.5486 21.9642 14.3536 22.6 15.2797 22.6H23.786C24.7278 22.6 25.542 21.943 25.7409 21.0225L26.9511 15.4225C27.2204 14.1765 26.2709 13 24.9962 13H11.4143Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -43,7 +50,7 @@
                   viewBox='0 0 30 30'
                   fill='none'
                   xmlns='http://www.w3.org/2000/svg'
-                  class="tw-hidden buy-done-icon tw-w-[36px] tw-h-[36px]"
+                  class='tw-hidden buy-done-icon tw-w-[36px] tw-h-[36px]'
                 >
                   <rect width="30" height="30" rx="15" fill="#FC6C0F"/>
                   <rect x="1" y="1" width="28" height="28" rx="14" stroke="white" stroke-opacity="0.3" stroke-width="2"/>
@@ -54,12 +61,12 @@
                   <div class='lg:tw-text-[16px] tw-text-[12px] tw-leading-[1.2] tw-font-bold'>
                     {{
                       block.settings.accessories_title
-                      | default: block.settings.accessories_product.selected_or_first_available_variant.title
+                      | default: accessories_point_variant.title
                     }}
                   </div>
                   <div class='lg:tw-text-[14px] tw-text-[12px] tw-leading-[1.5] tw-font-medium'>
                     {{
-                      block.settings.accessories_product.selected_or_first_available_variant.price
+                      accessories_point_variant.price
                       | money_without_trailing_zeros
                     }}
                   </div>

package/snippets/zz-gallery-tab.liquid

@@ -227,6 +227,9 @@
           : '';
         if (!nextValue || nextValue === this.value) return;
         this.value = nextValue;
+        if (nextValue === 'video') {
+          document.querySelector('product-video-tab').loadVideo();
+        }
       }
       _syncActive(value) {
         const normalized = String(value || '');

package/snippets/zz-product-video.liquid

@@ -26,7 +26,7 @@
     <video
       id='product-video-intro-{{ product.id }}'
       data-type='intro'
-      src='{{ intro_video.sources[0].url }}'
+      data-src='{{ intro_video.sources[0].url }}'
       poster='{{ intro_video.preview_image | image_url: width: 1000 }}'
       controls
       playsinline
@@ -44,6 +44,7 @@
       role='tabpanel'
       aria-labelledby='product-video-tab-livestream-{{ product.id }}'
     >
+      <span class='tw-daisy-loading !tw-display-block tw-bg-white  tw-absolute tw-top-1/2 tw-left-1/2 tw-translate-x-1/2 tw-translate-y-1/2'></span>
       <fw-storyblock
         channel='firework'
         playlist='{{ livestream_id  }}'
@@ -59,7 +60,7 @@
       role='tabpanel'
       aria-labelledby='product-video-tab-livestream-{{ product.id }}'
       data-type='livestream'
-      src='{{ livestream_video.sources[0].url }}'
+      data-src='{{ livestream_video.sources[0].url }}'
       poster='{{ livestream_video.preview_image | image_url: width: 1000 }}'
       controls
       playsinline
@@ -197,6 +198,17 @@
         return el && (el.tagName === 'VIDEO' || el.tagName === 'AUDIO');
       }
 
+      loadVideo() {
+        this.panels.forEach((panel) => {
+          if (this.isMedia(panel)) {
+            if (panel.dataset.src) {
+              panel.src = panel.dataset.src;
+              panel.removeAttribute('data-src');
+            }
+          }
+        });
+      }
+
       changeTab(isInitial = false) {
         this.panels.forEach((panel) => {
           const isActive = panel.dataset.type === this.currentTab;