themes/webapicTheme/templates/site_product_show.html.twig line 1

Open in your IDE?
  1. {% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
  3. {% extends '@SyliusShop/layout.html.twig' %}
  5. {% block title %}{{ variant.name }} - {{ parent() }}{% endblock %}
  7. {% block metatags %}
  8.     {{ parent() }}
  9.     {% if app.request.locale|slice(0, 2) == 'en' %}
  10.         <meta name="description" content="{{ variant.name }} - Our tips for accessorizing it and matching it with our other products. Free delivery in store - Choose your color of {{ variant.product.name }}" />
  11.     {% else %}
  12.         <meta name="description" content="{{ variant.name }} - Nos astuces pour l’accessoiriser et l’assortir à nos autres produits. Livraison gratuite en boutique - Choisissez votre coloris de {{ variant.product.name }}" />
  13.     {% endif %}
  14. {% endblock %}
  16. {% block javascripts %}
  17. {{ parent() }}
  18. <script charset="utf-8" src="https://cl.avis-verifies.com/fr/cache/5/2/2/522a8f1f-9ade-fc14-a9e5-7424335e0efd/AWS/PRODUCT_API/tag.min.js"></script> 
  19. {% endblock %}
  21. {% block content %}
  22. <div class="product-page {% if variant.product.conditioning == 'card_kdo_per_euros_each_10_euros' %} kdo-product-page{% endif %}">
  24.     {# Fil d'ariane #}
  25.     {{ wo_render_breadcrumbs() }}
  26. {# {{dump(variant.optionValues[0])}} #}
  27. {# {{dump(variant)}} #}
  28.     {# Page produit = page d'une déclinaison produit #}
  29.     <div class="ui two column stackable grid product-ctn">
  30.         <div class="product-ctn-left">
  32.             {# Images du produits #}
  33.             <div class="images-ctn">
  34.                 {% if is_mobile() and not is_device('iPad') %}
  35.                                         <div class="flag">
  36.                                                 {% include 'partials/block-callout.html.twig' with {'callout': variant.badge} only %}
  38.                                                 {# Octobre Rose #}
  39.                                                 {# {% if variant.optionValues[0].code == "PL.RO.FU" %}
  40.                                                     <img class="lazy oct-rose" src="{{ asset('webapic-theme/images/2024_oct-rose_ruban-fiche.svg') }}" alt="Octobre Rose" />
  41.                                                 {% else %}
  42.                                                     {% include 'partials/block-callout.html.twig' with {'callout': variant.badge} only %}
  43.                                                 {% endif %} #}
  44.                                         </div>
  46.                     {% if variant.product.images|length > 0 %} 
  47.                         <div class="images-mobiles">
  48.                             {% for image in variant.imagesByType('image_product_main')|merge(variant.imagesByType('image_product_secondary')) %}
  50.                                 {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_large_thumbnail') : asset('assets/shop/img/200x200.png') %}
  51.                                 {% set original_path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_original') : asset('assets/shop/img/200x200.png') %}
  53.                                 <a href="{{ original_path }}" class="ui fluid image  image{{ loop.index }} variantimageright{{ variant.imagesByType('image_product_main')|merge(variant.imagesByType('image_product_secondary'))|length }}" data-lightbox="sylius-product-image" data-idvariant="{{ variant.id }}">
  54.                                     <img class="lazyload" data-src="{{ path }}" alt="{{ variant.name }}" />
  55.                                 </a>
  56.                             {% endfor %}
  57.                         </div>
  58.                     {% endif %}
  59.                 {% else %}
  60.                     {% if variant.product.images|length > 1 %}
  61.                         <div class="ui small images images-left">
  62.                             <div class="images-left-sticky">
  64.                                
  65.                                 {% for image in variant.imagesByType('image_product_main')|merge(variant.imagesByType('image_product_secondary')) %}
  67.                                     {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_small_thumbnail') : asset('assets/shop/img/200x200.png') %}
  68.                                 
  69.                                     <div class="ui image variantimageleft{{ variant.imagesByType('image_product_main')|merge(variant.imagesByType('image_product_secondary'))|length }}" data-idvariant="{{ variant.id }}">
  70.                                         <a href="{{ image.path|imagine_filter('sylius_shop_product_original') }}">
  71.                                             <img class="lazyload" data-src="{{ path }}" data-large-thumbnail="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ variant.name }}" />
  72.                                         </a>
  73.                                     </div>
  74.                                 {% endfor %}
  75.                             
  76.                             </div>
  77.                         </div>
  78.                     {% endif %}
  80.                     <div class="images-right">
  81.                         <div class="flag">
  82.                             {% include 'partials/block-callout.html.twig' with {'callout': variant.badge} only %}
  84.                                                         {# Octobre Rose #}
  85.                                                         {# {% if variant.optionValues[0].code == "PL.RO.FU" %}
  86.                                                             <img class="lazy oct-rose" src="{{ asset('webapic-theme/images/2024_oct-rose_ruban-fiche.svg') }}" alt="Octobre Rose" />
  87.                                                         {% else %}
  88.                                                             {% include 'partials/block-callout.html.twig' with {'callout': variant.badge} only %}
  89.                                                         {% endif %} #}
  90.                         </div>
  92.                         {# Icones enduction - enduit #}
  93.                         {# {% if variant.coatingType is not empty %}
  94.                         <div class="flag enduit">
  95.                             {% if variant.coatingVegetal == true %}
  96.                             <img src="{{ asset('webapic-theme/images/produit-enduit-vegetal.svg') }}" class="ui image" />
  97.                             {% endif %}
  98.                             {% if variant.coatingType == 'coating_mat' %}
  99.                             <img src="{{ asset('webapic-theme/images/produit-enduit-exterieur.svg') }}" class="ui image" />
  100.                             <img src="{{ asset('webapic-theme/images/produit-enduit-mat.svg') }}" class="ui image" />
  101.                             {% elseif variant.coatingType == 'coating_brillant' %}
  102.                             <img src="{{ asset('webapic-theme/images/produit-enduit-exterieur.svg') }}" class="ui image" />
  103.                             <img src="{{ asset('webapic-theme/images/produit-enduit-brillant.svg') }}" class="ui image" />
  104.                             {% elseif variant.coatingType == 'coating_inner' %}
  105.                             <img src="{{ asset('webapic-theme/images/produit-enduit-interieur.svg') }}" class="ui image" />
  106.                             {% elseif variant.coatingType == 'fabric_heat_sealed' %}
  107.                             <img src="{{ asset('webapic-theme/images/produit-enduit-thermocolle.svg') }}" class="ui image" />
  108.                             {% endif %}
  109.                         </div>
  110.                         {% endif %}                         #}
  112.                        
  113.                         {% for image in variant.imagesByType('image_product_main')|merge(variant.imagesByType('image_product_secondary')) %}
  115.                             {% set path = image.path is not null ? image.path|imagine_filter('app_product_big_main_picture') : asset('assets/shop/img/200x200.png') %}
  116.                             {% set original_path = image.path is not null ? image.path|imagine_filter('app_product_big_main_picture') : asset('assets/shop/img/200x200.png') %}
  118.                             
  119.                             <a href="{{ original_path }}" class="ui fluid image  image{{ loop.index }} variantimageright{{ variant.imagesByType('image_product_main')|merge(variant.imagesByType('image_product_secondary'))|length }}" data-lightbox="sylius-product-image" data-idvariant="{{ variant.id }}">
  120.                                 <img class="lazyload" data-src="{{ path }}" alt="{{ variant.name }}" />
  121.                             </a>
  122.                         {% endfor %}
  123.                         
  124.                     </div>
  125.                 {% endif %}
  126.             </div>
  127.             {# Fin - Images du produits #}
  129.         </div>
  130.         <div class="product-ctn-right">
  131.             <div class="product-ctn-right-sticky">
  132.                 {# Titre + Ajout à la liste d'envies #}
  133.                 <div class="titre">
  134.                     <h1 id="sylius-product-name" itemprop="name"  class="ui monster" {{ sylius_test_html_attribute('product-name', variant.name) }}>
  135.                         {{ variant.name|title }}
  136.                     </h1>
  137.                 
  138.                     {% include 'partials/block-add-to-wishlist.html.twig' with {'product': variant} %}
  139.                 </div>
  141.                 {# Avis #}
  142.                 <div class="ui text menu avis">
  143.                     {# Pour les tissus, on affiche les avis de la déclinaison #}
  144.                     {% if variant.code|slice(0, 5) == constant('App\\Doctrine\\ORM\\ProductVariantRepository::PREFIX_CODE_DIVALTO_FABRIC') %}
  145.                     <div class="NETREVIEWS_PRODUCT_STARS" data-product-id="{{ variant.id }}"></div>
  146.                     {% else %}
  147.                     <div class="NETREVIEWS_PRODUCT_STARS" data-product-id="{{ variant.product.id }}"></div>
  148.                     {% endif %}
  149.                 </div>
  151.                 {# Prix #}
  152.                 {% if variant.product.conditioning not in ['card_kdo_per_euros_each_10_euros'] %}
  153.                 <div class="prices-ctn">
  154.                 
  155.                     {% set hasDiscount = variant|sylius_has_discount({'channel': sylius.channel}) %}
  157.                     {% set price = money.calculatePrice(variant) %}
  158.                     {% set originalPrice = money.calculateOriginalPrice(variant) %}
  160.                                         <div id="product-price" {% if price != originalPrice %}class="promo-product-price"{% endif %} {{ sylius_test_html_attribute('product-price', money.calculatePrice(variant)) }}>
  161.                         {% spaceless %}
  162.                         {{ money.calculatePrice(variant) }}
  163.                         {% if variant.product.conditioning == 'per_meter_each_0_5_meter' %}
  164.                         /m
  165.                         {% endif %}
  166.                         {% endspaceless %}
  167.                         {% if variant.badge is defined and variant.badge is not empty and variant.badge == "low_price" and  variant.product.conditioning != 'per_meter_each_0_5_meter'  %}
  168.                             {% set pricebarre = money.convertAndFormat(variant|sylius_calculate_original_price({'channel': sylius.channel}) * 2) %}
  169.                             <span class="original-price">{{ pricebarre }}</span>
  170.                         {% endif %}
  171.                     </div>
  173.                     {% if price != originalPrice %}
  174.                         
  175.                         <div class="original" {{ sylius_test_html_attribute('product-original-price') }}>
  176.                             <del>{{ originalPrice }}</del>
  177.                         </div>
  178.                         
  179.                         {% set marks = variant|sylius_calculate_price({'channel': sylius.channel})|trim %}
  180.                         {% set total = variant|sylius_calculate_original_price({'channel': sylius.channel})|trim %}
  181.                         {% set promo = 100 - ((marks * 100) / total) %}
  182.                         <div class="promo"> 
  183.                             - {{ promo|round(0) }}.00 %
  184.                         </div>
  186.                     {% endif %}
  188.                     {% if variant.pricePerTwo > 0 %}
  189.                     <div class="codepromo">
  190.                         {{ money.convertAndFormat(variant.pricePerTwo) }}
  191.                         <br />
  192.                         {{ 'app.front.produit.lesdeux'|trans }}
  193.                     </div>
  194.                     {% endif %}
  195.                 </div>
  196.                 {% endif %}
  198.                                 {# Liste des déclinaisons disponible #}
  199.                                 <div class="listingfixe">
  200.                                         <div class="listingfixe-ctn">
  201.                                                 <div class="listingfixe-ctn-products">
  202.                                                         <div class="listingfixe-products">
  203.                                                                 {% for rowVariant in allVariants %}
  204.                                                                         {% if rowVariant.hasImages and rowVariant.canAddItem() %}
  205.                                                                                 {% if rowVariant.imagesByType('image_product_main') is not empty %}
  206.                                                                                         {% set source_path = rowVariant.imagesByType('image_product_main').first.path %}
  207.                                                                                         {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  208.                                                                                         {% set path = source_path|imagine_filter(filter|default('app_product_small_thumbnail_listing')) %}
  209.                                                                                 {% elseif rowVariant.images.first %}
  210.                                                                                         {% set source_path = rowVariant.images.first.path %}
  211.                                                                                         {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  212.                                                                                         {% set path = source_path|imagine_filter(filter|default('app_product_small_thumbnail_listing')) %}
  213.                                                                                 {% else %}
  214.                                                                                         {% set original_path = asset('webapic-theme/images/icon-gmap.png') %}
  215.                                                                                         {% set path = original_path %}
  216.                                                                                 {% endif %}
  218.                                                                                 <div class="listingfixe-product-ctn {% if rowVariant.id == variant.id %}current{% endif %}">
  219.                                                                                         <a href="{{ path('app_product_variant_show', {'slug': rowVariant.slug, 'id': rowVariant.id}) }}">
  220.                                                                                                 <div class="img-ctn">
  221.                                                                                                         <div class="img-ctn-content">
  222.                                                                                                                 <img src="{{ path }}" id="main-image" alt="{{ rowVariant.name }}" {{ sylius_test_html_attribute('main-image') }}/>
  223.                                                                                                         </div>
  224.                                                                                                 </div>
  225.                                                                                         </a>
  226.                                                                                 </div>
  227.                                                                         {% endif %}
  228.                                                                 {% endfor %}
  229.                                                         </div>
  230.                                                 </div>
  231.                                         </div>
  232.                                 </div>
  233.                                 {# Fin - Liste des déclinaisons disponible #}
  235.                 {# Stock + En boutique #}
  236.                 <div class="stock-ctn">
  237.                     <div class="stock-ctn-left">
  238.                         <img src="{{ asset('webapic-theme/images/icon-produit-stock.svg') }}" class="ui image"/>
  239.                         <span>
  240.                             {% if variant.canAddItem() %}
  241.                                  {{ 'app.front.produit.stock'|trans }}                                
  242.                             {% else %}
  243.                                 {% if variant.getIsBlocked() %}
  244.                                     {{ 'app.front.produit.availablesoon'|trans }}
  245.                                 {% else %}
  246.                                     {{ 'app.front.produit.outstock'|trans }}
  247.                                 {% endif %}
  248.                             {% endif %}
  249.                         </span>
  250.                     </div>
  252.                     <div class="stock-ctn-right">
  253.                         <img src="{{ asset('webapic-theme/images/icon-produit-boutique.svg') }}" class="ui image"/>
  254.                         <a data-url="{{ path('app_product_shops', {'variantId': variant.id}) }}" href="#">
  255.                          {% if app.user and app.user.customer and app.user.customer.favoriteShop %}                              
  256.                                
  257.                             {% if userFavoriteShopStock == 1 %}                                       
  258.                                 {{ 'app.front.produit.disponible'|trans }}
  259.                             {% else %}
  260.                                 {{ 'app.front.produit.indisponible'|trans }}
  261.                             {% endif %}
  262.                             : {{ app.user.customer.favoriteShop.name }}
  263.                                
  264.                         {% else %}                            
  265.                             {{ 'app.front.produit.trouver'|trans }}
  266.                         {% endif %}
  267.                         </a>
  268.                     </div>
  269.                 </div>
  271.                 {# Ajout au panier #}
  272.                 {% if variant.canAddItem() %}
  273.                     <div class="addtocart-ctn" id="sylius-product-selecting-variant" {{ sylius_test_html_attribute('product-selecting-variant') }}>
  275.                         {% if variant.product.conditioning == 'per_meter_each_0_5_meter' %}
  276.                             {% if meter != 0  %}
  277.                                 <div class="quantite-ctn">
  278.                                     <div class="quantite-select">                              
  279.                                     
  280.                                         <select name="select_tissu" id="add-to-cart" data-idproduct="{{ variant.id }}">
  281.                                             {% for i in range(0.5, meter, 0.5) %}
  282.                                                 <option value="{{ i }}"> {{ i }} m</option>
  283.                                             {% endfor %}
  284.                                         </select>
  285.                                         <span></span>
  287.                                     </div>
  288.                                 </div>
  289.                             {% endif %}
  290.                         {% elseif variant.product.conditioning == 'card_kdo_per_euros_each_10_euros' %}
  291.                                                         <div class="quantite-ctn">
  292.                                                                 <div class="quantite-select">
  293.                                                                         <div class="kdo-select-label">{{ 'app.front.panier.votre_montant'|trans }} :</div>
  294.                                                                         <select name="select_tissu" id="add-to-cart" data-idproduct="{{ variant.id }}">
  295.                                                                                 {% for i in range(10, 250, 10) %}
  296.                                                                                         <option value="{{ i }}"> {{ i }} €</option>
  297.                                                                                 {% endfor %}
  298.                                                                         </select>
  299.                                                                         <span></span>
  300.                                                                 </div>
  301.                                                                 <div class="kdo-product-form">
  302.                                                                     <input type="text" name="kdo_mail" placeholder="Email destinataire" id="kdo_mail">
  303.                                                                     <a href="#" class="kdo_infobulle">
  304.                                                                         <span class="kdo_infobulle_declencheur">i</span>
  305.                                                                         <span class="kdo_infobulle_txt">{{ 'app.front.produit.kdogardersecret'|trans }}</span>
  306.                                                                     </a>
  307.                                                                     <input type="text" name="kdo_lastname" placeholder="Nom" id="kdo_lastname">
  308.                                                                     <input type="text" name="kdo_firstname" placeholder="Prénom" id="kdo_firstname">
  309.                                                                     <textarea rows="4" name="kdo_message" placeholder="Votre message" id="kdo_message"></textarea>
  310.                                                                 </div>
  311.                                                         </div>
  312.                         {% else %}
  313.                             <div class="quantite-ctn">
  314.                                 <div class="quantite-input">
  315.                                     <div>
  316.                                         <label for="add-to-cart" class="required"> {{ 'app.front.produit.quantity'|trans }}</label>
  317.                                         <input onkeyup="if(value>{{ variant.countItemStock() }}) value={{ variant.countItemStock() }};" max="{{ variant.countItemStock() }}" type="number" id="add-to-cart" name="sylius_add_to_cart[cartItem][quantity]" class="js-add-to-cart-qty" data-idproduct="{{ variant.id }}" required="required" min="1">
  318.                                     </div>
  319.                                     <div class="inc button">+</div>
  320.                                     <div class="dec button">-</div>
  321.                                 </div>
  322.                             </div>
  323.                         {% endif %}
  324.                         {% if variant.product.conditioning != 'per_meter_each_0_5_meter' or meter != 0 %}
  325.                             <div class="addtocart-action">
  326.                                 <button class="js-add-to-cart lien-saumon" data-url="{{ path('app_cart_add_to_cart_ajax') }}" data-target="#add-to-cart"  data-tissu="{{ isTissu }}" data-iscartekdo="{{ isCarteKdo }}">
  327.                                     <img src="{{ asset('webapic-theme/images/icon-produit-panier.svg') }}" class="ui image" />
  328.                                     {{ 'app.front.panier.achete'|trans }}
  329.                                 </button>
  330.                             </div>
  331.                         {% endif %}
  332.                     </div>
  333.                 {% else %}
  334.                      {# {{ 'app.front.produit.outstock'|trans }} #}
  335.                 {% endif %}
  337.                                 {# Octobre Rose #}
  338.                                 {# {% if variant.optionValues | length  > 0 and variant.optionValues[0].code == "PL.RO.FU" %}
  339.                                     <div class="octobre-rose-encart">
  340.                                         <a href="/collections/classique/plumetis-rose-fuchsia-1" target="_blank"><img src="{{ asset('webapic-theme/images/2024_oct-rose_ruban-fiche-MEA.svg') }}" class="ui image" /></a>
  341.                                         <p><strong>100 % des ventes reversées</strong> à l'association la <span>Ligue contre le cancer</span>. <a href="/collections/classique/plumetis-rose-fuchsia-1" target="_blank">Plus d'infos</a></p>
  342.                                     </div>
  343.                                 {% endif %} #}
  344.                 <div class="ui hidden divider"></div>
  346.                 {# Accessoires ou bien un bloc image "Sac&Zip" #}
  347.                 {# {{ dump(variant) }} #}
  348.                 {# {% if variant.product.imagesByType('image_product_mea_saczip')|length > 0  %} #}
  349.                 {# {% if produitConfigurateur == 1  %}
  350.                     <div>
  351.                         <a href="{{ path('app_configurateur', {'baseVariantId': variant.id}) }}">
  353.                                                         {% if app.request.locale|slice(0, 2) == 'en' %}
  354.                                                                 <img src="{{ asset('webapic-theme/images/bloc-bt-sac-and-zip_en.png') }}" class="ui image" />
  355.                                                         {% else %}
  356.                                                                 <img src="{{ asset('webapic-theme/images/bloc-bt-sac-and-zip.png') }}" class="ui image" />
  357.                                                         {% endif %}
  358.                         </a>
  359.                     </div>
  360.                  {% elseif associationAccessoire is not empty and accessoires|length > 0 %}  #}   
  361.                                  {% if associationAccessoire is not empty and accessoires|length > 0 %}       
  362.                     <div class="accessoires">
  363.                         <div class="accessoires-ctn">
  364.                             <h2 class="titre"><strong>{{ 'app.front.produit.accessoire1'|trans }}</strong> {{ 'app.front.produit.accessoire2'|trans }} :</h2>
  365.                                                 
  366.                             <div class="association-ctn" id="sylius-product-association-{{ associationAccessoire.type.code }}" {{ sylius_test_html_attribute('product-association', associationAccessoire.type.name) }}>
  367.                                 <div class="caroussel">
  368.                                     {% for product in accessoires %}
  369.                                         {% if product.hasImages and product.canAddItem() %}
  370.                                             <div class="association-ctn-product">
  371.                                                 {% if product.imagesByType('image_product_main') is not empty %}
  372.                                                     {% set source_path = product.imagesByType('image_product_main').first.path %}
  373.                                                     {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  374.                                                     {% set path = source_path|imagine_filter(filter|default('app_product_small_thumbnail_listing')) %}
  375.                                                 {% elseif product.images.first %}
  376.                                                     {% set source_path = product.images.first.path %}
  377.                                                     {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  378.                                                     {% set path = source_path|imagine_filter(filter|default('app_product_small_thumbnail_listing')) %}
  379.                                                 {% else %}
  380.                                                     {% set original_path = asset('assets/shop/img/400x300.png') %}
  381.                                                     {% set path = original_path %}
  382.                                                 {% endif %}
  384.                                                 <a href="{{ path('app_product_variant_show', {'slug': product.slug, 'id': product.id}) }}" data-idaccessoire="{{ product.id }}" data-idvariant="{{ variant.id }}" data-url="{{ path('app_product_accessoires') }}">
  386.                                                     <div class="hover">{{ 'app.front.produit.accessoire3'|trans }}</div>
  388.                                                     <span class="already">
  389.                                                         <svg width="100%" height="100%" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  390.                                                             <path d="M1.74023 6.99999L7.18468 12.4444L16.2587 1.55554" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  391.                                                         </svg>
  392.                                                     </span>
  393.                                                     
  394.                                                     <div class="img-content">
  395.                                                         <img class="lazyload" src="{{ path }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} />
  396.                                                         {% if product.imagesByType('image_product_main') is not empty  and product.imagesByType('image_product_hover') is not empty %}               
  398.                                                             {% set source_path = product.imagesByType('image_product_hover').first.path %}
  399.                                                             {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  400.                                                             {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
  401.                                                             
  402.                                                             <img class="hover lazyload" data-src="{{ path }}" id="main-image" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }} />
  403.                                                         {% endif %}
  404.                                                     </div>    
  406.                                                     <h3 class="title">{{ product.name }}</h3>
  407.                                                     <div class="sylius-product-price price js-base-price-accessory" {{ sylius_test_html_attribute('product-price') }}>{{ money.calculatePrice(product) }}</div>
  408.                                                 </a>
  409.                                             </div>
  410.                                          {% endif %}
  411.                                     {% endfor %}
  412.                                 </div>
  413.                             </div>
  414.                         </div>
  415.                     </div>
  416.                 {% endif %}
  418.                 {# Onglets #}
  419.                 <div class="tabs-ctn">
  420.                     <div class="ui top attached large tabular tabs-top">
  421.                         <a class="item details active" data-tab="details"><h2>{{ 'sylius.ui.details'|trans }}</h2></a>
  423.                         {% if variant.product.attributes|length > 0 or variant.attributes|length > 0 %}
  424.                         <a class="item carac" data-tab="attributes" {{ sylius_test_html_attribute('tab', 'attributes') }}><h2>{{ 'sylius.ui.attributes'|trans }}</h2></a>
  425.                         {% endif %}
  426.                         {% if variant.advantages is not empty or variant.product.advantages is not empty %}
  427.                         <a class="item avantages" data-tab="avantages"><h2>{{ 'app.front.produit.avantages'|trans }}</h2></a>
  428.                         {% endif %}
  429.                         {% if variant.maintenance is not empty or variant.product.maintenance is not empty %}
  430.                         <a class="item entretien" data-tab="entretien"><h2>{{ 'app.front.produit.entretien'|trans }}</h2></a>
  431.                         {% endif %}
  432.                     </div>
  433.                     <div class="tabs-content">
  434.                         <div class="ui bottom attached tab segment details active" data-tab="details" itemprop="description">
  435.                             {% if variant.description is not empty %}
  436.                                 {{ variant.description|raw }}
  437.                             {% elseif variant.product.description is not empty %}
  438.                                 {{ variant.product.description|raw }}
  439.                             {% else %}
  440.                                 {{ 'sylius.ui.no_description'|trans }}.
  441.                             {% endif %}
  442.                         </div>
  443.                         {% if variant.product.attributes|length > 0 or variant.attributes|length > 0 %}
  444.                         <div class="ui bottom attached tab segment" data-tab="attributes">
  445.                             <table id="sylius-product-attributes" class="ui definition table" {{ sylius_test_html_attribute('product-attributes') }}>
  446.                                 <tbody>
  447.                                 {% for attribute in variant.getAttributesByLocale(app.request.locale, app.request.defaultLocale, sylius_base_locale)|sort_by('attribute.position') %}
  448.                                     <tr>
  449.                                         <td class="sylius-product-attribute-name" {{ sylius_test_html_attribute('product-attribute-name', attribute.name) }}>
  450.                                             {{ attribute.name }}
  451.                                         </td>
  452.                                         <td class="sylius-product-attribute-value" {{ sylius_test_html_attribute('product-attribute-value', attribute.name) }}>
  453.                                             {% include [
  454.                                                 '@SyliusShop/Product/Show/Types/'~attribute.attribute.type~'.html.twig',
  455.                                                 '@SyliusAttribute/Types/'~attribute.attribute.type~'.html.twig',
  456.                                                 '@SyliusShop/Product/Show/Types/default.html.twig'
  457.                                             ] with {
  458.                                                 'attribute': attribute,
  459.                                                 'locale': app.request.locale,
  460.                                                 'fallbackLocale': app.request.defaultLocale
  461.                                             } %}
  462.                                         </td>
  463.                                     </tr>
  464.                                 {% endfor %}
  465.                                 {% for attribute in variant.product.getAttributesByLocale(app.request.locale, app.request.defaultLocale, sylius_base_locale)|sort_by('attribute.position') %}
  466.                                     <tr>
  467.                                         <td class="sylius-product-attribute-name" {{ sylius_test_html_attribute('product-attribute-name', attribute.name) }}>
  468.                                             {{ attribute.name }}
  469.                                         </td>
  470.                                         <td class="sylius-product-attribute-value" {{ sylius_test_html_attribute('product-attribute-value', attribute.name) }}>
  471.                                             {% include [
  472.                                                 '@SyliusShop/Product/Show/Types/'~attribute.attribute.type~'.html.twig',
  473.                                                 '@SyliusAttribute/Types/'~attribute.attribute.type~'.html.twig',
  474.                                                 '@SyliusShop/Product/Show/Types/default.html.twig'
  475.                                             ] with {
  476.                                                 'attribute': attribute,
  477.                                                 'locale': app.request.locale,
  478.                                                 'fallbackLocale': app.request.defaultLocale
  479.                                             } %}
  480.                                         </td>
  481.                                     </tr>
  482.                                 {% endfor %}
  483.                                 </tbody>
  484.                             </table>
  485.                         </div>
  486.                         {% endif %}
  488.                         {% if variant.advantages is not empty or variant.product.advantages is not empty %}
  489.                         <div class="ui bottom attached tab segment avantages" data-tab="avantages">
  490.                             {% if variant.advantages is not empty %}
  491.                                 {{ variant.advantages|raw }}
  492.                             {% elseif variant.product.advantages is not empty %}
  493.                                 {{ variant.product.advantages|raw }}
  494.                             {% endif %}
  495.                         </div>
  496.                         {% endif %}
  498.                         {% if variant.maintenance is not empty or variant.product.maintenance is not empty %}
  499.                         <div class="ui bottom attached tab segment entretien" data-tab="entretien">
  500.                             {% if variant.maintenance is not empty %}
  501.                                 {{ variant.maintenance|raw }}
  502.                             {% elseif variant.product.maintenance is not empty %}
  503.                                 {{ variant.product.maintenance|raw }}
  504.                             {% endif %}
  505.                         </div>
  506.                         {% endif %}
  507.                     </div>
  508.                 </div>
  510.                 {# Bandeau #}
  511.                 {% include 'partials/block-bandeau.html.twig' %}
  512.             </div>
  513.         </div>
  514.     </div>
  515.     <div class="product-full">
  516.         {# "J'ajoute ma petite touche" #}
  517.         {% if associationPetiteTouche is not empty and productsPetiteTouche|length > 0 %}
  518.         <div class="petitetouche">
  519.             <div class="petitetouche-left">
  520.                 <div class="portrait">
  521.                     <h2 class="portrait-top">
  522.                         {{ 'app.front.produit.petitetouche1'|trans }}
  523.                         <span>{{ 'app.front.produit.petitetouche2'|trans }}</span>
  524.                     </h2>
  526.                     <div class="portrait-bottom">
  527.                         {% if variant.product.imagesByType('image_product_smalladd_person')|length > 0 %}               
  528.                         <img class="lazyload" data-src="{{ variant.product.imagesByType('image_product_smalladd_person').first.path|imagine_filter('sylius_shop_product_original') }}" id="main-image" alt="{{ variant.product.name }}" />         
  529.                         {% else %}       
  530.                         <img data-src="{{ asset('webapic-theme/images/petitetouche-portrait.jpg') }}" class="ui image lazyload" />
  531.                         {% endif %}
  533.                         <div>
  534.                             {% if variant.product.smallAddText is not empty %}     
  535.                             {{ variant.product.smallAddText|raw }}  
  536.                             {% else %}
  537.                             <strong>Marie</strong> <span>de la boutique de Guérande</span> vous conseille   
  538.                             {% endif %}
  539.                         </div>
  540.                     </div>
  541.                 </div>
  543.                 <div class="gif">
  544.                     {% if variant.product.imagesByType('image_product_smalladd_gif')|length > 0 %}               
  545.                     <img class="hover lazyload" data-src="{{ asset('media/image/' ~ variant.product.imagesByType('image_product_smalladd_gif').first.path) }}" id="main-image" alt="{{ variant.name }}" />  
  546.                     {% else %}       
  547.                     <img data-src="{{ asset('webapic-theme/images/petitetouche-default.gif') }}" class="ui image lazyload" />
  548.                     {% endif %}
  549.                 </div>
  550.             </div>
  552.             <div class="petitetouche-right">
  553.                 <div class="association-ctn" id="sylius-product-association-{{ associationPetiteTouche.type.code }}" {{ sylius_test_html_attribute('product-association', associationPetiteTouche.type.name) }}>
  554.                     {% for product in productsPetiteTouche %}
  555.                         {% include 'products/petite_touche_product.html.twig' with {'product': product} only %}
  556.                     {% endfor %}
  557.                 </div>
  558.             </div>
  559.         </div>
  560.         {% endif %}
  561.         {# Fin "J'ajoute ma petite touche" #}
  563.         {# "Ca match !" #}
  564.         {# On affiche que s'il y a des collections qui matchent et que si la collection du produit possède une page collection #}
  565.         {% if matchingColors|length > 0 and siteCollection is not empty and siteCollection.imagesByType('image_product_background_ca_match')|length > 0 %}
  566.         <div class="match" style="background-image: url('{{ siteCollection is not empty and siteCollection.imagesByType('image_product_background_ca_match')|length > 0 ? siteCollection.imagesByType('image_product_background_ca_match').first.path|imagine_filter('app_product_match_bg') : asset('webapic-theme/images/placeholder-ca-match.jpg') }}')">       
  567.             <div class="match-ctn">
  569.                 <h2 class="title">{{ 'app.front.block.match.titre1'|trans }} <strong>{{ 'app.front.block.match.titre2'|trans }} !</strong></h2>  
  571.                 <div class="match-left">
  572.                     <div class="match-left-content">
  573.                         {% for matchingColor in matchingColorsWithPage|slice(0, 3) %}
  574.                         <a href="{{ path('app_collection_show', {'slugCategory': matchingColor.category, 'slug': matchingColor.slug}) }}" class="lien-bleu">
  575.                             Collection {{ matchingColor.title }}
  576.                         </a>
  577.                         {% endfor %}
  578.                     </div>
  579.                 </div>
  581.                 <div class="match-right">
  582.                     <div class="association-ctn listing1" id="sylius-product-association-ca_match">
  583.                         {% for variant in matchingProducts %}
  584.                             {% if variant.hasImages and variant.canAddItem() %}
  585.                                 {% include 'products/matching_products.html.twig' with {'product': variant} only %}
  586.                             {% endif %}
  587.                         {% endfor %}
  588.                     </div>
  589.                 </div>
  590.             </div>
  591.         </div>
  592.         {% endif %}
  593.         {# Fin "Ca match !" #}
  595.         {# "Les points forts" #}
  596.         {% if variant.product.strongPoints|length > 0 %}
  597.             <div class="taxons-pointsforts">
  598.                 <h2 class="title">Les points forts{# de notre {{ variant.name|lower }}#}</h2>
  599.                 <div class="taxons-pointsforts-ctn">
  600.                     {% for value in variant.product.strongPoints %}
  601.                         <div class="taxons-pointsforts-content">  
  602.                             {% if value.youtube_link is not empty %}
  603.                             <iframe class="youtube-embed" type="text/html" width="100%" height="320" src="{{ value.youtube_link|replace({'watch?v=':'embed/', 'youtu.be/': 'youtube.com/embed/'}) }}" frameborder="0">
  604.                             </iframe>
  605.                             {% elseif value.image_path is not empty %}
  606.                             <img class="ui image lazyload"data-src="{{ asset('product-strong-points/' ~ value.image_path) }}" />
  607.                             {% endif %}
  608.                         </div>
  609.                     {% endfor %}
  610.                 </div>
  611.             </div>
  612.         {% endif %}
  613.         {# Fin "Les points forts" #}
  615.         {# "Faites (vous) plaisir !" #}
  616.         <div class="collection">
  617.             <div class="collection-ctn">
  619.                 <h2>
  620.                     {{ 'app.front.produit.collection1'|trans }}<br/>
  621.                     <span>{{ 'app.front.produit.collection2'|trans }} <span>{{ 'app.front.produit.collection3'|trans }}</span> !</span>
  622.                 </h2>       
  624.                 <div class="collection-left">
  625.                     <div class="listing1">
  626.                         {% for variant in complementaryProductsSameColor %}
  627.                             {% include 'products/single_product_in_circle.html.twig' with {'product': variant} only %}
  628.                         {% endfor %}
  629.                     </div>
  630.                     {% if siteCollection is not empty %}
  631.                         <a href="{{ path('app_collection_show', {'slugCategory': siteCollection.slugLocale, 'slug': siteCollection.slug}) }}" class="link-collection">
  632.                             {{ 'app.front.produit.voircollection'|trans }}
  633.                         </a>
  634.                      {% endif %}
  635.                 </div>
  637.                 {% if complementaryFabric is not empty and complementaryFabric.id != variant.id %}
  638.                 <div class="collection-right">
  639.                     <img class="top ui image" src="{{ asset('webapic-theme/images/collection-fleche.png') }}" />
  641.                     <div id="circle">
  642.                         <img class="ui image" src="{{ asset('webapic-theme/images/txt-tournant-tissu.svg') }}" />  
  643.                     </div>  
  645.                     {% if complementaryFabric.imagesByType('image_product_hover') is not empty %}
  646.                         {% set source_path = complementaryFabric.imagesByType('image_product_hover').first.path %}
  647.                         {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  648.                         {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
  649.                     {% elseif complementaryFabric.images.first %}
  650.                         {% set source_path = complementaryFabric.images.first.path %}
  651.                         {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
  652.                         {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
  653.                     {% else %}
  654.                         {% set original_path = asset('assets/shop/img/400x300.png') %}
  655.                         {% set path = original_path %}
  656.                     {% endif %}
  657.                     
  658.                     <div class="collection-right-product-ctn">
  659.                         <a href="{{ path('app_product_variant_show', {'slug': complementaryFabric.slug, 'id': complementaryFabric.id}) }}">
  660.                             <div class="img-ctn">
  661.                                 <div class=" img-ctn-content">
  662.                                     <img src="{{ path }}" id="main-image" alt="{{ complementaryFabric.name }}" {{ sylius_test_html_attribute('main-image') }} />
  663.                                 </div>     
  664.                             </div>
  666.                             {% set price = money.calculatePrice(complementaryFabric) %}
  667.                             {% set originalPrice = money.calculateOriginalPrice(complementaryFabric) %}
  669.                             <div class="sylius-product-price price" {{ sylius_test_html_attribute('product-price') }}>
  670.                                 <span>{{ 'app.front.global.apartir'|trans }} </span>
  671.                                 {{ price }}/m
  672.                             </div>
  673.                         </a>
  674.                     </div>
  675.                 </div>
  676.                 {% endif %}
  677.             </div>
  678.         </div>
  679.         {# Fin de "Faites (vous) plaisir !" #}
  681.         {# Article du guide #}
  682.         {% if variant.product.article is not empty %}
  683.             {% include 'partials/block-article-guide.html.twig' with {'article': variant.product.article} only %}
  684.         {% endif %}
  685.         {# Fin de "Article du guide" #}
  687.         {# AVIS/FAQ #}
  688.         <div class="avisfaq">
  690.             <div class="avis">
  691.                 {# Pour les tissus, on affiche les avis de la déclinaison #}
  692.                 {% if variant.code|slice(0, 5) == constant('App\\Doctrine\\ORM\\ProductVariantRepository::PREFIX_CODE_DIVALTO_FABRIC') %}
  693.                 <div class="NETREVIEWS_PRODUCT_REVIEWS" data-product-id="{{ variant.product.id }}"></div>
  694.                 {% else %}
  695.                 <div class="NETREVIEWS_PRODUCT_REVIEWS" data-product-id="{{ variant.product.id }}"></div>
  696.                 {% endif %}
  697.                 {# <div class="NETREVIEWS_PRODUCT_STARS" data-product-id="{{ variant.product.id }}"></div> #}
  698.             </div>
  700.             <div class="faq">
  701.                 <div class="faq-ctn">
  702.                     <h2 class="top">
  703.                         <strong>{{ 'app.front.produit.question1'|trans }}</strong>
  704.                         {{ 'app.front.produit.question2'|trans }}
  705.                     </h2>
  706.                     <ul>
  707.                         {% for siteFaqProduct in siteFaqProducts %}
  708.                         <li>
  709.                             <details>
  710.                                 <summary>{{ siteFaqProduct.question }}</summary>
  711.                                 <div>{{ siteFaqProduct.answer|raw }}</div>
  712.                             </details>
  713.                         </li>
  714.                         {% endfor %}
  715.                     </ul>
  716.                     <div class="bottom">
  717.                         <button class="question">{{ 'app.front.produit.question3'|trans }}</button>
  718.                     </div>
  719.                      <div class="faq-user">
  720.                         {% if is_granted('ROLE_USER') %}
  721.                             <form method="POST" action="{{ path('app_product_send_question') }}">
  722.                                 <label for="question">Ma question</label>
  723.                                 <textarea id="question" name="question" rows="5" cols="33"></textarea>
  724.                                 <input type="hidden" name="variantId" value="{{ variant.id }}" />
  725.                                 <div>
  726.                                     <button type="submit">{{ 'app.front.global.valider'|trans }}</button>
  727.                                 </div>
  728.                             </form>
  729.                         {% else %}
  730.                            <p>{{ 'app.front.produit.question4'|trans }}</p>
  731.                             <a href="{{ path('sylius_shop_login') }}" class="">
  732.                                 {{ 'app.front.produit.login'|trans }}
  733.                             </a>
  734.                         {% endif %}
  735.                     </div>
  736.                 </div>
  737.             </div>
  738.         </div>
  739.         {# Fin FAQ Produit #}
  740.     </div>
  742.     {# Instagram #}
  743.     {% include 'partials/block-instagram.html.twig' %}
  744. </div>
  745. {% if variant.product.conditioning not in ['card_kdo_per_euros_each_10_euros'] %}
  746.     {# <script type="application/ld+json">
  747.     {
  748.         "@context": "https://schema.org/", 
  749.         "@type": "Product", 
  750.         "name": "{{ variant.name|title }}",
  751.         {% if variant.images|length > 0 %} 
  752.             "image": "{{ variant.imagesByType('image_product_main').first().path|imagine_filter('sylius_shop_product_original') }}",
  753.         {% endif %} 
  754.         {% if variant.description is not empty %}        
  755.             "description": "{{ variant.description|raw }}",
  756.         {% elseif variant.product.description is not empty %}
  757.             "description": "{{ variant.product.description|raw }}",
  758.         {% else %}
  759.             "description": "{{ 'sylius.ui.no_description'|trans }}",        
  760.         {% endif %}   
  761.         "brand": {
  762.             "@type": "Brand",
  763.             "name": "PPMC"
  764.         },
  765.         "offers": {
  766.             "@type": "Offer",
  767.             "url": "https://www.papapiqueetmamancoud.fr{{ path('app_product_variant_show', {'slug': variant.product.slug, 'id': variant.id}) }}",
  768.             "priceCurrency": "EUR",
  769.             "price": "{{ price|replace({'€': ''}) }}",
  770.             "availability": "https://schema.org/InStock"
  771.         },
  772.     
  773.     }
  774.     </script>
  775.      #}
  776.   {% set price = money.calculatePrice(variant) %}
  777. <script type="application/ld+json">
  778. {
  779.     "@context": "http://schema.org/",
  780.     "@type": "Product",
  781.     "name": "{{ variant.name }}",
  782.     {% if variant.images|length > 0 %} 
  783.         "image": "{{ variant.imagesByType('image_product_main').first().path|imagine_filter('sylius_shop_product_original') }}",
  784.     {% endif %} 
  785.      {% if variant.description is not empty %}        
  786.         "description": "{{ variant.description|raw }}",
  787.     {% elseif variant.product.description is not empty %}
  788.         "description": "{{ variant.product.description|raw }}",
  789.     {% else %}
  790.         "description": "{{ 'sylius.ui.no_description'|trans }}",        
  791.     {% endif %}   
  792.     "brand": {
  793.         "@type": "Brand",
  794.         "name": "PPMC"
  795.     },
  796.     {% if variant.canAddItem() %}
  797.         "offers": {
  798.             "@type": "Offer",
  799.             "url": "https://www.papapiqueetmamancoud.fr{{ path('app_product_variant_show', {'slug': variant.product.slug, 'id': variant.id}) }}",
  800.             "priceCurrency": "EUR",
  801.             "price": "{{ price|replace({'€': '',',': '.'}) }}",
  802.             "availability": "https://schema.org/InStock"
  803.         }
  804.     {% else %}
  805.         "offers": {
  806.             "@type": "Offer",
  807.             "url": "https://www.papapiqueetmamancoud.fr{{ path('app_product_variant_show', {'slug': variant.product.slug, 'id': variant.id}) }}",
  808.             "priceCurrency": "EUR",
  809.             "price": "{{ price|replace({'€': '',',': '.'}) }}",
  810.             "availability": "https://schema.org/OutOfStock"
  811.         }
  812.     {% endif %}  
  813. }
  814. </script>
  816. <script type="text/javascript">
  817.     $(document).ready(function() {
  818.        dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  819.         dataLayer.push({
  820.         event: "view_item",
  821.         ecommerce: {
  822.             currency: "EUR",
  823.             value: {{ price|replace({'€': '',',': '.'}) }},
  824.             items: [
  825.             {
  826.                 item_id: {{ variant.id }},
  827.                 item_name: "{{ variant.name }}",
  828.                 index: 0,
  829.                 item_brand: "PPMC",
  830.                 price: {{ price|replace({'€': '',',': '.'}) }},
  831.                 quantity: {{ variant.countItemStock() }}
  832.             }
  833.             ]
  834.         }
  835.         });
  837.     });
  838. </script>
  840.  {% endif %}
  844. {% endblock %}