{% block component_product_table_cross_sellings_container %}
<div class="product-detail-table-container">
<table class="product-detail-table">
<tr class="table--header">
<th>{{ "detail.tableArticle"|trans|sw_sanitize }}</th>
<th>{{ "detail.tableSize"|trans|sw_sanitize }}</th>
<th>{{ "detail.tablePrice"|trans|sw_sanitize }}</th>
<th>{{ "detail.tableDesiredQuantity"|trans|sw_sanitize }}</th>
</tr>
{% for element in products|sort((a, b) => a.position <=> b.position) %}
<tr>
<td class="article-view">
<a href="{{ seoUrl('frontend.detail.page', {'productId': element.product.id}) }}"
title="{{ element.product.translated.name }}">
{% sw_thumbnails 'product-image-thumbnails' with {
media: element.product.cover.media,
sizes: {
'xs': '501px',
'sm': '315px',
'md': '427px',
'lg': '333px',
'xl': '284px'
},
attributes:{
'class':'table-product-image'
}
} %}
<span class="table-product-name">{{ element.product.translated.name }}</span>
</a>
</td>
<td>{{ element.product.variation[0].option }} {% if element.product.variation[1].option %}({{ element.product.variation[1].option }}){% endif %}</td>
<td>{{ element.product.calculatedPrice.unitPrice|currency }}</td>
<td>
{% sw_include '@Storefront/storefront/page/product-detail/buy-widget-form-table.html.twig' with {
productTable: element.product
} %}
</td>
</tr>
{% endfor %}
</table>
</div>
{% endblock %}