{% set listingColumns = 'col-sm-6 col-lg-4 col-xl-3' %}
{% set products = element.data.elements %}
<div class="cms-element-product-listing">
<div class="row cms-listing-row js-listing-wrapper">
{% if products|length > 0 %}
{% block element_product_listing_col %}
{% for product in products %}
<div class="cms-listing-col {{ listingColumns }}">
{% block element_product_listing_box %}
{% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
'layout': lement.config.boxLayout.value,
'displayMode': element.config.displayMode.value
} %}
{% endblock %}
</div>
{% endfor %}
{% endblock %}
{% else %}
{% block element_product_listing_col_empty %}
<div class="cms-listing-col col-12">
{% block element_product_listing_col_empty_alert %}
{% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
type: 'info',
content: 'listing.emptyResultMessage'|trans|sw_sanitize
} %}
{% endblock %}
</div>
{% endblock %}
{% endif %}
</div>
</div>