templates/product/show.html.twig line 1

Open in your IDE?
  1. {% import _self as self %}
  2. {% import "macros/product.html.twig" as productMacros %}
  3. {% import 'macros/breadcrumb.html.twig' as breadcrumbs %}
  4. {% import "macros/community.html.twig" as communityMacros %}
  5. {% import "macros/banner.html.twig" as bannerMacros %}
  6. {% import 'macros/product-tabs.html.twig' as tabs %}
  7. {% import 'components/button.html.twig' as button %}
  8. {% import 'components/avatar.html.twig' as avatar %}
  9. {% import 'components/badge.html.twig' as badge %}
  11. {% extends 'base.html.twig' %}
  13. {% set tabData = [
  14.     { 'title': "product.tabs.productFeatures" | trans, 'type': 'html', 'content': product.productFeatures|raw|nl2br },
  15.     { 'title': "general.producerFeatures" | trans, 'type': 'slider', 'content': { 'images': product.brand.media, 'text': product.brand.features  } },
  16.     { 'title': "product.tabs.howItWorks" | trans, 'type': 'html', 'content': product.howItWorks|raw|nl2br },
  17.     { 'title': "product.followers.in-offer" | trans, 'type': 'users', 'content': friendUsersWhoBought | slice(0, 9) },
  18.     { 'title': "product.tabs.comments" | trans, 'type': 'comments', 'content': product.userReviews | slice(0, 20) },
  19. ] %}
  21. {#  Hidden tab
  22.     { 'title': 'Consultas sobre el producto', 'type': 'faqs', 'content': [
  23.         { 'title': '¿Son realmente eficaces los productos de limpieza de Branch sin tóxicos?', 'description': 'Sí, nuestros productos de limpieza son eficaces y seguros para usar en cualquier superficie. Hemos realizado pruebas exhaustivas para garantizar su eficacia.' },
  24.         { 'title': '¿De dónde provienen los ingredientes que utiliza Branch?', 'description': 'Buscamos ingredientes naturales y ecológicos de fuentes sostenibles y éticas. También trabajamos con proveedores locales para apoyar a nuestra comunidad.' },
  25.         { 'title': '¿Son seguros los productos de limpieza de Branch para usar en hogares con niños y mascotas?', 'description': 'Sí, nuestros productos están diseñados específicamente para ser seguros para usar en hogares con niños y mascotas. No contienen productos químicos dañinos ni tóxicos.' }
  26.     ] },
  27.  #}
  29. {% block meta %}
  30.     {{ parent() }}
  32.     {# 
  33.     Important  Open Graph  metadata for shared links 
  34.     https://ogp.me/
  35.     https://developers.facebook.com/docs/sharing/webmasters
  36.     https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#display
  37.     #}
  38.     
  39.     <meta property="og:type"                                    content="triwu_u" />
  40.     <meta property="og:title"                                   content="{{ product.name|slice(0, 34) }}" />
  41.     <meta property="og:description"                             content="{{ 'general.product'|trans ~ " triwu_u - " ~ product.name|slice(0, 110) }}" />
  42.     {% if (product.mainProductImage) %}
  43.     <meta property="og:image:secure_url"    itemprop="image"    content="{{ url('app_media_thumbnail_display_notifications', {'filename': product.mainProductImage.filename}) }}" />
  44.     <meta property="og:image"    itemprop="image"    content="{{ url('app_media_thumbnail_display_notifications', {'filename': product.mainProductImage.filename}) }}" />
  45.     <meta property="og:updated_time" content="1440432930" />
  46.     <meta property="og:locale" content="es_ES" />
  47.     <meta property="og:locale:alternate" content="en_GB" />
  48.     {% endif %}
  49. {% endblock meta %}
  51. {% block title %}{{ product.name }}{% endblock %}
  54. {% block login %}
  55. {% endblock login %}
  57. {% block mainClass %}pt-20{% endblock %}
  59. {% block content %}
  60. {% set isLogged = app.user is defined and app.user is not null %}
  62. <section class="">
  63.   {% if product.currentQuantityOrdered > 1 %}
  64.     <header class="relative flex items-center justify-center gap-2 py-2 text-white desktop:mb-14 desktop:text-xl bg-gradient-to-r from-alternative-red to-alternative-orange px-edge desktop:pt-5">
  65.       <svg class="w-8 min-w-[32px] h-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
  66.         <path fill-rule="evenodd" clip-rule="evenodd" d="M20.7468 8.73332L21.3335 7.99999C25.0535 10.16 27.3602 14.6267 26.4802 19.36C25.9202 22.3467 24.0535 24.8933 21.5335 26.4267C22.2535 25.3733 22.6668 24.12 22.6668 22.76C22.6668 20.9867 21.9735 19.3333 20.7068 18.0933L16.0002 13.4667L11.2935 18.08C10.0268 19.3333 9.33349 20.9867 9.33349 22.7467C9.33349 24.1333 9.77349 25.4267 10.5202 26.48C7.4135 24.6267 5.3335 21.2267 5.3335 17.3333C5.3335 7.99999 16.0002 2.66666 16.0002 2.66666V7.06666C16.0002 9.58666 19.1735 10.6933 20.7468 8.73332ZM13.16 19.9867L16 17.2L18.84 19.9867C19.5867 20.72 20 21.7067 20 22.7467C20 24.9067 18.2 26.6667 16 26.6667C13.8 26.6667 12 24.9067 12 22.7467C12 21.7067 12.4133 20.7333 13.16 19.9867Z" fill="currentColor"/>
  67.       </svg>
  68.       <strong>{{"product.buyers.trending" | trans({'%buyers%': product.currentQuantityOrdered }) }}</strong>
  69.       <img src="{{ asset('build/images/border-gradient.svg') }}" class="desktop:hidden absolute left-0 w-full -mb-px top-[99%]"/>
  70.       <img src="{{ asset('build/images/border-gradient-lg.svg') }}" class="hidden desktop:block absolute left-0 w-full -mb-px top-[99%]"/>
  71.     </header>
  72.   {% endif %}
  73.   <div class="product-page__container">
  74.     <section id="product-page__grid" class="grid mt-2">
  75.       {% if (product.productImages|length > 0) %}
  76.       <section id="product-page__gallery" class="product-page__gallery">
  77.         <figure class="product-page__gallery__img">
  78.           <div class="product-card__right">
  79.             {% if (product.brand and product.brand.logo) %}
  80.               <img src="{{ path('app_media_thumbnail_display', {'id': product.brand.logo.id}) }}" alt="Brand Logo" loading="lazy" class="w-8 tablet:w-12" alt="{{ product.brand.logo.originalName }}" title="{{ product.brand.logo.originalName }}">
  81.             {% endif %}
  82.             {% if product.showCountdown %}
  83.               <div class="product-card__countdown ml-auto {{ product.isFinished ? '' : 'countdownTimer' }}" data-end-offer-string="{{ product.endOfferDate|date("Y-m-d\\TH:i:sP") }}">
  84.                 <svg viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  85.                   <path d="M7.64248 0.158447H0.09729V1.06574H1.20107V3.40935C1.19938 4.06804 1.37552 4.7148 1.71082 5.28172C2.04623 5.84852 2.52822 6.3144 3.10635 6.6301C2.52825 6.94577 2.04623 7.41164 1.71082 7.97848C1.37552 8.54539 1.19939 9.19215 1.20107 9.85084V12.1945H0.09729V13.1017H9.59303V12.1945H8.54968V9.85084C8.55137 9.19215 8.37523 8.54539 8.03993 7.97848C7.70463 7.41167 7.22253 6.94579 6.64452 6.6301C7.2225 6.31443 7.70463 5.84855 8.03993 5.28172C8.37523 4.7148 8.55136 4.06804 8.54968 3.40935V1.06574H9.59303V0.158447H7.64248ZM7.64248 9.85076V12.1944H7.4156L5.17778 9.66923C5.09446 9.5723 4.97295 9.51651 4.84513 9.51651C4.7173 9.51651 4.59579 9.5723 4.51247 9.66923L2.27465 12.1944H2.10832V9.85076C2.10832 8.86217 2.63568 7.94867 3.4918 7.45441C4.34792 6.96005 5.40275 6.96005 6.25887 7.45441C7.115 7.94867 7.64246 8.86217 7.64246 9.85076H7.64248ZM7.64248 2.78943H2.10833V1.06568H7.64248V2.78943Z" fill="currentColor"/>
  86.                 </svg>
  87.                 00h : 00m : 00s
  88.               </div>
  89.              <button data-modal="countdownProduct"  id="info-icon" class="cursor-pointer border-2 border-primary text-primary text-xs rounded-full w-4 h-4 flex items-center justify-center cursor-pointer">
  90.                 ?
  91.             </button>
  92.             {% endif %}
  93.           </div>
  94.           <a
  95.             href="{{ path('app_media_display', {'id': product.mainProductImage.id}) }}"
  96.             class="glightbox relative flex h-full"
  97.             data-type="image"
  98.           >
  99.             {% if (product.mainProductImage) %}
  100.               <img src="{{ path('app_media_display', {'id': product.mainProductImage.id}) }}" alt="{{ product.name }} image" loading="lazy" class="product-card__img">
  101.             {% endif %}
  102.           </a>
  103.         </figure>
  104.         {% if (product.productImages|length > 1) %}
  105.         <div class="product-page__gallery__thumbnails">
  106.           {% for productMedia in product.productImages %}
  107.           {% set fileType = productMedia.isImage ? 'image' : productMedia.isVideo ? 'video' : 'unknown' %}
  108.               {% if productMedia.isImage %}
  109.                 <a class="glightbox" data-type="image" href="{{ path('app_media_display', {'id': productMedia.id}) }}">
  110.                   <img src="{{ path('app_media_thumbnail_display', {'id': productMedia.id}) }}"/>
  111.                 </a>
  112.               {% elseif productMedia.isVideo %}
  113.                 <a class="glightbox" style="border-radius:0" data-type="video" href="{{ path('app_media_display', {'id': productMedia.id}) }}">
  114.                   <div class="row video-thumbnail justify-content-center align-items-center mx-0">
  115.                     <i class="fa-regular fa-circle-play text-white fa-2xl"></i>
  116.                   </div>
  117.                 </a>
  118.               {% else %}
  119.                 {# Unsupported media format, skip this element rendering #}
  120.               {% endif %}
  121.           {% endfor %}
  122.         </div>
  123.         {% endif %}
  124.       </section>
  125.       {% endif %}
  126.       <section id="product-page__info">
  127.         <div class="product-page__badges">
  128.           {% for label in product.labels %}
  129.             {{ badge.create(label.name, 'featured', path('app_media_thumbnail_display', {'id': label.icon.id})) }}
  130.           {% endfor %}
  131.         </div>
  133.         <div class="fixed desktop:relative bottom-0 left-0 right-0 bg-white border-t desktop:border-none p-2 desktop:p-0 desktop:mt-2 z-30">
  134.           <div class="mb-2">
  135.             <div class="flex justify-between">
  136.               <h1 class="product-page__title mb-2">
  137.                 {{ product.name }}
  138.               </h1>
  139. {#
  140.               <strong class="text-xl text-primary leading-none font-bold ml-4 tablet:ml-0 my-auto flex">
  141.                 {{ productMacros.priceWithDecimals(product.nextPrice, '€', 'text-xs tablet:text-sm tablet:leading-4') }}
  142.               </strong>
  143. #}
  144.             </div>
  146.             <div class="flex justify-between items-center">
  147.               {% if app.user or (app.user is null and product.isShowPrice) %}
  148.                 {% if product.unitsPerBoxGrouped >1 %}
  149.                  <div class="flex justify-start">
  150.                     {% if(product.individualPrice != product.nextPrice  or (product.individualPrice == product.nextPrice and product.getCurrentPriceScale.isSellProductIfNotComplete))%}
  151.                     <span class="text-sm tablet:text-base line-through inline-flex leading-4">
  152.                         {{ productMacros.priceWithDecimals(product.originalPrice, '€', 'text-xs leading-none tablet:text-sm') }}
  153.                     </span>
  155.                     <span class="ml-2 text-sm tablet:text-base text-primary font-bold inline-flex leading-4">
  156.                     {% set units = app.request.locale == 'eu' ? '€/un' : '€/ud' %}
  157.                         <span class="inline-flex">{{ productMacros.priceWithDecimals(product.getCurrentPrice, '€', 'text-xs leading-none tablet:text-xs tablet:leading-5') }}</span>/ {{"product.ud" | trans}}</span>
  158.                     </span>
  159.                     {%else%}
  160.                     <span class="text-sm tablet:text-base  inline-flex leading-4">
  161.                         {{ productMacros.priceWithDecimals(product.originalPrice, '€', 'text-xs leading-none tablet:text-sm') }}
  162.                     </span><span>/ {{"product.ud" | trans}}</span>
  163.                     {%endif%}           
  164.                 </div>
  165.                 {% else %}
  166.                 <div class="flex justify-start">
  167.                 {% if(product.individualPrice != product.nextPrice )%}
  168.                   <span class="text-xs md:text-sm {%if (product.getNextDiscountPercentage > 0 and product.hideDiscount == false)%} line-through mr-2{%endif%} inline-flex leading-4">
  169.                      {{ productMacros.priceWithDecimals(product.individualPrice, '€', 'text-2xs') }}
  170.                   </span>
  171.                   {% if (product.getNextDiscountPercentage > 0 and product.hideDiscount == false) %}
  172.                     <strong class="text-primary text-xs md:text-sm font-bold">{{ productMacros.priceWithDecimals(product.nextPrice, '€', 'text-xs tablet:text-sm tablet:leading-4') }}</strong>
  173.                   {% endif %}
  174.                 {%else%}
  175.                     {%if product.originalPrice > product.individualPrice%}
  176.                         <span class="text-sm tablet:text-base line-through inline-flex leading-4">
  177.                             {{ productMacros.priceWithDecimals(product.originalPrice, '€', 'text-xs leading-none tablet:text-sm') }}
  178.                         </span>
  179.                         <span class="ml-2 text-sm tablet:text-base text-primary font-bold inline-flex leading-4">
  180.                         {% set units = app.request.locale == 'eu' ? '€/un' : '€/ud' %}
  181.                             <span class="inline-flex">{{ productMacros.priceWithDecimals(product.getCurrentPrice, '€', 'text-xs leading-none tablet:text-xs tablet:leading-5') }}</span>/ {{"product.ud" | trans}}</span>
  182.                         </span>
  183.                     {%else%}
  184.                     <span class="text-sm tablet:text-base  inline-flex leading-4">
  185.                         {{ productMacros.priceWithDecimals(product.originalPrice, '€', 'text-xs leading-none tablet:text-sm') }}
  186.                     </span>
  187.                     {%endif%}
  188.                 {%endif%}
  189.                   
  190.                 </div>
  191.                 {% endif %} 
  192.                 {%if product.getUnitsPerBoxGrouped > 1%}
  193.                     <div class="flex justify-end  font-bold mt-1">
  194.                         <span class="text-sm text-gray-500">{{'product.detail.minimum-order-units' | trans}}: {{product.getUnitsPerBoxGrouped}} {{'product.uds' | trans}}</span>
  195.                     </div>
  196.                 {%endif%}
  197.               {% endif %}
  199.               {# {% if product.getDiscountPercentage > 0 and product.sharedPackageFormat %} #}
  200.               {% if product.sharedPackageFormat %}
  201.                 <span class="text-sm md:text-base text-gray-500">
  202.                   {{product.sharedPackageFormat}}
  203.                 </span>
  204.               {% endif %}
  205.             </div>
  206.           </div>
  207.              
  208.           {% if app.user %}
  209.               <button data-id="{{ product.id }}" data-producer="{{ product.producer.id }}" class="AddToCartAjax disabled:bg-gray-400 group font-bold uppercase text-white bg-primary-500 hover:bg-primary-400 p-2 shadow-md transition-colors flex justify-center items-center w-full">
  210.                 <span>{{ "shopping_cart.add-to-cart"|trans }}</span>
  211.                 <svg class="block group-disabled:hidden ml-2 w-4 h-4 sm:w-5 sm:h-5" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
  212.                   <path d="M4 4.66504H6.66667L7.2 7.33171L4 4.66504ZM9.33333 17.9984H22.6667L28 7.33171H7.2L9.33333 17.9984ZM9.33333 17.9984L7.2 7.33171L9.33333 17.9984ZM9.33333 17.9984L6.27615 21.0556C5.43619 21.8956 6.03108 23.3317 7.21895 23.3317H22.6667L9.33333 17.9984ZM22.6667 23.3317C21.1939 23.3317 20 24.5256 20 25.9984C20 27.4712 21.1939 28.665 22.6667 28.665C24.1395 28.665 25.3333 27.4712 25.3333 25.9984C25.3333 24.5256 24.1395 23.3317 22.6667 23.3317ZM12 25.9984C12 27.4712 10.8061 28.665 9.33333 28.665C7.86057 28.665 6.66667 27.4712 6.66667 25.9984C6.66667 24.5256 7.86057 23.3317 9.33333 23.3317C10.8061 23.3317 12 24.5256 12 25.9984Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  213.                 </svg>
  214.                 
  215.                 <div role="status" class="ml-2 hidden group-disabled:block">
  216.                     <svg aria-hidden="true" class="animate-spin w-4 h-4 sm:w-5 sm:h-5 fill-white text-transparent" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
  217.                         <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
  218.                         <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
  219.                     </svg>
  220.                 </div>
  221.               </button>
  223.               <button type="hidden" class="hidden" aria-hidden="true" data-modal="confirmProduct">{{ 'shopping_cart.add-to-cart'|trans }}</button>
  225.               <div id="ConfirmProduct" data-modal="confirmProduct" tabindex="-1" aria-hidden="true" class="modal-app">
  226.                 <div class="modal-app__backdrop"></div>
  227.                 <div class="modal-app__container">
  228.                   <div class="modal-app__content">
  229.                     <header>
  230.                       <h3 class="text-xl font-bold desktop:text-2xl">
  231.                         {{ "product.confirm.title" | trans }} 
  232.                       </h3>
  233.                     </header>
  235.                     <main class="leading-5 mt-3 mb-4">
  236.                       <p>{{ "product.confirm.desc" | trans }} </p>
  237.                     </main>
  239.                     <a href="{{ path('app_product_add_to_shopping_cart', {'id': product.id, 'isIndividual': false, 'newCart': true}) }}" class="btn btn--primary btn--md btn-buy product-card__price-block__btn">
  240.                       {{ "product.confirm.btn" | trans }} 
  241.                     </a>
  242.                     <button id="CloseConfirmProduct" type="button" class="btn btn--md w-full mt-1">
  243.                       {{ "product.confirm.cancel" | trans }} 
  244.                     </button>
  245.                   </div>
  246.                 </div>
  247.               </div>
  249.             <input type="hidden" class="currentPrice_value" value="{{ product.isSellIsEnought}}" />
  250.             <input type="hidden" class="currentPrice_hidden" name="currentPrice" value="{{product.currentPrice|number_format(2, ',', '.')}}" />
  251.           {% else %}
  252.             <button class="relative group w-full flex bg-slate-900 justify-center font-bold hover:bg-primary-500 rounded p-2 shadow-md transition-colors mb-2 uppercase" data-bs-toggle="modal" data-bs-target="#authOnlyModal">
  253.               <span class="text-white">{{ 'shopping_cart.add-to-cart'|trans }}</span>
  254.               {# <div class="absolute right-3">
  255.                 <svg class="w-6 h-6 p-0.5 rounded-full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" viewBox="0 0 375 374.999991" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="f0fa21525c"><path d="M 128 65.027344 L 248 65.027344 L 248 193 L 128 193 Z M 128 65.027344 " clip-rule="nonzero"/></clipPath><clipPath id="b472474dd1"><path d="M 76 192 L 299 192 L 299 310.277344 L 76 310.277344 Z M 76 192 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#f0fa21525c)"><path fill="#000000" d="M 187.648438 192.242188 C 220.480469 192.242188 247.191406 157.394531 247.191406 124.566406 C 247.191406 91.738281 220.480469 65.027344 187.648438 65.027344 C 154.8125 65.027344 128.101562 91.738281 128.101562 124.566406 C 128.105469 157.394531 154.8125 192.242188 187.648438 192.242188 Z M 187.648438 192.242188 " fill-opacity="1" fill-rule="nonzero"/></g><g clip-path="url(#b472474dd1)"><path fill="#000000" d="M 232.347656 192.851562 C 220.796875 201.648438 206.386719 206.886719 190.78125 206.886719 L 184.511719 206.886719 C 168.902344 206.886719 154.488281 201.648438 142.941406 192.851562 C 105.230469 198.945312 76.429688 231.628906 76.429688 271.054688 C 76.429688 292.714844 126.222656 310.277344 187.648438 310.277344 C 249.066406 310.277344 298.863281 292.714844 298.863281 271.054688 C 298.863281 231.628906 270.058594 198.945312 232.347656 192.851562 Z M 232.347656 192.851562 " fill-opacity="1" fill-rule="nonzero"/></g></svg>
  256.               </div> #}
  257.             </button>
  258.           {% endif %}
  259.         </div>
  260.          <div class="flex justify-between items-center mt-2 pb-2 mb-2">
  261.                 {% set minimunOder = product.getProducer.getOrdersMinimumRequired | default(0) %}
  262.                 {%if minimunOder >0%}
  263.                     {% set totalOrders = product.getCurrentPrice * product.getCurrentQuantityOrdered%}
  264.                     {%if totalOrders > minimunOder%}
  265.                         <span class="text-sm  text-gray-500">{{'product.detail.minimum-producer-order-completed' | trans}}</span>
  266.                     {%else%}
  267.                         {%set totalMinimum = minimunOder - totalOrders%}
  268.                         <span class="text-sm  text-gray-500">{{'product.detail.minimum-order' | trans}} {{productMacros.priceWithDecimals(totalMinimum)}}€ {{'product.detail.minimum-order-end' | trans}}</span>
  269.                     {%endif%}
  270.                 {%endif%}
  271.             </div>   
  272.         <div class="flex my-3 text-xs text-left">
  273.           <svg class="w-6 h-6 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg>
  274.           {% if product.orderDetails|length <= 0 and product.sharedShippingDuration is not null %}
  275.             <!-- The product's been bought (has order details) and shipping durantion is not null -->
  276.             <div class="mt-2">{{ "product.shipping.free-delivery" | trans | raw }} {{ 'now' | date_modify('+' ~ product.sharedShippingDuration ~ ' weekdays') | date() | format_datetime(pattern="d 'de' MMMM") }} {{ "product.shipping.free-delivery-end" | trans | raw }}</div>
  277.           {% else %}
  278.             <div class="mt-2">{{ "product.shipping.free-delivery" | trans | raw }} {{ product.shippingDate | date() | format_datetime(pattern="d 'de' MMMM") }} {{ "product.shipping.free-delivery-end" | trans |raw }}</div>
  279.           {% endif %}
  280.         </div>
  281.         {%if product.getOrderedPriceScales|length >0%}
  282.             {%if product.getPriceScales|length==1%}
  283.                 {%if (product.getPriceScales[0].initialPrice == product.getPriceScales[0].finalPrice and product.getPriceScales|length==1)%}
  284.                 {%else%}
  285.                     {%if app.user%}
  286.                         <div class="flex w-[50%] desktop:w-[40%]  justify-between items-center pb-2">
  287.                             <span class="text-xs text-gray-500">{{'product.mejorprecio' | trans}}</span>
  288.                         </div>
  289.                     {%endif%}
  290.                 {%endif%}
  291.             {%else%}
  292.                 {%if app.user%} 
  293.                     <div class="flex w-[50%] desktop:w-[40%]  justify-between items-center pb-2">
  294.                         <span class="text-xs text-gray-500">{{'product.mejorprecio' | trans}}</span>
  295.                     </div>
  296.                 {%endif%}
  297.             {%endif%}
  299.         {%endif%}
  300.             {% if app.user or (app.user is null and product.isShowPrice) %}
  301.                 {% set minUnits = 1 %}
  302.                 {%if product.getPriceScales|length >1%}
  303.                     <div class="w-[50%] desktop:w-[40%] text-white pb-2 flex">
  304.                         <div class="w-[45%]">
  305.                             <span class="block text-center text-xs text-gray-500">{{'product.cantidad-total-comprada' | trans | raw}}</span>
  306.                         </div>
  307.                         <div class="w-[10%] "></div>
  308.                         <div class="text-right  w-[45%] rounded-r-xl ">                            
  309.                             <span class="block text-center text-xs text-gray-500">{{'product.precio-actual-unidad' | trans | raw}}</span>
  310.                         </div>
  311.                     </div>
  312.                 {%endif%}
  313.                 {%if product.getPriceScales|length >0%}
  314.                     {%set scaleTotal=0 %}
  315.                     {%set scalePrevious = 0 %}
  316.                     {%set scaleTotalPrevious = 0 %}
  317.                     {%set countScale = 0%}
  319.                     {%set allSellProductIfNotComplete = true%}
  320.                     {%set totalAllNotSellProductIfNotComplete = 0%}
  321.                     {% for scale in product.getPriceScales %}
  322.                         {%if not scale.sellProductIfNotComplete%}
  323.                             {%set allSellProductIfNotComplete = false%}
  324.                             {%set totalAllNotSellProductIfNotComplete = totalAllNotSellProductIfNotComplete + 1%}
  325.                         {%endif%}
  326.                     {% endfor %}
  328.                     {% for scale in product.getPriceScales %}
  329.                         {%if (scale.initialPrice == scale.finalPrice  and product.getPriceScales|length==1) %}
  330.                         {%elseif (scale.initialPrice == scale.finalPrice )%}b
  331.                             <div class="w-[50%] desktop:w-[40%]  text-white flex">
  332.                                 <div class="w-[45%] bg-primary {%if product.getCurrentPriceScale.id != scale.id%} bg-opacity-50 {%endif%}">
  333.                                     <span class="block pt-1 pb-1 text-center text-sm tablet:text-base">
  334.                                     {%set scaleTotal = scaleTotal + scale.scaleQuantity%}
  335.                                     {%if scale.isSellProductIfNotComplete%}
  336.                                        {%set scaleTotalPrevious = scaleTotalPrevious + scalePrevious%}
  337.                                     {%endif%}
  338.                                     + {{scaleTotal}}</span>
  339.                                 </div>
  340.                                 <div class="w-[10%] bg-primary {%if product.getCurrentPriceScale.id != scale.id%} bg-opacity-50 {%endif%}" ></div>
  341.                                 <div class="text-right w-[45%] rounded-r-xl  bg-primary {%if product.getCurrentPriceScale.id != scale.id%} bg-opacity-50 {%endif%}">     
  342.                                     {%if scale.sellProductIfNotComplete%}
  343.                                         <span class="block pt-1 pb-1 text-center text-sm tablet:text-base">{{productMacros.priceWithTwoDecimals(scale.initialPrice)}}€</span>
  344.                                     {%else%}
  345.                                         <span class="block pt-1 pb-1 text-center text-sm tablet:text-base">{{productMacros.priceWithTwoDecimals(scale.finalPrice)}}€</span>
  346.                                     {%endif%}
  347.                                 </div>
  348.                             </div>
  349.                         {%else%}
  350.                             <div class="w-[50%] desktop:w-[40%]  text-white flex">
  351.                                 <div class="w-[45%] bg-primary {%if (product.getCurrentPriceScale.id != scale.id) or (product.getCurrentQuantityOrdered >= scale.getTotalMaxQuantity and loop.last and allSellProductIfNotComplete)%} bg-opacity-50 {%endif%}">
  352.                                     <span class="block pt-1 pb-1 text-center text-sm tablet:text-base">
  353.                                     {%set scaleTotal = scaleTotal + scale.scaleQuantity%}
  354.                                     {%if allSellProductIfNotComplete or totalAllNotSellProductIfNotComplete == product.getPriceScales|length%}
  355.                                         {%if totalAllNotSellProductIfNotComplete == product.getPriceScales|length %}
  356.                                             {%if countScale==0 and product.getPriceScales|length >1%}
  357.                                                 1 a {{scale.scaleQuantity}}
  358.                                             {%else%}
  359.                                                 + {{scale.scaleQuantity}}
  360.                                             {%endif%}
  361.                                         {%else%}
  362.                                             {%if countScale==0%}
  363.                                                 1 a {{scale.scaleQuantity}}
  364.                                             {%else%}
  365.                                                 {%set totalAllScale = product.getPriceScales[countScale-1].scaleQuantity + 1%}
  366.                                                 {{totalAllScale}} a {{scaleTotal}}
  367.                                             {%endif%}
  368.                                         {%endif%}
  369.                                     {%else%}
  370.                                         {%if countScale==0 and product.getPriceScales|length  > 1 and product.getPriceScales[1].sellProductIfNotComplete%}
  371.                                             {%set totalFirstScale = scale.scaleQuantity + product.getPriceScales[1].scaleQuantity%}
  372.                                             {{scale.scaleQuantity}} a {{totalFirstScale}}
  373.                                         {%else%}
  374.                                             + {{scaleTotal}}
  375.                                         {%endif%}
  376.                                     {%endif%}
  377.                                     </span>
  378.                                 </div>
  379.                                 <div class="w-[10%] bg-primary {%if (product.getCurrentPriceScale.id != scale.id) or (product.getCurrentQuantityOrdered >= scale.getTotalMaxQuantity and loop.last and allSellProductIfNotComplete)%} bg-opacity-50 {%endif%}" ></div>
  380.                                 <div class="text-right w-[45%] rounded-r-xl  bg-primary {%if (product.getCurrentPriceScale.id != scale.id) or (product.getCurrentQuantityOrdered >= scale.getTotalMaxQuantity and loop.last and allSellProductIfNotComplete)%} bg-opacity-50 {%endif%}">
  381.                                     {%if allSellProductIfNotComplete%}
  382.                                         <span class="block pt-1 pb-1 text-center text-sm tablet:text-base">{{productMacros.priceWithTwoDecimals(scale.initialPrice)}}€</span>
  383.                                     {%elseif totalAllNotSellProductIfNotComplete == product.getPriceScales|length %}
  384.                                          <span class="block pt-1 pb-1 text-center text-sm tablet:text-base">{{productMacros.priceWithTwoDecimals(scale.finalPrice)}}€</span>
  385.                                     {%else%}
  386.                                         {%if countScale > 0 and not product.getPriceScales[countScale-1].sellProductIfNotComplete and scale.sellProductIfNotComplete%}
  387.                                             <span class="block pt-1 pb-1 text-center text-sm tablet:text-base">{{productMacros.priceWithTwoDecimals(scale.finalPrice)}}€</span>
  388.                                         {%else%}
  389.                                             {%if scale.sellProductIfNotComplete%}
  390.                                                 <span class="block pt-1 pb-1 text-center text-sm tablet:text-base">{{productMacros.priceWithTwoDecimals(scale.initialPrice)}}€</span>
  391.                                             {%else%}
  392.                                                 <span class="block pt-1 pb-1 text-center text-sm tablet:text-base">{{productMacros.priceWithTwoDecimals(scale.finalPrice)}}€</span>
  393.                                             {%endif%}
  394.                                         {%endif%}
  395.                                     {%endif%}
  396.                                 </div>
  397.                             </div>
  398.                         {%endif%}
  399.                         {%if loop.last and allSellProductIfNotComplete and scale.initialPrice != scale.finalPrice%}
  400.                             <div class="w-[50%] desktop:w-[40%]  text-white flex">
  401.                                 <div class="w-[45%] bg-primary {%if (product.getCurrentPriceScale.id != scale.id) or (product.getCurrentQuantityOrdered < scale.getTotalMaxQuantity and loop.last and allSellProductIfNotComplete)%} bg-opacity-50 {%endif%}">
  402.                                     <span class="block pt-1 pb-1 text-center text-sm tablet:text-base">
  403.                                     + {{scaleTotal}}
  404.                                     </span>
  405.                                 </div>
  406.                                 <div class="w-[10%] bg-primary {%if (product.getCurrentPriceScale.id != scale.id) or (product.getCurrentQuantityOrdered < scale.getTotalMaxQuantity and loop.last and allSellProductIfNotComplete)%} bg-opacity-50 {%endif%}" ></div>
  407.                                 <div class="text-right w-[45%] rounded-r-xl  bg-primary {%if (product.getCurrentPriceScale.id != scale.id) or (product.getCurrentQuantityOrdered < scale.getTotalMaxQuantity and loop.last and allSellProductIfNotComplete)%} bg-opacity-50 {%endif%}">
  408.                                      <span class="block pt-1 pb-1 text-center text-sm tablet:text-base">{{productMacros.priceWithTwoDecimals(scale.finalPrice)}}€</span>
  409.                                 </div>
  410.                             </div>
  411.                         {%endif%}
  412.                         {%set unitScale= minUnits + scale.scaleQuantity%}  
  413.                         {%set scalePrevious = scale.scaleQuantity %}        
  414.                         {%set countScale = countScale+1%}        
  415.                     {% endfor %}
  417.                 {%endif%}
  418.             {%endif%}
  421. {#
  422.         <div class="product-page__excerpt">{{ product.additionalInfo | raw }}</div>
  423. #}
  424.         <hr class="product-page__divider">
  426.         <div class="product-page__order-share">
  427.           <div class="product-page__order-share__block">
  428.               {{ _self.shareButton(product) }}
  429.           </div>
  430.         </div>
  431.       </section>
  432.       <section id="product-page__people-like">
  433.         <div class="flex mb-2 ">
  434.           {% if app.user %}
  435.             <button class="favourite-button bg-primary-500 product-card__actions__btn bg-[#E43369] text-white {{ app.user.getFavouriteProducts().contains(product) ? 'is--favourite' : '' }}" data-product="{{product.id}}" data-url="{{ path('app_product_favourite') }}">
  436.               <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  437.                 <path d="M3.59835 5.59518C2.13388 7.05964 2.13388 9.43399 3.59835 10.8985L10.0001 17.3002L16.4017 10.8985C17.8661 9.43399 17.8661 7.05964 16.4017 5.59518C14.9372 4.13071 12.5628 4.13071 11.0983 5.59518L10.0001 6.69357L8.90167 5.59518C7.43718 4.13071 5.06282 4.13071 3.59835 5.59518Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  438.               </svg>
  439.             </button>
  440.           {% else %}
  441.             <button class="favourite-button  bg-primary-500 product-card__actions__btn bg-[#E43369] text-white" data-modal="login">
  442.               <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  443.                 <path d="M3.59835 5.59518C2.13388 7.05964 2.13388 9.43399 3.59835 10.8985L10.0001 17.3002L16.4017 10.8985C17.8661 9.43399 17.8661 7.05964 16.4017 5.59518C14.9372 4.13071 12.5628 4.13071 11.0983 5.59518L10.0001 6.69357L8.90167 5.59518C7.43718 4.13071 5.06282 4.13071 3.59835 5.59518Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  444.               </svg>
  445.             </button>
  446.           {% endif %}
  447.           <h2 class="mt-2 ml-2 text-base">{{ "product.followers.liked-by" | trans({'%followers%': product.userFavourites.count}) | raw }}</h2> 
  448.         </div>
  449.         <div class="relative bottom-0 left-0 flex items-center product-card__avatars">
  450.           <div class="product-card__avatars__people">
  451.             {% for user in product.randomUserFavourites | slice(0, 5) %}
  452.               {% if user.avatar is not null %}
  453.                 {{ avatar.create(path('app_media_thumbnail_display', {'id': user.avatar.id}), user.name, 'lg') }}
  454.               {% else %}
  455.                 {{ avatar.create(asset('build/images/generic-user.svg'), user.name, 'lg') }}
  456.               {% endif %}
  457.             {% endfor %}
  458.           </div>
  459. {#
  460.           <span class="product-page__people-like__msg">
  461.             <span class="text-base">{{ "product.followers.favourites" | trans({'%followers%': product.userFavourites.count}) | raw }}</span>
  462.             <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
  463.               <path fill-rule="evenodd" clip-rule="evenodd" d="M3.65501 4.78458C4.33011 4.10969 5.24562 3.73055 6.20021 3.73055C7.1548 3.73055 8.07031 4.10969 8.74541 4.78458L9.80021 5.83848L10.855 4.78458C11.1871 4.44075 11.5843 4.16649 12.0236 3.97782C12.4628 3.78915 12.9352 3.68984 13.4132 3.68568C13.8912 3.68153 14.3652 3.77262 14.8076 3.95363C15.2501 4.13464 15.652 4.40195 15.99 4.73996C16.328 5.07798 16.5954 5.47992 16.7764 5.92235C16.9574 6.36478 17.0485 6.83882 17.0443 7.31683C17.0402 7.79483 16.9409 8.26723 16.7522 8.70644C16.5635 9.14566 16.2892 9.5429 15.9454 9.87498L9.80021 16.0211L3.65501 9.87498C2.98012 9.19988 2.60098 8.28438 2.60098 7.32978C2.60098 6.37519 2.98012 5.45968 3.65501 4.78458Z" fill="#E43369"/>
  464.             </svg>
  465.           </span>
  466. #}
  467.           {% if product.userFavourites.count > 0 %}
  468.             {{ button.create('Ver todos', '', 'primary', 'sm', "#", 'rounded-full ml-auto text-white', '', 'modal-triwers', product.id) }}
  469.           {% endif %}
  470.         </div>
  471.       </section>
  472.     </section>
  473.   </div>
  474.   <section class="relative py-4 bg-primary desktop:py-16 desktop:pt-0 top-6">
  475.     <img src="{{ asset('build/images/border-primary.svg') }}" class="absolute left-0 w-full -mb-px desktop:hidden bottom-full"/>
  476.     <img src="{{ asset('build/images/border-primary-lg.svg') }}" class="absolute left-0 hidden w-full -mb-px desktop:block bottom-full"/>
  477.     <div class="product-page__container">
  478.       {{ tabs.tabs(tabData) }}
  479.     </div>
  480.   </section>
  481. </section>
  483. {% endblock %}
  484. {% block frequent_questions %}
  485. {% endblock frequent_questions %}
  488. {# Product Macros #}
  490. {% macro shareButton(product,price) %}
  491.     {% set influencerShared = getInfluencerShared(product) %}
  492.     {% if influencerShared %}
  493.         {{ _self.shareButtonInfluencer(influencerShared) }}
  494.     {% else %}
  495.         {{ _self.shareButtonNormal(product,price) }}
  496.     {% endif %}
  497. {% endmacro %}
  499. {% macro shareButtonInfluencer(influencerShared) %}
  500.     {% set sbTitle = 'general.offer_shared_by_influencer_title'|trans %}
  501.     <button type="button" name="share-popover" class="btn btn--sm btn--white-border" data-bs-toggle="popover"
  502.         data-bs-placement="top" data-bs-container="body" data-bs-html="true" data-bs-sanitize="false" data-bs-content='
  503.     <div class="share-buttons share-buttons-init" data-sb-url="{{ influencerShared|influencer_share_url  }}"
  504.       data-sb-title="{{ sbTitle }}">
  505.       <a class="email"></a>
  506.       <a class="twitter"></a>
  507.       <a class="facebook"></a>
  508.       <a class="whatsapp"></a>
  509.       <a class="telegram"></a>
  510.     </div>
  511.   '>
  512.         <img src="{{ asset('build/images/share.svg') }}" height="15rem" width="15rem" alt="Share">
  513.         <small>{{ "general.share" | trans }}</small>
  515.         <span class="badge rounded-pill bg-primary">{{ influencerShared.totalReferredPoints|format_currency('EUR') }}</span>
  516.     </button>
  517. {% endmacro %}
  519. {% macro shareButtonNormal(product, price) %}
  520.     {% set alreadyBought = get_already_bought(product) %}
  521.     {% if alreadyBought %}
  522.         {% set sbTitle = 'general.offerpurchasedbyuser'|trans %}
  523.     {% else %}
  524.         {% set sbTitle = 'general.offer_found_by_user'|trans %}
  525.     {% endif %}
  527.     <button type="button" name="share-popover" class="product-page__share-btn" data-bs-toggle="popover"
  528.         data-bs-placement="top" data-bs-container="body" data-bs-html="true" data-bs-sanitize="false" data-bs-content='
  529.                         <div class="share-buttons share-buttons-init" data-sb-url="{{ product|product_share_url  }}"
  530.                             data-sb-title="{{ sbTitle }}">
  531.                             <a class="email"></a>
  532.                             <a class="twitter"></a>
  533.                             <a class="facebook"></a>
  534.                             <a class="whatsapp"></a>
  535.                             <a class="telegram"></a>
  536.                         </div>
  537.                     '>
  538.         <svg class="w-9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><path d="M30.3 13.7L25 8.4l-5.3 5.3-1.4-1.4L25 5.6l6.7 6.7z"/><path d="M24 7h2v21h-2z"/><path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z"/></svg>
  539.     {# <svg class="w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><path d="M30.3 13.7L25 8.4l-5.3 5.3-1.4-1.4L25 5.6l6.7 6.7z"/><path d="M24 7h2v21h-2z"/><path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z"/></svg> #}
  541.         <strong class="font-bold text-primary">{{ price }}</strong>
  543.         {% set coinsIfItIsShared = getCoinsIfItIsShared(product) %}
  544.         {% if coinsIfItIsShared != null and alreadyBought == true %}
  545.             <span class="badge rounded-pill bg-primary">{{ coinsIfItIsShared|format_currency('EUR') }}</span>
  546.         {% endif %}
  547.     </button>
  548. {% endmacro %}