{% block adjustable_product_slider %}
{% if element.config.showLink.value %}
{% set link = "" %}
{% if element.config.linkType.value == "category" and element.config.categoryId.value %}
{% set link = seoUrl('frontend.navigation.page', { navigationId: element.config.categoryId.value }) %}
{% elseif element.config.linkType.value == "url" %}
{% set link = element.config.linkUrl.value %}
{% endif %}
<a class="s360-adjustable-productslider__category-link" href="{{ link }}">{{ element.config.linkText.value }}</a>
{% endif %}
<div class="cms-element-{{ element.type }}{% if sliderConfig.displayMode.value == " standard" and sliderconfig.verticalalign.value %} has-vertical-alignment{% endif %}">
{% block element_product_slider_alignment %}
{% if sliderConfig.verticalAlign.value %}
<div class="cms-element-alignment{% if sliderConfig.verticalAlign.value == " center" %} align-self-center{% elseif sliderConfig.verticalAlign.value == " flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
{% endif %}
{# controls are arrow navigation, navigation are dots and are always off for product slider #}
{% set productSliderOptions = {
slider: {
gutter: 12,
autoplayButtonOutput: false,
nav: false,
mouseDrag: false,
controls: sliderConfig.navigation.value,
autoplay: sliderConfig.rotate.value ? true : false,
responsive: {
xs: {
items: element.config.items.value.xs ? element.config.items.value.xs : 1,
edgePadding: 80
},
sm: {items: element.config.items.value.sm ? element.config.items.value.sm : 2},
md: {items: element.config.items.value.md ? element.config.items.value.md : 3},
lg: {items: element.config.items.value.lg ? element.config.items.value.lg : 4},
xl: {items: element.config.items.value.xl ? element.config.items.value.xl : 6}
}
}
} %}
{% if not sliderConfig.navigation.value %}
{% set productSliderOptions = productSliderOptions|replace_recursive({
slider: {
mouseDrag: true
}
}) %}
{% endif %}
{% block element_product_slider_slider %}
<div class="base-slider product-slider{% if sliderConfig.border.value %} has-border{% endif %}{% if sliderConfig.navigation.value %} has-nav{% endif %}" data-base-slider="true" data-base-slider-options="{{ productSliderOptions|json_encode }}">
{% block element_product_slider_title %}
{% if sliderConfig.title.value %}
<h2 class="cms-element-title">{{ sliderConfig.title.value }}</h2>
{% endif %}
{% endblock %}
{% block element_product_slider_inner %}
{% block element_product_slider_element %}
<div class="product-slider-container" data-base-slider-container="true">
{% for product in element.data.products.elements %}
{% block element_product_slider_inner_item %}
<div class="product-slider-item">
{% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
'layout': sliderConfig.boxLayout.value,
'displayMode': sliderConfig.displayMode.value
} %}
</div>
{% endblock %}
{% endfor %}
</div>
{% endblock %}
{% block element_product_slider_controls %}
{% if sliderConfig.navigation.value or showControls %}
<div class="product-slider-controls-container">
<div class="base-slider-controls" data-base-slider-controls="true">
{% block element_product_slider_controls_items %}
<button class="base-slider-controls-prev product-slider-controls-prev{% if sliderConfig.border.value %} has-border{% endif %}">
{% block element_product_slider_controls_items_prev_icon %}
{% sw_icon 'arrow-head-left' %}
{% endblock %}
</button>
<button class="base-slider-controls-next product-slider-controls-next{% if sliderConfig.border.value %} has-border{% endif %}">
{% block element_product_slider_controls_items_next_icon %}
{% sw_icon 'arrow-head-right' %}
{% endblock %}
</button>
{% endblock %}
</div>
</div>
{% endif %}
{% endblock %}
{% endblock %}
</div>
{% endblock %}
{% if sliderConfig.verticalAlign.value %}
</div>
{% endif %}
{% endblock %}
</div>
{% endblock %}