Add collection data source, add docs

michsko544 · May 19, 2024 · 902fa7d · 902fa7d
1 parent 1ccd882
commit 902fa7d
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,10 @@
 
 Project of product carousel using Swiper library.
 
+Demo URL: https://weblovo-store.myshopify.com/products/the-collection-snowboard-hydrogen?preview_theme_id=142584676572
+
+![Slider image](https://i.ibb.co/MDzHP3Y/Zrzut-ekranu-2024-05-19-o-19-37-50.jpg)
+
 ## Requirements
 
 - Node - `^20`
@@ -24,3 +28,19 @@ Project of product carousel using Swiper library.
 3. `pnpm theme:dev` (Before it you can update `--store` parameter)
 4. `pnpm start` (Second terminal session)
 5. `pnpm lint` or `pnpm lint:fix`
+
+## Docs
+
+You can change the source of slider data in two ways:
+- use specific `Collection`
+- use `Product tag`.
+
+When you select the `Product tag` in customizer then slider will take all collections of current product and will search for all products with specified tag.
+
+The rating of the product is editable in the metafields of the product (`custom.rating`).
+
+Available customizer settings
+
+![Slider settings](https://i.ibb.co/LrX0Lmm/Zrzut-ekranu-2024-05-19-o-19-42-15.jpg)
+
+
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "build": "vite build",
     "lint": "eslint . --ext .ts",
     "lint:fix": "eslint . --fix --ext .ts",
-    "theme:dev": "shopify theme dev --store weblovo-store"
+    "theme:dev": "shopify theme dev --store weblovo-store",
+    "theme:push": "shopify theme push --store weblovo-store"
   },
   "devDependencies": {
     "@types/node": "^20.12.12",

diff --git a/scripts/products-slider-top.ts b/scripts/products-slider-top.ts
@@ -18,7 +18,7 @@ new Swiper('.x-products-slider-top__swiper', {
   freeMode: true,
 
   breakpoints: {
-    600: {
+    500: {
       slidesPerView: 2.3,
       spaceBetween: 16,
     },

diff --git a/sections/products-slider-top.liquid b/sections/products-slider-top.liquid
@@ -2,6 +2,10 @@
 {{ 'x-products-slider-top.css' | asset_url | stylesheet_tag }}
 
 {% assign filter_tag = 'Bestseller' %}
+{% if section.settings.tag != blank %}
+  {% assign filter_tag = section.settings.tag %}
+{% endif %}
+
 {% assign product_limit = section.settings.slider_limit %}
 {% assign filtered_product_ids = "" %}
 
@@ -18,9 +22,27 @@
     {% endfor %}
   {% endfor %}
 {% endfor %}
-
 {% assign filtered_product_ids = filtered_product_ids | split: "," | uniq %}
 
+{% assign display_source = section.settings.display_source %}
+
+{% capture swiper_navigation %}
+  <div class="swiper-button-prev">
+    <div class="swiper-navigation-button">
+      <div class="swiper-navigation-icon-wrapper">
+        {% render 'icon-chevron-left' %}
+      </div>
+    </div>
+  </div>
+  <div class="swiper-button-next">
+    <div class="swiper-navigation-button">
+      <div class="swiper-navigation-icon-wrapper">
+        {% render 'icon-chevron-right' %}
+      </div>
+    </div>
+  </div>
+{% endcapture %}
+
 {% assign pre = 'x-products-slider-top' %}
 
 <div class="{{pre}}">
@@ -33,43 +55,48 @@
         </button>
       </a>
     </div>
-    {% if filtered_product_ids.size > 0 %}
-      <div class="swiper x-products-slider-top__swiper">
-        <div class="swiper-wrapper">
-          {% for id in filtered_product_ids limit: product_limit %}
-            {% for collection in product.collections %}
-              {% for product in collection.products %}
-                {% if id contains product.id %}
-                  {% assign found_product = product %}
-                {% endif %}
-              {% endfor %}
-            {% endfor %}
-            {% if found_product %}
+
+    {% if display_source == 'collection' %}
+      {% if section.settings.collection and collections[section.settings.collection].products.size > 0 %}
+        <div class="swiper x-products-slider-top__swiper">
+          <div class="swiper-wrapper">
+            {% for product in collections[section.settings.collection].products limit: product_limit %}
               <div class="swiper-slide">
-                {% render 'product-card', product: found_product %}
+                {% render 'product-card', product: product %}
               </div>
-            {% endif %}
-          {% endfor %}
-        </div>
-
-      <div class="swiper-button-prev">
-        <div class="swiper-navigation-button">
-          <div class="swiper-navigation-icon-wrapper">
-            {% render 'icon-chevron-left' %}
+            {% endfor %}
           </div>
+          {{ swiper_navigation }}
         </div>
-      </div>
-      <div class="swiper-button-next">
-        <div class="swiper-navigation-button">
-          <div class="swiper-navigation-icon-wrapper">
-            {% render 'icon-chevron-right' %}
+      {% else %}
+        <p class="{{pre}}__not-found">{{section.settings.not_found_message}}</p>
+      {% endif %}
+    {% else %}
+      {% if filtered_product_ids.size > 0 %}
+        <div class="swiper x-products-slider-top__swiper">
+          <div class="swiper-wrapper">
+            {% for id in filtered_product_ids limit: product_limit %}
+              {% for collection in product.collections %}
+                {% for product in collection.products %}
+                  {% if id contains product.id %}
+                    {% assign found_product = product %}
+                  {% endif %}
+                {% endfor %}
+              {% endfor %}
+              {% if found_product %}
+                <div class="swiper-slide">
+                  {% render 'product-card', product: found_product %}
+                </div>
+              {% endif %}
+            {% endfor %}
           </div>
+          {{ swiper_navigation }}
         </div>
-      </div>
-    </div>
-    {% else %}
-      <p class="{{pre}}__not-found">{{section.settings.not_found_message}}</p>
+      {% else %}
+        <p class="{{pre}}__not-found">{{section.settings.not_found_message}}</p>
+      {% endif %}
     {% endif %}
+
     <a href="{{section.settings.button_link}}" class="{{pre}}__button-link {{pre}}__button-link--mobile">
       <button class="x-button">
         {{section.settings.button_text}}
@@ -91,18 +118,48 @@
     {
       "type": "text",
       "id": "slider_title",
-      "label": "Slider Title",
+      "label": "Slider title",
       "default": "Bestseller Products"
     },
     {
       "type": "range",
       "id": "slider_limit",
-      "label": "Slider Limit",
+      "label": "Slider limit",
       "default": 10,
       "min": 1,
       "max": 30,
       "step": 1
     },
+    {
+      "type": "select",
+      "id": "display_source",
+      "label": "Display source",
+      "options": [
+        {
+          "value": "tag",
+          "label": "Product tag"
+        },
+        {
+          "value": "collection",
+          "label": "Custom collection"
+        }
+      ],
+      "default": "tag",
+      "info": "Choose how to display products in the slider"
+    },
+    {
+      "type": "text",
+      "id": "tag",
+      "label": "Source product tag",
+      "info": "Applies if 'Product tag' is selected as the display source",
+      "default": "Bestseller"
+    },
+    {
+      "type": "collection",
+      "id": "collection",
+      "label": "Source collection",
+      "info": "Applies if 'Custom Collection' is selected as the display source"
+    },
     {
       "type": "text",
       "id": "not_found_message",