templates/components/productCard.html.twig line 1

Open in your IDE?
  1. {% if product_card_gallery|default %}
  2. <div id="{{ 'listing-product-' ~ product_id ~ '-' ~('now'|date('U')) }}"
  3.      data-listing-product-id="{{ product_id }}"
  4.      x-init="initialize()"
  5.         {% if product_card_gallery|default %}
  6.             x-data="window.alpineListingData({{ product_id }}, {{ product_card_gallery | json_encode }})"
  7.         {% endif %}
  8.      class="{{ product_card_class|default('h-full flex flex-col grow') }}">
  9.     {% endif %}
  10.     {% block product_card_pictos %}
  11.         {% if product_discount|default %}
  12.             {% embed 'components/picto.html.twig' with {picto_name: '- ' ~ product_discount ~ '%'} %}{% endembed %}
  13.         {% endif %}
  14.     {% endblock %}
  15.     <div class="relative z-1 w-[calc(100%+2rem)] overflow-hidden rounded-none border-0 rounded-b-none -ml-4 -mt-4 {% if product_featured|default %}sm:w-full sm:rounded-b-lg sm:m-l-0 sm:rounded-l-none sm:-mr-4 sm:-mb-4 sm:ml-0{% endif %}">
  16.         {% if product_card_gallery|default %}
  17.             <div class="swiper group/gallery">
  18.                 <div class="swiper-wrapper">
  19.                     {% for key,image in product_card_gallery %}
  20.                         <div class="swiper-slide">
  21.                             {% if product_card_link|default %}<a href="{{ product_card_link }}"
  22.                                                                  class="product-link">{% endif %}
  23.                                 <img src="{{ image is iterable ? image.src|default : image }}"
  24.                                      {% if image.srcset|default %}srcset="{{ image.srcset }}"{% endif %}
  25.                                         {% if image.sizes|default %}sizes="{{ image.sizes }}"{% endif %}
  26.                                         {% if image.alt|default %}alt="{{ image.alt }}"{% endif %}
  27.                                      loading="lazy" onerror="this.style.display='none';"
  28.                                      class="aspect-[317/184] lg:aspect-[4/3] w-full object-contain">
  29.                                 {% if product_card_link|default %}</a>{% endif %}
  30.                         </div>
  31.                     {% endfor %}
  32.                 </div>
  33.                 <div class="swiper-button-prev aria-disabled:hidden after:hidden min-w-[2rem] min-h-[2rem]"
  34.                      style="left: 0.5rem;" aria-disabled="true">
  35.                     <div class="w-7 h-7 flex justify-center items-center bg-white/75 text-black rounded-none lg:opacity-0 group-[.swiper-initialized:hover]/gallery:opacity-100 transition-opacity duration-600 ease-in-out">{% include 'assets/swiper-prev.svg' %}</div>
  36.                 </div>
  37.                 <div class="swiper-button-next aria-disabled:hidden after:hidden min-w-[2rem] min-h-[2rem]"
  38.                      style="right: 0.5rem;" aria-disabled="true">
  39.                     <div class="w-7 h-7 flex justify-center items-center bg-white/75 text-black rounded-none lg:opacity-0 group-[.swiper-initialized:hover]/gallery:opacity-100 transition-opacity duration-600 ease-in-out">{% include 'assets/swiper-next.svg' %}</div>
  40.                 </div>
  41.                 <div class="swiper-scrollbar lg:opacity-0 group-[.swiper-initialized:hover]/gallery:opacity-100 transition-opacity duration-300 ease-in-out"></div>
  42.             </div>
  43.         {% elseif product_card_image|default %}
  44.             {% if product_card_link|default %}<a href="{{ product_card_link }}" class="product-link">{% endif %}
  45.             <img src="{{ product_card_image is iterable ? product_card_image.src|default : product_card_image }}"
  46.                  {% if product_card_image.srcset|default %}srcset="{{ product_card_image.srcset }}"{% endif %}
  47.                     {% if product_card_image.sizes|default %}sizes="{{ product_card_image.sizes }}"{% endif %}
  48.                     {% if product_card_image.alt|default %}alt="{{ product_card_image.alt }}"{% else %}alt="{{ product_card_title|default }}"{% endif %}
  49.                  loading="lazy"
  50.                  class="{% if product_featured|default %} aspect-[317/184] sm:aspect-[420/221] max-h-[300px] {% else %} aspect-[317/184] lg:aspect-[4/3] {% endif %} w-full object-contain">
  51.             {% if product_card_link|default %}</a>{% endif %}
  52.         {% else %}
  53.             <div class="flex aspect-[317/184] lg:aspect-[4/3] w-full object-contain p-16">
  54.                 <img src="{{ asset('build/img/logo.png') }}" alt="logo {{ bloginfo.name }}" loading="lazy"
  55.                      class="w-full h-auto">
  56.             </div>
  57.         {% endif %}
  58.     </div>
  59.     <div class="flex flex-col items-start grow-[2] {% if product_featured|default %}flex w-full flex-col sm:w-1/2{% endif %}">
  60.         {% block product_card_pre_title %}{% endblock %}
  61.         {% block product_card_text %}
  62.             <div class="flex flex-col space-y-3 pt-2.5">
  63.                 {% if product_card_title|default %}
  64.                     {% set product_card_title = '<' ~ product_card_heading_level|default('h3') ~ ' class="text-base 2xl:text-lg leading-5 2xl:leading-6 uppercase">' ~ product_card_title ~ '</' ~ product_card_heading_level|default('h3') ~ '>' %}
  65.                     {{ product_card_title|raw }}
  66.                 {% endif %}
  67.                 {% block product_card_video %}{% endblock %}
  68.                 {% if product_card_description|default %}
  69.                     <span class="text-sm text-neutral-400" data-readmore="20">{{ product_card_description|raw }}</span>
  70.                 {% endif %}
  71.                 {% block product_card_badges %}{% endblock %}
  72.             </div>
  73.         {% endblock %}
  74.         {% block product_card_prices %}
  75.             <div class="mt-auto flex flex-row items-end flex-wrap pt-5">
  76.                 <div class="flex flex-col mr-2">
  77.                     {% if product_card_pre_price|default %}
  78.                         <p class="text-sm leading-3 text-black font-bold">Antes: {{product_card_pre_price|raw }}</p>
  79.                     {% endif %}
  80.                     {% if product_card_featured_price|default %}
  81.                     <div class="relative inline-block w-max before:absolute before:left-1 before:top-1 before:block before:h-full before:w-full before:bg-black">
  82.                         <p class="relative w-max bg-primary px-2 text-2xl text-white">
  83.                             {% else %}
  84.                         <p class="text-2xl text-black {% if product_card_pre_price|default %} bg-primary px-2 py-0.5 mt-2 {% endif %}">
  85.                             {% endif %}
  86.                             {{ product_card_price|default }}{% block product_card_price_per_seat %}{% endblock %}
  87.                         </p>
  88.                         {% if product_card_featured_price|default %}</div>{% endif %}
  89.                 </div>
  90.             </div>
  91.         {% endblock %}
  92.     </div>
  93.     {% if product_card_gallery|default %}
  94. </div>
  95. {% endif %}