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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.25.1-beta.0",
+  "version": "0.25.1-beta.2",
   "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>
@@ -72,10 +79,10 @@
     </div>
     <div class='swiper-pagination'></div>
     <div class='product-accessories-swiper-button-prev'>
-      {% render 'zz-prev-next-btn', type: 'prev', color_type: 'dark' %}
+      {% render 'zz-prev-next-blur-icon', type: 'prev' %}
     </div>
     <div class='product-accessories-swiper-button-next'>
-      {% render 'zz-prev-next-btn', type: 'next', color_type: 'dark' %}
+      {% render 'zz-prev-next-blur-icon', type: 'next' %}
     </div>
   </div>
 
@@ -104,6 +111,10 @@
   zz-accessories-preview-swiper {
     display: block;
   }
+  zz-accessories-preview-swiper .product-accessories-swiper-button-prev path,
+  zz-accessories-preview-swiper .product-accessories-swiper-button-next path {
+    fill: white;
+  }
   .product-accessories-swiper-container .swiper-pagination {
     --swiper-pagination-color: black;
     --swiper-pagination-bottom: 10px;

package/snippets/zz-product-swiper.liquid

@@ -31,7 +31,7 @@
   </div>
 
   <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 product-swiper-list-thumbs tw-opacity-0 tw-invisible'>
       <div class='swiper-wrapper tw-flex tw-justify-center'>
         {% for image in product_images %}
           <div class='swiper-slide !tw-w-auto tw-opacity-30'>
@@ -164,7 +164,7 @@
           const wrap = document.createElement('div');
           wrap.className = ' tw-absolute tw-bottom-[20px] tw-left-1/2 tw-transform tw-translate-x-[-50%] tw-z-10 tw-w-[80%] ';
           const thumbs = document.createElement('div');
-          thumbs.className = 'swiper product-swiper-list-thumbs tw-opacity-0';
+          thumbs.className = 'swiper product-swiper-list-thumbs tw-opacity-0 tw-invisible';
           thumbs.innerHTML = `<div class="swiper-wrapper tw-flex tw-justify-center"></div>`;
           wrap.appendChild(thumbs);
           this.appendChild(wrap);
@@ -179,9 +179,10 @@
         if (typeof Swiper === 'undefined') return;
         // Thumbs
         this._thumbs = new Swiper(this._thumbsEl, {
-          slidesPerView: 5,
+          slidesPerView: 3,
           spaceBetween: 8,
           watchSlidesProgress: true,
+
           slideToClickedSlide: true,
           breakpoints: {
             0:   { slidesPerView: 4, spaceBetween: 6 },
@@ -193,7 +194,7 @@
         const initialCount = this._listEl.querySelectorAll('.swiper-slide').length;
         this._swiper = new Swiper(this._listEl, {
           loop: true,
-          effect: 'slide',
+          effect: 'fade',
           loopedSlides: initialCount,
           slidesPerView: 1,
           spaceBetween: 10,
@@ -207,6 +208,8 @@
           },
           thumbs: { swiper: this._thumbs }
         });
+
+       this._thumbsEl.classList.remove('tw-invisible');
       }
 
       _destroySwipers() {