{% comment %}

---------------------------------------------------------
Copyright © 2023 Section Store. All rights reserved.
Unauthorized copying, modification, distribution, or use
of this code or any portion of it, is strictly prohibited.
Violators will be prosecuted to the fullest extent of the law.
For inquiries or permissions, contact [email protected]
---------------------------------------------------------
{% endcomment %}

<style>
.section-{{ section.id }}-padding {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
padding-top: var(--pt);
padding-bottom: var(--pb);
}

@media screen and (min-width: 750px) {

.section-{{ section.id }}-padding {
padding: 0 5rem;
padding-top: var(--pt-desktop);
padding-bottom: var(--pb-desktop);
}
}
</style>

<style>
/*
.tech-product-slider .swiper {
padding-bottom: var(--pb);
}
@media screen and (min-width: 750px) {
.tech-product-slider .swiper {
padding-bottom: var(--pb-desktop);
}
}
*/
.font-size-scale-075-on-mobile,
.font-size-scale-075-on-mobile p {
font-size: calc(var(--font-size) * 0.75);
color: var(--font-color);
margin: 0;
}
@media screen and (min-width: 750px) {
.font-size-scale-075-on-mobile,
.font-size-scale-075-on-mobile p {
font-size: var(--font-size);
}
}
.tech-product-slider-inner {
position: relative;
--swiper-navigation-sides-offset: 12px;
}
@media screen and (min-width: 750px) {
.tech-product-slider-inner {
--swiper-navigation-sides-offset: -24px;
}
}
.tech-product-slider .swiper-button-prev svg,
.tech-product-slider .swiper-button-prev img,
.tech-product-slider .swiper-button-next svg,
.tech-product-slider .swiper-button-next img {
height: auto;
display: block;
width: 100%;
}
.tech-product-slider .swiper-button-prev,
.tech-product-slider .swiper-button-next {
height: auto;
margin-top: unset;
transform: translateY(-50%);
}
.tech-product-slider .swiper-button-prev:after,
.tech-product-slider .swiper-button-next:after {
content: '';
}
.tech-product-slider .swiper-button-next.swiper-button-disabled,
.tech-product-slider .swiper-button-prev.swiper-button-disabled {
opacity: 0;
}

.tech-product-slider .swiper-slide {
height: auto;
text-align: center;
transition: 0.2s ease;
}

{% if section.settings.hover_effect %}
.tech-product-slider-{{ section.id }} .swiper-slide:hover {
transform: scale(1.05);
transition: 0.2s ease;
}
{% endif %}

@media screen and (min-width: 750px) {

.tech-product-slider .swiper-slide-not-in-view {
opacity: 0;
}
}

.tech-product-slider-{{ section.id }} .tech-product-slider-product-url {

all: unset;
cursor: pointer;
padding: 25px 10px 25px;
display: flex;
flex-direction: column;
gap: 25px;
justify-content: space-between;
height: 100%;
box-sizing: border-box;
background: #ffffff;
border-radius: {{section.settings.card_radius}}px;
overflow: hidden;
{% if section.settings.shadow %}
box-shadow: 4px 4px 20px rgba(191, 191, 191, 0.5);
{% endif %}
 }
.tech-product-slider-product-image {
width: 100%;
object-fit: contain;
margin: 0 auto;
}
</style>

{% if section.settings.hide_arrows_on_mobile == true %}
<style>
.tech-product-slider-{{ section.id }} .swiper-button-prev,
.tech-product-slider-{{ section.id }} .swiper-button-next {
display: none;
}
@media screen and (min-width: 750px) {
.tech-product-slider-{{ section.id }} .swiper-button-prev,
.tech-product-slider-{{ section.id }} .swiper-button-next {
display: block;
}
}
</style>
{% endif %}

