src/Trinity/WebshopBundle/Resources/views/elements/productCardSimple.html.twig line 1

Open in your IDE?
  1. {% trans_default_domain 'webshop' %}
  3. {% if config is defined %}
  4.   {% set allow_cart = config.allow_cart ?? false %}
  5.   {% set show_image = config.show_image ?? false %}
  6.   {% set allow_list = config.allow_list ?? false %}
  7.   {% set show_price = config.show_price ?? false %}
  8. {% else %}
  9.   {% set allow_cart = true %}
  10.   {% set show_image = true %}
  11.   {% set allow_list = true %}
  12.   {% set show_price = true %}
  13. {% endif %}
  15. {% if WebshopSettings is defined %}
  16.   {% if WebshopSettings.getB2b and WebshopSettings.hidePricesGuest %}
  17.     {% set show_price = false %}
  18.   {% endif %}
  19. {% endif %}
  21. {% if OriginalProduct is not defined %}
  22.   {% set OriginalProduct = Product %}
  23. {% endif %}
  24. {# {% if (OriginalProduct.type != 1 and OriginalProduct.type != 2) or OriginalProduct.linkedProducts.count > 0 %} #}
  26. {% set productCardImageAlt = OriginalProduct.label %}
  28. {% if file_exists('../templates/override/webshop/productCardSimple.html.twig') %}
  29.   {% include 'override/webshop/productCardSimple.html.twig' %}
  30. {% else %}
  31.   <div class="card productCard Simple">
  32.   <a href="{{Product.uri}}">
  33.     {% if show_image %}
  34.       <span class="badge-wrapper">
  35.         {% if OriginalProduct.hasPromotion or (OriginalProduct.priceSale is not empty and OriginalProduct.priceSale > 0) %}
  36.           <span class="sale-badge">{{'Sale'|trans}}</span>
  37.         {% endif %}
  39.         {% if OriginalProduct.hasCombi %}
  40.           <span class="combi-badge">{{'Combideal!'|trans({}, 'webshop', app.request.locale)}}</span>
  41.         {% endif %}
  43.         {% if OriginalProduct.exclusive is defined and OriginalProduct.exclusive %}
  44.           <span class="exclusive-badge">{{'Exclusief'|trans({}, 'webshop', app.request.locale)}}</span>
  45.         {% endif %}
  46.         
  47.             {% if OriginalProduct.hasCombi %}
  48.               <span class="combi-badge">{{'Combideal!'|trans({}, 'webshop', app.request.locale)}}</span>
  49.             {% endif %}
  50.           </span>
  52.           <div class="card-image {{ (OriginalProduct.media2 is defined and OriginalProduct.media2 is not empty and WebshopSettings.imageSwap) ? 'multi-image' : '' }}">
  53.             <div class="img-first">
  54.                 <div class="lcp">
  55.             <picture>
  56.               {% if OriginalProduct.mediaWebp is not empty %}
  57.                 <source srcset="{{OriginalProduct.mediaWebp}}" type="image/webp">
  58.               {% endif %}
  59.             <source srcset="{{OriginalProduct.media}}" type="{{OriginalProduct.mediaMime}}">
  60.             <img src="{{OriginalProduct.media}}" width="255" height="190" data-alt="{{productCardImageAlt}}" loading="lazy">
  61.             </picture>
  62.               </div>
  63. {# dit werkt niet omdat OriginalProduct niet een entity is. Mischien oplossen door images als html te bouwen en die aan te leveren.
  64.               <div class="lcp">
  65.                 {% if OriginalProduct.media is defined and OriginalProduct.media is not empty %}
  67.         {% if OriginalProduct.new and OriginalProduct.newFrom <= date() and (OriginalProduct.newTill >= date() or OriginalProduct.newTill is empty) %}
  68.           <span class="new-badge">{{'Nieuw'|trans}}</span>
  69.           <br/>
  70.         {% endif %}
  71.       </span>
  73.       <div class="card-image {{ (OriginalProduct.media2 is defined and OriginalProduct.media2 is not empty and WebshopSettings.imageSwap) ? 'multi-image' : '' }}">
  74.         <div class="img-first">
  75.           <div class="lcp">
  76.           <picture>
  77.           {% if OriginalProduct.mediaWebp is not empty %}
  78.               <source srcset="{{OriginalProduct.mediaWebp}}" type="image/webp">
  79.           {% endif %}
  80.             <source srcset="{{OriginalProduct.media}}" type="{{OriginalProduct.mediaMime}}">
  81.             <img src="{{OriginalProduct.media}}" width="255" height="190" data-alt="{{productCardImageAlt}}" loading="lazy">
  82.           </picture>
  83.       </div>
  84.       {# dit werkt niet omdat OriginalProduct niet een entity is. Mischien oplossen door images als html te bouwen en die aan te leveren.
  85.           <div class="lcp">
  86.             {% if OriginalProduct.media is defined and OriginalProduct.media is not empty %}
  88.               {% if OriginalProduct.media.hasBlurred %}
  89.                 <picture>
  90.                   {% if OriginalProduct.media.hasWebp() %}
  91.                   <source srcset="{{OriginalProduct.media.getBlurredWebpPath('small')}}" type="image/webp">
  92.                   {% endif %}
  93.                   <source srcset="{{OriginalProduct.media.getBlurredWebPath('small')}}" type="{{OriginalProduct.media.mime}}">
  94.                   <img class="lq" alt="{{OriginalProduct.media.description_alt}}" src="{{OriginalProduct.media.getBlurredWebPath('small')}}" type="{{OriginalProduct.media.mime}}" loading="lazy" width="{{OriginalProduct.media.width}}" height="{{OriginalProduct.media.height}}" style="opacity: 1;">
  95.                 </picture>
  96.               {% endif %}
  98.               <picture>
  99.                 {% if OriginalProduct.media.hasWebp() %}
  100.                   <source srcset="{{OriginalProduct.media.getWebpPath('medium')}}" type="image/webp">
  101.                 {% endif %}
  102.                 <source srcset="{{OriginalProduct.media.getWebPath('medium')}}" type="{{ OriginalProduct.media.mime }}">
  103.                 <img class="hq" alt="{{OriginalProduct.media.description_alt}}" src="{{OriginalProduct.media.getWebPath('medium')}}" type="{{OriginalProduct.media.mime}}" loading="lazy" width="{{OriginalProduct.media.width}}" height="{{OriginalProduct.media.height}}" onload="this.style.opacity=1; {% if OriginalProduct.media.hasBlurred %}this.closest('.lcp').getElementsByClassName('lq')[0].style.opacity=0;{% endif %}" style="opacity: 0;">
  104.               </picture>
  106.             {% else %}
  108.               <picture>
  109.                 <img class="hq" src="{{(WebshopSettings.getDefaultProductImage is not empty ? WebshopSettings.getDefaultProductImage : '/bundles/trinitywebshop/img/no-product-image.png')}}" loading="lazy" onload="this.style.opacity=1" style="opacity: 0;">
  110.               </picture>
  112.             {% endif %}
  113.           </div>
  114.         #}
  115.         </div>
  117.         {% if WebshopSettings.imageSwap and (OriginalProduct.media2 is defined and OriginalProduct.media2 is not empty) %}
  118.         <div class="img-second">
  119.               <div class="lcp">
  120.                     <picture>
  121.                     {% if OriginalProduct.mediaWebp2 is not empty %}
  122.                         <source srcset="{{OriginalProduct.mediaWebp2}}" type="image/webp">
  123.                     {% endif %}
  124.                       <source srcset="{{OriginalProduct.media2}}" type="{{OriginalProduct.mediaMime2}}">
  125.                         <img src="{{OriginalProduct.media2}}" width="255" height="190" data-alt="{{productCardImageAlt}}" loading="lazy">
  126.                     </picture>
  127.               </div>
  128.             {# dit werkt niet omdat OriginalProduct niet een entity is
  129.                 <div class="lcp">
  130.                 {% if OriginalProduct.media2 is defined and OriginalProduct.media2 is not empty %}
  131.                   {% if OriginalProduct.media2.hasBlurred %}
  132.                     <picture>
  133.                       {% if OriginalProduct.media2.hasWebp() %}
  134.                       <source srcset="{{OriginalProduct.media2.getBlurredWebpPath}}" type="image/webp">
  135.                       {% endif %}
  136.                       <source srcset="{{OriginalProduct.media2.getBlurredWebPath}}" type="{{OriginalProduct.media2.mime}}">
  137.                       <img class="lq" alt="{{OriginalProduct.media2.description_alt}}" src="{{OriginalProduct.media2.getBlurredWebPath}}" type="{{OriginalProduct.media2.mime}}" loading="lazy" width="{{OriginalProduct.media2.width}}" height="{{OriginalProduct.media2.height}}" style="opacity: 1;">
  138.                     </picture>
  139.                   {% endif %}
  141.                   <picture>
  142.                     {% if OriginalProduct.media2.hasWebp() %}
  143.                       <source srcset="{{OriginalProduct.media2.getWebpPath}}" type="image/webp">
  144.                     {% endif %}
  145.                     <source srcset="{{OriginalProduct.media2}}" type="{{ OriginalProduct.media2.mime }}">
  146.                     <img class="hq" alt="{{OriginalProduct.media2.description_alt}}" src="{{OriginalProduct.media2}}" type="{{OriginalProduct.media2.mime}}" loading="lazy" width="{{OriginalProduct.media2.width}}" height="{{OriginalProduct.media2.height}}" onload="this.style.opacity=1; {% if OriginalProduct.media2.hasBlurred %}this.closest('.lcp').getElementsByClassName('lq')[0].style.opacity=0;{% endif %}" style="opacity: 0;">
  147.                   </picture>
  149.                 {% else %}
  151.                   <picture>
  152.                     <img class="hq" src="{{(WebshopSettings.getDefaultProductImage is not empty ? WebshopSettings.getDefaultProductImage : '/bundles/trinitywebshop/img/no-product-image.png')}}" loading="lazy" onload="this.style.opacity=1" style="opacity: 0;">
  153.                   </picture>
  154.                 {% endif %}
  155.                     </div>
  156.               #}
  157.             </div>
  158.           {% endif %}
  159.         </div>
  160.         {% endif %}
  161.         <div class="card-body">
  162.           <div class="card-content">
  163.             <h5 class="card-title">
  164.               {{(OriginalProduct.brand ? OriginalProduct.brand.label ~ ' ' : '') ~ (OriginalProduct.label|raw)}}
  165.             </h5>
  167.             {% if hide_intro is not defined %}
  168.               <div class="intro-wrapper">
  169.                 {# <div class="intro">{{OriginalProduct.intro|striptags}}</div> #}
  170.                 <div class="intro">{{OriginalProduct.intro|raw}}</div>
  171.               </div>
  172.             {% endif %}
  173.           </div>
  175.           <div class="card-bottom">
  176.             <div class="card-col">
  177.               {# {{dump(OriginalProduct.label)}} #}
  178.               {% if show_price %}
  179.                 <div class="pricing">
  180.                   {{Product.price|raw}}
  181.                 </div>
  182.               {% endif %}
  183.             </div>
  184.             <div class="card-col">
  185.               {% if WebshopSettings.getB2b and WebshopSettings.hidePricesGuest %}
  186.               {% else %}
  187.                 {% if allow_cart or allow_list %}
  188.                   {% if allow_cart and OriginalProduct.type != 1 and OriginalProduct.type != 2 %}
  189.                     {% if OriginalProduct.canOrder %}
  190.                       <button type="button" data-id="{{OriginalProduct.id}}" class="btn order" data-catid="{{Product.category.id}}" title="Toevoegen aan winkelwagen">
  191.                         <i class="fa fa-shopping-cart"></i>
  192.                         <i class="fa fa-plus"></i>
  193.                       </button>
  194.                     {% else %}
  195.                       <button type="button" disabled="disabled" data-id="{{OriginalProduct.id}}" class="btn btn-disabled" data-catid="{{Product.category.id}}" title="Niet op voorraad">
  196.                         <i class="fa fa-shopping-cart"></i>
  197.                       </button>
  198.                     {% endif %}
  199.                   {% endif %}
  200.                 {% endif %}
  201.               {% endif %}
  202.             </div>
  203.           </div>
  205.           {#
  206.           {% if OriginalProduct is defined and OriginalProduct.type == 1 %}
  207.             <div id="multiple-options-available">
  208.               {{'Meerdere varianten beschikbaar.'|trans}}
  209.             </div>
  210.           {% endif %}
  211.           #}
  212.         </div>
  213.       </a>
  214.     </div>
  215. {% endif %}
  216. {# {% endif %} #}