templates/product/show.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/default.html.twig' %}
  3. {% block headScript %}
  4. <!--Should be included only in product templates-->
  5. <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  6. {% endblock %}
  7. {% block metaTags %}
  8.         <title>{{ product is defined ? product.metaTitle }}</title>
  9.         <meta name="description" content="{{ product is defined ? product.metaDescription }}"></meta>
  10.         <meta name="keywords" content="{{ product is defined ? product.metaKeywords }}"></meta>
  12.         <meta property="og:url"           content="{{ app.request.uri }}" />
  13.         <meta property="og:type"          content="website" />
  14.         <meta property="og:title"         content="{{ product is defined ? product.ogTitle }}" />
  15.         <meta property="og:description"   content="{{ product is defined ? product.ogDescription }}" />
  16.         <meta property="og:image"         content="{{ product is defined and product.ogImage ? product.ogImage }}" />
  18.         <meta name="twitter:card" content="summary" />
  19.         <meta name="twitter:site" content="{{ app.request.uri }}" />
  20.         <meta name="twitter:title" content="{{ product is defined ? product.ogTitle }}" />
  21.         <meta name="twitter:description" content="{{ product is defined ? product.ogDescription }}" />
  22.         <meta name="twitter:image" content="{{ product is defined and product.ogImage ? absolute_url(product.ogImage) }}" />
  23. {% endblock %}
  25. {% block contentBlock %}
  26. {% set anyMaze = 'any-maze' in product.name | lower %}
  28.     <main class="productPage mt-5 mt-lg-5 mt-md-5">
  29.         {% include 'Components/info-message.html.twig' with {message: 'alert.no.quantity' | trans, show: false, color: 'text-ice', icon: 'info.svg' } %}
  30.         <div class="container mt-3 mt-lg-3 mt-md-3 mb-5 mb-lg-5 mb-md-5">
  31.             <div class="row">
  32.                 <!-- * Desktop version-->
  33.                 <div class="product-breadcrumb-heading d-none d-md-block col-lg-12 border-2 border-bottom border-indigo custom-bradcrumb-padding-product" style="margin-top: -4px;">
  34.                     <div class="d-flex align-items-center flex-wrap">
  35.                         <h2 class="font-weight-bold mb-0" style="max-width: 60%;">{{ product.name }}</h2>
  36.                         <div class="d-flex ml-auto breadcrumb-links">
  37.                             <small class="font-weight-bold text-uppercase mb-0">
  38.                                 <div class="d-flex align-items-center flex-wrap">
  39.                                     <a href="{{ breadcrumbs.parentCategory is defined ? breadcrumbs.parentCategory.href }}" class="font-weight-bold">
  40.                                         <span class="">{% if breadcrumbs.parentCategory is defined %}{{ breadcrumbs.parentCategory.name }}{% endif %}</span>
  41.                                     </a>
  43.                                     <svg class="mx-2 mx-lg-2 mx-md-2" width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  44.                                         <line y1="-1" x2="11.7434" y2="-1" transform="matrix(-0.733639 0.679539 0.733639 0.679539 10.6155 8.02002)" stroke="#405CCA" stroke-width="2"/>
  45.                                         <line y1="-1" x2="11.7434" y2="-1" transform="matrix(-0.733639 -0.679539 0.733639 -0.679539 10.6155 7.98004)" stroke="#405CCA" stroke-width="2"/>
  46.                                     </svg>
  48.                                     <a href="{{ breadcrumbs.category.href }}" class="font-weight-bold">
  49.                                         <span class="text-navyBlue">{{ breadcrumbs.category.name }}</span>
  50.                                     </a>
  51.                                 </div>
  52.                             </small>
  53.                         </div>
  54.                     </div>
  55.                 </div>
  56.                 <!-- * Mobile version-->
  57.                 <div class="d-block d-md-none col-lg-12 pb-3 pb-lg-3 pb-md-3">
  58.                     <div class="d-flex align-items-center flex-wrap">
  59.                         <div class="d-flex breadcrumb-links">
  60.                             <small class="font-weight-bold text-uppercase">
  61.                                 <div class="d-flex align-items-center flex-wrap">
  62.                                     <a href="{{ breadcrumbs.parentCategory is defined ? breadcrumbs.parentCategory.href }}" class="font-weight-bold">
  63.                                         <span class="">{% if breadcrumbs.parentCategory is defined %}{{ breadcrumbs.parentCategory.name }}{% endif %}</span>
  64.                                     </a>
  66.                                     <svg class="mx-2 mx-lg-2 mx-md-2" width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  67.                                         <line y1="-1" x2="11.7434" y2="-1" transform="matrix(-0.733639 0.679539 0.733639 0.679539 10.6155 8.02002)" stroke="#405CCA" stroke-width="2"/>
  68.                                         <line y1="-1" x2="11.7434" y2="-1" transform="matrix(-0.733639 -0.679539 0.733639 -0.679539 10.6155 7.98004)" stroke="#405CCA" stroke-width="2"/>
  69.                                     </svg>
  71.                                     <a href="{{ breadcrumbs.category.href }}" class="font-weight-bold">
  72.                                         <span class="text-navyBlue">{{ breadcrumbs.category.name }}</span>
  73.                                     </a>
  74.                                 </div>
  75.                             </small>
  76.                         </div>
  77.                     </div>
  78.                 </div>
  79.             </div>
  80.             <!--*PRODUCT GALLERY AND DATA-->
  81.             <div class="row mt-4 mt-lg-4 mt-md-4">
  82.                 <div class="col-xl-5 offset-xl-1 col-lg-6">
  83.                     <div class="d-flex justify-content-md-center flex-sm-column flex-md-row main-gallery main-gallery-initial">
  86.                         <div class="d-none d-md-block product-images-scroll order-sm-2 order-md-1">
  87.                             <button class="product-images-scroll-btn product-images-scroll-btn--up d-none">
  88.                             </button>
  90.                             <div class="d-flex flex-sm-row flex-md-column product-images-scroll-inside product-images-scroll-inside--desktop">
  91.                                 {% for index, variantsImage in variants %}
  92.                                     {% if variantsImage.image != null %}
  93.                                         <div data-product-gallery-index="{{ loop.index }}"
  94.                                             data-product-sku="{{ variantsImage.sku }}"
  95.                                             href="{{ variantsImage.image != null ? variantsImage.image.getThumbnail('Stoelting_gallery_small') }}"
  96.                                             class="product-small-image mb-2 mb-lg-2 mb-md-2">
  97.                                             <img src="{{ variantsImage.image != null ? variantsImage.image.getThumbnail('Stoelting_gallery_small') }}"
  98.                                                 alt="Product small image" class="img-fluid">
  99.                                         </div>
  100.                                     {% endif %}
  101.                                 {% endfor %}
  102.                             </div>
  104.                             <button class="product-images-scroll-btn product-images-scroll-btn--down d-none">
  105.                             </button>
  106.                         </div>
  108.                         <!-- * Mobile -->
  109.                         <div class="product-images-scroll--mobile-wrapper d-block d-md-none order-sm-2 order-md-1 position-relative">
  110.                             <button class="product-images-scroll-btn product-images-scroll-btn--up d-none">
  111.                             </button>
  112.                             <div class="product-images-scroll product-images-scroll--mobile">
  113.                                 <div class="d-flex flex-sm-row flex-md-column product-images-scroll-inside product-images-scroll-inside--mobile">
  114.                                     {% for index, variantsImage in variants %}
  115.                                         {% if variantsImage.image != null %}
  116.                                             <div data-product-gallery-index="{{ loop.index }}"
  117.                                                 data-product-sku="{{ variantsImage.sku }}"
  118.                                                 href="{{ variantsImage.image != null ? variantsImage.image.getThumbnail('Stoelting_gallery_small') }}"
  119.                                                 class="product-small-image mb-2 mb-lg-2 mb-md-2">
  120.                                                 <img src="{{ variantsImage.image != null ? variantsImage.image.getThumbnail('Stoelting_gallery_small') }}"
  121.                                                 alt="Product small image" class="img-fluid">
  122.                                             </div>
  123.                                         {% endif %}
  124.                                     {% endfor %}
  125.                                 </div>
  126.                             </div>
  128.                             <button class="product-images-scroll-btn product-images-scroll-btn--down d-none">
  129.                             </button>
  130.                         </div>
  134.                         <div class="d-none hidden-gallery-images">
  135.                             {% for variantsImage in variants %}
  136.                                 {% if variantsImage.image != null %}
  137.                                     <div data-product-gallery-index="{{ loop.index }}" data-fancybox="gallery"  href="{{ variantsImage.image.getThumbnail('Stoelting_gallery_main') }}"  class="lazyload product-small-image mb-2 mb-lg-2 mb-md-2">
  138.                                         <img data-src="{{ variantsImage.image.getThumbnail('Stoelting_gallery_main') }}" alt="Product small image">
  139.                                     </div>
  140.                                 {% endif %}
  141.                             {% endfor %}
  143.                         </div>
  144.                         <div class="product-big-image order-sm-1 order-md-2">
  145.                             {% set break = false %}
  146.                             {% for variantsImage in variants %}
  147.                                 {% if not break %}
  148.                                     {% if variantsImage.image != null %}
  149.                                         <img class="product-big__image lazyload"
  150.                                              data-src="{{variantsImage.image != null ? variantsImage.image.getThumbnail('Stoelting_gallery_main') }}"
  151.                                              alt="Product big image"
  152.                                              data-fancybox-trigger="gallery"
  153.                                              data-fancybox-index="0"
  154.                                         >
  155.                                         <div class="set-center">
  156.                                             <div class="spinner-border d-none text-secondary" role="status">
  157.                                                 <span class="sr-only">Loading...</span>
  158.                                             </div>
  159.                                         </div>
  160.                                         <div class="product-big-image__sku">
  161.                                             <small>
  162.                                                 ITEM: {{ ' '  ~ variantsImage.sku != null ? variantsImage.sku }}
  163.                                             </small>
  164.                                         </div>
  165.                                         {% set break = true %}
  166.                                     {% endif %}
  167.                                 {%  endif %}
  168.                             {% endfor %}
  169.                         </div>
  170.                     </div>
  172.                     <h2 class="d-block d-md-none font-weight-bold mt-3 mt-lg-3 mt-md-3">{{ product.name }}</h2>
  173.                     <div class="mt-4 mt-lg-4 mt-md-4 text-deepGray"> {{ product.shortDescription | raw}} </div>
  174.                 </div>
  176.                 <div class="col-xl-5 col-lg-6">
  177.                     <div id="add-to-cart-app">
  178.                         <add-to-cart-wrapper v-slot:default="{productId, addToCartBulk,updateProductsList}">
  179.                             <table style="width: 100%" class="product-table text-deepGray">
  180.                                 <tbody>
  181.                                 <tr>
  182.                                     <th class="font-weight-bold">
  183.                                         {{ 'Item' | trans }}
  184.                                     </th>
  185.                                     <th class="font-weight-bold">
  186.                                         {{ 'Description' | trans }}
  187.                                     </th>
  188.                                     <th class="font-weight-bold">
  189.                                         {{ 'Price' | trans }}
  190.                                     </th>
  191.                                     <th class="font-weight-bold">
  192.                                         {{ 'QTY' | trans }}
  193.                                     </th>
  194.                                 </tr>
  196.                                 {% for variant in variants %}
  197.                                     <tr class="product-table-tr">
  198.                                         <td>
  199.                                             {{ variant.sku }}
  200.                                         </td>
  201.                                         <td>
  202.                                             {{ variant.name | raw }}
  203.                                         </td>
  204.                                         <td>
  205.                                             {% if variant.isPriceVisible %}
  206.                                                 {{ variant.price.net_price_str }}
  207.                                             {% else %}
  208.                                                 <a href="{{ path('login', {'division': division, '_target_path' : app.request.requestUri}) }}" class="login-price-link"
  209.                                                    data-gtm-event="login-price-click">Login</a>
  210.                                             {% endif %}
  212.                                         </td>
  213.                                         <td>
  214.                                             <input type="number" class="qunatity-input" value="0" min="0" max="100" style="width: 50px;" @change="updateProductsList($event, {{ variant.id }})">
  215.                                         </td>
  216.                                     </tr>
  217.                                 {% endfor %}
  218.                                 </tbody>
  219.                             </table>
  222.                             <div class="d-flex align-items-center mt-4 mt-lg-4 mt-md-4 add-to-cart-buttons-wrapper">
  223.                                     {% if not isEU %}
  224.                                         <a href="javascript:;"
  225.                                             :data-origin-product-id="productId"
  226.                                             :data-product-id="productId"
  227.                                             @click.prevent="addToCartBulk"
  228.                                             class="btn btn-primary btn-add-to-cart mr-3 mr-lg-3 mr-md-3 text-nowrap add-to-cart-click-element"
  229.                                             data-gtm-event="add-to-cart-click"
  230.                                             >
  231.                                             <div class="d-flex align-items-center text-nowrap">
  232.                                                 <img src="{{ asset('/static/images/icons/icon_cart.svg') }}" alt="Icon cart">
  233.                                                 {{ 'Add to cart' | trans }}
  234.                                             </div>
  235.                                         </a>
  236.                                     {% endif %}
  237.                                     <a href="javascript:;"
  238.                                         :data-origin-product-id="productId"
  239.                                         :data-product-id="productId"
  240.                                         @click.prevent="addToCartBulk"
  241.                                         class="btn btn-primary btn-add-to-cart mr-3 mr-lg-3 mr-md-3 text-nowrap add-to-quote-click-element"
  242.                                         data-gtm-event="add-to-quote-click"
  243.                                         >
  244.                                         <div class="d-flex align-items-center text-nowrap">
  245.                                             {{ 'Add to Quote' | trans }}
  246.                                         </div>
  247.                                     </a>
  248.                             </div>
  249.                         </add-to-cart-wrapper>
  250.                     </div>
  251.                 </div>
  252.             </div>
  254.             <!--Related PRODUCTS-->
  256.             <div class="my-4 my-lg-4 my-md-4 related-products">
  257.                 <div class="row border-top border-bottom border-2 border-lightGray {{ relatedProducts | length ? '' : 'd-none' }}">
  258.                     <div class="col-xl-10 offset-xl-1 py-4 py-lg-4 py-md-4">
  259.                         <div class="d-flex align-items-center">
  260.                             <h3 class="font-weight-light text-navyBlue mb-0">{{ 'Related Products + Recommendations' | trans }}</h3>
  261.                             <a class="collapse-close ml-auto" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample">
  262.                             </a>
  263.                         </div>
  264.                         <div class="row show" id="collapseExample1">
  265.                             <div class="col-lg-12">
  266.                                 <div class="slider-small--first mt-3 mt-lg-3 mt-md-3" data-slick='{"slidesToShow": 5}'>
  267.                                     {% for i,relatedProduct in relatedProducts %}
  268.                                         <a href="{{ relatedProduct.href }}" class="slider-small-item d-flex flex-column align-items-center text-center">
  269.                                             <img class="img-fluid" src="{{ relatedProduct.image != null ? relatedProduct.image.getThumbnail('Stoelting_small_slider') : pimcore_website_config('defaultProductImage').getThumbnail('Stoelting_small_slider') }}" />
  270.                                             <h5 class="font-weight-bold mt-3 mt-lg-3 mt-md-3 mb-0">{{ relatedProduct.name }}</h5>
  271.                                         </a>
  272.                                     {% endfor %}
  273.                                 </div>
  274.                             </div>
  275.                         </div>
  276.                     </div>
  277.                 </div>
  278.                 <div class="row border-bottom border-2 border-lightGray {{ purchasedTogether | length ? '' : 'd-none' }}">
  279.                     <div class="col-xl-10 offset-xl-1 py-4 py-lg-4 py-md-4">
  280.                         <div class="d-flex align-items-center">
  281.                             <h3 class="font-weight-light text-navyBlue mb-0">{{ 'Frequently Purchased Together' | trans }}</h3>
  282.                             <a class="collapse-close ml-auto collapsed" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
  283.                             </a>
  284.                         </div>
  285.                         <div class="row collapse" id="collapseExample2">
  286.                             <div class="col-lg-12">
  287.                                 <div class="slider-small mt-3 mt-lg-3 mt-md-3" data-slick='{"slidesToShow": 5}'>
  288.                                     {% for purchasedTogetherProduct in purchasedTogether %}
  289.                                         <a href="{{ purchasedTogetherProduct.href }}"  class="d-flex flex-column align-items-center text-center">
  290.                                             <img class="img-fluid" src="{{ purchasedTogetherProduct.image != null ? purchasedTogetherProduct.image.getThumbnail('Stoelting_small_slider') : pimcore_website_config('defaultProductImage').getThumbnail('Stoelting_small_slider') }}" />
  291.                                             <h5 class="font-weight-bold mt-3 mt-lg-3 mt-md-3 mb-0">{{ purchasedTogetherProduct.name  }}</h5>
  292.                                         </a>
  293.                                     {% endfor %}
  294.                                 </div>
  295.                             </div>
  296.                         </div>
  297.                     </div>
  298.                 </div>
  299.                 <div class="row border-bottom border-2 border-lightGray {{ replacementParts | length ? '' : 'd-none' }}">
  300.                     <div class="col-xl-10 offset-xl-1 py-4 py-lg-4 py-md-4">
  301.                         <div class="d-flex align-items-center">
  302.                             <h3 class="font-weight-light text-navyBlue mb-0">{{ 'Replacement Parts + Subcomponents' | trans }}</h3>
  303.                             <a class="collapse-close ml-auto collapsed" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample">
  304.                             </a>
  305.                         </div>
  306.                         <div class="row collapse" id="collapseExample3">
  307.                             <div class="col-lg-12">
  308.                                 <div class="slider-small mt-3 mt-lg-3 mt-md-3" data-slick='{"slidesToShow": 5}'>
  309.                                     {% for replacementPartsProduct in replacementParts %}
  310.                                         <a href="{{ replacementPartsProduct.href }}" class="d-flex flex-column align-items-center text-center">
  311.                                             <img class="img-fluid" src="{{ replacementPartsProduct.image != null ? replacementPartsProduct.image.getThumbnail('Stoelting_small_slider') : pimcore_website_config('defaultProductImage').getThumbnail('Stoelting_small_slider') }}" />
  312.                                             <h5 class="font-weight-bold mt-3 mt-lg-3 mt-md-3 mb-0">{{ replacementPartsProduct.name }}</h5>
  313.                                         </a>
  314.                                     {% endfor %}
  315.                                 </div>
  316.                             </div>
  317.                         </div>
  318.                     </div>
  319.                 </div>
  320.             </div>
  322.             <!--Product more details-->
  324.             <div class="row my-5 my-lg-5 my-md-5">
  325.                 <div class="col-lg-10 offset-xl-1" style="min-height: 300px;">
  326.                     <div class="d-flex">
  327.                         <div class="accordion" id="accordionProductMoreInfo" style="width: 100%;">
  328.                             {% set firstLoop = true %}
  329.                             {% for additionalContentButton in product.additionalContent %}
  330.                                 {% if additionalContentButton.type == 'AditionalContentText' %}
  331.                                     <button class="btn btn-lg btn-secondary btn-secondary--ghost mr-3 mr-lg-3 mr-md-3 mt-2 mt-lg-2 mt-md-2" type="button"
  332.                                             data-toggle="collapse" data-target="#collapse{{ loop.index }}"
  333.                                             aria-expanded="{{ loop.index == 1 ? 'true' : 'false'}}" aria-controls="collapse{{ loop.index }}"
  334.                                     >
  335.                                         {{ additionalContentButton.name }}
  336.                                     </button>
  337.                                     {% set firstLoop = false %}
  338.                                 {% endif %}
  339.                             {% endfor %}
  341.                             {% for additionalContent in product.additionalContent %}
  342.                                 {% if additionalContent.type == 'AditionalContentText' %}
  343.                                     <div id="collapse{{ loop.index }}" class="{{ loop.index != 1 ?  'collapse' : 'show' }} list-bullet overflow-x-auto" aria-labelledby="collapse{{ loop.index }}" data-parent="#accordionProductMoreInfo">
  344.                                         <div class="mt-4 mt-lg-4 mt-md-4 text-deepGray">
  345.                                             {{ additionalContent.content | raw }}
  346.                                         </div>
  347.                                     </div>
  348.                                 {% endif %}
  349.                             {% endfor %}
  350.                         </div>
  351.                     </div>
  352.                 </div>
  353.             </div>
  354.         </div>
  355.     </main>
  356. {% endblock %}
  358. {% block afterScripts %}
  359. <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
  360. <script type="text/javascript" src="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/src/jquery.ez-plus.js"></script>
  361. {% endblock %}