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

Open in your IDE?
  1. {% extends '@SyliusShop/layout.html.twig' %}
  3. {% set emptyGif = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
  5. {% block content %}
  7.     <div class="configurateur-page" data-url="{{ path('app_configurateur_ajax_refresh') }}">
  9.         {% if is_mobile() %}   
  10.             <span class="accordeon volet1 active" data-volet="1">1 - {{ 'app.front.configurateur.part1'|trans }} <i class="chevron down icon"></i></span>
  11.         {% endif %} 
  13.         <div class="left {% if is_mobile() %} active{% endif %} ">
  15.             <a href="#" class="config-back">{{ 'app.front.configurateur.back'|trans }}</a> 
  17.             <h1 class="header">{{ 'app.front.configurateur.part2'|trans }} <strong>{{ 'app.front.configurateur.part3'|trans }}</strong> {{ 'app.front.configurateur.part32'|trans }}</h1>
  19.             <ul id="progressbar">
  20.                 <li class="active">{{ 'app.front.configurateur.part4'|trans }}</li>
  21.                 <li>{{ 'app.front.configurateur.part5'|trans }}</li>
  22.                 <li>{{ 'app.front.configurateur.part6'|trans }}</li>
  23.                 <li>{{ 'app.front.configurateur.part7'|trans }}</li>
  24.             </ul>
  26.             <div class="block images forme">
  28.                 <h2 class="title">{{ 'app.front.configurateur.part8'|trans }}</h2>
  29.                 <div class="content">
  30.                     <ul>
  31.                         <li class="active" data-forme="1">
  32.                             <img src="{{ grandeBesaces[0].product.imagesByType('image_product_icon').first.path|imagine_filter('sylius_shop_product_original') }}" class="ui image" />
  33.                             <span>{{ grandeBesaces[0].product.name }}</span>
  34.                         </li>
  35.                         <li data-forme="2">
  36.                             <img src="{{ petiteBesaces[0].product.imagesByType('image_product_icon').first.path|imagine_filter('sylius_shop_product_original') }}" class="ui image" />
  37.                             <span>{{ petiteBesaces[0].product.name }}</span>
  38.                         </li>
  39.                         <li data-forme="3">
  40.                             <img src="{{ sacCompagnons[0].product.imagesByType('image_product_icon').first.path|imagine_filter('sylius_shop_product_original') }}" class="ui image" />
  41.                             <span>{{ sacCompagnons[0].product.name }}</span>
  42.                         </li>
  43.                     </ul>
  44.                 </div>
  45.             </div>
  47.             {# Grande besace #}
  48.             <div class="block icones colori-base1 imagehover" data-zindex="1">
  49.                 <h2 class="title">{{ 'app.front.configurateur.part9'|trans }}</h2>
  50.                 <div class="content">
  51.                
  52.                     <ul>
  53.                         {% for grandeBesace in grandeBesaces %}
  54.                         <li data-collection="{{ grandeBesace.collection }}" data-fullimage="{{ grandeBesace.imagesByType('image_product_saczip')|length > 0 ? grandeBesace.imagesByType('image_product_saczip').first.path|imagine_filter('sylius_shop_product_original') : emptyGif }}" data-idvariant="{{ grandeBesace.id }}">
  55.                           
  56.                             {% if grandeBesace.imagesByType('image_product_main')|length > 0 %}
  57.                                 {% set source_path = grandeBesace.imagesByType('image_product_main').first.path %}
  58.                                 {% set path = source_path|imagine_filter('app_taxon_image_ctas') %}
  59.                                 <img src="{{ path }}"  />
  60.                             {% else %}
  61.                                 <img src="{{ emptyGif }}" />
  62.                             {% endif %}
  63.                             {% if grandeBesace.imagesByType('image_product_secondary')|length > 0 %}
  64.                                 {% set source_path = grandeBesace.imagesByType('image_product_secondary').first.path %}
  65.                                 {% set path = source_path|imagine_filter('app_taxon_image_ctas') %}
  66.                                 <img class="hover" src="{{ path }}"  />
  67.                             {% endif %}
  68.                              <div class="flag">
  69.                                 {% include 'partials/block-callout.html.twig' with {'callout': grandeBesace.badge} only %}
  70.                             </div>
  71.                         </li>
  72.                         {% endfor %}                                      
  73.                     </ul>
  74.                 </div>
  75.             </div>  
  77.             <div class="block icones colori-base2 imagehover" data-zindex="1">
  78.                 <h2 class="title">{{ 'app.front.configurateur.part10'|trans }}</h2>
  79.                 <div class="content">
  80.                     <ul>
  81.                         {% for petiteBesace in petiteBesaces %}
  82.                         <li data-collection="{{ petiteBesace.collection }}" data-fullimage="{{ petiteBesace.imagesByType('image_product_saczip')|length > 0 ? petiteBesace.imagesByType('image_product_saczip').first.path|imagine_filter('sylius_shop_product_original') : emptyGif }}" data-idvariant="{{ petiteBesace.id }}">
  83.                             {% if petiteBesace.imagesByType('image_product_main')|length > 0 %}
  84.                                 {% set source_path = petiteBesace.imagesByType('image_product_main').first.path %}
  85.                                 {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  86.                                 <img src="{{ path }}"  />
  87.                                 {# <img src="{{ petiteBesace.imagesByType('image_product_main').first.path|imagine_filter('sylius_shop_product_original') }}"  /> #}
  88.                             {% else %}
  89.                             <img src="{{ emptyGif }}" />
  90.                             {% endif %}
  91.                             {% if petiteBesace.imagesByType('image_product_secondary')|length > 0 %}
  92.                                 {% set source_path = petiteBesace.imagesByType('image_product_secondary').first.path %}
  93.                                 {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  94.                                 <img class="hover" src="{{ path }}"  />
  95.                             {% endif %}
  96.                              <div class="flag">
  97.                                 {% include 'partials/block-callout.html.twig' with {'callout': petiteBesace.badge} only %}
  98.                             </div>
  99.                         </li>
  100.                         {% endfor %}                                      
  101.                     </ul>
  102.                 </div>
  103.             </div>  
  105.             <div class="block icones colori-base3 imagehover" data-zindex="1">
  106.                 <h2 class="title">{{ 'app.front.configurateur.part11'|trans }}</h2>
  107.                 <div class="content">
  108.                     <ul>
  109.                         {% for sacCompagnon in sacCompagnons %}
  110.                         <li data-collection="{{ sacCompagnon.collection }}" data-fullimage="{{ sacCompagnon.imagesByType('image_product_saczip')|length > 0 ? sacCompagnon.imagesByType('image_product_saczip').first.path|imagine_filter('sylius_shop_product_original') : emptyGif }}" data-idvariant="{{ sacCompagnon.id }}">
  111.                             {% if sacCompagnon.imagesByType('image_product_main')|length > 0 %}
  112.                                 {% set source_path = sacCompagnon.imagesByType('image_product_main').first.path %}
  113.                                 {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  114.                                 <img src="{{ path }}"  />
  115.                             {# <img src="{{ sacCompagnon.imagesByType('image_product_main').first.path|imagine_filter('sylius_shop_product_original') }}"  /> #}
  116.                             {% else %}
  117.                             <img src="{{ emptyGif }}" />
  118.                             {% endif %}
  119.                             {% if sacCompagnon.imagesByType('image_product_secondary')|length > 0 %}
  120.                                 {% set source_path = sacCompagnon.imagesByType('image_product_secondary').first.path %}
  121.                                 {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  122.                                 <img class="hover" src="{{ path }}"  />
  123.                             {% endif %}
  124.                             <div class="flag">
  125.                                 {% include 'partials/block-callout.html.twig' with {'callout': sacCompagnon.badge} only %}
  126.                             </div>
  127.                         </li>
  128.                         {% endfor %}                                      
  129.                     </ul>
  130.                 </div>
  131.             </div>  
  133.             <div class="block icones rabat1" data-zindex="2">
  134.                 <h2 class="title">{{ 'app.front.configurateur.part12'|trans }}</h2>
  135.                 <div class="content">
  136.                     <ul>
  137.                         {% for rabatGrandeBesace in rabatGrandeBesaces %}
  138.                         <li data-collection="{{ rabatGrandeBesace.collection }}" data-fullimage="{{ rabatGrandeBesace.imagesByType('image_product_saczip')|length > 0 ? rabatGrandeBesace.imagesByType('image_product_saczip').first.path|imagine_filter('sylius_shop_product_original') : emptyGif }}" data-idvariant="{{ rabatGrandeBesace.id }}">
  139.                            
  140.                             {% if rabatGrandeBesace.imagesByType('image_product_main')|length > 0 %}
  141.                                 {% set source_path = rabatGrandeBesace.imagesByType('image_product_main').first.path %}
  142.                                 {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  143.                                 <img src="{{ path }}" class="zoom"  />
  144.                                 {# <img src="{{ rabatGrandeBesace.imagesByType('image_product_main').first.path|imagine_filter('sylius_shop_product_original') }}"  /> #}
  145.                             {% else %}
  146.                             <img src="{{ emptyGif }}" />
  147.                             {% endif %}
  148.                              <div class="flag">
  149.                                 {% include 'partials/block-callout.html.twig' with {'callout': rabatGrandeBesace.badge} only %}
  150.                             </div>
  151.                         </li>
  152.                         {% endfor %}                                     
  153.                     </ul>
  154.                 </div>
  155.             </div> 
  157.              <div class="block images rabat2 condition" data-zindex="2">
  158.                 
  159.                 <h2 class="title">{{ 'app.front.configurateur.part13'|trans }}</h2>
  160.                 <div class="content">
  161.                     <ul>
  162.                         <li class="active" data-rabat="1">
  163.                             <img src="{{ rabatPetiteBesaces[0].product.imagesByType('image_product_icon').first.path|imagine_filter('sylius_shop_product_original') }}" class="ui image" />
  164.                             <span>{{ 'app.front.configurateur.part14'|trans }}</span>
  165.                         </li>
  166.                         <li data-rabat="2">
  167.                             <img src="{{ rabatBesacePetitNuages[0].product.imagesByType('image_product_icon').first.path|imagine_filter('sylius_shop_product_original') }}" class="ui image" />
  168.                             <span>{{ 'app.front.configurateur.part15'|trans }}</span>
  169.                         </li>
  170.                     </ul>
  171.                 </div>
  172.             </div>
  174.             <div class="block icones rabat21" data-zindex="2">
  175.                 <h2 class="title">{{ 'app.front.configurateur.part16'|trans }}</h2>
  176.                 <div class="content">
  177.                     <ul>
  178.                         {% for rabatPetiteBesace in rabatPetiteBesaces %}
  179.                         <li data-collection="{{ rabatPetiteBesace.collection }}"  data-fullimage="{{ rabatPetiteBesace.imagesByType('image_product_saczip')|length > 0 ? rabatPetiteBesace.imagesByType('image_product_saczip').first.path|imagine_filter('sylius_shop_product_original') : emptyGif }}" 
  180.                         data-idvariant="{{ rabatPetiteBesace.id }}"
  181.                         data-rabat="1"
  182.                         >
  183.                             {% if rabatPetiteBesace.imagesByType('image_product_main')|length > 0 %}
  184.                                 {% set source_path = rabatPetiteBesace.imagesByType('image_product_main').first.path %}
  185.                                 {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  186.                                 <img src="{{ path }}" class="zoom" />
  187.                                 {# <img src="{{ rabatPetiteBesace.imagesByType('image_product_main').first.path|imagine_filter('sylius_shop_product_original') }}"  /> #}
  188.                             {% else %}
  189.                             <img src="{{ emptyGif }}" />
  190.                             {% endif %}
  191.                             <div class="flag">
  192.                                 {% include 'partials/block-callout.html.twig' with {'callout': rabatPetiteBesace.badge} only %}
  193.                             </div>
  194.                         </li>
  195.                         {% endfor %}
  196.                     </ul>
  197.                 </div>
  198.             </div>
  200.             <div class="block icones rabat22" data-zindex="2">
  201.                 {# <span class="ou">Ou</span> #}
  202.                 <h2 class="title">{{ 'app.front.configurateur.part17'|trans }}</h2>
  203.                 <div class="content">
  204.                     <ul>
  205.                         {% for rabatBesacePetitNuage in rabatBesacePetitNuages %}
  206.                         <li  data-collection="{{ rabatBesacePetitNuage.collection }}"  data-fullimage="{{ rabatBesacePetitNuage.imagesByType('image_product_saczip')|length > 0 ? rabatBesacePetitNuage.imagesByType('image_product_saczip').first.path|imagine_filter('sylius_shop_product_original') : emptyGif }}" 
  207.                         data-idvariant="{{ rabatBesacePetitNuage.id }}"
  208.                         data-rabat="2"
  209.                         >
  210.                             {% if rabatBesacePetitNuage.imagesByType('image_product_main')|length > 0 %}
  211.                                 {% set source_path = rabatBesacePetitNuage.imagesByType('image_product_main').first.path %}
  212.                                 {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  213.                                 <img src="{{ path }}" class="zoom"  />
  214.                                 {# <img src="{{ rabatBesacePetitNuage.imagesByType('image_product_main').first.path|imagine_filter('sylius_shop_product_original') }}"  /> #}
  215.                             {% else %}
  216.                             <img src="{{ emptyGif }}" />
  217.                             {% endif %}
  218.                             <div class="flag">
  219.                                 {% include 'partials/block-callout.html.twig' with {'callout': rabatBesacePetitNuage.badge} only %}
  220.                             </div>
  221.                         </li>
  222.                         {% endfor %}
  223.                     </ul>
  224.                 </div>
  225.             </div>
  227.             <div class="block icones rabat3" data-zindex="2">
  228.                 <h2 class="title">{{ 'app.front.configurateur.part18'|trans }}</h2>
  229.                 <div class="content">
  230.                     <ul>
  231.                        {% for rabatSacCompagnon in rabatSacCompagnons %}
  232.                         <li data-collection="{{ rabatSacCompagnon.collection }}" data-fullimage="{{ rabatSacCompagnon.imagesByType('image_product_saczip')|length > 0 ? rabatSacCompagnon.imagesByType('image_product_saczip').first.path|imagine_filter('sylius_shop_product_original') : emptyGif }}" data-idvariant="{{ rabatSacCompagnon.id }}">
  233.                             {% if rabatSacCompagnon.imagesByType('image_product_main')|length > 0 %}
  234.                                 {% set source_path = rabatSacCompagnon.imagesByType('image_product_main').first.path %}
  235.                                 {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  236.                                 <img src="{{ path }}" class="zoom"  />
  237.                                 {# <img src="{{ rabatSacCompagnon.imagesByType('image_product_main').first.path|imagine_filter('sylius_shop_product_original') }}"  /> #}
  238.                             {% else %}
  239.                             <img src="{{ emptyGif }}" />
  240.                             {% endif %}
  241.                             <div class="flag">
  242.                                 {% include 'partials/block-callout.html.twig' with {'callout': rabatSacCompagnon.badge} only %}
  243.                             </div>
  244.                         </li>
  245.                         {% endfor %}                                       
  246.                     </ul>
  247.                 </div>
  248.             </div> 
  250.             <div class="block images laniere3 condition" data-zindex="3">
  252.                 <h2 class="title">{{ 'app.front.configurateur.part19'|trans }}</h2>
  253.                 <div class="content">
  254.                     <ul>
  255.                         <li class="active" data-laniere="1">
  256.                             <img src="{{ petiteLanieres[0].product.imagesByType('image_product_icon').first.path|imagine_filter('sylius_shop_product_original') }}" class="ui image" />
  257.                             <span>{{ 'app.front.configurateur.part20'|trans }}</span>
  258.                         </li>
  259.                         <li data-laniere="2">
  260.                             <img src="{{ grandeLanieres[0].product.imagesByType('image_product_icon').first.path|imagine_filter('sylius_shop_product_original') }}" class="ui image" />
  261.                             <span>{{ 'app.front.configurateur.part21'|trans }}</span>
  262.                         </li>
  263.                     </ul>
  264.                 </div>
  265.             </div>
  267.             <div class="block icones laniere31 imagehover" data-zindex="3">
  268.                 <h2 class="title">{{ 'app.front.configurateur.part22'|trans }}</h2>
  269.                 <div class="content">
  270.                     <ul>
  271.                         {% for petiteLaniere in petiteLanieres %}
  272.                         <li data-collection="{{ petiteLaniere.collection }}" data-fullimage="{{ petiteLaniere.imagesByType('image_product_saczip')|length > 0 ? petiteLaniere.imagesByType('image_product_saczip').first.path|imagine_filter('sylius_shop_product_original') : emptyGif }}" 
  273.                         data-idvariant="{{ petiteLaniere.id }}"
  274.                         data-laniere="1"
  275.                         >
  276.                             {% if petiteLaniere.imagesByType('image_product_main')|length > 0 %}
  277.                                 {% set source_path = petiteLaniere.imagesByType('image_product_main').first.path %}
  278.                                 {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  279.                                 <img src="{{ path }}"  />
  280.                                 {# <img src="{{ petiteLaniere.imagesByType('image_product_main').first.path|imagine_filter('sylius_shop_product_original') }}"  /> #}
  281.                             {% else %}
  282.                             <img src="{{ emptyGif }}" />
  283.                             {% endif %}
  284.                              {% if petiteLaniere.imagesByType('image_product_secondary')|length > 0 %}
  285.                                 {% set source_path = petiteLaniere.imagesByType('image_product_secondary').first.path %}
  286.                                 {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  287.                                 <img class="hover" src="{{ path }}"  />
  288.                             {% endif %}
  289.                             <div class="flag">
  290.                                 {% include 'partials/block-callout.html.twig' with {'callout': petiteLaniere.badge} only %}
  291.                             </div>
  292.                         </li>
  293.                         {% endfor %} 
  294.                     </ul>
  295.                 </div>
  296.             </div> 
  298.             <div class="block icones laniere32 imagehover" data-zindex="3">
  299.                 <h2 class="title">{{ 'app.front.configurateur.part23'|trans }}</h2>
  300.                 <div class="content">
  301.                     <ul>
  302.                         {% for grandeLaniere in grandeLanieres %}
  303.                         <li data-collection="{{ grandeLaniere.collection }}" data-fullimage="{{ grandeLaniere.imagesByType('image_product_saczip')|length > 0 ? grandeLaniere.imagesByType('image_product_saczip').first.path|imagine_filter('sylius_shop_product_original') : emptyGif }}" 
  304.                         data-idvariant="{{ grandeLaniere.id }}"
  305.                         data-laniere="2"
  306.                         >
  307.                             {% if grandeLaniere.imagesByType('image_product_main')|length > 0 %}
  308.                                 {% set source_path = grandeLaniere.imagesByType('image_product_main').first.path %}
  309.                                 {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  310.                                 <img src="{{ path }}"  />
  311.                                 {# <img src="{{ grandeLaniere.imagesByType('image_product_main').first.path|imagine_filter('sylius_shop_product_original') }}"  /> #}
  312.                             {% else %}
  313.                             <img src="{{ emptyGif }}" />
  314.                             {% endif %}
  315.                             {% if grandeLaniere.imagesByType('image_product_secondary')|length > 0 %}
  316.                                 {% set source_path = grandeLaniere.imagesByType('image_product_secondary').first.path %}
  317.                                 {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  318.                                 <img class="hover" src="{{ path }}"  />
  319.                             {% endif %}
  320.                             <div class="flag">
  321.                                 {% include 'partials/block-callout.html.twig' with {'callout': grandeLaniere.badge} only %}
  322.                             </div>
  323.                         </li>
  324.                         {% endfor %} 
  325.                     </ul>
  326.                 </div>
  327.             </div> 
  329.             <div class="block icones images accessoire condition" data-zindex="4">
  331.                 <h2 class="title">{{ 'app.front.configurateur.part24'|trans }}</h2>
  332.                 <div class="content">
  333.                     <ul>
  334.                          {% for accessorieForme in accessoriesFormes %}
  335.                             <li data-accessoire="{{ accessorieForme.product.id }}">
  336.                                  <img src="{{ accessorieForme.product.imagesByType('image_product_icon').first.path|imagine_filter('sylius_shop_product_original') }}" class="ui image" />
  337.                                 <span>{{ accessorieForme.product.name }}</span>
  338.                             </li>
  339.                         {% endfor %}
  340.                     </ul>
  341.                 </div>
  342.             </div>
  344.             {% for accessorieForme in accessoriesFormes %}
  345.                 <div class="block icones accessoire-products accessoire-products{{ accessorieForme.product.id }}" data-zindex="4">
  346.                     <h2 class="title">{{ 'app.front.configurateur.part25'|trans }}</h2>
  347.                     <div class="content">
  348.                         <ul>
  349.                             {% for accessorie in accessories %}
  350.                                {% if accessorie.product is defined and accessorieForme.product.id == accessorie.product.id %}
  351.                                     <li data-collection="{{ accessorie.collection }}" data-fullimage="{{ accessorie.imagesByType('image_product_saczip')|length > 0 ? accessorie.imagesByType('image_product_saczip').first.path|imagine_filter('sylius_shop_product_original') : emptyGif }}" 
  352.                                     data-idvariant="{{ accessorie.id }}"
  353.                                     data-accessoire="{{ accessorieForme.product.id }}"
  354.                                     >
  355.                                         {% if accessorie.imagesByType('image_product_main')|length > 0 %}
  356.                                             {% set source_path = accessorie.imagesByType('image_product_main').first.path %}
  357.                                             {% set path = source_path|imagine_filter('app_product_small_thumbnail_listing') %}
  358.                                             <img src="{{ path }}"  />
  359.                                             {# <img src="{{ accessorie.imagesByType('image_product_main').first.path|imagine_filter('sylius_shop_product_original') }}"  /> #}
  360.                                         {% else %}
  361.                                             <img src="{{ emptyGif }}" />
  362.                                         {% endif %}
  363.                                          <div class="flag">
  364.                                             {% include 'partials/block-callout.html.twig' with {'callout': accessorie.badge} only %}
  365.                                         </div>
  366.                                     </li>
  367.                                 {% endif %}  
  368.                             {% endfor %}
  369.                         </ul>
  370.                     </div>
  371.                 </div> 
  372.             {% endfor %}
  373.         </div>
  375.         {% if is_mobile() %}   
  377.             <span class="accordeon volet2 active" data-volet="2">2 - {{ 'app.front.configurateur.part26'|trans }} <i class="chevron down icon"></i></span>
  379.         {% endif %} 
  381.         <div class="middle {% if is_mobile() %} active{% endif %}">
  383.              <div class="middle-sticky">
  385.                 <div class="middle-ctn {% if is_mobile() %} active{% endif %} ">
  387.                     
  389.                     <div class="content">
  391.                         <div class="zindex zindex1">
  392.                             {# <img src="{{ asset('webapic-theme/images/asupprimer/saczip.jpg') }}" class="ui image principal" />     #}
  393.                         </div>
  394.                         <div class="zindex zindex2">
  395.                             {# <img src="{{ asset('webapic-theme/images/asupprimer/saczip.jpg') }}" class="ui image principal" />     #}
  396.                         </div>
  397.                         <div class="zindex zindex3">
  398.                             {# <img src="{{ asset('webapic-theme/images/asupprimer/saczip.jpg') }}" class="ui image principal" />     #}
  399.                         </div>
  400.                         <div class="zindex zindex4">
  401.                             {# <img src="{{ asset('webapic-theme/images/asupprimer/saczip.jpg') }}" class="ui image principal" />     #}
  402.                         </div>
  404.                         <div class="links-ctn">
  406.                             <div class="random" data-url="{{ path('app_configurateur_ajax_random') }}">
  407.                                 <button type="submit" class="submit">
  408.                                     <img src="{{ asset('webapic-theme/images/config-shuffle.svg') }}" class="ui image" />
  409.                                     {# <img src="{{ asset('webapic-theme/images/config-magic.svg') }}" class="ui image" /> #}
  410.                                     <span>{{ 'app.front.configurateur.part27'|trans }}</span>
  411.                                 </button>
  412.                             </div>
  414.                             <div class="addtocart-action">
  415.                                 <button type="submit" class="submit lien-saumon">
  416.                                     <img src="{{ asset('webapic-theme/images/icon-produit-panier.svg') }}" class="ui image" />
  417.                                     {{ 'app.front.configurateur.part28'|trans }}
  418.                                 </button>
  419.                             </div>
  421.                         </div>
  423.                     </div>
  425.                 </div>
  427.              </div>
  429.         </div>
  430.         {% if is_mobile() %}   
  432.             <span class="accordeon volet3" data-volet="3">3 - {{ 'app.front.configurateur.part29'|trans }} <i class="chevron down icon"></i></span>
  434.         {% endif %} 
  436.         <div class="right">
  438.             <div class="close-ctn"><i class="close"></i></div>
  439.             <span class="title">{{ 'app.front.configurateur.part30'|trans }}</span>
  440.             <div class="content">
  442.                
  444.             </div>
  446.         </div>
  448.     </div>
  450. {% endblock %}