templates/bundles/SyliusShopBundle/Product/show.html.twig line 1

Open in your IDE?
  1. {% extends '@SyliusShop/layout.html.twig' %}
  2. {% block title %}{{ product.name }} | {{ parent() }}{% endblock %}
  3. {% block metatags %}
  4.     {% if product.metaDescription is defined  %}
  5.     <meta name="description" content="{{ product.metaDescription }}">
  6.     {% endif %}
  7. {% endblock %}
  9. {% block banner %}
  10.     {{ render(url('odiseo_sylius_banner_plugin_shop_partial_banner', {'template': '@SyliusShop/Banner/banner1.html.twig'})) }}
  11. {% endblock %}
  15. {% block content %}
  16. <div class="" id="p">
  18.     {% include '@SyliusShop/Product/Show/_breadcrumb.html.twig' %}
  19.     <div class="ui hidden divider"></div>
  20.     <div class="ui two column stackable grid product-details">
  22.     <div class="column product-details__left-col">
  24.         {% set productname = product.name %}
  25.         {% if mode == "gift" %}
  26.             {% set productname =  'sylius.ui.gift.offrez'|trans  %}
  27.         {% endif %}
  29.         <h1 id="sylius-product-name" class="product-details__name" {{ sylius_test_html_attribute('product-name', product.name) }}>{{ productname }}</h1>
  31.         {% if mode == "gift" %}
  33.             {% include '@SyliusShop/Product/Show/_giftcard.html.twig' %}
  35.         {% else %}
  36.             {% include '@SyliusShop/Product/Show/_detailproduct.html.twig' %}
  38.              {% include '@SyliusShop/Product/Show/_productaction.html.twig' %}
  39.         {% endif %}
  42.     </div>
  43.         <div class="column">
  45.             {% if product.images|length == 1 %}
  46.                 {% include '@SyliusShop/Product/Show/_images.html.twig' %}
  47.             {% else %}
  49.                 {% if product.images|length > 1 %}
  50.                 <div class="product-details__slider-main produit">
  51.                         {% for image in product.images %}
  52.                         {% set path = image.path is not null ? image.path|imagine_filter('sylius_large') : '' %}
  53.                             <img src="{{ path }}"  alt="{{ product.name }}" />
  54.                         {% endfor %}
  55.                 </div>
  56.                 <div class="product-details__slider-navigation">
  57.                         {% for image in product.images %}
  58.                         {% set path = image.path is not null ? image.path|imagine_filter('sylius_large') : '' %}
  59.                             <img src="{{ path }}"  alt="{{ product.name }}" />
  60.                         {% endfor %}
  61.                 </div>
  62.                 {% endif %}
  63.             {% endif %}
  66.             {% if product.getVideo() is not empty %}
  67.             <div class="product_video product-details__product_video" style="padding-top:10px;">
  68.               {{ product.getVideo() | raw }}
  69.             </div>
  70.             {% endif %}
  73.             {% if product.getDispoDescription() is not empty %}
  74.             <div class="dispo_description product-details__dispo_description">
  75.               {{ product.getDispoDescription() | raw }}
  76.             </div>
  77.             {% endif %}
  79.         </div>
  80.     </div>
  82.      {% if mode != "gift" %}
  83.         <div class="ui top attached large tabular menu">
  84.             <a class="item active" data-tab="details">{{ 'sylius.product.informationscomplementaires'|trans }}</a>
  85.             {% if SimpleAttributes.pratiques is defined %}
  86.             <a class="item" data-tab="attributes" {{ sylius_test_html_attribute('tab', 'attributes') }}>{{ 'sylius.product.informationspratiques'|trans }}</a>
  87.             {% endif %}
  88.             <a class="item" data-tab="reviews">{{ 'sylius.ui.reviews'|trans }} ({{ product.acceptedReviews|length }})</a>
  89.         </div>
  90.         {% include '@SyliusShop/Product/Show/Tabs/_details.html.twig' %}
  91.         {% include '@SyliusShop/Product/Show/Tabs/_infospratiques.html.twig' %}
  92.         {% include '@SyliusShop/Product/Show/Tabs/_reviews.html.twig' %}
  93.     {% endif %}
  96.         <div class="text-center product-details__back-button">
  97.             <a href="{{ path('app_shop_product_search') }}" class="button button--outline">
  98.                 <i class="fas fa-arrow-left"></i> {{ 'sylius.ui.retourliste'|trans }}
  99.             </a>
  100.         </div>
  103.     {% for association in product.associations %}
  104.         {{ render(url('sylius_shop_partial_product_association_show', {'productId': product.id, 'id': association.id, 'template': '@SyliusShop/Product/Show/_association.html.twig'})) }}
  105.     {% else %}
  106.         <div class="related-products">
  107.             <img class="related-products__icon" src="{{ asset('assets/shop/img/associated-icon.png') }}" alt="{{ 'sylius.ui.produitsassocies'|trans }}">
  108.             <span class="related-products__tagline">{{ 'sylius.ui.produitsassocies'|trans }}</span>
  109.             <h4 class="related-products__title">{{ 'sylius.ui.clientontcommande'|trans }} </h4>
  110.              {{ render(url('sylius_shop_partial_product_index_latest', {'count': 10, 'template': '@SyliusShop/Product/_horizontalList.html.twig'})) }}
  111.         </div>
  112.     {% endfor %}
  113. </div>
  116. {% endblock %}
  118. {% block javascripts %}
  119. {{ parent() }}
  120. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  121. <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  122. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  123. <script>
  127.     //lightbox.option({
  128.     //    'albumLabel': '{{ 'sylius.lightbox.image_album_label'|trans|escape('js') }}'
  129.     //});
  130.     $(document).ready(function () {
  133.       $('.sylius_add_to_cart_cartItem_variant_button').on('click', function () {
  135.         var selector = '';
  136.         key = $(this).data( "key" );
  137.         var price = $(this).data( "price" );
  138.         var originalPrice = $(this).data( "originalprice" );
  139.         if (price !== undefined) {
  140.           $('#product-price').text(price);
  141.           if (originalPrice !== undefined && originalPrice != "" && originalPrice != price ) {
  142.             $('#product-original-price').css('display', 'inline').html('<del>' + originalPrice + '</del>');
  143.           } else {
  144.             $('#product-original-price').css('display', 'none');
  145.           }
  146.         } else {
  147.           $('#product-price').text($('#sylius-variants-pricing').attr('data-unavailable-text'));
  148.           $('button[type=submit]').attr('disabled', 'disabled');
  149.         }
  150.       });
  152.         $('.product-details__slider-main').slick({
  153.             slidesToShow: 1,
  154.             slidesToScroll: 1,
  155.             arrows: true,
  156.             fade: true,
  157.             infinite: false,
  158.             asNavFor: '.product-details__slider-navigation',
  159.             autoplay: true,
  160.             autoplaySpeed: 3000
  161.         });
  162.         $('.product-details__slider-navigation').slick({
  163.             slidesToShow: 4,
  164.             slidesToScroll: 1,
  165.             asNavFor: '.product-details__slider-main',
  166.             arrows: false,
  167.             infinite: false,
  168.             focusOnSelect: true,
  169.             autoplay: true,
  170.             autoplaySpeed: 3000
  171.         });
  172.         $('.related-products__products').slick({
  173.             slidesToShow: 3,
  174.             slidesToScroll: 1,
  175.             arrows: true,
  176.             dots: true,
  177.             infinite: false,
  178.             autoplay: true,
  179.             autoplaySpeed: 3000,
  180.             responsive: [
  181.                     {
  182.                         breakpoint: 991,
  183.                         settings: {
  184.                             slidesToShow: 2,
  185.                         }
  186.                     },
  187.                     {
  188.                         breakpoint: 768,
  189.                         settings: {
  190.                             slidesToShow: 1,
  191.                         }
  192.                     },
  193.                 ]
  194.         });
  197.         const hideScreens = () => {
  198.             document.querySelector('#gift_screen1').style.display = 'none'
  199.             document.querySelector('#gift_screen2').style.display = 'none'
  200.             document.querySelector('#gift_screen3').style.display = 'none'
  201.         }
  202.         const showScreen1 = () => {
  203.             document.querySelector('#gift_screen1').style.display = 'block'
  204.         }
  205.         const showScreen2 = () => {
  206.             document.querySelector('#gift_screen2').style.display = 'block'
  207.         }
  208.         const showScreen3 = () => {
  209.             document.querySelector('#gift_screen3').style.display = 'block'
  210.         }
  211.         // form steps
  212.         document.querySelectorAll('.gotostep1').forEach((item) => {
  213.             item.addEventListener('click', (e) => {
  214.                 e.preventDefault();
  215.                 hideScreens();
  216.                 showScreen1();
  217.             })
  218.         })
  219.         document.querySelectorAll('.gotostep2').forEach((item) => {
  220.             item.addEventListener('click', (e) => {
  221.                 e.preventDefault();
  222.                 hideScreens();
  223.                 showScreen2();
  224.             })
  225.         })
  226.         document.querySelectorAll('.gotostep3').forEach((item) => {
  227.             item.addEventListener('click', (e) => {
  228.                 e.preventDefault();
  229.                 hideScreens();
  230.                 showScreen3();
  231.             })
  232.         });
  235.     })
  236. </script>
  237. {% endblock %}