src/Trinity/WebshopBundle/Resources/views/front/product.html.twig line 1

Open in your IDE?
  1. {% extends ['@TrinityWebshop/shop_wrapper.html.twig'] %}
  2. {% trans_default_domain 'webshop' %}
  4. {% block ogmetatags %}
  5.     {% set currentUrl = host ~ '/' ~ Category.uri ~ '/' ~ Product.slug %}
  6.     {% set ogmetatitle = customTitle is defined and customTitle is not empty ? customTitle : '' %}
  7.     {% if ogmetatitle is empty %}
  8.         {% set ogmetatitle = Page.getTitle | raw %}
  9.     {% endif %}
  11.     <meta property="og:title" content="{{ ogmetatitle }}" />
  12.     {% if Settings.label is not empty %}
  13.         <meta property="og:site_name" content="{{ Settings.label }}" />
  14.     {% endif %}
  15.     {% if Product.seoDescription is not empty %}
  16.         <meta property="og:description" content="{{ Product.seoDescription }}" />
  17.     {% else %}
  18.         <meta property="og:description" content="{{ Product.label }}" />
  19.     {% endif %}
  20.     <meta property="og:type" content="website" />
  21.     {# article, book, profile, website #}
  22.     <meta property="og:url" content="{{ currentUrl }}" />
  23.     {% if Product.media.count %}
  24.         {% if Product.media.first.hasRemoteUrl is defined and Product.media.first.hasRemoteUrl() %}
  25.             <meta property="og:image" content="{{ 'https:/' ~ asset(Product.media.first.getWebPath('medium')) }}" />
  26.         {% else %}
  27.             <meta property="og:image" content="{{ host ~ asset(Product.media.first.getWebPath('medium')) }}" />
  28.         {% endif %}
  29.     {% endif %}
  30.     {% if app.environment != 'dev' %}
  31.         <script type="application/ld+json">
  32.             {
  33.                 "@context": "https://schema.org/",
  34.                 "@type": "Product",
  35.                 "name": "{{ ogmetatitle }}",
  36.                 {% if Product.seoDescription is not empty %}
  37.                     "description": "{{Product.seoDescription}}",
  38.                 {% elseif Product.description is not empty %}
  39.                     "description": "{{ Product.description }}",
  40.                 {% elseif Product.intro is not empty %}
  41.                     "description": "{{ Product.intro }}",
  42.                 {% elseif Product.label is not empty %}
  43.                     "description": "{{ Product.label }}",
  44.                 {% endif %}
  45.                 {% if Product.media.count %}
  46.                     "image": [
  47.                         {% for i, M in Product.media %}
  48.                             {% if M.hasRemoteUrl is defined and M.hasRemoteUrl() %}
  49.                                 "{{'https:' ~ path('homepage') ~ M.webPath()}}"{{i < (Product.media.count - 1) ? ',' : ''}}
  50.                             {% else %}
  51.                                 "{{host ~ path('homepage') ~ M.webPath()}}"{{i < (Product.media.count - 1) ? ',' : ''}}
  52.                             {% endif %}
  53.                         {% endfor %}
  54.                     ],
  55.                 {% endif %}
  56.                 "sku": "{{ Product.sku }}",
  57.                 "mpn": "{{ Product.number }}",
  58.                 {% if total_rating.total > 0 %}
  59.                     "aggregateRating": {
  60.                         "@type": "AggregateRating",
  61.                         "ratingValue": "{{total_rating.avg}}",
  62.                         "reviewCount": "{{total_rating.total}}"
  63.                     },
  64.                 {% endif %}
  65.                 "offers": {
  66.                     "@type": "Offer",
  67.                     "url": "{{currentUrl}}",
  68.                     "priceCurrency": {% if WebshopSettings.currency is not empty %}"{{ WebshopSettings.currency.key }}"{% else %}"EUR"{% endif %},
  69.                     "price": "{{Product.getDisplayPriceFloat(WebshopSettings, WebshopCustomer, app.user, true)|number_format(2, '.', '')}}",
  70.                     "priceValidUntil": "{{"now"|date_modify("+7 day")|date("Y-m-d")}}",
  71.                     "itemCondition": "https://schema.org/NewCondition",
  72.                     "availability": "{% if Product.canOrder and Product.stockAmount < sl.medium and Product.stock %}https://schema.org/LimitedAvailability{% elseif Product.canOrder %}https://schema.org/InStock{% else %}https://schema.org/SoldOut{% endif %}"
  73.                 }
  74.             }
  75.         </script>
  76.     {% endif %}
  78.     {% if canonical_url is not empty %}
  79.         <link rel="canonical" href="{{ host ~ '/' ~ canonical_url}}" />
  80.     {% endif %}
  81. {% endblock %}
  83. {% block shop_header %}
  84.     <link rel="preload" href="/bundles/cms/featherlight/release/featherlight.min.css" type="text/css" as="style" onload="this.onload=null;this.rel='stylesheet';" />
  86.     <script defer src="/bundles/trinitywebshop/bootstrap-notify-3.1.3/bootstrap-notify.min.js" type="text/javascript" charset="utf-8"></script>
  87.     <script defer src="/bundles/cms/featherlight/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
  88.     <script defer src="/bundles/trinitywebshop/js/jquery.ez-plus.min.js"></script>
  90.     {% if overridekey is defined and overridekey is not empty and file_exists('custom/webshop/' ~ overridekey ~ '/js/product.js') %}
  91.         <script defer type="text/javascript" src="{{'/custom/webshop/' ~ overridekey ~ '/js/product.js'}}"></script>
  92.     {% elseif file_exists('custom/webshop/js/product.js') %}
  93.         <script defer type="text/javascript" src="{{'/custom/webshop/js/product.js'}}"></script>
  94.     {% else %}
  95.         <script defer type="text/javascript" src="{{'/bundles/trinitywebshop/js/product.js'}}?t={{'now'|date('YmdH')}}"></script>
  96.     {% endif %}
  98.     {% if overridekey is defined and overridekey is not empty and file_exists('custom/webshop/' ~ overridekey ~ '/js/product_configurable.js') %}
  99.         <script defer type="text/javascript" src="{{'/custom/webshop/' ~ overridekey ~ '/js/product_configurable.js'}}"></script>
  100.     {% elseif file_exists('custom/webshop/js/product_configurable.js') %}
  101.         <script defer type="text/javascript" src="{{'/custom/webshop/js/product_configurable.js'}}"></script>
  102.     {% else %}
  103.         <script defer type="text/javascript" src="{{'/bundles/trinitywebshop/js/product_configurable.js'}}?t={{'now'|date('YmdH')}}"></script>
  104.     {% endif %}
  105. {% endblock %}
  107. {% block pagestyle %}
  108.     {% if overridekey is not defined or overridekey is empty %}
  109.         {% set overridekey = '' %}
  110.     {% else %}
  111.         {% set overridekey = overridekey ~ '/' %}
  112.     {% endif %}
  113.     <style>
  114.         {% include 'override/' ~ overridekey ~ 'webshop/product-critical.html.twig' ignore missing %}
  115.     </style>
  116. {% endblock %}
  118. {% block shop_body %}
  120.     {% if Settings.facebookpixel is not empty %}
  121.         <script>
  122.             fbq(
  123.                 'track', 'ViewContent', {
  124.                     content_type: 'product',
  125.                     content_ids: ['{{Product.sku}}'],
  126.                     content_name: '{{(Product.Brand ? Product.Brand.label ~ ' ' : '') ~ Product.label}}',
  127.                     content_category: '{{Product.category.first.category.label}}',
  128.                     value: {{Product.getRealPriceIncl(null, false, false, WebshopCustomer)}},
  129.                     currency: 'EUR'
  130.                 }
  131.             );
  132.         </script>
  133.     {% endif %}
  135.     <script>
  136.         var slickSettingsOne = {
  137.             slidesToShow: 1,
  138.             slidesToScroll: 1,
  139.             arrows: true,
  140.             // fade: true,
  141.             asNavFor: '.slider-nav'
  142.         };
  143.         var slickSettingsTwo = {
  144.             slidesToShow: 4,
  145.             slidesToScroll: 1,
  146.             asNavFor: '.slider-for',
  147.             dots: false,
  148.             arrows: false,
  149.             // centerMode: true,
  150.             focusOnSelect: true
  151.         };
  152.     </script>
  155.     <script>
  156.         var zoomOptions = {
  157.             zoomType: 'lens',
  158.             lensShape: 'round',
  159.             lensSize: 250
  160.         };
  161.     </script>
  163.     <input type="hidden" id="current-amount" name="current-amount" />
  165.     {% set currentUri = path('homepage') ~ Category.uri ~ '/' ~ Product.slug %}
  166.     {% set currentUrl = url('homepage') ~ Category.uri ~ '/' ~ Product.slug %}
  167.     {% if Settings.overridekey is defined and Settings.overridekey is not empty %}
  168.         {% set overridekey = Settings.overridekey %}
  169.     {% endif %}
  170.     {% if Product.templateKey is defined and Product.templateKey is not empty %}
  171.         {% set customTemplate = Product.templateKey %}
  172.     {% endif %}
  174.     {% if customTemplate is defined and customTemplate is not empty and file_exists('../templates/override/webshop/layouts/product/' ~ customTemplate) %}
  175.         {% include 'override/webshop/layouts/product/' ~ customTemplate %}
  176.     {% elseif overridekey is defined and overridekey is not empty and file_exists('../templates/override/' ~ overridekey ~ '/webshop/product.html.twig') %}
  177.         {% include 'override/' ~ overridekey ~ '/webshop/product.html.twig' %}
  178.     {% elseif file_exists('../templates/override/webshop/product.html.twig') %}
  179.         {% include 'override/webshop/product.html.twig' %}
  180.     {% else %}
  182.     <script>
  183.         var productGalleryThumbs;
  184.         var productGalleryTop;
  185.         var lg;
  186.     </script>
  188.     {% if Settings.baseuri is empty %}
  189.         {% set site_baseuri = '' %}
  190.     {% else %}
  191.         {% set site_baseuri = Settings.baseuri | replace({'/': ''}) ~ '/' %}
  192.     {% endif %}
  194.     {% set childProductSale = false %}
  195.     {% if OriginalProduct.linkedProducts.count > 0 %}
  196.         {% for CP in OriginalProduct.linkedProducts %}
  197.             {% if CP.hasPromotion or (CP.priceSale is not empty and CP.priceSale > 0) %}
  198.                 {% set childProductSale = true %}
  199.             {% endif %}
  200.         {% endfor %}
  201.     {% endif %}
  203.     {% set productUrl = (WebshopSettings is defined and WebshopSettings.uri ? url('homepage') ~ WebshopSettings.uri : url('homepage') ~ site_baseuri ) ~ (Category.category is defined ? Category.category.uri : Category.uri) ~ '/' ~ (OriginalProduct is defined ? OriginalProduct.slug : Product.slug) %}
  205.     <div class="webshop product-type-{{Product.type}}">
  206.         <div class="compare-popup" style="display:none;">
  207.             <div class="popup-title">
  208.                 {{ 'Vergelijk producten' | trans({}, 'webshop', app.request.locale) | raw }}
  209.                 <i class="fa fa-angle-down"></i>
  210.             </div>
  211.             <div id="compare-bar">
  212.                 <div id="compare-products"></div>
  213.                 <div id="compare-btns">
  214.                     <a href="javascript:compareNow();" class="btn btn-primary">{{ 'Vergelijken' | trans({}, 'webshop', app.request.locale) | raw }}</a>
  215.                     <a href="javascript:compareClear();" class="btn btn-blank">
  216.                         {# {{ 'Wissen' | trans({}, 'webshop', app.request.locale) | raw }} #}
  217.                         <i class="fa fa-trash-alt"></i>
  218.                     </a>
  219.                 </div>
  220.             </div>
  221.         </div>
  223.         <section class="{{Product.slug}} catalog-product-view" id="product-{{Product.slug}}" style="position: relative;">
  224.             <input type="hidden" id="product_type" value="{{Product.type}}"/>
  225.             <div class="container">
  226.             <div class="breadcrumbs-bar">
  227.             <div class="d-flex align-items-center justify-content-between">
  228.             {{ wo_render_breadcrumbs() }}
  230.             <div class="back-btn d-lg-none">
  231.             <a href="javascript:history.back()"><i class="fa fa-arrow-left"></i> {{ 'Terug'|trans({}, 'webshop', app.request.locale) }}</a>
  232.             </div>
  234.             <div class="page-tools">
  235.             <a href="#" class="add-to-list d-none" data-id="{{Product.id}}" title="Toevoegen aan favorieten"><i class="{{isLinked ? 'fa' : 'far'}} fa-heart"></i></a>
  237.             {# <a href="#" onclick="return compareProduct(this);" data-id="{{Product.id}}" data-label="{{(Product.Brand ? Product.Brand.label ~ ' ' : '') ~ Product.label}}" data-image="{{Product.media.count ? '/' ~ Product.media.first.webPath : ''}}" title="Product vergelijken">
  238.             <i class="fa fa-random"></i>
  239.             {{'Vergelijken'|trans({}, 'webshop', app.request.locale)}}
  240.             </a> #}
  242.             {# <a href="javascript:window.print();" title="Pagina afdrukken">
  243.             <i class="fa fa-print"></i>
  244.             </a> #}
  246.             <div class="dropdown" title="Pagina delen">
  247.             <div class="dropdown-toggle" type="button" id="share-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  248.             <i class="fa fa-share-alt"></i>
  249.             </div>
  251.             <div class="dropdown-menu" aria-labelledby="share-dropdown">
  252.             {% include '@TrinityWebshop/front/share.html.twig' %}
  253.             </div>
  255.             </div>
  256.             </div>
  257.             </div>
  258.             </div>
  260.             <div class="pd-top-wrapper-mobile"></div>
  262.             <div class="row">
  263.             <div class="col-12 col-md-12">
  264.             <div class="row">
  265.             <div class="col-12 col-md-6 col-lg-7 image">
  266.             <div id="pd-media">
  267.             <div class="badge-wrapper">
  268.             {% if (OriginalProduct.hasPromotion or (OriginalProduct.priceSale is not empty and OriginalProduct.priceSale > 0)) or childProductSale %}
  269.             <span class="sale-badge">{{'Sale'|trans({}, 'webshop', app.request.locale)}}</span>
  270.             {% endif %}
  272.             {% if OriginalProduct.exclusive %}
  273.             <span class="exclusive-badge">{{'Exclusief'|trans({}, 'webshop', app.request.locale)}}</span>
  274.             {% endif %}
  276.             {% if Product.hasCombi() %}
  277.             <span class="combi-badge">{{'Combideal!'|trans({}, 'webshop', app.request.locale)}}</span>
  278.             {% endif %}
  280.             {% if OriginalProduct.new and OriginalProduct.newFrom <= date() and (OriginalProduct.newTill >= date() or OriginalProduct.newTill is empty) %}
  281.             <span class="new-badge">{{'Nieuw'|trans({}, 'webshop', app.request.locale)}}</span>
  282.             {% endif %}
  283.             </div>
  285.             {% set media = Product.media %}
  286.             {% if (OriginalProduct.type == 1 or OriginalProduct.type == 2) and media.count < 1 %}
  287.             {% set media = OriginalProduct.media %}
  288.             {% endif %}
  290.             {# {% if media.count %} #}
  291.             <div id="product-image-wrapper">
  292.             <div id="product-image">
  293.             <div class="swiper-container product-swiper">
  294.             <!-- Additional required wrapper -->
  295.             <div class="swiper-wrapper" id="product-gallery">
  296.             <!-- Slides -->
  297.             {% if media.count %}
  298.             {% for i, m in media %}
  299.             {% set size = ( m.width > m.height ? m.height : m.width ) %}
  300.             <div class="swiper-slide">
  301.             <a href="/{{m.getWebPath()}}" id="slide-{{i}}">
  303.             <div class="lcp">
  304.             {% if m is not empty %}
  305.             {% if m.hasBlurred %}
  306.             <picture>
  307.             {% if m.hasWebp() %}
  308.             <source srcset="/{{m.getBlurredWebpPath('medium')}}" type="image/webp">
  309.             {% endif %}
  310.             <source srcset="/{{m.getBlurredWebPath('medium')}}" type="{{m.mime}}">
  311.             <img class="lq" alt="{{m.description_alt}}" src="/{{m.getBlurredWebPath('medium')}}" type="{{m.mime}}" loading="eager" width="{{m.width}}" height="{{m.height}}">
  312.             </picture>
  313.             {% endif %}
  314.             <picture>
  315.             {% if m.hasWebp() %}
  316.             <source srcset="/{{m.getWebpPath('large')}}" type="image/webp">
  317.             {% endif %}
  318.             <source srcset="/{{m.getWebPath('large')}}" type="{{ m.mime }}">
  319.             <img class="hq" alt="{{m.description_alt}}" src="/{{m.getWebPath('large')}}" type="{{m.mime}}" loading="eager" width="{{m.width}}" height="{{m.height}}" onload="this.style.opacity=1{% if m.hasBlurred %};this.closest('.lcp').getElementsByClassName('lq')[0].style.opacity=0;{% endif %}" style="opacity: 0;">
  320.             </picture>
  321.             {% endif %}
  322.             </div>
  323.             </a>
  324.             </div>
  325.             {% endfor %}
  326.             {% else %}
  327.             <img src="{{(WebshopSettings.getDefaultProductImage is not empty ? WebshopSettings.getDefaultProductImage : '/bundles/trinitywebshop/img/no-product-image.png')}}" alt="">
  328.             {% endif %}
  329.             </div>
  330.             <div class="swiper-pagination"></div>
  331.             <div class="swiper-button-prev"></div>
  332.             <div class="swiper-button-next"></div>
  333.             </div>
  335.             <div class="swiper-container product-swiper-thumbs">
  336.             <!-- Additional required wrapper -->
  337.             <div class="swiper-wrapper" id="product-thumbs">
  338.             <!-- Slides -->
  339.             {% for i, m in media %}
  340.             {% set size = (
  341.             m.width > m.height
  342.             ? m.height
  343.             : m.width
  344.             ) %}
  345.             <div class="swiper-slide" id="thumb-{{i}}">
  346.             <div class="slide-wrapper">
  347.             <div class="lcp">
  348.             {% if m is not empty %}
  349.             {% if m.hasBlurred %}
  350.             <picture>
  351.             {% if m.hasWebp() %}
  352.             <source srcset="/{{m.getBlurredWebpPath('thumb')}}" type="image/webp">
  353.             {% endif %}
  354.             <source srcset="/{{m.getBlurredWebPath('thumb')}}" type="{{m.mime}}">
  355.             <img class="lq" alt="{{m.description_alt}}" src="/{{m.getBlurredWebPath('thumb')}}" type="{{m.mime}}" loading="eager" width="{{m.width}}" height="{{m.height}}">
  356.             </picture>
  357.             {% endif %}
  358.             <picture>
  359.             {% if m.hasWebp() %}
  360.             <source srcset="/{{m.getWebpPath('thumb')}}" type="image/webp">
  361.             {% endif %}
  362.             <source srcset="/{{m.getWebPath('thumb')}}" type="{{ m.mime }}">
  363.             <img class="hq" alt="{{m.description_alt}}" src="/{{m.getWebPath('thumb')}}" type="{{m.mime}}" loading="lazy" width="{{m.width}}" height="{{m.height}}">
  364.             </picture>
  365.             {% endif %}
  366.             </div>
  367.             </div>
  368.             </div>
  369.             {% endfor %}
  370.             </div>
  372.             {% if WebshopSettings.thumbLimit > 0 and media|length > WebshopSettings.thumbLimit %}
  373.             <div class="swiper-more">
  374.             <div class="slide-wrapper">
  375.             <span>
  376.             +{{media|length - (WebshopSettings.thumbLimit - 1)}}
  377.             </span>
  378.             </div>
  379.             </div>
  380.             {% endif %}
  381.             </div>
  382.             </div>
  383.             </div>
  384.             {# {% else %} #}
  385.             {# <img src="{{(WebshopSettings.getDefaultProductImage is not empty ? WebshopSettings.getDefaultProductImage : '/bundles/trinitywebshop/img/no-product-image.png')}}" alt=""> #}
  386.             {# {% endif %} #}
  387.             </div>
  388.             </div>
  390.             <div class="col-sm-12 col-md-6 col-lg-5 sidebar-productinfo">
  391.             {% if WebshopSettings.custom5 %}
  392.             <div class="custom-block">
  393.             {{WebshopSettings.custom5|raw}}
  394.             </div>
  395.             {% endif %}
  398.             <div class="cards-wrapper">
  399.             <div class="sidebar-loading">
  400.             <i class="fas fa-circle-notch fa-2x fa-spin"></i>
  401.             </div>
  403.             <div class="pd-top-wrapper-desktop">
  404.             <div class="pd-top-wrapper">
  405.             <h1 class="pd-label" id="pd-label">{{(Product.Brand ? Product.Brand.label ~ ' ' : '') ~ Product.label}}</h1>
  407.             {% if Product.labelsub is not empty %}<h4 class="pd-labelsub opacity-50" id="pd-labelsub">{{ Product.labelsub }}</h4>{% endif %}
  409.             {% if Product.giftcard %}
  410.             <span class="pd-giftcard giftcard-value">{{'Waarde:'|trans({}, 'webshop', app.request.locale)}}
  411.             {{Product.giftcard.amount|format_currency('EUR')}}</span>
  412.             {% endif %}
  414.             {% set reviewScore = OriginalProduct.getScore() %}
  415.             {% if reviewScore is not empty and reviewScore > 0 and WebshopSettings.enablereviews and WebshopSettings.averagerev %}
  416.             {% if Product.type == 2 %}
  417.             {% else %}
  418.             <div class="reviews-total">
  419.             <div class="averge-reviews d-flex">
  420.             <a href='#reviews'>
  421.             {# <a onclick="if($("#reviews-tab").length > 0){$("#reviews-tab").trigger("click");$([document.documentElement, document.body]).animate({ scrollTop: $("#reviews-tab").offset().top - 150 }, 200);}else{$([document.documentElement, document.body]).animate({ scrollTop: $("#reviews").offset().top - 150 }, 200);}"></a> #}
  422.             {% set reviewScore = total_rating.avg %}
  423.             <div class="review-content">
  424.             <div class="review-rating">
  425.             {% set half_marked = null %}
  426.             {% for r in range( 0.5, 5, 0.5 ) %}
  427.             {% if r matches '/^\\d+$/' %}
  428.             {# full #}
  429.             {% if r <= ( reviewScore ) %}
  431.             {% if half_marked %}
  432.             {% else %}
  433.             <i class="fas fa-fw fa-star on"></i>
  434.             {% endif %}
  436.             {% else %}
  437.             {# SOLID / ACTIVE #}
  438.             {% if half_marked %}
  439.             {% else %}
  440.             <i class="far fa-fw fa-star"></i>
  441.             {% endif %}
  442.             {% endif %}
  443.             {% set half_marked = false %}
  444.             {% else %}
  445.             {# half #}
  447.             {% if ( reviewScore ) > r or( reviewScore ) < r %}
  448.             {% else %}
  449.             <i class="fas fa-fw fa-star-half-alt on"></i>
  450.             {% set half_marked = true %}
  451.             {% endif %}
  452.             {% endif %}
  453.             {# <span data-rating="{{r - 1}}" class="star {{r matches '/^\\d+$/' ? "full" : "half"}} {{r <= (Review.rating) ? 'on' : ''}}"></span> #}
  454.             {% endfor %}
  455.             ({{total_rating.total}})
  456.             </div>
  457.             </div>
  458.             <div class="total-count">
  459.             ({{total_rating.total}})
  460.             </div>
  461.             </a>
  462.             </div>
  463.             </div>
  464.             {% endif %}
  465.             {% endif %}
  466.             </div>
  467.             </div>
  469.             <div class="card price-info" id="producten">
  470.             <div id="pd-price-block">
  472.             {% set show_price = true %}
  473.             {% if WebshopSettings is defined %}
  474.             {% if WebshopSettings.getB2b and WebshopSettings.hidePricesGuest %}
  475.             {% set show_price = false %}
  476.             {% endif %}
  477.             {% endif %}
  478.             {% if show_price %}
  479.             {{Product.displayPrice(WebshopSettings, WebshopCustomer, app.user, true)|trans_replace('webshop', language)|raw}}
  480.             {% endif %}
  481.             {% if WebshopSettings.hasLeasePrice %}
  482.             {{Product.displayLeasePrice(WebshopSettings, WebshopCustomer, app.user)|trans_replace('webshop', language)|raw}}                        
  483.             {% endif %}
  485.             {% if Product.bulk and Product.bulkOptions is not empty and Product.bulkOptions.amount is defined %}
  486.             <div class="bulk-discount alert alert-info my-3">
  487.             <h5>{{'Stapelkorting'|trans({}, 'webshop', app.request.locale)}}</h5>
  488.             {% for key, amount in Product.bulkOptions.amount %}
  489.             {% set price = Product.bulkOptions.price[key] %}
  490.             <div class="bulk-option">
  491.             <span class="bulk-option-amount">{{'Koop'|trans({}, 'webshop', app.request.locale)}}
  492.             {{amount}}
  493.             {{'voor'|trans({}, 'webshop', app.request.locale)}}</span>
  494.             <span class="bulk-option-price">
  495.             <strong>{{WebshopSettings.currency.format(price)|raw}}</strong>
  496.             {{'per stuk'|trans({}, 'webshop', app.request.locale)}}</span>
  497.             </div>
  498.             {% endfor %}
  499.             </div>
  500.             {% endif %}
  501.             {% if WebshopSettings.showStockIndicator and Product.type != 2 %}
  502.             {% set sl = WebshopSettings.stockLevels %}
  503.             <div class="stock-label">
  504.             {% if Product.canOrder and Product.stockAmount < sl.low and Product.stock %}
  505.             <div class="text-warning">
  506.             <i class="fa fa-circle"></i>
  507.             {{'Zeer beperkt op voorraad'|trans({}, 'webshop', app.request.locale)}}
  508.             </div>
  509.             {% elseif Product.canOrder and Product.stockAmount < sl.medium and Product.stock %}
  510.             <div class="text-warning">
  511.             <i class="fa fa-check"></i>
  512.             {{'Beperkt op voorraad'|trans({}, 'webshop', app.request.locale)}}
  513.             </div>
  514.             {% elseif Product.canOrder %}
  515.             <div class="text-success">
  516.             <i class="fa fa-check"></i>
  517.             {{'Op voorraad'|trans({}, 'webshop', app.request.locale)}}
  518.             </div>
  519.             {% endif %}
  520.             </div>
  521.             {% endif %}
  522.             </div>
  524.             <div class="base-info">
  525.             {# CONFIGURABLE OPTIONS #}
  526.             {% include "@TrinityWebshop/front/product/configurable-options.html.twig" %}
  528.             {% if selectSpecs is not empty %}
  529.             <form id="extra_specs">
  530.             <table class="table">
  531.             {% for data in selectSpecs %}
  532.             {% if not data.Spec.hideproductdetail %}
  533.             <tr>
  534.             <td>{{data.Spec.label}}:</td>
  535.             <td class="td-field">
  536.             <select class="form-select" name="selectSpecs[{{data.Spec.label}}]" style="outline:none;">
  537.             {% for value in data.values %}
  538.             <option value="{{value.id}}">{{value.value}}</option>}
  539.             {% endfor %}
  540.             </select>
  541.             </td>
  542.             </tr>
  543.             {% endif %}
  544.             {% endfor %}
  545.             </table>
  546.             </form>
  547.             {% endif %}
  549.             {% if Product.super.count > 0 %}
  550.             {# SUPER, FURTHER BELOW #}
  551.             {% else %}
  552.             {% if Product.type == 2 %}
  553.             {# GROUPED #}
  554.             <div class="grouped-choices">
  555.             {% if Product.linkedProducts.count %}
  556.             <table class="mt-2">
  557.             {% set productStock = 9999999 %}
  558.             {% for p in Product.getLinkedProductsSorted %}
  559.             {% if p.enabled %}
  560.             {% if p.canorder and p.stock and p.stockamount < productStock %}
  561.             {% set productStock = p.stockamount %}
  562.             {% endif %}
  563.             <tr>
  564.             <td class="thumb-container">
  565.             <div class="thumb">
  566.             <div class="thumb-wrapper">
  567.             <img src="/{{p.media.first.getWebPath('thumb')}}" alt="">
  568.             </div>
  569.             </div>
  570.             </td>
  571.             <td>
  572.             <div class="label-counter py-3 py-xl-0">
  573.             <div class="label-wrapper">
  574.             <span>{{p.label}}</span>
  575.             <div class="price">
  576.             {% if p.priceSale > 0 %}
  577.             <span class="old_price" style="font-weight: normal;text-decoration: line-through;color: #bbb;">{{WebshopSettings.Currency.format(p.getPriceIncl)|raw}}</span>
  578.             {% endif %}
  579.             {{WebshopSettings.Currency.format(p.realPriceIncl(null, false, false, WebshopCustomer))|raw}}
  580.             </div>
  581.             {% if WebshopSettings.showStockIndicator %}
  582.             {% set sl = WebshopSettings.stockLevels %}
  583.             <div class="stock-label">
  584.             {% if p.canOrder and p.stockAmount < sl.low and p.stock %}
  585.             <div class="text-warning">
  586.             <i class="fa fa-circle"></i>
  587.             {{'Zeer beperkt op voorraad'|trans({}, 'webshop', app.request.locale)}}
  588.             </div>
  589.             {% elseif p.canOrder and p.stockAmount < sl.medium and p.stock %}
  590.             <div class="text-warning">
  591.             <i class="fa fa-check"></i>
  592.             {{'Beperkt op voorraad'|trans({}, 'webshop', app.request.locale)}}
  593.             </div>
  594.             {% elseif p.canOrder %}
  595.             <div class="text-success">
  596.             <i class="fa fa-check"></i>
  597.             {{'Op voorraad'|trans({}, 'webshop', app.request.locale)}}
  598.             </div>
  599.             {% endif %}
  600.             </div>
  601.             {% endif %}
  602.             </div>
  604.             <div class="product-cart-counter-wrapper">
  605.             <div class="product-cart-counter">
  606.             {% set required = false %}
  607.             {% if OriginalProduct.groupedRequired is not empty %}
  608.             {% if p.id in OriginalProduct.groupedRequired %}
  609.             {% set required = true %}
  610.             {% endif %}
  611.             {% endif %}
  612.             <button type="button" onclick="
  613.             if(((0+$('#g-amount-{{p.id}}').val()) - 1) < 1){
  614.             $('#g-amount-{{p.id}}').val('{{required ? '1' : ''}}');
  615.             }else{
  616.             $('#g-amount-{{p.id}}').val((0+$('#g-amount-{{p.id}}').val()) - 1);
  617.             }" class="btn">
  618.             <i class="fa fa-fw fa-minus"></i>
  619.             </button>
  620.             <input class="grouped_product" name="grouped[{{p.id}}]" data-id="{{p.id}}" value="{{required ? '1' : ''}}" id="g-amount-{{p.id}}" placeholder="0" type="text" />
  621.             <button type="button" onclick="$('#g-amount-{{p.id}}').val((1*$('#g-amount-{{p.id}}').val()) + 1);" class="btn">
  622.             <i class="fa fa-fw fa-plus"></i>
  623.             </button>
  624.             </div>
  625.             </div>
  626.             </div>
  627.             </td>
  628.             </tr>
  629.             {% endif %}
  630.             {% endfor %}
  631.             </table>
  632.             {% else %}
  633.             <p>
  634.             {{'Er zijn geen gekoppelde producten.'|trans({}, 'webshop', app.request.locale)}}
  635.             </p>
  636.             {% endif %}
  637.             </div>
  638.             {% endif %}
  639.             {% endif %}
  641.             {% if Product.type == 2 %}
  642.             <div class="goto-button-wrapper d-md-none">
  643.             <a href="#producten" class="btn btn-block order"><i class="far fa-eye"></i> {{'Bekijk producten'|trans({}, 'webshop', app.request.locale)}}</a>
  644.             </div>
  645.             {% endif %}
  647.             {% if Product.extras is not empty %}
  648.             <form id="extra_options">
  649.             <table class="table">
  650.             {% for label,data in Product.extras %}
  651.             {% set extraId = loop.index0 %}
  652.             <tr class="extra-option">
  653.             <input type="hidden" class="form-control mb-1" id="extra_price_{{Product.id ~ '_' ~ loop.index0}}" name="extras[{{label}}][price]" value="{{data.price}}" />
  654.             {% if data.type == 'input' %}
  655.             <td>
  656.             <div class="label">
  657.             {{label}}
  658.             </div>
  659.             <span class="price">+ &euro; {{data.price|number_format(2, ',', '.')}}</span>
  660.             </td>
  661.             <td><input type="text" class="form-control" name="extras[{{label}}][value]" /></td>
  662.             {% elseif data.type == 'checkbox' %}
  663.             <td><label>{{label}}</label></td>
  664.             <td>
  665.             {% for opt in data.options %}
  666.             <div class="form-check">
  667.             <input class="form-check-input extra_checkbox_{{Product.id}}" id="flexCheckDefault{{opt.label}}" type="checkbox" name="extras[{{label}}][value][]" value="{{opt.label}}" onchange="onExtraChangeCheckbox(this, {{Product.id}}, {{extraId}})" data-price="{{opt.price}}" data-label="{{label}}" data-sublabel="{{opt.label}}"/>
  668.             <label class="form-check-label" for="flexCheckDefault{{opt.label}}">{{opt.label}}<span class="price">+ &euro; {{opt.price|number_format(2, ',', '.')}}</span></label>
  669.             </div>
  670.             {% endfor %}
  671.             </td>
  672.             {% elseif data.type == 'select' %}
  673.             <td><div>{{label}}<span class="price"></span></div></td>
  674.             <td>
  675.             <select class="form-select" required name="extras[{{label}}][value]" onchange="onExtraChangeSelect(this, {{Product.id}}, {{extraId}});">
  676.             <option value="">{{ 'Selecteer een optie' | trans({}, 'webshop', app.request.locale) }}</option>
  677.             {% for opt in data.options %}
  678.             <option value="{{opt.label}}" data-price="{{opt.price}}">{{opt.label}} + &euro; {{opt.price|number_format(2, ',', '.')}}</option>
  679.             {% endfor %}
  680.             </select>
  681.             </td>
  682.             {% elseif data.type == 'radio' %}
  683.             <td>
  684.             <div>{{label}}<span class="price"></span></div>
  685.             </td>
  686.             <td>
  687.             {% for ind, opt in data.options %}
  688.             <div class="form-check">
  689.             <input class="form-check-input extra_radio_{{Product.id}}" type="radio" id="flexRadioDefault{{label ~ '-' ~ ind}}" name="extras[{{label}}][value]" value="{{opt.label}}" data-price="{{opt.price}}" onchange="onExtraChangeRadio(this, {{Product.id}}, {{extraId}});">
  690.             <label class="form-check-label" for="flexRadioDefault{{label ~ '-' ~ ind}}">
  691.             {{opt.label}}
  692.             <span class="price">+ &euro; {{opt.price|number_format(2, ',', '.')}}</span>
  693.             </label>
  694.             </div>
  695.             {% endfor %}
  696.             </td>
  697.             {% endif %}
  698.             </tr>
  699.             {% endfor %}
  700.             </table>
  701.             </form>
  702.             <script>
  703.             function onExtraChangeSelect(el, id, ind) {
  704.             var price = $(el).find(":selected").data('price');
  705.             console.log('#extra_price_' + id + '_' + ind);
  706.             $('#extra_price_' + id + '_' + ind).val(price);
  707.             }
  709.             function onExtraChangeCheckbox(el, id, ind) {
  710.             var price = 0;
  711.             $('.extra_checkbox_' +  id + ':checked').each(function(){
  712.             price += $(this).data('price');
  713.             });
  714.             console.log('#extra_price_' + id + '_' + ind);
  715.             $('#extra_price_' + id + '_' + ind).val(price);
  716.             }
  718.             function onExtraChangeRadio(el, id, ind) {
  719.             var price = $('.extra_radio_' +  id + ':checked').data('price');
  720.             console.log('#extra_price_' + id + '_' + ind);
  721.             $('#extra_price_' + id + '_' + ind).val(price);
  722.             }
  723.             </script>
  724.             {% endif %}
  725.             {# end extra options #}
  728.             {% if WebshopSettings.getB2b and WebshopSettings.hidePricesGuest %}
  729.             {% else %}
  730.             {% if Product.super.count > 0 %}
  731.             {% else %}
  732.             <div class="button-wrapper d-flex align-items-center checkoud-btn-wrapper {{Product.type == 1 ? 'd-none' : ''}}">
  733.             <div class="{{Product.canOrder ? '' : 'd-none'}} w-100">
  734.             <div id="product_can_order" class="d-flex align-items-center w-100">
  735.             {% if not Settings.getIsCatalog %}
  736.             {% if Product.type != 2 %}
  737.             <div class="product-cart-counter">
  738.             <button onclick="decreaseCart();" type="button">
  739.             <i class="fa fa-fw fa-minus"></i>
  740.             </button>
  741.             <input type="text" name="amount" id="amount" value="1"/>
  742.             <button onclick="increaseCart();" type="button">
  743.             <i class="fa fa-fw fa-plus"></i>
  744.             </button>
  745.             {% if Product.minOrder and Product.minOrder > 0 %}
  746.             <div style="text-align: center;font-size: 12px;font-weight: bold;">
  747.             Minimaal: {{Product.minOrder}}
  748.             </div>
  749.             {% endif %}
  750.             </div>
  751.             {% endif %}
  753.             {% set cartimage = OriginalProduct.media is not empty ? '/' ~ OriginalProduct.media.first.getWebPath('small') : (WebshopSettings.getDefaultProductImage is not empty ? WebshopSettings.getDefaultProductImage : '/bundles/trinitywebshop/img/no-product-image.png') %}
  754.             <button data-cartimage="{{cartimage}}" data-carttitle="{{Product.label}}" data-cartintro="{{Product.intro}}" data-cartprice="{{Product.getDisplayPrice((WebshopSettings is defined ? WebshopSettings : null), WebshopCustomer, app.user)}}" type="button" id="pd-cart-button" data-id="{{Product.id}}" data-catid="{{Category.id}}" class="btn btn-green btn-block order btn-2 disabled" style="padding: 0.5rem 0;">
  755.             <i style="margin-right: 4px;" class="fa fa-shopping-cart"></i>
  756.             {{'Toevoegen'|trans({}, 'webshop', app.request.locale)}}
  757.             </button>
  759.             <a href="#" class="add-to-list d-none {{isLinked ? 'active' : ''}}" data-id="{{Product.id}}" title="Toevoegen aan favorieten">
  760.             <i class="{{isLinked ? 'fa' : 'far'}} fa-heart"></i>
  761.             </a>
  762.             {% else %}                
  763.             <a href="/contact/{{Product.id}}/" id="pd-contact-button" data-id="{{Product.id}}" data-catid="{{Category.id}}" class="btn-green btn-block order btn-2 btn-secondary" style="padding: 0.5rem;">
  764.             {{'Neem contact op'|trans({}, 'webshop', app.request.locale)}}
  765.             </a>
  766.             {% endif %}
  767.             </div>
  768.             </div>
  770.             <div class="{{Product.canOrder ? 'd-none' : ''}} w-100">
  771.             <div id="product_cannot_order" class="w-100">
  772.             {% set cartimage = OriginalProduct.media is not empty ? '/' ~ OriginalProduct.media.first.getWebPath('small') : (WebshopSettings.getDefaultProductImage is not empty ? WebshopSettings.getDefaultProductImage : '/bundles/trinitywebshop/img/no-product-image.png') %}
  773.             <button data-cartimage="{{cartimage}}" data-carttitle="{{Product.label}}" data-cartintro="{{Product.intro}}" data-cartprice="{{Product.getDisplayPrice((WebshopSettings is defined ? WebshopSettings : null), WebshopCustomer, app.user)}}" type="button" id="pd-cart-button" disabled="disabled" data-id="{{Product.id}}" data-catid="{{Category.id}}" class="btn btb-disabled btn-danger btn-block order btn-3">
  774.             <i class="fa fa-times"></i>
  775.             {{'Niet op voorraad'|trans({}, 'webshop', app.request.locale)}}
  776.             </button>
  777.             </div>
  778.             </div>
  779.             </div>
  780.             </div>
  782.             <div class="select-specs-first {{Product.type == 1 ? '' : 'd-none'}}">
  783.             {{'Maak hierboven een keuze'|trans({}, 'webshop', app.request.locale)}}
  784.             </div>
  785.             {% endif %}
  786.             {% endif %}
  789.             {% if Product.canOrder or Product.type > 0 %}
  790.                 {#  #}
  791.             {% else %}
  792.                 {% if WebshopSettings.restockMail %}
  793.                     <div class="stock-notify">
  794.                         {% if app.request.get('notify-restock') %}
  795.                             <p style="padding-top: 25px;"><strong>{{'Je bent nu aangemeld voor voorraadmeldingen op dit product.'|trans({})|raw}}</strong></p>
  796.                         {% else %}
  797.                             <form method="post">
  798.                                 <h3>{{'Helaas, dit product is niet op voorraad'|trans({})|raw}}</h3>
  799.                                 <p>
  800.                                     {{'Een e-mailnotificatie ontvangen wanneer het product weer op voorraad is? Vul dan onderstaande gegevens in.'|trans({})|raw}}
  801.                                 </p>
  803.                                 <div class="stock-notify-form">
  804.                                     <input type="email" name="signupstock" placeholder="{{'E-mailadres'|trans({})|raw}}" />
  805.                                     <button type="submit" class="btn">{{'Inschrijven'|trans({})|raw}}</button>
  806.                                 </div>
  807.                             </form>
  808.                         {% endif %}
  809.                     </div>
  810.                 {% endif %}
  811.             {% endif %}
  812.             </div>
  814.             <div class="card additional-info">
  815.             <div class="base-info">
  816.             <span id="pd-intro">
  817.             {{Product.intro|raw}} <a href="#product" class="more-info">Meer informatie</a>
  818.             </span>
  819.             </div>
  820.             </div>
  822.             <input type="hidden" id="prod_compare_id" value="{{Product.id}}" />
  823.             <input type="hidden" id="prod_compare_label" value="{{(Product.Brand ? Product.Brand.label ~ ' ' : '') ~ Product.label}}" />
  824.             <input type="hidden" id="prod_compare_media" value="{{Product.media.count ? '/' ~ Product.media.first.webPath : WebshopSettings.defaultProductImage}}" />
  825.             </div>
  827.             {% if WebshopSettings.custom6 %}
  828.                 <div class="custom-block">
  829.                     {{WebshopSettings.custom6|raw}}
  830.                 </div>
  831.             {% endif %}
  833.             {% if WebshopSettings.usps %}
  834.                 <div class="custom-block">
  835.                     {{WebshopSettings.usps|raw}}
  836.                 </div>
  837.             {% endif %}
  838.             </div>
  840.             <script>
  841.                 var product = {
  842.                     'id' : '{{Product.id}}',
  843.                     'maxcompare': '{{ 'U kunt maximaal 4 producten vergelijken.' | trans({}, 'webshop', app.request.locale) | raw }}',
  844.                     'compareUrl': '{{path('webshop_compare')}}',
  845.                     'configurableUrl': '{{path('webshop_configurable',{Product: OriginalProduct.id})}}',
  846.                     'maginfier': {% if WebshopSettings.magnifier %}true{% else %}false{% endif %},
  847.                     'enableReviews': {% if WebshopSettings.enablereviews %}true{% else %}false{% endif %},
  848.                     'productReviewMsg': '{{'Reviews'|trans({}, 'webshop', app.request.locale)}}'
  849.                 };
  850.             </script>
  851.             </div>
  852.             </div>
  853.             </div>
  854.             </div>
  855.         </section>
  859.         {% if Product.super.count > 0 %}
  860.             {# Super #}
  862.             <div class="container super-products" style="padding: 50px 0;">
  863.             <div style="text-align: center;margin-bottom: 30px;"><h5>{{'Selecteer productspecificaties'|trans({}, 'webshop', app.request.locale)}}</h5></div>
  864.             <div class="row">
  865.                 {% set i = 0 %}
  866.                 {% for Child in Product.super %}
  867.                     {% set both = Child.superOptions|length > 0 %}
  869.                     {% set ignore = false %}
  870.                     {% for lbl,opts in Child.superOptions %}
  871.                         {% if lbl matches '/OPRUIMING/' %}
  872.                             {% set ignore = true %}
  873.                         {% endif %}
  874.                     {% endfor %}
  876.                     {% if ignore %}
  877.                         {#  #}
  878.                     {% else %}
  879.                         {% set type = (i == 0 ? 'links' : 'rechts') %}
  880.                         <div class="col-12 {{both ? 'col-md-6' : ''}}" style="{{both and type == 'links' ? 'border-right: solid 1px #ddd;' : ''}}">
  881.                         <div style="text-align: center;font-size: 15px;font-weight: bold;margin-bottom: 15px;">{{type}}</div>
  883.                         <table style="width:100%;">
  884.                             {% for lbl,opts in Child.superOptions %}
  885.                                 <tr>
  886.                                 {% if both %}
  887.                                     {% if type == 'links' %}
  888.                                         <td style="width: 50%;text-align:right;padding-right: 30px;">{{lbl}}</td>
  889.                                     {% endif %}
  890.                                     <td class="{{type == 'links' ? 'left' : 'right'}}" style="width: 50%;text-align: {{type == 'links' ? 'right' : 'left'}};">
  891.                                         <select class="super_options super_{{type}}" data-pid="{{Child.id}}" data-lbl="{{lbl}}" name="super_options[{{Child.id}}][{{lbl}}]">
  892.                                             {% if opts|length > 1 %}
  893.                                                 <option value="" selected>- Maak een keuze -</option>
  894.                                             {% endif %}
  895.                                             {% for opt in opts %}
  896.                                                 <option value="{{opt.value}}">{{opt.value}}</option>
  897.                                             {% endfor %}
  898.                                         </select>
  899.                                     </td>
  900.                                     {% if type == 'rechts' %}
  901.                                         <td style="width: 50%;padding-left: 30px;">{{lbl}}</td>
  902.                                     {% endif %}
  903.                                 {% else %}
  904.                                     <td style="width: 50%;text-align:right;padding-right: 30px;">{{lbl}}</td>
  905.                                     <td style="width: 50%;text-align: left;">
  906.                                         <select class="super_options super_{{type}}" data-pid="{{Child.id}}" data-lbl="{{lbl}}" name="super_options[{{Child.id}}][{{lbl}}]">
  907.                                             {% if opts|length > 1 %}
  908.                                                 <option value="" selected>- Maak een keuze -</option>
  909.                                             {% endif %}
  910.                                             {% for opt in opts %}
  911.                                                 <option value="{{opt.value}}">{{opt.value}}</option>
  912.                                             {% endfor %}
  913.                                         </select>
  914.                                     </td>
  915.                                 {% endif %}
  916.                                 </tr>
  917.                             {% endfor %}
  918.                             <tr>
  919.                                 {% if type == 'links' %}
  920.                                     <td style="width: 50%;text-align:right;padding-right: 30px;">Aantal</td>
  921.                                 {% endif %}
  922.                                 <td class="{{type == 'links' ? 'left' : 'right'}}" style="width: 50%;text-align: {{type == 'links' ? 'right' : 'left'}};">
  923.                                     {% if Child.superTierPrices|length > 0 %}
  924.                                         <select class="grouped_product super_{{type}}" data-id="{{Child.id}}" name="grouped[{{Child.id}}]">
  925.                                             <option value="0">0</option>
  926.                                             {% for opt in Child.superTierPrices %}
  927.                                                 <option value="{{opt[0]|number_format(0)}}">{{opt[0]|number_format(0)}} stuks (&euro; {{(opt[0] * opt[1])|number_format(2, ',', '.')}})</option>
  928.                                             {% endfor %}
  929.                                         </select>
  930.                                     {% else %}
  931.                                         <input class="grouped_product" data-id="{{Child.id}}" type="text" name="grouped[{{Child.id}}]" value="0" />
  932.                                     {% endif %}
  933.                                 </td>
  934.                                 {% if type == 'rechts' %}
  935.                                     <td style="width: 50%;padding-left: 30px;">Aantal</td>
  936.                                 {% endif %}
  937.                             </tr>
  938.                         </table>
  940.                         </div>
  941.                         {% set i = (i + 1) %}
  942.                     {% endif %}
  943.                 {% endfor %}
  944.             </div>
  946.             <script>
  947.                 function mergeSuperLeftToRight() {
  948.                     $.each($('.super_options.super_links'), function(ind, opt){
  949.                         var val = $(opt).val();
  950.                         var lbl = $(opt).data('lbl');
  951.                         $('[data-lbl="' + lbl + '"]').val(val);
  952.                     });
  953.                 }
  954.             </script>
  956.             <button style="display:none;" id="copyRightBtn" type="button" onclick="mergeSuperLeftToRight()">Kopieer links naar rechts</button>
  958.             <script type="text/javascript">
  959.                 $(function(){
  960.                     if($('td.right').length > 0){
  961.                         $('#copyRightBtn').show();
  962.                     }
  963.                 });
  964.             </script>
  966.             {% set cartimage = OriginalProduct.media is not empty ? '/' ~ OriginalProduct.media.first.getWebPath('small') : (WebshopSettings.getDefaultProductImage is not empty ? WebshopSettings.getDefaultProductImage : '/bundles/trinitywebshop/img/no-product-image.png') %}
  967.             <button data-cartimage="{{cartimage}}" data-carttitle="{{Product.label}}" data-cartintro="{{Product.intro}}" data-cartprice="{{Product.getDisplayPrice((WebshopSettings is defined ? WebshopSettings : null), WebshopCustomer, app.user)}}" type="button" id="pd-cart-button" data-id="{{Product.id}}" data-catid="{{Category.id}}" class="btn btn-green btn-block order btn-1" style="padding: 0.5rem 0;">
  968.                 <i style="margin-right: 4px;" class="fa fa-shopping-cart"></i> {{'Toevoegen'|trans({}, 'webshop', app.request.locale)}}
  969.             </button>
  970.             </div>
  971.         {% endif %}
  976.         {% if WebshopSettings.productDisplay == 'tab' %}
  977.             {# Legacy tabs display #}
  978.             <section class="tabs-section product-details-tabs">
  979.                 {% if Product.type != 2 %}
  980.                 <div class="container d-none d-md-block">
  981.                 <ul class="nav nav-tabs" id="myTab" role="tablist" style="position:relative;">
  982.                 <li class="nav-item">
  983.                 <a style="{{Product.type == 1 ? 'display: none;' : ''}}" class="nav-link active" id="product-tab" data-bs-toggle="tab" href="#product" role="tab" aria-controls="product" aria-selected="true">{{'Productinformatie'|trans({}, 'webshop', app.request.locale)}}</a>
  984.                 </li>
  986.                 {% if Product.giftcard is empty %}
  987.                 <li class="nav-item">
  988.                 <a class="nav-link" id="specs-tab" data-bs-toggle="tab" href="#specs" role="tab" aria-controls="specs" aria-selected="false">{{'Specificaties'|trans({}, 'webshop', app.request.locale)}}</a>
  989.                 </li>
  990.                 {% endif %}
  992.                 {% if WebshopSettings.enablereviews %}
  993.                 <li class="nav-item">
  994.                 <a class="nav-link" id="reviews-tab" data-bs-toggle="tab" href="#reviews" role="tab" aria-controls="reviews" aria-selected="false">{{'Reviews'|trans({}, 'webshop', app.request.locale)}}</a>
  995.                 </li>
  996.                 {% endif %}
  998.                 {#{% if Product.relations is not empty %}
  999.                 <li class="nav-item">
  1000.                 <a class="nav-link" id="related-tab" data-bs-toggle="tab" href="#related" role="tab" aria-controls="related" aria-selected="false">{{'Gerelateerd'|trans({}, 'webshop', app.request.locale)}}</a>
  1001.                 </li>
  1002.                 {% endif %}#}
  1003.                 </ul>
  1004.                 </div>
  1006.                 <div class="tab-content" id="accordion">
  1007.                 <div class="tab-pane fade show active" id="product" role="tabpanel" aria-labelledby="product-tab" style="{{Product.type == 1 ? 'display: none;' : ''}}">
  1008.                 <div class="container">
  1009.                 <div class="accordion-title d-block d-md-none" data-bs-toggle="collapse" data-bs-target="#accordion1" aria-expanded="true" aria-controls="accordion1">
  1010.                 {{'Productinformatie'|trans({}, 'webshop', app.request.locale)}}
  1011.                 </div>
  1012.                 <div id="accordion1" class="collapse show" aria-labelledby="accordiongroup">
  1013.                 <h2 class="tab-title d-none d-md-block">{{'Productinformatie'|trans({}, 'webshop', app.request.locale)}}</h2>
  1014.                 <div class="tab-container">
  1015.                 <div id="pd-description">
  1016.                 {{Product.description|raw}}
  1017.                 </div>
  1018.                 </div>
  1019.                 </div>
  1020.                 </div>
  1021.                 </div>
  1023.                 {% if Product.giftcard is empty %}
  1024.                 <div class="tab-pane fade" id="specs" role="tabpanel" aria-labelledby="specs-tab" style="{{Product.type == 1 ? 'display: none;' : ''}}">
  1025.                 <div class="container">
  1026.                 <div class="accordion-title d-block d-md-none collapsed" data-bs-toggle="collapse" data-bs-target="#accordion2" aria-expanded="true" aria-controls="accordion2">
  1027.                 {{'Specificaties'|trans({}, 'webshop', app.request.locale)}}
  1028.                 </div>
  1029.                 <div id="accordion2" class="collapse" aria-labelledby="accordiongroup">
  1030.                 <h2 class="tab-title d-none d-md-block specs2">{{'Specificaties'|trans({}, 'webshop', app.request.locale)}}</h2>
  1031.                 <div class="tab-container">
  1032.                 <table>
  1034.                 {% set sf = 0 %}
  1035.                 {% if Product.weight %}
  1036.                 {% set sf = (sf + 1) %}
  1037.                 <tr>
  1038.                 <td style="padding-right:30px;">Gewicht</td>
  1039.                 <td>
  1040.                 {% if Product.weight >= 1000 %}
  1041.                 {{Product.weight / 1000}} Kg.
  1042.                 {% else %}
  1043.                 {{Product.weight}} g
  1044.                 {% endif %}
  1045.                 </td>
  1046.                 </tr>
  1047.                 {% endif %}
  1050.                 {% for spec_id, spec in specs %}
  1051.                 {% if spec.value is not empty and spec.hidden == false %}
  1053.                 {% set value = [] %}
  1054.                 {% for v in spec.value %}
  1055.                 {% if v.value %}
  1056.                 {% if spec.type == 'yes_no' %}
  1057.                 {% if v.value == 1 %}
  1058.                 {% set value = value|merge(['<i style="color:green;" class="fa fa-check"></i>']) %}
  1059.                 {% else %}
  1060.                 {% set value = value|merge(['<i style="color:red;" class="fa fa-times"></i>']) %}
  1061.                 {% endif %}
  1062.                 {% elseif spec.type == 'color' %}
  1063.                 {% set value = value|merge(['<span style="background:' ~ (v.hex is not empty ? v.hex : v.value) ~ ';border:1px solid #ddd;width:20px;height:20px; border-radius: 100%;display: inline-block; margin-right:5px;"></span>']) %}
  1064.                 {% elseif v is iterable %}
  1065.                 {% for v in v %}
  1066.                 {% if v.value %}
  1067.                 {% set value = value | merge([v.value]) %}
  1068.                 {% endif %}
  1069.                 {% endfor %}
  1070.                 {% elseif v.value is defined %}
  1071.                 {% set value = value | merge([v.value]) %}
  1072.                 {% else %}
  1073.                 {% endif %}
  1074.                 {% endif %}
  1075.                 {% endfor %}
  1077.                 {% if value is not empty %}
  1078.                 <tr>
  1079.                 <td style="padding-right:30px;">{{spec.label}}</td>
  1080.                 <td>
  1081.                 {% if spec.type == 'color' %}
  1082.                 {{(value|join(' '))|raw}}
  1083.                 {% else %}
  1084.                 {{(value|join(', '))|raw}}
  1085.                 {% endif %}
  1086.                 </td>
  1087.                 </tr>
  1088.                 {% set sf = (sf + 1) %}
  1089.                 {% endif %}
  1090.                 {% endif %}
  1091.                 {% endfor %}
  1092.                 {% if sf == 0 %}
  1093.                 <tr>
  1094.                 <td colspan="2">
  1095.                 <p>{{'Er zijn geen specificaties beschikbaar voor dit product.'|trans({}, 'webshop', app.request.locale)}}</p>
  1096.                 </td>
  1097.                 </tr>
  1098.                 {% endif %}
  1099.                 </table>
  1100.                 </div>
  1101.                 </div>
  1102.                 </div>
  1103.                 </div>
  1104.                 {% endif %}
  1106.                 {% if WebshopSettings.enablereviews %}
  1107.                 <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
  1108.                 <div class="accordion-item">
  1109.                 <div class="container">
  1110.                 <div class="accordion-title d-block d-md-none collapsed" data-bs-toggle="collapse" data-bs-target="#accordion3" aria-expanded="true" aria-controls="accordion3">
  1111.                 {{'Reviews'|trans({}, 'webshop', app.request.locale)}} ({{total_rating.total}})
  1112.                 </div>
  1113.                 <div id="accordion3" class="collapse" aria-labelledby="accordiongroup">
  1114.                 <h2 class="tab-title d-none d-md-block text-center mb-3">{{ 'Reviews' | trans({}, 'webshop', app.request.locale) | raw }}</h2>
  1115.                 <div class="tab-container tab-reviews">
  1116.                 <div id="review-list"></div>
  1117.                 {% if (app.user or WebshopSettings.anonimousReview) and WebshopSettings.enablereviews %}
  1118.                 <div class="text-center mt-3">
  1119.                 <a href="{{path('webshop_review', {id: Product.id})}}" class="popup btn">{{'Review plaatsen'|trans({}, 'webshop', app.request.locale)}}</a>
  1120.                 <br /><br />
  1121.                 </div>
  1122.                 {% endif %}
  1123.                 </div>
  1124.                 </div>
  1125.                 </div>
  1126.                 </div>
  1127.                 </div>
  1128.                 {% endif %}
  1130.                 {# {% if Product.relations is not empty %}
  1131.                 <div class="tab-pane fade" id="related" role="tabpanel" aria-labelledby="related-tab">
  1132.                 <div class="container">
  1133.                 <div class="accordion-title d-block d-md-none collapsed" data-bs-toggle="collapse" data-bs-target="#accordion4" aria-expanded="true" aria-controls="accordion4">
  1134.                 {{'Reviews'|trans({}, 'webshop', app.request.locale)}}
  1135.                 </div>
  1136.                 <div id="accordion4" class="collapse" aria-labelledby="accordiongroup">
  1137.                 <div class="tab-container">
  1138.                 <h2>Gerelateerd</h2>
  1139.                 <div id="relations" class="category-tabs">
  1140.                 <div class="cat-group row card">
  1141.                 {% for Prod in Product.relations %}
  1142.                 {% set prodCat = (Prod.getCategory | first) %}
  1143.                 <div class="product col-sm col-md-4 col-lg-4">
  1144.                 <div class="card">
  1145.                 <img class="card-img-top" src="http://via.placeholder.com/350x200" alt="Card image cap">
  1146.                 <div class="card-body">
  1147.                 <h5 class="card-title">Card title</h5>
  1148.                 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  1149.                 <p class="pricing">
  1150.                 {% if i == 3 or i == 2 %}
  1151.                 <span class="price sale">&euro; 5.199,00</span>
  1152.                 <span class="price old">&euro; 5.899,00</span>
  1153.                 {% else %}
  1154.                 <span class="price">&euro; 5.199,00</span>
  1155.                 {% endif %}
  1156.                 </p>
  1157.                 </div>
  1158.                 </div>
  1159.                 </div>
  1160.                 {% endfor %}
  1161.                 </div>
  1162.                 </div>
  1163.                 </div>
  1164.                 </div>
  1165.                 </div>
  1166.                 </div>
  1167.                 {% endif %} #}
  1168.                 </div>
  1169.                 {% endif %}
  1171.                 {% if Product.type == 2 %}
  1172.                 <div class="container d-none d-md-block">
  1173.                 <ul class="nav nav-tabs" id="myTab" role="tablist" style="position:relative;">
  1174.                 <li class="nav-item">
  1175.                 <a style="{{Product.type == 1 ? 'display: none;' : ''}}" class="nav-link active" id="product-tab" data-bs-toggle="tab" href="#product" role="tab" aria-controls="product" aria-selected="true">{{'Productinformatie'|trans({}, 'webshop', app.request.locale)}}</a>
  1176.                 </li>
  1177.                 </ul>
  1178.                 </div>
  1180.                 <div class="tab-content" id="myTabContent">
  1181.                 <div class="tab-pane fade show active" id="product" role="tabpanel" aria-labelledby="product-tab" style="{{Product.type == 1 ? 'display: none;' : ''}}">
  1182.                 <div class="accordion-item">
  1183.                 <div class="container">
  1184.                 <div class="accordion-title d-block d-md-none" data-bs-toggle="collapse" data-bs-target="#accordion1" aria-expanded="true" aria-controls="accordion1">
  1185.                 {{'Productinformatie'|trans({}, 'webshop', app.request.locale)}}
  1186.                 </div>
  1187.                 <div id="accordion1" class="collapse show" aria-labelledby="accordiongroup">
  1188.                 <h2 class="tab-title d-none d-md-block">{{'Productinformatie'|trans({}, 'webshop', app.request.locale)}}</h2>
  1190.                 <div class="tab-container">
  1191.                 <div id="pd-description">
  1192.                 {{Product.description|raw}}
  1193.                 </div>
  1194.                 </div>
  1195.                 </div>
  1197.                 <div id="accordion2" class="collapse">
  1198.                 <table>
  1200.                 {% set sf = 0 %}
  1201.                 {% if Product.weight %}
  1202.                 {% set sf = (sf + 1) %}
  1203.                 <tr>
  1204.                 <td style="padding-right:30px;">Gewicht</td>
  1205.                 <td>
  1206.                 {% if Product.weight >= 1000 %}
  1207.                 {{Product.weight / 1000}} Kg.
  1208.                 {% else %}
  1209.                 {{Product.weight}} g
  1210.                 {% endif %}
  1211.                 </td>
  1212.                 </tr>
  1213.                 {% endif %}
  1216.                 {% for spec_id, spec in specs %}
  1217.                 {% if spec.value is not empty and spec.hidden == false %}
  1219.                 {% set value = [] %}
  1220.                 {% for v in spec.value %}
  1221.                 {% if v.value %}
  1222.                 {% if spec.type == 'yes_no' %}
  1223.                 {% if v.value == 1 %}
  1224.                 {% set value = value|merge(['<i style="color:green;" class="fa fa-check"></i>']) %}
  1225.                 {% else %}
  1226.                 {% set value = value|merge(['<i style="color:red;" class="fa fa-times"></i>']) %}
  1227.                 {% endif %}
  1228.                 {% elseif spec.type == 'color' %}
  1229.                 {% set value = value|merge(['<span style="background:' ~ (v.hex is not empty ? v.hex : v.value) ~ ';border:1px solid #ddd;width:20px;height:20px; border-radius: 100%;display: inline-block; margin-right:5px;"></span>']) %}
  1230.                 {% elseif v is iterable %}
  1231.                 {% for v in v %}
  1232.                 {% if v.value %}
  1233.                 {% set value = value | merge([v.value]) %}
  1234.                 {% endif %}
  1235.                 {% endfor %}
  1236.                 {% elseif v.value is defined %}
  1237.                 {% set value = value | merge([v.value]) %}
  1238.                 {% else %}
  1239.                 {% endif %}
  1240.                 {% endif %}
  1241.                 {% endfor %}
  1243.                 {% if value is not empty %}
  1244.                 <tr>
  1245.                 <td style="padding-right:30px;">{{spec.label}}</td>
  1246.                 <td>
  1247.                 {% if spec.type == 'color' %}
  1248.                 {{(value|join(' '))|raw}}
  1249.                 {% else %}
  1250.                 {{(value|join(', '))|raw}}
  1251.                 {% endif %}
  1252.                 </td>
  1253.                 </tr>
  1254.                 {% set sf = (sf + 1) %}
  1255.                 {% endif %}
  1256.                 {% endif %}
  1257.                 {% endfor %}
  1258.                 {% if sf == 0 %}
  1259.                 <tr>
  1260.                 <td colspan="2">
  1261.                 <p>{{'Er zijn geen specificaties beschikbaar voor dit product.'|trans({}, 'webshop', app.request.locale)}}</p>
  1262.                 </td>
  1263.                 </tr>
  1264.                 {% endif %}
  1265.                 </table>
  1266.                 </div>
  1267.                 </div>
  1268.                 </div>
  1269.                 </div>
  1270.                 </div>
  1271.                 {% endif %}
  1272.             </section>
  1273.         {% else %}
  1274.             {# New column display #}
  1275.             <section class="tabs-section product-details-columns">
  1276.                 {% if Product.type != 2 %}
  1277.                 <div class="product-info" id="accordion">
  1278.                 <div class="container">
  1279.                 <div class="row">
  1280.                 <div class="col-12 col-lg-{{WebshopSettings.enablereviews ? '6' : '12'}}">
  1281.                 <div id="product">
  1282.                 <div class="accordion-item" id="acc-product">
  1283.                 <div class="accordion-title d-block d-md-none" data-bs-toggle="collapse" data-bs-target="#accordion1" aria-expanded="true" aria-controls="accordion1">
  1284.                 {{'Productinformatie'|trans({}, 'webshop', app.request.locale)}}
  1285.                 </div>
  1286.                 <div id="accordion1" class="collapse show" aria-labelledby="accordiongroup">
  1287.                 <h4 class="tab-title d-none d-md-block">{{'Productinformatie'|trans({}, 'webshop', app.request.locale)}}</h4>
  1288.                 <div class="tab-container">
  1289.                 <div id="pd-description">
  1290.                 {{Product.description|raw}}
  1291.                 </div>
  1292.                 </div>
  1293.                 </div>
  1294.                 </div>
  1295.                 </div>
  1296.                 <div id="specs" style="{{Product.type == 1 ? 'display: none;' : ''}}">
  1297.                 <div class="accordion-item" id="acc-specs">
  1298.                 <div class="accordion-title d-block d-md-none collapsed" data-bs-toggle="collapse" data-bs-target="#accordion2" aria-expanded="true" aria-controls="accordion2">
  1299.                 {{'Specificaties'|trans({}, 'webshop', app.request.locale)}}
  1300.                 </div>
  1301.                 <div id="accordion2" class="collapse" aria-labelledby="accordiongroup">
  1302.                 <h4 class="tab-title d-none d-md-block specs3">{{'Specificaties'|trans({}, 'webshop', app.request.locale)}}</h4>
  1303.                 <div class="tab-container">
  1304.                 <table>
  1305.                 {% set sf = 0 %}
  1306.                 {% if Product.weight %}
  1307.                 {% set sf = (sf + 1) %}
  1308.                 {% endif %}
  1310.                 {% for spec_id, spec in specs %}
  1311.                 {% if spec.value is not empty and spec.hidden == false %}
  1312.                 {% set value = [] %}
  1313.                 {% for v in spec.value %}
  1314.                 {% if v.value %}
  1315.                 {% if spec.type == 'yes_no' %}
  1316.                 {% if v.value == 1 %}
  1317.                     {% set value = value|merge(['<i style="color:green;" class="fa fa-check"></i>']) %}
  1318.                 {% else %}
  1319.                     {% set value = value|merge(['<i style="color:red;" class="fa fa-times"></i>']) %}
  1320.                 {% endif %}
  1321.                 {% elseif spec.type == 'color' %}
  1322.                 {% set value = value|merge(['<span style="background:' ~ (v.hex is not empty ? v.hex : v.value) ~ ';border:1px solid #ddd;width:20px;height:20px; border-radius: 100%;display: inline-block; margin-right:5px;"></span>']) %}
  1323.                 {% elseif v is iterable %}
  1324.                 {% for v in v %}
  1325.                     {% if v.value %}
  1326.                     {% set value = value | merge([v.value]) %}
  1327.                     {% endif %}
  1328.                 {% endfor %}
  1329.                 {% elseif v.value is defined %}
  1330.                 {% set value = value | merge([v.value]) %}
  1331.                 {% else %}
  1332.                 {% endif %}
  1333.                 {% endif %}
  1334.                 {% endfor %}
  1336.                 {% if value is not empty %}
  1337.                 <tr>
  1338.                 <td class="pr-3">{{spec.label}}</td>
  1339.                 <td>
  1340.                 {% if spec.type == 'color' %}
  1341.                     {{(value|join(' '))|raw}}
  1342.                 {% else %}
  1343.                     {{(value|join(', '))|raw}}
  1344.                 {% endif %}
  1345.                 </td>
  1346.                 </tr>
  1347.                 {% set sf = (sf + 1) %}
  1348.                 {% endif %}
  1349.                 {% endif %}
  1350.                 {% endfor %}
  1351.                 {% if sf == 0 and Product.type != 2 and (Product.sku is empty and Product.ean is empty) %}
  1352.                 <tr>
  1353.                 <td colspan="2">
  1354.                 <p>{{'Er zijn geen specificaties beschikbaar voor dit product.'|trans({}, 'webshop', app.request.locale)}}</p>
  1355.                 </td>
  1356.                 </tr>
  1357.                 {% endif %}
  1358.                 {% if Product.type != 2 %}
  1359.                 {% if Product.sku %}
  1360.                 <tr>
  1361.                 <td>{{ 'SKU' | trans({}, 'webshop', app.request.locale) | raw }}</td>
  1362.                 <td id="pd-sku">{{Product.sku}}</td>
  1363.                 </tr>
  1364.                 {% endif %}
  1365.                 {% if Product.ean %}
  1366.                 <tr>
  1367.                 <td>{{ 'EAN' | trans({}, 'webshop', app.request.locale) | raw }}</td>
  1368.                 <td id="pd-ean">{{Product.ean}}</td>
  1369.                 </tr>
  1370.                 {% endif %}
  1371.                 {% endif %}
  1372.                 </table>
  1373.                 </div>
  1374.                 </div>
  1375.                 </div>
  1376.                 </div>
  1377.                 </div>
  1379.                 {% if WebshopSettings.enablereviews %}
  1380.                 <div class="col-12 col-lg-6">
  1381.                 <div class="accordion-item">
  1382.                 <div id="reviews">
  1383.                 <div class="accordion-title d-block d-md-none collapsed" data-bs-toggle="collapse" data-bs-target="#accordion3" aria-expanded="true" aria-controls="accordion3">
  1384.                 {{'Reviews'|trans({}, 'webshop', app.request.locale)}} ({{total_rating.total}})
  1385.                 </div>
  1386.                 <div id="accordion3" class="collapse" aria-labelledby="accordiongroup">
  1387.                 <h4 class="tab-title d-none d-md-block mb-3">{{ 'Reviews' | trans({}, 'webshop', app.request.locale) | raw }}</h4>
  1388.                 <div class="tab-container tab-reviews">
  1389.                 <div id="review-list"></div>
  1390.                 {% if app.user or WebshopSettings.anonimousReview %}
  1391.                 <div class="text-center mt-3">
  1392.                 <a href="{{path('webshop_review', {id: Product.id})}}" class="popup btn">{{'Review plaatsen'|trans({}, 'webshop', app.request.locale)}}</a>
  1393.                 </div>
  1394.                 {% endif %}
  1395.                 </div>
  1396.                 </div>
  1397.                 </div>
  1398.                 </div>
  1399.                 </div>
  1400.                 {% endif %}
  1401.                 </div>
  1402.                 </div>
  1403.                 </div>
  1404.                 </div>
  1405.                 {% endif %}
  1407.                 {% if Product.type == 2 %}
  1408.                 <div class="container">
  1409.                 <div id="product">
  1410.                 <div class="accordion-item">
  1411.                 <div class="accordion-title d-block d-md-none" data-bs-toggle="collapse" data-bs-target="#accordion1" aria-expanded="true" aria-controls="accordion1">
  1412.                 {{'Productinformatie'|trans({}, 'webshop', app.request.locale)}}
  1413.                 </div>
  1414.                 <div id="accordion1" class="collapse show" aria-labelledby="accordiongroup">
  1415.                 <h4 class="tab-title d-none d-md-block">{{'Productinformatie'|trans({}, 'webshop', app.request.locale)}}</h4>
  1417.                 <div class="tab-container">
  1418.                 <div id="pd-description">
  1419.                 {{Product.description|raw}}
  1420.                 </div>
  1421.                 </div>
  1422.                 </div>
  1423.                 </div>
  1424.                 </div>
  1426.                 {# <div id="specs">
  1427.                 <div class="accordion-item">
  1428.                 <div class="accordion-title d-block d-md-none collapsed" data-bs-toggle="collapse" data-bs-target="#accordion2" aria-expanded="true" aria-controls="accordion2">
  1429.                 {{'Specificaties'|trans({}, 'webshop', app.request.locale)}}
  1430.                 </div>
  1432.                 <div id="accordion2" class="collapse" aria-labelledby="accordiongroup">
  1433.                 <h4 class="tab-title d-none d-md-block specs1">{{'Specificaties'|trans({}, 'webshop', app.request.locale)}}</h4>
  1434.                 <div class="tab-container">
  1435.                 {% if specs is not empty %}
  1436.                 <table>
  1438.                 {% set sf = 0 %}
  1439.                 {% if Product.weight %}
  1440.                 {% set sf = (sf + 1) %}
  1441.                 <tr>
  1442.                 <td style="padding-right:30px;">Gewicht</td>
  1443.                 <td>
  1444.                 {% if Product.weight >= 1000 %}
  1445.                 {{Product.weight / 1000}} Kg.
  1446.                 {% else %}
  1447.                 {{Product.weight}} g
  1448.                 {% endif %}
  1449.                 </td>
  1450.                 </tr>
  1451.                 {% endif %}
  1454.                 {% for spec_id, spec in specs %}
  1455.                 {% if spec.value is not empty and spec.hidden == false %}
  1457.                 {% set value = [] %}
  1458.                 {% for v in spec.value %}
  1459.                 {% if v.value %}
  1460.                 {% if spec.type == 'yes_no' %}
  1461.                 {% if v.value == 1 %}
  1462.                 {% set value = value|merge(['<i style="color:green;" class="fa fa-check"></i>']) %}
  1463.                 {% else %}
  1464.                 {% set value = value|merge(['<i style="color:red;" class="fa fa-times"></i>']) %}
  1465.                 {% endif %}
  1466.                 {% elseif spec.type == 'color' %}
  1467.                 {% set value = value|merge(['<span style="background:' ~ (v.hex is not empty ? v.hex : v.value) ~ ';border:1px solid #ddd;width:20px;height:20px; border-radius: 100%;display: inline-block; margin-right:5px;"></span>']) %}
  1468.                 {% elseif v is iterable %}
  1469.                 {% for v in v %}
  1470.                 {% if v.value %}
  1471.                 {% set value = value | merge([v.value]) %}
  1472.                 {% endif %}
  1473.                 {% endfor %}
  1474.                 {% elseif v.value is defined %}
  1475.                 {% set value = value | merge([v.value]) %}
  1476.                 {% else %}
  1477.                 {% endif %}
  1478.                 {% endif %}
  1479.                 {% endfor %}
  1481.                 {% if value is not empty %}
  1482.                 <tr>
  1483.                 <td style="padding-right:30px;">{{spec.label}}</td>
  1484.                 <td>
  1485.                 {% if spec.type == 'color' %}
  1486.                 {{(value|join(' '))|raw}}
  1487.                 {% else %}
  1488.                 {{(value|join(', '))|raw}}
  1489.                 {% endif %}
  1490.                 </td>
  1491.                 </tr>
  1492.                 {% set sf = (sf + 1) %}
  1493.                 {% endif %}
  1494.                 {% endif %}
  1495.                 {% endfor %}
  1496.                 {% if sf == 0 %}
  1497.                 <p>{{'Er zijn geen specificaties beschikbaar voor dit product.'|trans({}, 'webshop', app.request.locale)}}</p>
  1498.                 {% endif %}
  1499.                 </table>
  1500.                 {% endif %}
  1501.                 </div>
  1502.                 </div>
  1503.                 </div>
  1504.                 </div> #}
  1505.                 </div>
  1506.                 {% endif %}
  1507.             </section>
  1508.         {% endif %}
  1510.         {% set realOriginalProduct = Product %}
  1512.         {% if Product.relations is not empty %}
  1513.             {% set hasRelations = false %}
  1514.             {% for Product in Product.relations %}
  1515.                 {% if Product %}
  1516.                     {% if Product.visible and Product.enabled %}
  1517.                         {# Product is visible and enabled #}
  1518.                         {% if Product.type == 0 or Product.type > 2 %}
  1519.                             {# Not dynamic #}
  1520.                             {% if Product.stock %}
  1521.                                 {# Stock management #}
  1522.                                 {% if (Product.stockAmount - Product.outOfStockQuantity) >= 1 or Product.visibleNoStock == true %}
  1523.                                     {# Stock above 1 or show always when no stock #}
  1524.                                     {% set hasRelations = true %}
  1525.                                 {% endif %}
  1526.                             {% else %}
  1527.                                 {# No stock management #}
  1528.                                 {% set hasRelations = true %}
  1529.                             {% endif %}
  1530.                         {% else %}
  1531.                             {% if Product.type == 1 or Product.type == 2 %}
  1532.                                 {# Dynamic #}
  1533.                                 {% if Product.childStockAmount > 0 %}
  1534.                                     {# One or more childs have stock #}
  1535.                                     {% set hasRelations = true %}
  1536.                                 {% endif %}
  1537.                             {% endif %}
  1538.                         {% endif %}
  1539.                     {% endif %}
  1540.                 {% endif %}
  1541.             {% endfor %}
  1543.             {% if hasRelations %}
  1544.                 <section class="related-products {% if recipes|length > 0 %}nobottompadding{% endif %}">
  1545.                     <div class="container">
  1546.                     <div class="introblock">
  1547.                     <div class="introtitle">{{ 'Gerelateerde producten' | trans }}</div>
  1548.                     </div>
  1550.                     <div id="relations" class="category">
  1551.                     <div class="webshop-bundle webshop-widget">
  1552.                     <div class="swiper-content">
  1553.                     <div class="swiper-container swiper-products">
  1554.                     <div class="swiper-wrapper">
  1555.                     {% for Product in Product.relations %}
  1556.                     {% set prodCat = (Product.getCategory.first) %}
  1557.                     {% if Product %}
  1559.                     {% set canShow = false %}
  1560.                     {% if Product.visible and Product.enabled %}
  1561.                     {# Product is visible and enabled #}
  1562.                     {% if Product.type == 0 or Product.type > 2 %}
  1563.                     {# Not dynamic #}
  1564.                     {% if Product.stock %}
  1565.                     {# Stock management #}
  1566.                     {% if (Product.stockAmount - Product.outOfStockQuantity) >= 1 or Product.visibleNoStock == true %}
  1567.                     {# Stock above 1 or show always when no stock #}
  1568.                     {% set canShow = true %}
  1569.                     {% endif %}
  1570.                     {% else %}
  1571.                     {# No stock management #}
  1572.                     {% set canShow = true %}
  1573.                     {% endif %}
  1574.                     {% else %}
  1575.                     {% if Product.type == 1 or Product.type == 2 %}
  1576.                     {# Dynamic #}
  1577.                     {% if Product.childStockAmount > 0 %}
  1578.                     {# One or more childs have stock #}
  1579.                     {% set canShow = true %}
  1580.                     {% endif %}
  1581.                     {% endif %}
  1582.                     {% endif %}
  1583.                     {% endif %}
  1585.                     {% if canShow %}
  1586.                     {% set OriginalProduct = Product %}
  1587.                     {% if Product.type == 1 %}
  1588.                     {% set Product = Product.linkedProducts.first %}
  1589.                     {% endif %}
  1590.                     <div class="swiper-slide">
  1591.                     <div class="product">
  1592.                     {% include '@TrinityWebshop/elements/productCard.html.twig' %}
  1593.                     </div>
  1594.                     </div>
  1595.                     {% endif %}
  1596.                     {% endif %}
  1597.                     {% endfor %}
  1598.                     </div>
  1600.                     <div class="swiper-pagination d-md-none"></div>
  1601.                     <div class="swiper-button-prev d-none d-md-block"></div>
  1602.                     <div class="swiper-button-next d-none d-md-block"></div>
  1603.                     </div>
  1604.                     </div>
  1605.                     </div>
  1606.                     </div>
  1608.                     </div>
  1609.                 </section>
  1610.             {% endif %}
  1611.         {% endif %}
  1613.         {% if WebshopSettings.showRecentlyViewed and productHistoryObjects is not empty %}
  1614.             {% set catFix = true %}
  1615.             <section class="product-history">
  1616.                 <div class="container">
  1617.                 <div class="introblock">
  1618.                 <div class="introtitle">{{'Eerder bekeken producten'|trans({}, 'webshop', app.request.locale)|raw}}</div>
  1619.                 </div>
  1621.                 <div class="webshop-bundle webshop-widget">
  1622.                 <div class="swiper-content">
  1623.                 <div class="swiper-container swiper-products">
  1624.                 <div class="swiper-wrapper">
  1625.                 {% for Product in productHistoryObjects %}
  1626.                 {% if Product %}
  1628.                 {% set canShow = false %}
  1629.                 {% if Product.visible and Product.enabled %}
  1630.                 {# Product is visible and enabled #}
  1631.                 {% if Product.type == 0 or Product.type > 2 %}
  1632.                 {# Not dynamic #}
  1633.                 {% if Product.stock %}
  1634.                 {# Stock management #}
  1635.                 {% if (Product.stockAmount - Product.outOfStockQuantity) >= 1 or Product.visibleNoStock == true %}
  1636.                 {# Stock above 1 or show always when no stock #}
  1637.                 {% set canShow = true %}
  1638.                 {% endif %}
  1639.                 {% else %}
  1640.                 {# No stock management #}
  1641.                 {% set canShow = true %}
  1642.                 {% endif %}
  1643.                 {% else %}
  1644.                 {% if Product.type == 1 or Product.type == 2 %}
  1645.                 {# Dynamic #}
  1646.                 {% if Product.childStockAmount > 0 %}
  1647.                 {# One or more childs have stock #}
  1648.                 {% set canShow = true %}
  1649.                 {% endif %}
  1650.                 {% endif %}
  1651.                 {% endif %}
  1652.                 {% endif %}
  1654.                 {% if canShow %}
  1655.                 {% set OriginalProduct = Product %}
  1656.                 {% if Product.type == 1 %}
  1657.                 {% set Product = Product.linkedProducts.first %}
  1658.                 {% endif %}
  1659.                 <div class="swiper-slide">
  1660.                 <div class="product">
  1661.                 {% include '@TrinityWebshop/elements/productCard.html.twig' %}
  1662.                 </div>
  1663.                 </div>
  1664.                 {% endif %}
  1665.                 {% endif %}
  1666.                 {% endfor %}
  1667.                 </div>
  1669.                 <div class="swiper-pagination d-md-none"></div>
  1670.                 <div class="swiper-button-prev d-none d-md-block"></div>
  1671.                 <div class="swiper-button-next d-none d-md-block"></div>
  1672.                 </div>
  1673.                 </div>
  1674.                 </div>
  1675.                 </div>
  1676.             </section>
  1677.         {% endif %}
  1679.         {% if recipes|length > 0 and RecipesPage is defined and RecipesPage is not empty %}
  1680.             <section class="blog recipe-bundle related-recipes recipe-overview">
  1681.                 <div class="container">
  1682.                 <div class="introblock">
  1683.                 <div class="introtitle">{{'Gerelateerde recepten'|trans({}, 'webshop', app.request.locale)}}</div>
  1684.                 </div>
  1686.                 <div class="row slider-wrapper">
  1687.                 {% for Recipe in recipes %}
  1688.                 <div class="col-12 col-md-6 col-lg-4">
  1689.                 <div class="item card">
  1690.                 {# <a href="{{path(app.request.attributes.get('_route'))}}/{{Recipe.slug}}"> #}
  1691.                 <a href="{{path(RecipesPage.slugkey)}}/{{Recipe.slug}}">
  1692.                 <div class="thumb">
  1693.                 <div class="lcp image">
  1694.                 {% if Recipe.media.first.hasBlurred %}
  1695.                 <picture>
  1696.                 {% if Recipe.media.first.hasWebp() %}
  1697.                 <source srcset="/{{Recipe.media.first.getBlurredWebpPath('small')}}" type="image/webp">
  1698.                 {% endif %}
  1699.                 <source srcset="/{{Recipe.media.first.getBlurredWebPath('small')}}" type="{{Recipe.media.first.mime}}">
  1700.                 <img class="lq" alt="{{Recipe.media.first.description_alt}}" src="/{{Recipe.media.first.getBlurredWebPath('small')}}" type="{{Recipe.media.first.mime}}" loading="lazy" width="{{Recipe.media.first.width}}" height="{{Recipe.media.first.height}}">
  1701.                 </picture>
  1702.                 {% endif %}
  1703.                 <picture>
  1704.                 {% if Recipe.media.first.hasWebp() %}
  1705.                 <source srcset="/{{Recipe.media.first.getWebpPath('medium')}}" type="image/webp">
  1706.                 {% endif %}
  1707.                 <source srcset="/{{Recipe.media.first.getWebPath('medium')}}" type="{{ Recipe.media.first.mime }}">
  1708.                 <img class="hq" alt="{{Recipe.media.first.description_alt}}" src="/{{Recipe.media.first.getWebPath('medium')}}" type="{{Recipe.media.first.mime}}" loading="lazy" width="{{Recipe.media.first.width}}" height="{{Recipe.media.first.height}}" onload="this.style.opacity=1{% if Recipe.media.first.hasBlurred %};this.closest('.lcp').getElementsByClassName('lq')[0].style.opacity=0;{% endif %}" style="opacity: 0;">
  1709.                 </picture>
  1710.                 </div>
  1711.                 </div>
  1713.                 <div class="content">
  1714.                 <h3>{{Recipe.label}}</h3>
  1715.                 </div>
  1716.                 </a>
  1717.                 </div>
  1718.                 </div>
  1719.                 {% endfor %}
  1720.                 </div>
  1722.                 <div class="btns text-center">
  1723.                 <a href="/meer/recepten" class="btn">Meer recepten <i class="fa fa-arrow-right"></i></a>
  1724.                 </div>
  1725.                 </div>
  1726.             </section>
  1727.         {% endif %}
  1729.         {% if realOriginalProduct.upSell.count %}
  1730.             <section class="additional-products">
  1731.                 <div class="container">
  1732.                 <div class="introblock">
  1733.                 <div class="introtitle">{{'Vergelijkbare producten'|trans({}, 'webshop', app.request.locale)}}</div>
  1734.                 </div>
  1736.                 <div class="webshop-bundle webshop-widget">
  1737.                 <div class="swiper-content">
  1738.                 <div class="swiper-container swiper-products">
  1739.                 <div class="swiper-wrapper">
  1740.                 {% set hideBlock = true %}
  1741.                 {% for Product in realOriginalProduct.upSell %}
  1743.                 {% set canShow = false %}
  1744.                 {% if Product.visible and Product.enabled %}
  1745.                 {# Product is visible and enabled #}
  1746.                 {% if Product.type == 0 or Product.type > 2 %}
  1747.                 {# Not dynamic #}
  1748.                 {% if Product.stock %}
  1749.                 {# Stock management #}
  1750.                 {% if (Product.stockAmount - Product.outOfStockQuantity) >= 1 or Product.visibleNoStock == true %}
  1751.                 {# Stock above 1 or show always when no stock #}
  1752.                 {% set canShow = true %}
  1753.                 {% endif %}
  1754.                 {% else %}
  1755.                 {# No stock management #}
  1756.                 {% set canShow = true %}
  1757.                 {% endif %}
  1758.                 {% else %}
  1759.                 {% if Product.type == 1 or Product.type == 2 %}
  1760.                 {# Dynamic #}
  1761.                 {% if Product.childStockAmount > 0 %}
  1762.                 {# One or more childs have stock #}
  1763.                 {% set canShow = true %}
  1764.                 {% endif %}
  1765.                 {% endif %}
  1766.                 {% endif %}
  1767.                 {% endif %}
  1769.                 {% if canShow %}
  1770.                 {% set hideBlock = false %}
  1771.                 {% set OriginalProduct = Product %}
  1772.                 {% set Category = Product.category.first %}
  1773.                 {% set hide_intro = true %}
  1774.                 <div class="swiper-slide">
  1775.                 <div class="product">
  1776.                 {% include '@TrinityWebshop/elements/productCard.html.twig' %}
  1777.                 </div>
  1778.                 </div>
  1779.                 {% endif %}
  1780.                 {% endfor %}
  1781.                 </div>
  1783.                 <div class="swiper-pagination d-md-none"></div>
  1784.                 <div class="swiper-button-prev d-none d-md-block"></div>
  1785.                 <div class="swiper-button-next d-none d-md-block"></div>
  1786.                 </div>
  1787.                 </div>
  1788.                 </div>
  1789.                 </div>
  1790.             </section>
  1791.             {% if hideBlock %}
  1792.                 <script>
  1793.                     $(function() {
  1794.                         $('.additional-products').hide();
  1795.                     });
  1796.                 </script>
  1797.             {% endif %}
  1798.         {% endif %}
  1799.     </div>
  1801. {% endif %}
  1803. <script type="text/javascript">
  1804.     var xhr = new XMLHttpRequest();
  1805.     xhr.onreadystatechange = function (r) {
  1806.     if (xhr.readyState !== 4) return;
  1807.     if (xhr.status >= 200 && xhr.status < 300) {
  1808.     let buttons = document.querySelectorAll('.add-to-list');
  1809.     if(JSON.parse(xhr.response).logged_in){
  1810.     for(let i = 0; i < buttons.length; i++){
  1811.     buttons[i].classList.remove('d-none');
  1812.     }
  1813.     }
  1814.     }
  1815.     };
  1817.     xhr.open('GET', '{{path('nav_account')}}');
  1818.     xhr.send();
  1820.     var baseUrl = '{{path('homepage')}}';
  1821.     var cart_url = '{{path('cart')}}';
  1822.     var product_id = '{{ Product.id }}';
  1823.     var product_price = '{{ Product.realPriceIncl }}';
  1824.     var product_label = '{{ Product.label }}';
  1825. </script>
  1827. {% endblock %}