themes/BootstrapTheme/templates/bundles/SyliusShopBundle/Product/show.html.twig line 137

Open in your IDE?
  1. {% set block = app_get_blocks('num_telephone', sylius.channel.code )  %}
  2. {% set block_h = app_get_blocks('horaires_magasin', sylius.channel.code )  %}
  3. {% set block_livr = app_get_blocks('imageperso_index', sylius.channel.code )  %}
  4. {% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
  5. {% set context = {"channel": sylius.channel} %}
  7. {% extends '@SyliusShop/layout.html.twig' %}
  9. {% block title %}
  10.     {% include '@DediSyliusSEOPlugin/Shop/Header/_title.html.twig' with { 'resource': product ?? sylius.channel } %}
  11. {% endblock %}
  12. {% block metatags %}
  13.     {% if product.metaKeywords is not empty %}
  14.         <meta name="keywords" content="{{ product.metaKeywords }}" />
  15.     {% endif %}
  16.     {{ sylius_template_event('dedi_sylius_seo_plugin.metatags', { resource: product ?? sylius.channel }) }}
  17.     {{ sylius_template_event('dedi_sylius_seo_plugin.rich_snippets') }}
  18. {% endblock %}
  20. {% block content %}
  21.     {{ encore_entry_script_tags('fabric', null, 'bootstrapTheme') }}
  22.     {{ encore_entry_script_tags('configurator', null, 'bootstrapTheme') }}
  24.     {{ render(url('app_shop_geolocalisation')) }}
  26.     {% set configurator = false %}
  27.     {% set advancedModel = false %}
  29.     {% if product.isBundle and product.productBundle %}
  30.         {% for productBundleItem in product.productBundle.productBundleItems %}
  31.             {% if productBundleItem.productVariant.model %}
  32.                 {% set configurator = true %}
  33.                 {% if productBundleItem.productVariant.model.advanced %}
  34.                     {% set advancedModel = true %}
  35.                 {% endif %}
  36.             {% endif %}
  37.         {% endfor %}
  38.     {% elseif product.variants|length > 0 %}
  39.         {% for variant in product.variants %}
  40.             {% if variant.model %}
  41.                 {% set configurator = true %}
  42.                 {% if variant.model.advanced %}
  43.                     {% set advancedModel = true %}
  44.                 {% endif %}
  45.             {% endif %}
  46.         {% endfor %}
  47.     {% endif %}
  48.     <div class="hide-cross-page">
  49.         <div id="cross-selling-add-to-cart" class="pt-3">
  50.             <div class="row pt-2 mx-md-n3 mx-0">
  51.                 {% for association in product.associations  %}
  52.                     {% if association.getType().getCode() == "cross_selling_add_to_cart" and association.associatedProducts|length > 0 %}
  53.                         <div class="modal-title titre-popup color-purple-s title-popup-cross-selling">{{'app.product.pour_completer'|trans}}</div>
  54.                         {% for associatedProduct in association.associatedProducts %}
  55.                             {% if associatedProduct.enabled %}
  56.                             {% set variant = associatedProduct|sylius_resolve_variant %}
  57.                             <div class="col-md-4 col-12 border-bottom-mob px-md-3 px-0 mx-md-0 mx-2 mb-4">
  58.                                 <div class="row no-gutters h-100">
  59.                                     <div class="col-md-12 col-sm-3 col-5 max-height-1 pr-md-0 pr-1">
  60.                                         {% if associatedProduct.images|first %}
  61.                                             {% set path = associatedProduct.getImagesByPosition|first.path|imagine_filter(filter|default('sylius_shop_product_thumbnail')) %}
  62.                                         {% else %}
  63.                                             {% set path = asset('images/spacer.png') %}
  64.                                         {% endif %}
  65.                                          <a href="{{ path('sylius_shop_product_show', {'slug': associatedProduct.slug, '_locale': associatedProduct.translation.locale}) }}" title="{{ associatedProduct.name }}" data-id="{{ associatedProduct.id }}"><img src="{{ path }}" alt="{{ associatedProduct.name }} " class="w-100" /></a>
  66.                                     </div>
  67.                                     <div class="col-md-12 col-sm-3 col-7 d-flex flex-column flex-grow-l-desk pl-md-0 pl-2 pt-md-0 pt-2">
  68.                                         <div class="font-12  pb-2 flex-grow-l-desk"> <a href="{{ path('sylius_shop_product_show', {'slug': associatedProduct.slug, '_locale': associatedProduct.translation.locale}) }}" title="{{ associatedProduct.name }}">{{ associatedProduct.name }} </a></div>
  69.                                         {% if not associatedProduct.variants.empty() %}
  70.                                             {% if associatedProduct|sylius_resolve_variant %}
  71.                                                 {% set variant = associatedProduct|sylius_resolve_variant %}
  72.                                                 <div class="d-flex align-items-center pt-1">
  73.                                                     <strong class="price-promo">{{ money.calculatePriceWithTax(variant, context) }} </strong>
  74.                                                     {% set channelpricing = variant.getChannelPricingForChannel(sylius.channel) %}
  76.                                                     {% if channelpricing.originalPrice > channelpricing.price  %}
  77.                                                         <span class="price-old ml-md-2 ml-3 pt-1">{{ money.calculateOriginalPriceWithTax(associatedProduct|sylius_resolve_variant, context) }}</span>
  78.                                                     {% endif %}
  79.                                                 </div>
  80.                                             {% endif %}
  81.                                         {% endif %}
  82.                                     </div>
  84.                                 </div>
  85.                             </div>
  86.                             {% endif %}
  87.                         {% endfor %}
  88.                     {% endif %}
  89.                 {% endfor %}
  90.             </div>
  91.         </div>
  92.     </div>
  94.     <div class="art-bg mt-0 page-article">
  95.         <div class="article-top">
  96.             <div class="contenuArticle">
  97.                 <div class="max-container-5 p-0">
  98.                     <div class="position-relative px-md-0 px-2">
  99.                         {% include '@SyliusShop/Product/Show/_breadcrumb.html.twig' %}
  100.                     </div>
  101.                     {% if configurator %}
  102.                         <div class="btn-back-wrap d-none">
  103.                             <span id="btn-back">
  104.                                 <span>Retour</span>
  105.                             </span>
  106.                         </div>
  107.                         <div class="products-bundles d-none justify-content-center"></div>
  108.                     {% endif %}
  110.                     <div id="art-detail" class="art-detail d-md-flex{% if configurator %} artconfig-bloc {% if advancedModel %} advanced-bloc{% endif %}{% endif %}" data-id="{{ product.id }}" data-add-product-visited-url="{{ path('app_shop_add_product_visited_ajax') }}">
  111.                         <div class="article-left">
  112.                            {{ sylius_template_event('sylius.shop.product.show.left_sidebar', _context) }}
  113.                             {% if configurator %}
  114.                                 <div class="sticky-bloc">
  115.                                     <div class="default-config-img hide" id="js-configurator">
  116.                                         {% include '@SyliusShop/Product/Show/Configurator/_configuratorWidget.html.twig' %}
  117.                                     </div>
  118.                                     <div class="tabpeso-conf p-0 pt-lg-3">
  119.                                     {{ sylius_template_event('sylius.shop.product.show.tab_details', _context) }}
  120.                                     </div>
  121.                                 </div>
  122.                            {% endif %}
  123.                         </div>
  124.                         <div class="article-right">
  125.                             <div class="max-art-desc">
  126.                                 {% if configurator %}
  128.                                     <div class="product-bundle-name title-article-art"></div>
  129.                                 {% endif %}
  130.                                     <div class="d-none d-md-block">
  131.                                         <div class="art-top-desc ">
  132.                                             <h1 id="sylius-product-name" {{ sylius_test_html_attribute('product-name', product.name) }} class="title-article-art">
  133.                                             {{ product.name }}
  134.                                             </h1>
  135.                                         </div>
  136.                                     </div>
  137.                                 {{ sylius_template_event('sylius.shop.product.show.right_sidebar', _context) }}
  138.                                 {% set slugPage_payment = app_get_slug_by_code_and_locale('secure_payment') %}
  139.                                 {% set slugPage_quick_expedition = app_get_slug_by_code_and_locale('quick_expedition') %}
  140.                                 <div class="av-article mt-1 pt-3 px-0">
  141.                                     <div class="row mx-xl-n2 mx-n1 justify-content-between">
  142.                                         <div class="col-lg  col-4 mb-4 mb-md-0 text-center px-xl-2 px-1">
  143.                                             <a href="{{ path('sylius_shop_contact_request') }}" class="box-av  text-center  {% if not configurator %}d-lg-flex align-items-center text-lg-left{% endif %}" title="{{'app.footer.reinsurance1'|trans|raw}}">
  144.                                                 <strong class=" d-block "><img src="{{asset('images/av1.svg')}}" alt=""></strong>
  145.                                                 <span class=" d-block {% if not configurator %}pl-md-2 pt-md-0{% endif %}">{{'app.footer.reinsurance1_br'|trans|raw}}</span>
  146.                                             </a>
  147.                                         </div>
  148.                                         <div class="col-lg col-4 mb-4 mb-md-0 text-center px-xl-2 px-1">
  149.                                             <a href="{% if slugPage_payment is not null  %}{{ path('bitbag_sylius_cms_plugin_shop_page_show', {'slug': slugPage_payment }) }}{% endif %}" class="box-av    text-center {% if not configurator %}d-lg-flex align-items-center text-lg-left{% endif %}" title="{{'app.footer.reinsurance2'|trans|raw}}">
  150.                                                 <strong class=" d-block"><img src="{{asset('images/av2.svg')}}" alt=""></strong>
  151.                                                 <span class=" d-block {% if not configurator %}pl-md-2pt-md-0{% endif %}">{{'app.footer.reinsurance2_br'|trans|raw}}</span>
  152.                                             </a>
  153.                                         </div>
  155.                                         <div class="col-lg col-4 mb-md-0 text-center px-xl-2 px-1">
  156.                                             <a href="{% if slugPage_quick_expedition is not null  %}{{ path('bitbag_sylius_cms_plugin_shop_page_show', {'slug': slugPage_quick_expedition }) }}{% endif %}" class="box-av text-center {% if not configurator %}d-lg-flex align-items-center text-lg-left{% endif %}" title="{{'app.footer.reinsurance4'|trans}}">
  157.                                                 <strong class=" d-block"><img src="{{asset('images/av4.svg')}}" alt=""></strong>
  158.                                                 <span class=" d-block {% if not configurator %}pl-md-2 pt-md-0{% endif %}">{{'app.footer.reinsurance4_br'|trans|raw}}</span>
  159.                                             </a>
  160.                                         </div>
  161.                                     </div>
  162.                                 </div>
  163.                             </div>
  164.                         </div>
  165.                     </div>
  166.                 </div>
  167.             </div>
  168.         </div>
  170.         <div class="max-container-3 p-0 mt-xl-3 pt-lg-3  {% if  configurator %} d-block d-md-none{% endif %}">
  171.             {{ sylius_template_event('sylius.shop.product.show.tab_details', _context) }}
  172.         </div>
  174.     </div>
  176.     <div class="article-bottom pt-md-5 pt-4 {% if  product.code !=  "test-t-shirt" %}mt-md-3 bg-light-site{% endif %}  pb-md-3 ">
  177.         <div class="max-container-4 px-0 px-0">
  178.             {{ sylius_template_event('sylius.shop.product.show.content', _context) }}
  179.         </div>
  180.     </div>
  181. {% endblock %}
  182. {% block javascripts %}
  184. {{ parent() }}
  185. {% include '@SyliusUi/_javascripts.html.twig' with {path: 'js/updateProductVariant.js'} %}
  186. {% include '@SyliusUi/_javascripts.html.twig' with {path: 'js/updateProduct.js'} %}
  187. <script>
  188.     $("body").on("click", '.qte-moins-art', function (event) {
  190.         var inputQuantity = $(this).closest('.sylius-quantity').find('input[type="number"]');
  191.         var currentVal = parseInt(inputQuantity.val());
  192.         if(currentVal > 1){
  193.             inputQuantity.val(currentVal - 1);
  194.             inputQuantity.trigger('change');
  195.         }
  197.     });
  198.     $("body").on("click", '.qte-plus-art', function (event) {
  200.         var inputQuantity = $(this).closest('.sylius-quantity').find('input[type="number"]');
  201.         var currentVal = parseInt(inputQuantity.val());
  202.         inputQuantity.val(currentVal + 1);
  203.         inputQuantity.trigger('change');
  204.     });
  206.     {# add this product to customer's products visited (in database) #}
  207.     let customerId = {{ app.user ? app.user.customer.id : 0 }};
  208.     let divData = document.getElementById('art-detail');
  209.     if (divData) {
  210.         let data = {productId: divData.dataset.id, customerId: customerId}
  211.         $.ajax({
  212.             type: 'POST',
  213.             url: divData.dataset.addProductVisitedUrl,
  214.             data: data,
  215.             success(response) {
  216.             },
  217.             error() {
  218.             }
  219.         });
  220.     }
  221. </script>
  223. {% endblock %}