templates/product.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {# Some helpers to make this file more readable #}
  4. {% set d = product.default_variation|default %}
  6. {% block main %}
  7.     <div class="max-w-screen-2xl mx-auto px-5 lg:px-20 pt-header">
  8.         {% include 'template-parts/breadcrumb.html.twig' %}
  9.     </div>
  10.     <main id="product-{{ product.id }}"
  11.           x-init="$nextTick(() => { initialize() })"
  12.             {% if d %}
  13.                 x-data="window.alpineProductData({{ product | json_encode }}, {{ product['default_variation'] | json_encode }})"
  14.             {% else %}
  15.                 x-data="window.alpineProductData({{ product | json_encode }})"
  16.             {% endif %}
  17.           class="max-w-screen-2xl mx-auto px-5 lg:px-20">
  18.         <div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-[0.02fr_1fr] gap-y-6 lg:gap-x-12 lg:gap-y-4 pb-0 lg:pb-12">
  19.             <div class="swiper-container-wrapper product-gallery -ml-4 lg:ml-0 w-screen lg:w-full flex flex-col sm:flex-row-reverse flex-nowrap gap-4 lg:aspect-[677/400] lg:overflow-hidden order-2 lg:order-first">
  20.                 {% if product.gallery|default or product.galleryVariations|default %}
  21.                     <div class="swiper group/product-page-swiper w-full lg:w-[calc(100%-100px)] relative !z-5">
  22.                         {% if product.discount|default %}
  23.                             {% embed 'components/picto.html.twig' with {picto_name: '- ' ~ product.discount ~ '%'} %}{% endembed %}
  24.                         {% endif %}
  25.                         {% if product.video|default %}
  26.                             <button data-modal-target="{{ product.video }}"
  27.                                     class="absolute top-4 right-4 z-100 flex w-max flex-row items-center gap-2 rounded-none bg-neutral-200 py-1 px-3">
  28.                                 {% include 'assets/youtube_icon.svg' %}
  29.                                 <span class="text-sm font-bold text-black">Ver vídeo</span>
  30.                             </button>
  31.                         {% endif %}
  32.                         <div class="swiper-wrapper">
  33.                             <template x-for="item in current?.gallery || []">
  34.                                 <div class="swiper-slide">
  35.                                     <template x-if="item.src">
  36.                                         <a :href="item.src" :data-pswp-src="item.src" :data-pswp-width="1024"
  37.                                            :data-pswp-height="1024" class="cursor-zoom-in" rel="noreferrer">
  38.                                             <img class="w-full h-full aspect-[4/3] object-contain"
  39.                                                  :src="item.src"
  40.                                                  :srcset="item.srcset"
  41.                                                  :sizes="item.sizes"
  42.                                                  :alt="item.alt" loading="lazy">
  43.                                         </a>
  44.                                     </template>
  45.                                 </div>
  46.                             </template>
  47.                             {% for image in product.gallery %}
  48.                                 <div class="swiper-slide">
  49.                                     {% if image.src|default %}
  50.                                         <a href="{{ image.src }}" data-pswp-src="{{ image.src }}" data-pswp-width="1024"
  51.                                            data-pswp-height="1024" class="cursor-zoom-in" rel="noreferrer">
  52.                                             <img class="w-full h-full aspect-[4/3] object-contain"
  53.                                                  src="{{ image.src }}"
  54.                                                  srcset="{{ image.srcset }}"
  55.                                                  sizes="{{ image.sizes }}"
  56.                                                  alt="{{ image.alt }}" loading="lazy">
  57.                                         </a>
  58.                                     {% endif %}
  59.                                     {% if image.youtube_id|default %}
  60.                                         <iframe src="{{ image.youtube_src }}" class="w-full h-full"
  61.                                                 width="640" height="360" frameborder="0"
  62.                                                 allow="autoplay; fullscreen; picture-in-picture"
  63.                                                 allowfullscreen></iframe>
  64.                                     {% endif %}
  65.                                 </div>
  66.                             {% endfor %}
  67.                         </div>
  68.                         <div class="swiper-scrollbar lg:opacity-0 group-[.swiper-initialized:hover]/product-page-swiper:opacity-100 transition-opacity duration-300 ease-in-out"></div>
  69.                         <div class="swiper-button-next aria-disabled:hidden after:hidden" aria-disabled="true">
  70.                             {% include 'assets/swiper-next.svg' %}
  71.                         </div>
  72.                         <div class="swiper-button-prev aria-disabled:hidden after:hidden" aria-disabled="true">
  73.                             {% include 'assets/swiper-prev.svg' %}
  74.                         </div>
  75.                     </div>
  76.                     <div class="swiper product-page-swiper-thumbs w-[100px] !hidden lg:!block relative">
  77.                         <div class="swiper-wrapper">
  78.                             <template x-for="item in current?.gallery || []">
  79.                                 <div class="swiper-slide !h-auto cursor-pointer last:!mb-0">
  80.                                     <template x-if="item.src">
  81.                                         <img :src="item.thumbnail.src"
  82.                                              :alt="item.alt" loading="lazy">
  83.                                     </template>
  84.                                 </div>
  85.                             </template>
  86.                             {% for image in product.gallery %}
  87.                                 <div class="swiper-slide !h-auto cursor-pointer last:!mb-0">
  88.                                     <img src="{{ image.thumbnail.src }}"
  89.                                          alt="Miniatura {{ image.thumbnail.alt|default ? image.thumbnail.alt : image.alt }}"
  90.                                          loading="lazy">
  91.                                 </div>
  92.                             {% endfor %}
  93.                         </div>
  94.                         <div class="swiper-button-next swiper-button-next-thumbs !top-auto !bottom-0 !left-0 !right-0 !mt-0 m-auto aria-disabled:hidden after:hidden"
  95.                              aria-disabled="true">
  96.                             {% include 'assets/swiper-next-thumbs.svg' %}
  97.                         </div>
  98.                         <div class="swiper-button-prev swiper-button-prev-thumbs !top-0 !left-0 !right-0 !mt-0 m-auto aria-disabled:hidden after:hidden"
  99.                              aria-disabled="true">
  100.                             {% include 'assets/swiper-prev-thumbs.svg' %}
  101.                         </div>
  102.                     </div>
  103.                 {% endif %}
  104.             </div>
  105.             <div class="row-span-1">
  106.                 <h1 class="text-3xl lg:max-w-lg">{{ product.name }}</h1>
  107.             </div>
  108.             <div class="lg:row-span-2 order-4">
  109.                 <div class="lg:sticky lg:top-header flex flex-col gap-y-6 z-0 sm:max-xl max-w-lg">
  110.                     {% block start_sticky_product %}{% endblock %}
  111.                     {% block price_box %}
  112.                         {% embed 'template-parts/price-box.html.twig' %}{% endembed %}
  113.                     {% endblock %}
  114.                     {% block info_destacada %}
  115.                         {% embed 'components/info-destacada.html.twig' with {
  116.                             envio: true,
  117.                             tiempo_envio: product.attributes['pa_tiempo-de-envio'][0].name ?? '',
  118.                             size: product.length|default or product.width|default or product.height|default
  119.                         } only %}{% endembed %}
  120.                     {% endblock %}
  121.                     {% if product.short_description|default %}
  122.                         <span class="order-last lg:order-none text-sm text-black prose max-w-none">{{ product.short_description|raw }}</span>
  123.                     {% endif %}
  124.                     {% if product.is_in_stock|default %}
  125.                         {% if product.variation_attributes|default %}
  126.                             <div id="product-attributes"
  127.                                  class="space-y-6 bg-stone-100 xs:rounded-none p-4 w-screen -ml-4 xs:w-full xs:ml-0">
  128.                                 {% block product_attributes %}
  129.                                     {% for key, attribute in product.variation_attributes %}
  130.                                         {% embed 'components/attributes/attribute-button.html.twig' with {
  131.                                             atributos: 'product.variation_attributes["' ~ key ~ '"]',
  132.                                             atributo: key,
  133.                                         } only %}
  134.                                         {% endembed %}
  135.                                     {% endfor %}
  136.                                 {% endblock %}
  137.                             </div>
  138.                         {% endif %}
  139.                         {% block add_to_cart %}
  140.                             {% embed 'components/add-to-cart.html.twig' with {
  141.                                 quantity: true
  142.                             } %}{% endembed %}
  143.                         {% endblock %}
  144.                         {% block after_add_to_cart %}{% endblock %}
  145.                     {% else %}
  146.                         <div class="flex flex-row items-center gap-3 mt-6">
  147.                             <button id="addToCart"
  148.                                     class="no-stock w-full flex flex-row justify-center items-center gap-3 rounded-none bg-black p-3 text-white text-center">
  149.                                 <span>Producto agotado</span>
  150.                             </button>
  151.                         </div>
  152.                     {% endif %}
  153.                     <a href="{{ path('whatsapp_link', {'link': app.request.pathInfo}) }}" target="_blank"
  154.                        rel="nofollow" class="[&_svg]:max-w-40
  155.                         [&_svg]:max-h-40 [&_svg]:w-full [&_svg]:h-auto [&_svg]:object-contain">
  156.                         {% include 'assets/whatsapp-herramientasparaalicatador.svg' %}
  157.                     </a>
  158.                 </div>
  160.                 {% block price_nav_fixed %}
  161.                     {% embed 'template-parts/price-nav-fixed.html.twig' %}{% endembed %}
  162.                 {% endblock %}
  163.             </div>
  165.             <div class="order-last lg:order-3 mt-0 lg:mt-[400px] mb-8">
  166.                 {% block before_accordion %}{% endblock %}
  167.                 {% if product.accordion|default %}
  168.                     {% embed 'components/accordion.html.twig' with {
  169.                         id: 'accordion_product',
  170.                         accordion: 'collapse',
  171.                         items: product.accordion
  172.                     } %}
  173.                     {% endembed %}
  174.                 {% endif %}
  175.             </div>
  177.             {% if product.video|default %}
  178.                 {% embed 'components/modal.html.twig' with {id: product.video, modal_button_class: 'hidden', youtube_id: product.video, modal_zIndex: 'z-[1000001]'} %}{% endembed %}
  179.             {% endif %}
  180.             {% block modales_producto %}{% endblock %}
  181.         </div>
  182.         {% block informacion_adicional_producto %}{% endblock %}
  183.     </main>
  185.     {% block after_main %}{% endblock %}
  187.     {% if product.upsell_ids|default %}
  188.         <section class="max-w-screen-2xl mx-auto px-5 lg:px-20 flex flex-col gap-8">
  189.             {{ render_block('listadoproductos', {
  190.                 titulo: product.tituloProductosRelacionados ?? 'Productos relacionados' ,
  191.                 alineacion: 'start',
  192.                 categorias_productos: false,
  193.                 etiquetas_productos: false,
  194.                 numero_productos: '-1',
  195.                 boton: '',
  196.                 slider_grid: 'slider',
  197.                 productos: product.upsell_ids,
  198.                 id: 'relacionados',
  199.             }) }}
  200.         </section>
  201.     {% endif %}
  202. {% endblock %}
  204. {% block footer %}
  205.     {% include 'footer.html.twig' %}
  206.     <div class="pb-44 lg:pb-16"></div>
  207.     <style>
  208.         #whatsapp {
  209.             margin-bottom: 5rem;
  210.         }
  211.     </style>
  212.     {{ wp_footer() }}
  213. {% endblock footer %}
  215. {% block json_schema %}
  216.     {{ json_schema|raw }}
  217. {% endblock %}