Merge branch 'feature/GTSHOPIFY-6' into main-dev

Gravytrain-UK · Sep 17, 2024 · ab921e5 · ab921e5
2 parents 755f6a4 + 99732e0
commit ab921e5
Show file tree

Hide file tree

Showing 3 changed files with 220 additions and 1 deletion.
diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -296,6 +296,11 @@
         document.documentElement.classList.add('shopify-design-mode');
       }
     </script>
+
+    <!-- Slick Slider JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
   </head>
 
   <body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">

diff --git a/sections/product-slider.liquid b/sections/product-slider.liquid
@@ -0,0 +1,210 @@
+{%- style -%}
+  .product-slider__ctr {
+    position: relative;
+    z-index: 12;
+    display: flex;
+    justify-content: end;
+  }
+
+  .product-slider__arrow {
+    background: #fff;
+    border: none;
+    display: inline-flex;
+    width: 50px;
+    height: 50px;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    border-radius: 50%;
+    top: 50%;
+    z-index: 12;
+    cursor: pointer;
+    outline: none !important;
+  }
+  .product-slider__arrow .icon-font {
+    display: inline-flex;
+  }
+  .product-slider__arrow.product-slider-prev {
+    transform: translateY(-50%);
+    margin-right: 15px;
+  }
+  .product-slider__arrow.product-slider-next {
+    transform: translateY(-50%);
+  }
+  .swiper {
+    width: 100%;
+    height: 100%;
+    padding-block: 2.5rem;
+  }
+
+  .swiper-slide {
+    font-size: 18px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .swiper-pagination {
+    position: relative;
+    top: 0;
+    bottom: 0;
+    margin-top: 50px;
+  }
+  .swiper-pagination .swiper-pagination-bullet {
+    width: 13px;
+    height: 10px;
+    display: inline-block;
+    opacity: 0.2;
+    margin: 0 5px;
+    border-radius: 20px;
+    transition: opacity 0.5s, background-color 0.5s, width 0.5s;
+    transition-delay: 0.5s, 0.5s, 0s;
+  }
+  .swiper-pagination .swiper-pagination-bullet-active {
+    opacity: 1;
+    width: 100px;
+    transition-delay: 0s;
+  }
+  @media screen and (max-width: 576px) {
+    .swiper-pagination .swiper-pagination-bullet-active {
+      width: 70px;
+    }
+  }
+{%- endstyle -%}
+
+<div class="full-width">
+
+  <div class="page-width">
+    <svg hidden="hidden">
+      <defs>
+        <symbol id="icon-arrow-left" viewBox="0 0 32 32">
+          <title>arrow-left</title>
+          <path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path>
+        </symbol>
+        <symbol id="icon-arrow-right" viewBox="0 0 32 32">
+          <title>arrow-right</title>
+          <path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path>
+        </symbol>
+      </defs>
+    </svg>
+
+    <div class="swiper mySwiper">
+      <div class="product-slider__ctr">
+        {% if section.blocks.size > 4 %}
+        <div class="product-slider__arrows">
+          <button class="product-slider__arrow product-slider-prev">
+            <span class="icon-font">
+              <svg class="icon icon-arrow-left">
+                <use xlink:href="#icon-arrow-left"></use>
+              </svg>
+            </span>
+          </button>
+          <button class="product-slider__arrow product-slider-next">
+            <span class="icon-font">
+              <svg class="icon icon-arrow-right">
+                <use xlink:href="#icon-arrow-right"></use>
+              </svg>
+            </span>
+          </button>
+        </div>
+        {% endif %}
+      </div>
+
+      <div class="swiper-wrapper">
+        {% for block in section.blocks %}
+        <a href="{{ block.settings.button_link }}" class="swiper-slide">
+          <div class="product__img">
+            <img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.alt_text }}">
+          </div>
+          <div class="product__title">{{ block.settings.heading }}</div>
+          <p>{{ block.settings.description }}</p>
+        </a>
+        {% endfor %}
+      </div>
+
+      <div class="swiper-pagination"></div>
+    </div>
+  </div>
+</div>
+
+
+
+{%- javascript -%}
+  const swiper = new Swiper(".mySwiper", {
+    slidesPerView: 4,
+    spaceBetween: 20,
+    autoplay: false,
+    loop: true,
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+    simulateTouch: true,
+    navigation: {
+      nextEl: '.product-slider-next',
+      prevEl: '.product-slider-prev',
+    },
+  });
+{%- endjavascript -%}
+
+{% schema %}
+{
+  "name": "Product Slider",
+  "settings": [
+
+  ],
+  "blocks": [
+    {
+      "type": "slide",
+      "name": "Slide",
+      "settings": [
+        {
+          "type": "image_picker",
+          "id": "image",
+          "label": "Slide Image"
+        },
+        {
+          "type": "text",
+          "id": "alt_text",
+          "label": "Image Alt Text",
+          "default": "Slide image"
+        },
+        {
+          "type": "text",
+          "id": "heading",
+          "label": "Slide Heading",
+          "default": "This is a heading"
+        },
+        {
+          "type": "textarea",
+          "id": "description",
+          "label": "Slide Description",
+          "default": "Add your slide description here."
+        },
+        {
+          "type": "text",
+          "id": "button_text",
+          "label": "Button Text",
+          "default": "Learn More"
+        },
+        {
+          "type": "link_list",
+          "id": "button_link",
+          "label": "Button Link"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "category": "Sliders"
+    }
+  ]
+}
+{% endschema %}
diff --git a/templates/index.json b/templates/index.json
@@ -197,6 +197,9 @@
         "padding_top": 36,
         "padding_bottom": 36
       }
+    },
+    "product_slider": {
+      "type": "product-slider"
     }
   },
   "order": [
@@ -205,6 +208,7 @@
     "featured_collection",
     "collage",
     "video",
-    "multicolumn"
+    "multicolumn",
+    "product_slider"
   ]
 }