custom/static-plugins/NdVoorwindenTheme/src/Resources/views/storefront/component/product/card/box-standard.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/component/product/card/box-standard.html.twig' %}
  3. {% block component_product_box %}
  4.     {% if product %}
  5.         {% set name = product.translated.name %}
  7.         {# Custom switch, as we want product cards to link to the Parent product (so no variation is selected), instead of the product variation itself. #}
  8.         {% if product.parentId is not null %}
  9.             {% set id = product.parentId %}
  10.         {% else %}
  11.             {% set id = product.id %}
  12.         {% endif %}
  14.         {% set cover = product.cover.media %}
  15.         {% set variation = product.variation %}
  16.         {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %}
  17.         {% set productUrl = seoUrl('frontend.detail.page', { 'productId': id }) %}
  19.         <div class="product-box box-{{ layout }} h-full group">
  20.             {% block component_product_box_content %}
  21.                 {{ parent() }}
  22.             {% endblock %}
  23.         </div>
  24.     {% endif %}
  25. {% endblock %}
  27. {% block component_product_box_image_link_inner %}
  28.     {% if cover.url %}
  29.         {% set attributes = {
  30.             class: 'product-image cover',
  31.             alt: cover.translated.alt ? : name,
  32.             title: cover.translated.title ? : name
  33.         } %}
  34.         {% sw_thumbnails 'product-image-thumbnails'
  35.             with
  36.             {
  37.                 media: cover,
  38.                 sizes: {
  39.                 'xs': '308px',
  40.                 'md': '420px',
  41.                 'xl': '868px'
  42.             }
  43.             } %}
  45.         {% if 'secondMediaExtension' in product.extensions|keys %}
  46.             {% set secondMedia = product.extensions.secondMediaExtension.secondMedia.media %}
  47.             {% set attributes = {
  48.                 class: 'product-image product-image-hover hidden opacity-0 hover:opacity-100 md:block transition cover',
  49.                 alt: secondMedia.translated.alt ? : name,
  50.                 title: secondMedia.translated.title ? : name
  51.             } %}
  52.             {% sw_thumbnails 'product-image-thumbnails'
  53.                 with
  54.                 {
  55.                     media: secondMedia,
  56.                     sizes: {
  57.                     'xs': '308px',
  58.                     'md': '420px',
  59.                     'xl': '868px'
  60.                 }
  61.                 } %}
  62.         {% endif %}
  63.     {% else %}
  64.         {% block component_product_box_image_placeholder %}
  65.             {% sw_icon 'placeholder' style {
  66.                 'size': 'fluid'
  67.             } %}
  68.         {% endblock %}
  69.     {% endif %}
  70. {% endblock %}
  74. {% block component_product_box_variant_characteristics %}
  75. {% endblock %}
  77. {% block component_product_box_image_link %}
  78.     {{ parent() }}
  79.     <div class="variant-selector justify-center text-sm transition absolute bottom-0 flex w-full flex-wrap grid-gap-2 p-2 bg-white/25 opacity-0 group-hover:opacity-100">
  80.         {% for product in product.extensions.allChildren.elements %}
  81.             {% set size = product.options.elements|first.name %}
  82.             {% if product.availableStock %}
  83.                 <a href="{{ productUrl }}?size={{ size }}"
  84.                    title="Selecteer maat {{ size }}"
  85.                    class="flex items-center justify-center w-8 h-8 bg-grey-50 border border-transparent rounded-sm hover:border-grey-900">{{ size }}</a>
  86.             {% endif %}
  87.         {% endfor %}
  88.     </div>
  89. {% endblock %}
  91. {% block component_product_box_brand_name %}
  92.     <div class="product-brand-name font-accent font-bold text-xs mb-2">
  93.         {{ product.manufacturer.translated.name }}
  94.     </div>
  95. {% endblock %}
  97. {% block component_product_box_name %}
  98.     <a href="{{ productUrl }}"
  99.        class="product-name block text-xs font-normal lg:text-sm"
  100.        title="{{ name }}">
  101.         {{ name }}
  102.     </a>
  103. {% endblock %}