themes/BootstrapChildTheme/SyliusShopBundle/views/Product/show.html.twig line 1

Open in your IDE?
  1. {% extends '@SyliusShop/layout.html.twig' %}
  3. {% block title %}{{ product.name }} | {{ parent() }}{% endblock %}
  5. {% set productImages = (product.images | length) %}
  7. {% block metatags %}
  8.     {% if product.metaDescription is not null %}
  9.         <meta name="description" content="{{ product.metaDescription }}">
  10.     {% endif %}
  11. {% endblock %}
  13. {% block stylesheets %}
  14.     {{ parent() }}
  15.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  16. {% endblock %}
  18. {% block content %}
  19. {% include '@SyliusShop/Product/Show/_breadcrumb.html.twig' %}
  20. <div class="ui hidden divider"></div>
  22. <div class="ui two column stackable grid custom-product-detail-page-trigger-class">
  23.     <div class="column">
  24.         {{ sylius_template_event('sylius.shop.product.show.left_sidebar', _context) }}
  25.     </div>
  27.     <div class="column">
  28.         {{ sylius_template_event('sylius.shop.product.show.right_sidebar', _context) }}
  29.     </div>
  30. </div>
  31.  {% if product.mainTaxon is not null %}
  32.     {% set taxon = product.mainTaxon %}
  33.     {% if taxon.enabled %}
  35.         {% if taxon.slug == 'storyteller' %}
  36.             <div class="row step_guide mb-5 mt-5">
  37.                 <div class="col-6 col-md-3 text-center">
  38.                     {# <img src="{{ asset('assets/shop/img/step_1.png') }}" class="step_guide_image img-fluid" alt="{{'sylius.pages.content.childrenLitrature'|trans }}" /> #}
  39.                      <picture>
  40.                         <source srcset="{{ asset('assets/shop/img/step_1.webp') }}" type="image/webp">
  41.                         <source srcset="{{ asset('assets/shop/img/step_1.png') }}" type="image/png">
  42.                         <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="{{ asset('assets/shop/img/step_1.png') }}" class="mb-2 step_guide_image img-fluid" alt="{{'sylius.pages.content.childrenLitrature'|trans }}" />
  43.                     </picture>
  44.                     <div class="text-center mt-3 mb-3 font-weight-bold">{{'sylius.pages.content.childrenLitrature'|trans }}</div>
  45.                 </div>
  46.                 <div class="col-6 col-md-3 text-center mb-3">
  47.                  <picture>
  48.                         <source srcset="{{ asset('assets/shop/img/step_2.webp') }}" type="image/webp">
  49.                         <source srcset="{{ asset('assets/shop/img/step_2.png') }}" type="image/png">
  50.                     <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="{{ asset('assets/shop/img/step_2.png') }}" class="step_guide_image img-fluid" alt="{{'sylius.pages.content.quizToLearn'|trans }}" />
  51.                  </picture>
  53.                     <div class="text-center mt-3 mb-3 font-weight-bold">{{'sylius.pages.content.quizToLearn'|trans }}</div>
  54.                 </div>
  55.                 <div class="col-6 col-md-3 text-center mb-3">
  56.                 <picture>
  57.                         <source srcset="{{ asset('assets/shop/img/step_5.webp') }}" type="image/webp">
  58.                         <source srcset="{{ asset('assets/shop/img/step_5.png') }}" type="image/png">
  59.                     <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="{{ asset('assets/shop/img/step_5.png') }}" class="step_guide_image img-fluid" alt="{{'sylius.pages.content.atonomyOfTheChild'|trans }}" />
  60.                 </picture>
  61.                     <div class="text-center mt-3 mb-3 font-weight-bold">{{'sylius.pages.content.atonomyOfTheChild'|trans }}​</div>
  62.                 </div>
  63.                 <div class="col-6 col-md-3 text-center mb-3">
  64.                   <picture>
  65.                         <source srcset="{{ asset('assets/shop/img/step_4.webp') }}" type="image/webp">
  66.                         <source srcset="{{ asset('assets/shop/img/step_4.png') }}" type="image/png">
  67.                         <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="{{ asset('assets/shop/img/step_4.png') }}" class="step_guide_image img-fluid" alt="{{'sylius.pages.content.herosWithYou'|trans }}"/>
  68.                     </picture>
  69.                     <div class="text-center mt-3 mb-3 font-weight-bold">{{'sylius.pages.content.herosWithYou'|trans }}</div>
  70.                 </div>
  71.             </div>
  73.             <h4 class="ui horizontal section divider header">{{ 'sylius.pages.content.details'|trans }}</h4>
  74.             <div class="row product_details_guide mb-5 mt-5">
  75.                 <div class="col-sm-6">
  76.                     <ul>
  77.                         <li>{{'sylius.pages.content.storyTeller.content.textOne'|trans }}</li>
  78.                         <li>{{'sylius.pages.content.storyTeller.content.textTwo'|trans }}</li>
  79.                         <li>{{'sylius.pages.content.storyTeller.content.textThree'|trans }}</li>
  80.                         <li>{{'sylius.pages.content.storyTeller.content.textFour'|trans }}</li>
  81.                         <li>{{'sylius.pages.content.storyTeller.content.textFive'|trans }}</li>
  82.                     </ul>
  83.                 </div>
  84.                 <div class="col-sm-6">
  85.                     <ul>
  86.                         <li>{{'sylius.pages.content.storyTeller.content.textSix'|trans }}</li>
  87.                         <li>{{'sylius.pages.content.storyTeller.content.textSeven'|trans }}</li>
  88.                         <li>{{'sylius.pages.content.storyTeller.content.textEight'|trans }}</li>
  89.                         <li>{{'sylius.pages.content.storyTeller.content.textNine'|trans }}</li>
  90.                         <li>{{'sylius.pages.content.storyTeller.content.textTen'|trans }}</li>
  91.                     </ul>
  92.                 </div>
  93.             </div>
  94.         {% endif %}
  95.         {% if taxon.slug == 'catalogue/per-pack-type/story' %}
  96.             {% if product.getPackSamples|length > 0 %}
  97.                 <h4 class="ui horizontal section divider header">{{'sylius.pages.content.packageContent'|trans }}</h4>
  98.                 <div class="row mb-5 mt-5">
  99.                     {% for sampleAttribute in product.getPackSamples %}
  100.                         <div class="col-sm-6 p-2">
  102.                             {# <picture>
  103.                             {# <source srcset="{{ '/media/packSampleThumbnail/' ~ path | imagine_filter('my_packSampleThumbnail_webp') }}" type="image/webp"> }
  104.                                 <source srcset="{{  sampleAttribute.image | imagine_filter('my_pack_sample_thumbnail_webp') }}" type="image/webp">
  105.                                 <source srcset="{{ asset('/media/packSampleThumbnail/' ~ sampleAttribute.image) }}" type="image/jpeg">
  106.                                 <img src="{{ asset('/media/packSampleThumbnail/' ~ sampleAttribute.image) }}" alt="{{ product.name }}" class="step_guide_image_two img-fluid">
  108.                             </picture> #}
  110.                             {# <img width="200px" height="200px" style="width:100% !important; height: auto !important;" src="/media/packSampleThumbnail/{{sampleAttribute.image}}" class="step_guide_image_two img-fluid" alt="{{sampleAttribute.title}}" /> #}
  111.                             <img src="/media/packSampleThumbnail/{{sampleAttribute.image}}" class="step_guide_image_two img-fluid" alt="{{sampleAttribute.title}}" />
  112.                             <div class="sidebar_text">
  113.                                 <div class="title">{{sampleAttribute.title}}</div>
  114.                                 <div class="description">{{sampleAttribute.description}}
  115.                                 <div class="audio_player"><audio controls><source src=" {{sampleAttribute.awsLink}}"/></audio></div>
  116.                             </div>
  117.                         </div>
  118.                         </div>
  119.                     {% endfor %}
  120.                 </div>
  121.             {% endif %}
  122.         {% endif %}
  123.     {% endif %}
  124.  {% endif %}
  126. {{ sylius_template_event('sylius.shop.product.show.content', _context) }}
  127. {% endblock %}
  129. {% block javascripts %}
  130. {{ parent() }}
  132. <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  134. <script type="text/javascript">
  135.     lightbox.option({
  136.         'albumLabel': '{{ 'sylius.lightbox.image_album_label'|trans|escape('js') }}'
  137.     });
  139.     {# {% if app.environment == "prod" %} #}
  140.     {% if app.environment == "prod" %}
  143.     var productId = {{product.id}};
  145.     {# let price = document.getElementById('product-price').innerHTML; #}
  147.     {% set productMainTaxon = product.mainTaxon %}
  149.     var productMainTaxonId = {{ productMainTaxon.id }};
  151.     var productMainTaxonName = '{{ productMainTaxon.name }}';
  153.     {% set pVariant = product|sylius_resolve_variant %}
  155.      let newPrice = price.replace(/&nbsp;/g,'');
  156.      newPrice = newPrice.replaceAll(' ','');
  157.      newPrice = newPrice.replace(/(\r\n|\n|\r)/gm, "");
  159.     let finalGTMData = {"customPageIdentifier": "productDetailPage", "productIdp":productId, "mainTaxonId":productMainTaxonId, "mainTaxonName":productMainTaxonName, "productPrice":newPrice};
  161.     {# dataLayer.push(); #}
  162.      {# dataLayer.push(finalGTMData); #}
  164.      {# {% if app.environment == "prod" %} #}
  166.         window.dataLayer = window.dataLayer || [];
  167.         dataLayer.push(finalGTMData);
  169.     {% endif %}
  171.     $(document).ready(function(){
  172.         {% if productImages > 1 %}
  173.             $(".owl-carousel.images").owlCarousel({
  174.                 items: {{ productImages > 3 ? 3 : (productImages == 3 ? 2 : productImages) }},
  175.                 loop: true,
  176.                 margin: 10,
  177.                 nav: 3,
  178.                 dots: false,
  179.             });
  180.         {% endif %}
  182.         var reviewOwl = $(".owl-carousel.reviews");
  184.         reviewOwl.on('initialized.owl.carousel', function(event) {
  185.             updateReviews();
  186.         })
  188.         reviewOwl.owlCarousel({
  189.             items: 2,
  190.             loop: true,
  191.             nav: true,
  192.             dots: true,
  193.             center: true,
  194.             responsive:{
  195.                 900:{
  196.                     items:3
  197.                 }
  198.             }
  199.     });
  201.         $(window).on('resize', function() {
  202.             updateReviews();
  203.         });
  204.     });
  206.     function changeSize(el){
  207.         var resizeText;
  209.         resizeText = function() {
  210.             return (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';
  211.         };
  213.         $(el).css('font-size', resizeText());
  215.         if (checkOverflow(el)) {
  216.             changeSize(el);
  217.         }
  218.     }
  220.     function checkOverflow(el)
  221.     {
  222.         var curOverflow = el.style.overflow;
  224.         if ( !curOverflow || curOverflow === "visible" )
  225.             el.style.overflow = "hidden";
  227.         var isOverflowing = el.clientWidth < el.scrollWidth
  228.             || el.clientHeight < el.scrollHeight;
  230.         el.style.overflow = curOverflow;
  232.         return isOverflowing;
  233.     }
  235.     function updateReviews() {
  236.         $('p.comment').each(function() {
  237.             $(this).css('font-size', '30px');
  238.             changeSize($(this).get(0));
  239.         })
  240.     }
  241. </script>
  242. {#
  243. <script src="https://partner.histoiresmax.com/ct/pt660025712.js?page=product&consent_ads={{1_OR_0
  244. }}&idcat={{CATEGORY_ID}}&wordingcat={{CATEGORY_LABEL}}&idp={{PRODUCT_ID}}&prix={{PRODUCT_
  245. PRICE}}&newcustomer={{1_OR_0}}" async="async" ></script> #}
  246. {% endblock %}