<div
style="
background-color:{{ section.settings.background-color }};
--max-width: {{ section.settings.section-width }}rem;
--pt: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
--pt-desktop: {{ section.settings.padding_top }}px;
--pb: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
--pb-desktop: {{ section.settings.padding_bottom }}px;
"
>
<div class="">
<div
class="tech-product-slider tech-product-slider-{{ section.id }}"
>
{% if section.settings.title != blank %}
<div
class="page-width section-{{ section.id }}-padding"
style="margin-bottom: 0px; padding-bottom: 0;"
>
{% if section.settings.title_link != blank %}
<a
href="{{ section.settings.title_link }}"
class="font-size-scale-075-on-mobile"
style="
color: {{ section.settings.title_color }};
--font-size: {{ section.settings.title_font_size }}px;
font-weight: 700;
text-decoration: none;
text-align: {{ section.settings.title_alignment }};
width: 100%;
display: block;
"
>
{{ section.settings.title }}
</a>
{% else %}
 <div
class="font-size-scale-075-on-mobile"
style="
color: {{ section.settings.title_color }};
--font-size: {{ section.settings.title_font_size }}px;
font-weight: 700;
text-decoration: none;
text-align: {{ section.settings.title_alignment }};
width: 100%;
display: block;
"
>
{{ section.settings.title }}
</div>
{% endif %}
</div>
{% endif %}
<div class="tech-product-slider-inner">
<div
class="page-width section-{{ section.id }}-padding"
style="padding-top: 12px;overflow:hidden;"
>
<div
class="swiper swiper-{{ section.id }}"
style="overflow: visible;"
>
<div class="swiper-wrapper">
{% for block in section.blocks %}
{% assign product = block.settings.product %}
<div class="swiper-slide">
{% assign image = product.featured_image %}
{% if block.settings.image != blank %}
{% assign image = block.settings.image %}
{% endif %}
<a
href="{{ product.url }}"
class="tech-product-slider-product-url"
>
{% comment %} overwrite title if possible: {% endcomment %}
{% if block.settings.title != blank %}
{% assign product_title = block.settings.title %}
{% else %}
{% assign product_title = product.title %}
{% endif %}
<div
class="font-size-scale-075-on-mobile"
style="
color: {{ section.settings.product_title_color }};
--font-size:
{{ section.settings.product_title_font_size }}px;
font-weight: 700;
"
>
{{- product_title -}}
</div>
{% if image != blank %}
<img
class="tech-product-slider-product-image"
src="{{ image | img_url: '500x' }}"
 srcset="
{{ image | img_url: '300x' }} 500w,
{{ image | img_url: '500x' }} 800w,
{{ image | img_url: '800x' }} 1200w,
{{ image | img_url: 'master' }} 2400w
"
alt="{{ image.alt }}"
style="width: {{ block.settings.image_width }}%"
>
{% endif %}
<div
class="font-size-scale-075-on-mobile"
style="
--font-color: {{ section.settings.product_price_color }};
--font-size:
{{ section.settings.product_price_font_size }}px;
"
>
{% if block.settings.price == blank %}
From <strong>{{ product.price_min | money }}</strong>
{% else %}
{{ block.settings.price }}
{% endif %}
</div>
</a>
</div>
{% endfor %}
</div>
<div
class="swiper-button-prev-{{ section.id }} swiper-button-prev"
style="width: {{ section.settings.icon_size }}px"
>
{% if section.settings.icon_left != blank %}
<img
src="{{ section.settings.icon_left | img_url: '50x' }}"
alt="{{ section.settings.icon_left.alt }}"
style="width: {{ section.settings.icon_size }}px"
>
{% else %}
<svg
xmlns="http://www.w3.org/2000/svg"
width="42"
height="42"
viewBox="0 0 42 42"
fill="none"
style="transform: rotate(180deg);"
>
<circle cx="21.1716" cy="21.2717" r="20.1033" fill="white"
stroke="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2157
16.4383C18.1572 16.4887 18.1108 16.5486 18.0792 16.6145C18.0475 16.6804 18.0312
16.7511 18.0312 16.8224C18.0312 16.8938 18.0475 16.9644 18.0792 17.0303C18.1108
17.0962 18.1572 17.1561 18.2157 17.2065L22.7942 21.1623L18.2157 25.1182C18.0978
25.22 18.0316 25.3582 18.0316 25.5022C18.0316 25.6463 18.0978 25.7845 18.2157
25.8863C18.3335 25.9882 18.4934 26.0454 18.6601 26.0454C18.8268 26.0454 18.9866
25.9882 19.1045 25.8863L24.1262 21.5464C24.1846 21.496 24.231 21.4362 24.2626
21.3702C24.2943 21.3043 24.3106 21.2337 24.3106 21.1623C24.3106 21.091 24.2943
21.0203 24.2626 20.9544C24.231 20.8885 24.1846 20.8286 24.1262 20.7782L19.1045
16.4383C19.0462 16.3878 18.9769 16.3477 18.9007 16.3204C18.8244 16.293 18.7426
16.279 18.6601 16.279C18.5775 16.279 18.4958 16.293 18.4195 16.3204C18.3432 16.3477
18.274 16.3878 18.2157 16.4383Z" fill="#121212" fill-opacity="0.75"/>
</svg>
{% endif %}
</div>
<div
class="swiper-button-next-{{ section.id }} swiper-button-next"
style="width: {{ section.settings.icon_size }}px"
>
{% if section.settings.icon_right != blank %}
<img
src="{{ section.settings.icon_right | img_url: '50x' }}"
alt="{{ section.settings.icon_right.alt }}"
style="width: {{ section.settings.icon_size }}px"
>
{% else %}
<svg
xmlns="http://www.w3.org/2000/svg"
width="42"
height="42"
viewBox="0 0 42 42"
fill="none"
>
<circle cx="21.1716" cy="21.2717" r="20.1033" fill="white"
stroke="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2157
16.4383C18.1572 16.4887 18.1108 16.5486 18.0792 16.6145C18.0475 16.6804 18.0312
16.7511 18.0312 16.8224C18.0312 16.8938 18.0475 16.9644 18.0792 17.0303C18.1108
17.0962 18.1572 17.1561 18.2157 17.2065L22.7942 21.1623L18.2157 25.1182C18.0978
25.22 18.0316 25.3582 18.0316 25.5022C18.0316 25.6463 18.0978 25.7845 18.2157
25.8863C18.3335 25.9882 18.4934 26.0454 18.6601 26.0454C18.8268 26.0454 18.9866
25.9882 19.1045 25.8863L24.1262 21.5464C24.1846 21.496 24.231 21.4362 24.2626
21.3702C24.2943 21.3043 24.3106 21.2337 24.3106 21.1623C24.3106 21.091 24.2943
21.0203 24.2626 20.9544C24.231 20.8885 24.1846 20.8286 24.1262 20.7782L19.1045
16.4383C19.0462 16.3878 18.9769 16.3477 18.9007 16.3204C18.8244 16.293 18.7426
16.279 18.6601 16.279C18.5775 16.279 18.4958 16.293 18.4195 16.3204C18.3432 16.3477
18.274 16.3878 18.2157 16.4383Z" fill="#121212" fill-opacity="0.75"/>
</svg>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script>
// load the swiper css and js only once:
(function () {
const cssId = 'swiper-css';
let existingLink = document.getElementById(cssId);
if (!existingLink) {
let link = document.createElement('link');
link.href = 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css';
link.rel = 'stylesheet';
link.id = cssId;
let head = document.getElementsByTagName('head')[0];
head.appendChild(link);
}
const jsId = 'swiper-js';
let existingScript = document.getElementById(jsId);
if (!existingScript) {
let script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js';
script.id = jsId;
script.defer = true;
// fire a custom event when the script is loaded:
script.onload = function () {
let event = new Event('swiper:loaded');
document.dispatchEvent(event);
};
let head = document.getElementsByTagName('head')[0];
head.appendChild(script);
}

function loadSwiper() {
let swiper;
try {
swiper = new Swiper('.swiper-{{ section.id }}', {
slidesPerView: 1.6,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next-{{ section.id }}',
prevEl: '.swiper-button-prev-{{ section.id }}',
},
breakpoints: {
750: {
slidesPerView: 5,
spaceBetween: 20,
},
},
});

function updateSlidesVisibility(swiper) {
let activeSlide = document.querySelector(
'.swiper-{{ section.id }} .swiper-slide-active'
);
let slides = document.querySelectorAll(
'.swiper-{{ section.id }} .swiper-slide'
);
let activeIndex = swiper.activeIndex;
slides.forEach((slide, index) => {
if (slide === activeSlide) {
slide.classList.remove('swiper-slide-not-in-view');
activeIndex = index;
console.log('activeIndex', activeIndex);
} else if (
index === activeIndex + 1 ||
index === activeIndex + 2 ||
index === activeIndex + 3 ||
index === activeIndex + 4
) {
slide.classList.remove('swiper-slide-not-in-view');
console.log('in view index: ' + index);
} else {
slide.classList.add('swiper-slide-not-in-view');
console.log('not in view index: ' + index);
 }
});
}
updateSlidesVisibility(swiper);
swiper.on('slideChange', updateSlidesVisibility);
swiper.on('slideChangeTransitionEnd', updateSlidesVisibility);
} catch (e) {
console.log('Swiper not loaded');
console.log(e);
}
}
document.addEventListener('swiper:loaded', loadSwiper);
if (window.Shopify && Shopify.designMode) {
document.addEventListener('shopify:section:load', loadSwiper);
}
})();
</script>

