custom/static-plugins/NdVoorwindenTheme/src/Resources/views/storefront/component/buy-widget/variations.html.twig line 1

Open in your IDE?
  1. {% if page.product.extensions.productGroup %}
  2.     <section class="py-3">
  3.         <div class="color-title font-accent uppercase text-sm flex mb-2">
  4.             {% for property in page.product.properties.elements %}
  5.                 {% if property.group.name === 'color' %}
  6.                     <div class="font-medium text-grey-600">{{ property.group.translated.name }}</div>
  7.                     <div class="font-bold text-grey-900 ml-2">
  8.                         {{ property.name }}
  9.                     </div>
  10.                 {% endif %}
  11.             {% endfor %}
  12.         </div>
  13.         <div class="flex grid-gap-2">
  14.             {% for product in page.product.extensions.productGroup.get('0').elements %}
  15.                 {# Custom switch, as we want product cards to link to the Parent product (so no variation is selected), instead of the product variation itself. #}
  16.                 {% if product.parentId is not null %}
  17.                     {% set id = product.parentId %}
  18.                 {% else %}
  19.                     {% set id = product.id %}
  20.                 {% endif %}
  21.                 {% set cover = product.cover.media %}
  22.                 {% set active = page.product.id === id %}
  23.                 {% block variation_product_box_image_link %}
  24.                     <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}"
  25.                        title="{{ name }}"
  26.                        class="product-variation-image-link block ratio w-12 ratio_product_image border rounded-sm transition {% if active %} border-grey-900{% else %} border-grey-100 hover:border-grey-600{% endif %}">
  27.                         {% block variation_product_box_image_link_inner %}
  28.                             {% if cover.url %}
  29.                                 {% set attributes = {
  30.                                     'class': 'product-image is-'~displayMode,
  31.                                     'alt': (cover.translated.alt ?: name),
  32.                                     'title': (cover.translated.title ?: name)
  33.                                 } %}
  35.                                 {% if displayMode == 'cover' or displayMode == 'contain' %}
  36.                                     {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  37.                                 {% endif %}
  39.                                 {% block variation_product_box_image_thumbnail %}
  40.                                     {% sw_thumbnails 'product-image-thumbnails' with {
  41.                                         media: cover,
  42.                                         sizes: sizes
  43.                                     } %}
  44.                                 {% endblock %}
  45.                             {% else %}
  46.                                 {% block variation_product_box_image_placeholder %}
  47.                                     <div class="product-image-placeholder">
  48.                                         {% sw_icon 'placeholder' style {
  49.                                             'size': 'fluid'
  50.                                         } %}
  51.                                     </div>
  52.                                 {% endblock %}
  53.                             {% endif %}
  54.                         {% endblock %}
  55.                     </a>
  56.                 {% endblock %}
  57.             {% endfor %}
  58.         </div>
  59.     </section>
  60. {% endif %}