{% schema %}
{
"name": "SS - Tech Product Slider",
"class": "section",
"tag": "section",
"settings": [
{
"type": "checkbox",
"id": "hover_effect",
"label": "Hover effect",
"default": true,
"info": "Card size will increase on hover"
},
{
"type": "checkbox",
"id": "hide_arrows_on_mobile",
"label": "Hide Arrows on Mobile",
"default": true
},
{
"type": "checkbox",
"id":"shadow",
"label": "Shadow",
"default": true,
"info": "Check this box to add shadow around the cards"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Popular Phones"
},
{
"type": "select",
"id": "title_alignment",
"label": "Title Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
 {
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "url",
"id": "title_link",
"label": "Title Link"
},
{
"type": "image_picker",
"id": "icon_left",
"label": "Icon Left"
},
{
"type": "image_picker",
"id": "icon_right",
"label": "Icon Right"
},
{
"type": "range",
"id": "card_radius",
"label": "Card roundness",
"min": 0,
"max": 50,
"step": 1,
"default": 9,
"unit": "px"
},
{
"type": "range",
"id": "icon_size",
"label": "Icon Size",
"min": 10,
"max": 100,
"step": 1,
"default": 42,
"unit": "px"
},
{
"type": "color",
"id": "title_color",
"label": "Title Color",
"default": "#363636"
},
{
"type": "color",
"id": "product_title_color",
"label": "Product Title Color",
"default": "#363636"
},
{
 "type": "color",
"id": "product_price_color",
"label": "Product Price Color",
"default": "#363636"
},
{
"type": "header",
"content": "Font size:"
},
{
"type": "range",
"id": "title_font_size",
"label": "Title Font Size",
"min": 10,
"max": 100,
"step": 1,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "product_title_font_size",
"label": "Product Title Font Size",
"min": 10,
"max": 100,
"step": 1,
"default": 16,
"unit": "px"
},
{
"type": "range",
"id": "product_price_font_size",
"label": "Product Price Font Size",
"min": 10,
"max": 100,
"step": 1,
"default": 16,
"unit": "px"
},
{
"type": "header",
"content": "Background color"
},
{
"type": "color",
"label": "Section background color",
"id": "background-color",
"default": "#f5f5f5"
},
{
"type": "header",
"content": "Section padding"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
 "unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding bottom",
"default": 36
},
{
"type": "header",
"content": "Section width"
},
{
"type": "range",
"id": "section-width",
"min": 80,
"max": 200,
"step": 5,
"unit": "rem",
"label": "Section width",
"default": 120
}
],
"blocks": [
{
"type": "product",
"name": "Product",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "richtext",
"id": "price",
"label": "Product Price Tag",
"default": "<p>From <strong>360€</strong></p>",
"info": "Remove text to load default price from selected product"
},
{
"type": "text",
"id": "title",
"label": "Product Title",
"default": "iPhone 13",
"info": "Remove text to load default title from selected product"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
 "type": "range",
"id": "image_width",
"min": 10,
"max": 100,
"step": 1,
"unit": "%",
"label": "Image width",
"default": 100
}
]
}
],
"presets": [
{
"name": "SS - Tech Product Slider",
"blocks": [
{
"type": "product"
},
{
"type": "product"
},
{
"type": "product"
},
{
"type": "product"
},
{
"type": "product"
},
{
"type": "product"
}
]
}
]
}
{% endschema %}