templates/front/product-option/new_index2.html.twig line 1

Open in your IDE?
  1. {% extends 'front/layout.html.twig' %}
  3. {% if product.metaTitle %}
  4.     {% block title %}
  5.         {{ product.metaTitle | trans({}, "pageCmsTranslate") }}
  6.     {% endblock %}
  7. {% endif %}
  8. {% if product.metaDescription %}
  9.     {% block metaDescription %}
  10.         <meta name="description" content="{{ product.metaDescription | trans({}, "pageCmsTranslate") }}">
  11.     {% endblock %}
  12. {% endif %}
  14. {% block googleTagManagerDataLayer %}
  15.     {% include 'google_tag.html.twig' with {'titlePage':'product option','categoryPage':'product-details','navigation_category1':'','navigation_category2':'','navigation_category3':'' }   %}
  16. {% endblock %}
  17. {% block stylesheets %}
  18.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css">
  19.     {{ encore_entry_link_tags('color_lab_product') }}
  20.     {{ parent() }}
  21. {% endblock %}
  22. {% macro value(cart,object,name) %}
  23.     {% if object %}
  24.         {% if cart|access(object) %}
  25.             {% set obj = cart|access(object) %}
  26.             value="{% if obj|access(name) %}{{ obj|access(name) }}{% endif %}"
  27.         {% else %}
  28.             value=""
  29.         {% endif %}
  30.     {% else %}
  31.         value="{% if cart|access(name) %}{{ cart|access(name) }}{% endif %}"
  32.     {% endif %}
  33. {% endmacro %}
  34. {% block body %}
  35.     {% include 'front/header.html.twig' %}
  36.     {% set currentPath = app.request.requesturi %}
  37.     <script>
  38.         var isMobile = "{{ app.request.get('isMobile') }}";
  39.         var str1 = '?';
  40.         var str2 = '{{ currentPath }}';
  41.         str2 = str2.replace(/&amp;/g, '&');
  42.         if(str2.indexOf('isMobile') != -1){
  43.             var str2 = str2.substring(0 ,str2.indexOf('isMobile') - 1);
  44.         }
  45.         var str3 = '?';
  46.         if(str2.indexOf(str1) != -1){
  47.             str3 = '&';
  48.         }
  49.         if($( window ).width() > 768 ) {
  50.             if(isMobile == '1'){
  51.                 window.location.replace(str2+str3+"isMobile=0");
  52.             }
  53.         }else {
  54.             if(isMobile != '1') {
  55.                 window.location.replace(str2+str3+"isMobile=1");
  56.             }
  57.         }
  58.     </script>
  59.     <input type="hidden" id="newPage" value="1">
  60.     <input type="hidden" id="designId" value="{% if cartDetail  %}{{ cartDetail.templateIdCrello }}{% endif %}">
  61.     <input type="hidden" name="tokenDetail" id="tokenDetail" value="{% if cartDetail  %}{{ cartDetail.token }}{% endif %}">
  62.     {% set productObject = null %}
  63.     {% if cartDetail and cartDetail.product %}
  64.         {% set productObject = cartDetail.product %}
  65.     {% elseif  app.request.get('product') %}
  66.          {% set productObject =  getProductById(app.request.get('product')) %}
  67.     {% endif %}
  68.     {% set isMobileInterface = false %}
  69.     {% if app.request.get('isMobile') == '1' %}
  70.         {#mobile#}
  71.         {% set isMobileInterface = true %}
  72.         <input type="hidden" value="1" id="isMobileInterface">
  73.         <div class="productIndexOptionNewMobile">
  74.             {% if cartDetail %}
  75.                 {% set idProduct = cartDetail.product.id %}
  76.             {% else %}
  77.                 {% if app.request.get('product') %}
  78.                     {% set idProduct = app.request.get('product') %}
  79.                 {% endif %}
  80.             {% endif %}
  81.             <input value="{{ idProduct }}" checked="checked" data-new-page="1" style="display: none" data-url="{{ path('product_option') }}?product={{ idProduct }}" type="radio" name="productOption" >
  83.             <div class="col-12 pl-0 pr-0 linkTitreFirstProduct" >
  84.                 <a href="{{ path('besoin_produits') }}" class="paddingMobileOptionProduct">
  85.                     <svg xmlns="http://www.w3.org/2000/svg" width="11" height="18" viewBox="0 0 11 18" fill="none">
  86.                         <path d="M9 2L2 9L9 16" stroke="#211E1D" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  87.                     </svg>
  88.                     <span class="">{{ product.getTypeProductName() }}</span>
  89.                 </a>
  90.             </div>
  91.             <div class="col-12 paddingMobileOptionProduct" >
  92.                 <h3 class="productTitreMobile">{{ product.productTitreMobile|trans({}, "productTranslate") }}</h3>
  93.             </div>
  94.             <div class="col-12">
  95.                 <div class="imageOptionProductMobile">
  96.                     <div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
  97.                         <div class="carousel-inner">
  98.                             {% for item in product.productImageMobile %}
  99.                                 <div class="carousel-item {% if loop.first %}active{% endif %}">
  100.                                     <img src="{{ asset('imageSite/'~item.image) }}" alt="Hills">
  101.                                 </div>
  102.                             {% endfor %}
  103.                         </div>
  105.                         <ol class="carousel-indicators list-inline">
  106.                             {% for item in product.productImageMobile %}
  107.                                 <li class="list-inline-item {% if loop.first %}active{% endif %}">
  108.                                     <a id="carousel-selector-0"{% if loop.first %}class="selected" {% endif %}  data-slide-to="{{ loop.index0 }}" data-target="#custCarousel">
  109.                                         <img src="{{ asset('imageSite/'~item.image) }}" class="img-fluid">
  110.                                     </a>
  111.                                 </li>
  112.                             {% endfor %}
  113.                         </ol>
  114.                     </div>
  115.                 </div>
  116.             </div>
  118.             <div id="optionsBlocMobile" class="paddingMobileOptionProduct">
  120.             </div>
  122.             <div id="quantityBlocNew" class="paddingMobileOptionProduct">
  124.             </div>
  126.             <div class="paddingMobileOptionProduct row_select_ca1 oghtml5">
  127.                 <div class="Comm_adress">
  128.                     <h3>{{ 'Votre adresse' | trans({}, "productTranslate") }}</h3>
  129.                     <div role="group" class="form-group">
  130.                         <input id="addresseLiv" name="addresseLiv" type="text" class="form-control adresee-google-map" placeholder=" "
  131.                                 {% if app.session.get('addresseAdresse') %} value="{{ app.session.get('addresseAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','adresse') }} {% endif %} >
  132.                         <label for="addresseLiv" class="d-block form-control-placeholder"> {{ 'Commencez à saisir la première ligne de votre adresse' | trans({}, "productTranslate") }}</label>
  133.                         <input type="hidden" id="longLiv"  {% if app.session.get('longiAdresse') %} value="{{ app.session.get('longiAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','longi') }}{% endif %} name="longLiv">
  134.                         <input type="hidden" id="latLiv" {% if app.session.get('latAdresse') %} value="{{ app.session.get('latAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','lat') }}{% endif %} name="latLiv">
  135.                         <input type="hidden" id="codePostalLiv" {% if app.session.get('postalcodeAdresse') %} value="{{ app.session.get('postalcodeAdresse') }}" {% else %} {{ _self.value(cart,'adresseLivraison','codePostal') }}{% endif %} name="codePostalLiv">
  136.                         <input type="hidden" id="CountryLiv" value="{% if app.session.get('CountryLiv') %}{{ app.session.get('CountryLiv') }}{% else %}{% if cart.adresseLivraison.country is defined  %}{{ cart.adresseLivraison.country }}{% endif %}{% endif %}" name="CountryLiv">
  137.                         <input type="hidden" value="{% if app.session.get('CountryCodeLiv') %}{{ app.session.get('CountryCodeLiv') }}{% else %}{% if cart.adresseLivraison.countryCode is defined %}{{ cart.adresseLivraison.countryCode }}{% endif %}{% endif%}" name="CountryCodeLiv" id="CountryCodeLiv">
  138.                         <input type="hidden" id="cityLiv" {% if app.session.get('cityAdresse') %} value="{{ app.session.get('cityAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','city') }}{% endif %} name="cityLiv">
  139.                     </div>
  140.                 </div>
  141.                 <div id="modeLivraison">
  143.                 </div>
  144.                 {% if cartDetail.id is not defined  %}
  145.                     <div id="crelloButtons" class="crelloButtonsBlock crelloButtonsNew">
  147.                     </div>
  148.                 {% endif %}
  150.                 {% if cartDetail  %}
  151.                     {% include 'front/product-option/productPreviewModal.html.twig'  with {'isMobileInterface':isMobileInterface } %}
  152.                     {% if cartDetail.product.typeProduct  in [ constant('App\\Entity\\Product::PHOTOS')]%}
  153.                         <div class="txt_selectca mb-2" style=""> <a href="#" style="" class="crelloBtnImportPhotos crelloBtnImportNow" >{{ 'Vous pouvez changer votre crea' | trans({}, "productTranslate") }}</a></div>
  154.                     {% else %}
  155.                         {% if cartDetail.templateIdCrello  %}
  156.                             <div class="txt_selectca mb-2" style="min-height: 43px;"> <a href="#" style="color: #fff;" class="crelloBtn btnMobileImport" >{{ 'Vous pouvez éditer votre création sur' | trans({}, "productTranslate") }} <img  width="130px"  src="{{ asset('/images/ininfoselectF.svg') }}" ></a></div>
  157.                             <input type="hidden" id="designUrl" value="">
  158.                             <input type="hidden" id="designType" value="{{ cartDetail.productAttribute.format.designTypeCrello }}">
  159.                             <input type="hidden" id="customDesignType" value="{{ cartDetail.productAttribute.format.designTypeCustomCrello }}">
  160.                             <input type="hidden" id="sideBarDesignType" value="{{ cartDetail.productAttribute.format.designTypeSideBarCrello }}">
  161.                         {% elseif cartDetail.colorLabTokenProduct and cartDetail.colorLabIdProduct %}
  162.                             <div class="txt_selectca" style="min-height: 43px;">
  163.                                 <a href="#" style="color: #fff;" class="crelloBtn btnMobileImport" >
  164.                                     {{ 'Vous pouvez éditer votre création sur' | trans({}, "productTranslate") }}
  165.                                     <svg viewBox="0 0 201 60" xmlns="http://www.w3.org/2000/svg" class="c-navbar__logo" style=" width: 95px;margin-left: 10px;"><g fill-rule="nonzero" fill="none"><g id="shape" fill-rule="nonzero" fill="none"><path id="shape-1" d="M7.33 24.8A22.05 22.05 0 0 1 28.67 7.9c3.28 0 6.39.75 9.18 2.06a21.35 21.35 0 0 1 7.5 5.71c.69.79.56 2.02-.21 2.68-.78.65-1.97.57-2.67-.2a17.92 17.92 0 0 0-13.8-6.41c-8.86 0-16.43 6.4-17.9 15.13-.08.97-.9 1.75-1.88 1.75l-6.96-.04h-.21a1.92 1.92 0 0 1-1.68-2.1 29.2 29.2 0 0 1 9.59-18.2 28.7 28.7 0 0 1 40.87 2.67c.7.78.62 1.97-.16 2.67-.82.7-2 .62-2.7-.17a25.24 25.24 0 0 0-8.52-6.4 24.94 24.94 0 0 0-10.37-2.23A25.04 25.04 0 0 0 4.18 24.8h3.15Z" fill="#E65545" class="shape"></path><path id="shape-2" d="M40.02 20.07c.7.78.61 1.98-.17 2.67-.78.7-1.96.62-2.66-.16a11.4 11.4 0 0 0-3.8-2.88 11.3 11.3 0 0 0-15.53 7.48c-.3 1-1.32 1.6-2.34 1.36a1.95 1.95 0 0 1-1.35-2.3 14.94 14.94 0 0 1 14.58-11.3 15 15 0 0 1 6.19 1.31 15.2 15.2 0 0 1 5.08 3.82Z" fill="#363D40" class="shape"></path><path id="shape-3" d="M42.4 41.78a1.9 1.9 0 1 1 2.86 2.5 21.62 21.62 0 0 1-7.5 5.64 21.84 21.84 0 0 1-23.26-3.17A22.1 22.1 0 0 1 6.96 33.2c0-1.03.86-1.9 1.93-1.9h6.96c.33 0 .66.09.9.25.53.2.94.66 1.1 1.28a11.3 11.3 0 0 0 3.98 6.12 11.26 11.26 0 0 0 6.92 2.34c1.64 0 3.2-.37 4.63-.98a11.3 11.3 0 0 0 3.81-2.84 1.89 1.89 0 0 1 2.83 2.5 14.97 14.97 0 0 1-20.48 1.98 15.27 15.27 0 0 1-4.96-6.82l-3.32-.04c1.01 3.4 3 6.45 5.7 8.75A18.1 18.1 0 0 0 36.2 46.5c2.38-1.1 4.5-2.71 6.18-4.72h.02Z" fill="#2A4B8C" class="shape"></path><path id="shape-4" d="M47.63 46.59c.7-.78 1.89-.87 2.7-.2.79.69.87 1.88.17 2.66a28.8 28.8 0 0 1-40.92 2.67 29.05 29.05 0 0 1-9.54-18.2 1.9 1.9 0 1 1 3.77-.46 25.25 25.25 0 0 0 8.27 15.83 25.18 25.18 0 0 0 16.67 6.33c7.25 0 14.14-3.15 18.88-8.63Z" fill="#1196D9" class="shape"></path></g><path id="text" d="M144.54 30.97c.58-2.55 3.07-3.58 5.5-3.62 2.16-.08 2.49-2.47 1.01-3.2-.7-.34-1.96-.21-2.62-.09-1.43.2-2.74.74-3.85 1.69l-.12.08c-.02-.5-.22-1-.57-1.36-.66-.66-1.64-.57-2.3-.04-.45.37-.65.9-.65 1.48v15c0 .5.12 1.03.45 1.4.7.74 2.21.7 2.78-.12a2 2 0 0 0 .37-1.28v-9.94Zm-29.08 9.98V18.4c0-.2-.04-.41-.08-.58a1.75 1.75 0 0 0-2.87-.9 1.9 1.9 0 0 0-.57.9c-.04.17-.04.37-.04.58v22.56c-.06.58.17 1.15.61 1.52a1.8 1.8 0 0 0 2.34 0c.28-.24.45-.57.53-.94.04-.16.08-.37.08-.58v-.01ZM80.07 16.7c-1.97-.5-4-.62-6.02-.37-5.36.8-9.7 4.76-10.97 10.03-1.52 6.33 1.39 12.74 7.29 15.46a15.07 15.07 0 0 0 9.87.74 13.8 13.8 0 0 0 5.6-3.04c.17-.17.3-.3.38-.42.49-.7.45-1.52-.13-2.1a1.76 1.76 0 0 0-1.72-.53c-.4.09-.73.3-1.02.54a9.7 9.7 0 0 1-3.64 2.18c-2.46.78-5.41.7-7.79-.41-4.67-2.18-6.67-7.65-5.03-12.62a9.62 9.62 0 0 1 7.2-6.42c2.01-.37 4.3-.16 6.19.66.99.45 1.9 1.08 2.66 1.85l.45.33c.2.12.37.16.53.2.62.17 1.27 0 1.68-.4.45-.42.62-1.03.45-1.6 0-.17-.08-.3-.16-.46-.25-.37-.61-.7-.9-.99a12.99 12.99 0 0 0-4.92-2.63Zm22.94 11.84c1.8 1.64 2.34 3.54 2.09 5.92a6.25 6.25 0 0 1-1.43 3.33 6.04 6.04 0 0 1-8.6.45c-1.48-1.44-1.97-3.08-1.93-5.1a6 6 0 0 1 9.87-4.6Zm-12.2 9.9a9.95 9.95 0 0 0 4.13 3.79 10.56 10.56 0 0 0 8.85-.2 9.75 9.75 0 0 0 3.23-2.84 9.38 9.38 0 0 0 1.77-4.73 9.4 9.4 0 0 0-1.8-6.74c-3.65-4.6-10-5.35-14.38-1.44a9.5 9.5 0 0 0-3.07 6.2 9.76 9.76 0 0 0 1.26 5.97l.01-.01Zm94.4-12.49v-7.6c0-.58-.16-1.07-.57-1.44a1.85 1.85 0 0 0-2.37 0c-.41.37-.62.86-.62 1.44V40.9c0 .2.04.41.08.58.2.86.86 1.23 1.68 1.31.82-.08 1.44-.45 1.68-1.31.04-.25.08-.45.08-.7a8.59 8.59 0 0 0 3.98 2.06c2.41.4 4.5.12 6.63-1.16a9.94 9.94 0 0 0 2.79-2.91c1.82-3.2 1.9-7.09.24-10.36-1.3-2.22-2.95-3.7-5.49-4.4a9.07 9.07 0 0 0-6.22.62c-.74.4-1.23.78-1.89 1.31v.01Zm8.32 1.81c2.05 1.27 2.82 3.33 2.82 5.63-.04 1.81-.36 3.17-1.51 4.56-1 1.2-2.5 1.85-4.06 1.77a5.27 5.27 0 0 1-5.16-3.5 8.65 8.65 0 0 1-.16-5.09 5.8 5.8 0 0 1 2.05-3.08 5.78 5.78 0 0 1 6.02-.29ZM174 28.91a2 2 0 0 0-.38-.53c-1.76-1.77-5.49-1.4-7.25.04-.73.7-1.64.94-2.45.24-.45-.4-.66-.9-.54-1.52.2-1.19 1.8-2.1 2.83-2.55 3.15-1.35 7.45-1.06 9.83 1.11a7.36 7.36 0 0 1 2.05 4.32c.08.53.12 1.15.12 1.73v9.12c0 .2-.04.41-.08.58-.33 1.35-1.93 1.85-2.91.86-.2-.16-.33-.41-.45-.66a2.07 2.07 0 0 1-.08-.49 8.76 8.76 0 0 1-6.76 1.8 6.4 6.4 0 0 1-1.27-.32 5.09 5.09 0 0 1-2.05-1.2 5.74 5.74 0 0 1-1.64-6.08c1.15-3.37 4.3-4.4 7.5-4.23 1.51.04 2.99.33 4.1.5 0-.91-.09-1.9-.58-2.72h.01Zm.56 8.22v-2.3c-.86-.2-2-.37-3.19-.45-1.76-.08-4.59.04-5.04 2.14a2.65 2.65 0 0 0 1.85 3.04c2.13.7 5.12-.58 6.38-2.43Zm-42.51-8.59c1.76 1.64 2.3 3.54 2.05 5.96a6.13 6.13 0 0 1-1.44 3.29 6.04 6.04 0 0 1-8.6.45 6.52 6.52 0 0 1-1.88-5.1 6.3 6.3 0 0 1 2.09-4.6 6.05 6.05 0 0 1 7.78 0Zm-12.25 9.9a9.44 9.44 0 0 0 4.14 3.79c2.9 1.23 6.02 1.2 8.85-.2a9.58 9.58 0 0 0 5.04-7.56 9.58 9.58 0 0 0-1.85-6.71c-3.6-4.6-9.95-5.34-14.37-1.44a9.41 9.41 0 0 0-3.08 6.17c-.16 2.18.2 4.07 1.27 5.96v-.01Zm39.36 2.47V18.35c0-.25-.04-.41-.08-.62a1.48 1.48 0 0 0-.53-.86c-.66-.6-1.67-.6-2.33 0-.3.24-.5.53-.58.9-.04.17-.08.37-.08.58V40.9c0 .2.04.41.08.58.08.37.25.7.53.94.66.58 1.72.58 2.38 0 .25-.24.45-.57.53-.94.04-.17.08-.37.08-.58v.01Z" fill="#363D40"></path></g></svg>
  166.                                 </a>
  167.                             </div>
  168.                             <input type="hidden" id="designUrl" value="">
  169.                             <input type="hidden" id="designColorLabTokenProduct" value="{{ cartDetail.colorLabTokenProduct }}">
  170.                             <input type="hidden" id="designColorLabIdProduct" value="{{ cartDetail.colorLabIdProduct }}">
  171.                         {% else %}
  172.                             <div class="txt_selectca" style=""> <a href="#" style="" class="crelloBtnImport crelloBtnImportNow btnMobileImport" >{{ 'Vous pouvez changer votre crea' | trans({}, "productTranslate") }}</a></div>
  173.                             <input type="checkbox" name="isFontBlanc" class="hide" checked="checked" value="{{ cartDetail.mauvaisFormat }}" id="isFontBlanc">
  174.                             <input type="file" multiple id="fileDesign" name="fileDesign[]" style="display: none;"  accept="image/png, image/jpeg, image/jpg, application/pdf" >
  175.                             <input type="hidden" id="fileDesignUrl" value="{{ cartDetail.filePapier }}">
  176.                             <input type="hidden" id="fileDesignFirstImage" value="{{ cartDetail.filePapierFirstImage }}">
  177.                         {% endif %}
  178.                     {% endif %}
  179.                 {% endif %}
  180.             </div>
  181.             <div class="mt-3 text-center" {% if cartDetail.id is defined %}id="addToCartCrelloCartDetailMobile"{% endif %}>
  182.                 <a href="#" class="btnNoir pl-5 pr-5" id="addToCartCrello" style="{% if cartDetail.id is not defined %}display:none;{% endif %}">{{ 'Continuer' | trans({}, "productTranslate") }}</a>
  183.             </div>
  184.             <div id="blockMarginBottom"></div>
  185.             <div id="blockDetailMobile">
  187.             </div>
  188.         </div>
  189.         <div class="modal mdl1 verificationModalMobile"  id="verificationModal" tabindex="-1" role="dialog">
  190.             <div class="modal-dialog" style="margin-top: 6vw;" role="document">
  191.                 <div class="modal-content">
  192.                     <div class="modal-body">
  193.                         <div class="row">
  194.                             <div class="col-md-8 pb-3">
  195.                                 <img src="{{ asset('/images/carte_fond_perdu.png') }}">
  196.                             </div>
  197.                             <div class="col-md-4">
  198.                                 <h4 style="font-weight: 700;">{{ 'Fond perdu' | trans({}, "productTranslate") }}</h4>
  199.                                 <p style="text-align: left;font-size: 14px;color: #6a6666; line-height: 20px;">{{ "Avec le fond perdu, vous êtes certain de ne pas retrouver de blancs sur votre design imprimé. Nous imprimons alors jusqu\'au bord du papier ou de la carte." | trans({}, "productTranslate") }}</p>
  200.                                 <h4 style="font-weight: 700;">{{ 'Régler le fond perdu' | trans({}, "productTranslate") }}</h4>
  201.                                 <ol style="text-align: left;font-size: 14px;color: #6a6666;padding-left: 10px;">
  202.                                     <li style="line-height: 20px;font-size: 14px;">{{ 'Etendez votre arrière-plan au-delà des lignes du fond perdu.' | trans({}, "productTranslate") }}</li>
  203.                                     <li style="line-height: 20px;font-size: 14px;">{{ 'Ne mettez aucun texte ou graphique important en dehors des lignes du fond perdu.' | trans({}, "productTranslate") }}</li>
  204.                                     <li style="line-height: 20px;font-size: 14px;">{{ 'Vérifiez chaque page que vous imprimez.' | trans({}, "productTranslate") }}</li>
  205.                                 </ol>
  206.                             </div>
  208.                         </div>
  209.                     </div>
  210.                     <div class="modal-footer" style="display: block">
  211.                         <div class="btnVerificationModalMobile" style="">
  212.                             <a class="btnVerificationModalMobile2" data-dismiss="modal" aria-label="Close" href="#" style="">{{ "J\'ai compris" | trans({}, "productTranslate") }}</a>
  213.                             <a class="btnVerificationModalMobile1" style="" href="https://blog.copees.com/2021/09/28/les-traits-de-coupe-avec-fonds-perdus-quest-ce-que-cest/" target="_blank">{{ 'Nos conseils pour les fonds perdus' | trans({}, "productTranslate") }}</a>
  214.                         </div>
  215.                     </div>
  216.                 </div>
  217.             </div>
  218.         </div>
  219.     {% else %}
  220.         <style>
  221.             header,.darkHeader {
  222.                 background-color: #fff!important;
  223.                 border-bottom: 1px solid #D9D9D9;
  224.                 position: relative;
  225.             }
  226.             input#searchProductMenu {
  227.                 width: 600px !important;
  228.                 max-width: 600px;
  229.                 border: 1px solid #D9D9D9;
  230.                 border-radius: 10px;
  231.             }
  232.         </style>
  233.         {#desctop#}
  234.         <div class="productIndexOptionNewDescktop" >
  235.             <div class="row" id="productIndexOptionNew">
  236.                 <div class="col-12" >
  237.                     <p class="pLink">
  238.                         <span><a class="spanLink" href="{{ path('accueil') }}">Copees</a></span>
  239.                         <span>
  240.                     <svg xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8" fill="none">
  241.                         <path d="M0.726562 7.06L3.7799 4L0.726562 0.94L1.66656 0L5.66656 4L1.66656 8L0.726562 7.06Z" fill="#323232"/>
  242.                     </svg>
  243.                 </span>
  244.                         <span ><a class="spanLink" href="{{ path('besoin_produits') }}">Communiquer</a></span>
  245.                         <span>
  246.                     <svg xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8" fill="none">
  247.                         <path d="M0.726562 7.06L3.7799 4L0.726562 0.94L1.66656 0L5.66656 4L1.66656 8L0.726562 7.06Z" fill="#323232"/>
  248.                     </svg>
  249.                 </span>
  250.                         <span class="spanLink2">{{ product.getTypeProductName() }}</span>
  251.                     </p>
  252.                 </div>
  253.                 <div class="leftBlock" >
  254.                     <div class="bx_select row_select_ca">
  255.                         <div class="d-flex selectProductNew">
  256.                             <div class="f_family">
  257.                                 <a aria-controls="select_row_ca_add" aria-expanded="false" role="button" href="#select_row_ca_add" data-toggle="collapse" class="btn btn-primary inputSelectProduct collapsed">
  258.                            <span style="padding:0px;display: inline;font-size: 18px;font-weight:400;" id="titreProductSpan1">
  259.                                {% if cartDetail  %}
  260.                                    {% if cartDetail.product.isColorLab %}
  261.                                    {% else %}{{ 'Impression' | trans({}, "productTranslate") }}
  262.                                    {% endif %}
  263.                                {% else %}
  264.                                    {% if app.request.get('product') %}
  265.                                        {% set productById = getProductById(app.request.get('product')) %}
  266.                                        {% if productById  and productById.isColorLab %}
  267.                                        {% else %}{{ 'Impression' | trans({}, "productTranslate") }}
  268.                                        {% endif%}
  269.                                    {% endif %}
  270.                                {% endif %}
  271.                            </span>
  272.                                     <span style="padding:0px;display: inline;font-size: 18px;font-weight:400;" id="titreProduct">{% if cartDetail  %}{{ cartDetail.product.getTypeProductName() | trans({}, "productTranslate") }} {% else %}{% if app.request.get('product') %}{{ getNameProduct(app.request.get('product')) | trans({}, "productTranslate") }}{% endif %}{% endif %}</span>
  273.                                 </a>
  274.                                 <div class="collapse" id="select_row_ca_add" style="">
  275.                                     <div class="row_select_ca02 row">
  276.                                         <div class="col-12 pl-0 pr-0">
  277.                                             <h3>{{ "Créer & communiquer" | trans({}, "productTranslate") |raw }}</h3>
  278.                                             <div class=" bx_global_radio taille_full" style="max-width: 100%;">
  279.                                                 {% for item in getProductsWithoutPapier() %}
  280.                                                     <div class="taille tailleSelect">
  281.                                                         <input value="{{ item.id }}" data-new-page="1" data-url="{{ path('product_option') }}?product={{ item.id }}" type="radio" name="productOption" class="select_ca_btn01" id="cad{{ item.id }}"{% if cartDetail  and cartDetail.product.id == item.id %} checked="checked{% else %}{% if app.request.get('product') and app.request.get('product') == item.id %} checked="checked{% endif %}{% endif %}">
  282.                                                         <label for="cad{{ item.id }}" class="block taille ">{{ item.titre | trans({}, "productTranslate") }}</label>
  283.                                                     </div>
  284.                                                 {% endfor %}
  285.                                             </div>
  286.                                         </div>
  287.                                     </div>
  288.                                 </div>
  289.                             </div>
  290.                         </div>
  291.                     </div>
  292.                     <div class="col-12 p-0">
  293.                         <p class="lienSavoirPlusP mb-2"><a href="{{ product.lienSavoirPlus }}"  {% if product.lienSavoirPlusIsExtern %} target="_blank"{% endif %}>En savoir plus</a> </p>
  294.                     </div>
  295.                     <div class="row">
  296.                         <div class="col-md-12 imageProduitNewOption"  style="margin-bottom:12px;background-image: url(/imageSite/{{ product.imageBlocOptionProductNew1 }});">
  297.                             <p style="font-family: {{ product.titreBlocOptionProductPoliceNew1 }};font-size: {{ product.titreBlocOptionProductTailleNew1 }};color: {{ product.titreBlocOptionProductCouleurNew1 }};">{{ product.titreBlocOptionProductNew1 }}</p>
  298.                             <a style="font-family: {{ product.titreBtnBlocOptionProductPoliceNew1 }};font-size: {{ product.titreBtnBlocOptionProductTailleNew1 }};color: {{ product.titreBtnBlocOptionProductCouleurNew1 }}; background:{{ product.titreBtnBlocOptionProductCouleurBackgroundNew1 }};"  href="{{ product.linkBtnBlocOptionProductNew1 }}" {% if product.linkBtnBlocOptionProductNew1IsExtern %} target="_blank"{% endif %}>{{ product.titreBtnBlocOptionProductNew1 }}</a>
  299.                         </div>
  300.                         <div class="col-md-12 imageProduitNewOption"  style="margin-bottom:12px;background-image: url(/imageSite/{{ product.imageBlocOptionProductNew2 }});">
  301.                             <p style="font-family: {{ product.titreBlocOptionProductPoliceNew2 }};font-size: {{ product.titreBlocOptionProductTailleNew2 }};color: {{ product.titreBlocOptionProductCouleurNew2 }};">{{ product.titreBlocOptionProductNew2 }}</p>
  302.                             <a style="font-family: {{ product.titreBtnBlocOptionProductPoliceNew2 }};font-size: {{ product.titreBtnBlocOptionProductTailleNew2 }};color: {{ product.titreBtnBlocOptionProductCouleurNew2 }};  background:{{ product.titreBtnBlocOptionProductCouleurBackgroundNew2 }};"  href="{{ product.linkBtnBlocOptionProductNew2 }}" {% if product.linkBtnBlocOptionProductNew2IsExtern %} target="_blank"{% endif %}>{{ product.titreBtnBlocOptionProductNew2 }}</a>
  303.                         </div>
  304.                         <div class="col-md-6 imageProduitNewOption"  style="margin-right:12px;margin-bottom:12px;background-image: url(/imageSite/{{ product.imageBlocOptionProductNew3 }});">
  305.                             <p style="font-family: {{ product.titreBlocOptionProductPoliceNew3 }};font-size: {{ product.titreBlocOptionProductTailleNew3 }};color: {{ product.titreBlocOptionProductCouleurNew3 }};">{{ product.titreBlocOptionProductNew3 }}</p>
  306.                             <a style="font-family: {{ product.titreBtnBlocOptionProductPoliceNew3 }};font-size: {{ product.titreBtnBlocOptionProductTailleNew3 }};color: {{ product.titreBtnBlocOptionProductCouleurNew3 }}; background:{{ product.titreBtnBlocOptionProductCouleurBackgroundNew3 }};" href="{{ product.linkBtnBlocOptionProductNew3 }}" {% if product.linkBtnBlocOptionProductNew3IsExtern %} target="_blank"{% endif %}>{{ product.titreBtnBlocOptionProductNew3 }}</a>
  307.                         </div>
  308.                         <div class="col-md-5 imageProduitNewOption"  style="margin-bottom:12px;background-image: url(/imageSite/{{ product.imageBlocOptionProductNew4 }});">
  309.                             <p style="font-family: {{ product.titreBlocOptionProductPoliceNew4 }};font-size: {{ product.titreBlocOptionProductTailleNew4 }};color: {{ product.titreBlocOptionProductCouleurNew4 }};">{{ product.titreBlocOptionProductNew4 }}</p>
  310.                             <a style="font-family: {{ product.titreBtnBlocOptionProductPoliceNew4 }};font-size: {{ product.titreBtnBlocOptionProductTailleNew4 }};color: {{ product.titreBtnBlocOptionProductCouleurNew4 }}; background:{{ product.titreBtnBlocOptionProductCouleurBackgroundNew4 }};" href="{{ product.linkBtnBlocOptionProductNew4 }}" {% if product.linkBtnBlocOptionProductNew4IsExtern %} target="_blank"{% endif %}>{{ product.titreBtnBlocOptionProductNew4 }}</a>
  311.                         </div>
  312.                     </div>
  313.                     <div id="optionsBloc1">
  315.                     </div>
  316.                     <div class="row">
  317.                         <div class="col-md-12 besoinProduitNewOption"  style="">
  318.                             <p>Vous ne trouvez pas votre besoin ?</p>
  319.                             <a href="{{ product.lienCDemandeDevis }}" {% if product.lienCDemandeDevisIsExtern %} target="_blank"{% endif %}>Demande de devis</a>
  320.                         </div>
  321.                     </div>
  324.                 </div>
  325.                 <div class=" centerBlock">
  326.                     <div id="optionsBloc2">
  328.                     </div>
  330.                     <div id="quantityBlocNew" class="oghtml6">
  332.                     </div>
  334.                     <div class="row_select_ca1 oghtml5">
  335.                         <div class="Comm_adress">
  336.                             <h3>{{ 'Votre adresse' | trans({}, "productTranslate") }}</h3>
  337.                             <div role="group" class="form-group">
  338.                                 <input id="addresseLiv" name="addresseLiv" type="text" class="form-control adresee-google-map" placeholder=" "
  339.                                         {% if app.session.get('addresseAdresse') %} value="{{ app.session.get('addresseAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','adresse') }} {% endif %} >
  340.                                 <label for="addresseLiv" class="d-block form-control-placeholder"> {{ 'Commencez à saisir la première ligne de votre adresse' | trans({}, "productTranslate") }}</label>
  341.                                 <input type="hidden" id="longLiv"  {% if app.session.get('longiAdresse') %} value="{{ app.session.get('longiAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','longi') }}{% endif %} name="longLiv">
  342.                                 <input type="hidden" id="latLiv" {% if app.session.get('latAdresse') %} value="{{ app.session.get('latAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','lat') }}{% endif %} name="latLiv">
  343.                                 <input type="hidden" id="codePostalLiv" {% if app.session.get('postalcodeAdresse') %} value="{{ app.session.get('postalcodeAdresse') }}" {% else %} {{ _self.value(cart,'adresseLivraison','codePostal') }}{% endif %} name="codePostalLiv">
  344.                                 <input type="hidden" id="CountryLiv" value="{% if app.session.get('CountryLiv') %}{{ app.session.get('CountryLiv') }}{% else %}{% if cart.adresseLivraison.country is defined  %}{{ cart.adresseLivraison.country }}{% endif %}{% endif %}" name="CountryLiv">
  345.                                 <input type="hidden" value="{% if app.session.get('CountryCodeLiv') %}{{ app.session.get('CountryCodeLiv') }}{% else %}{% if cart.adresseLivraison.countryCode is defined %}{{ cart.adresseLivraison.countryCode }}{% endif %}{% endif%}" name="CountryCodeLiv" id="CountryCodeLiv">
  346.                                 <input type="hidden" id="cityLiv" {% if app.session.get('cityAdresse') %} value="{{ app.session.get('cityAdresse') }}" {% else %}{{ _self.value(cart,'adresseLivraison','city') }}{% endif %} name="cityLiv">
  347.                             </div>
  348.                         </div>
  349.                         <div id="modeLivraison">
  351.                         </div>
  352.                         {% if cartDetail.id is not defined  %}
  353.                             <div id="crelloButtons" class="crelloButtonsBlock crelloButtonsNew">
  355.                             </div>
  356.                         {% endif %}
  358.                         {% if cartDetail  %}
  359.                             {% include 'front/product-option/productPreviewModal.html.twig'  with {'isMobileInterface':isMobileInterface } %}
  360.                             {% if cartDetail.product.typeProduct  in [ constant('App\\Entity\\Product::PHOTOS')]%}
  361.                                 <div class="txt_selectca mb-2" style=""> <a href="#" style="" class="crelloBtnImportPhotos crelloBtnImportNow" >{{ 'Vous pouvez changer votre crea' | trans({}, "productTranslate") }}</a></div>
  362.                             {% else %}
  363.                                 {% if cartDetail.templateIdCrello  %}
  364.                                     <div class="txt_selectca mb-2" style="min-height: 43px;"> <a href="#" style="color: #fff;" class="crelloBtn" >{{ 'Vous pouvez éditer votre création sur' | trans({}, "productTranslate") }} <img  width="130px"  src="{{ asset('/images/ininfoselectF.svg') }}" ></a></div>
  365.                                     <input type="hidden" id="designUrl" value="">
  366.                                     <input type="hidden" id="designType" value="{{ cartDetail.productAttribute.format.designTypeCrello }}">
  367.                                     <input type="hidden" id="customDesignType" value="{{ cartDetail.productAttribute.format.designTypeCustomCrello }}">
  368.                                     <input type="hidden" id="sideBarDesignType" value="{{ cartDetail.productAttribute.format.designTypeSideBarCrello }}">
  369.                                 {% elseif cartDetail.colorLabTokenProduct and cartDetail.colorLabIdProduct %}
  370.                                     <div class="txt_selectca" style="min-height: 43px;">
  371.                                         <a href="#" style="color: #fff;" class="crelloBtn" >
  372.                                             {{ 'Vous pouvez éditer votre création sur' | trans({}, "productTranslate") }}
  373.                                             <svg viewBox="0 0 201 60" xmlns="http://www.w3.org/2000/svg" class="c-navbar__logo" style=" width: 95px;margin-left: 10px;"><g fill-rule="nonzero" fill="none"><g id="shape" fill-rule="nonzero" fill="none"><path id="shape-1" d="M7.33 24.8A22.05 22.05 0 0 1 28.67 7.9c3.28 0 6.39.75 9.18 2.06a21.35 21.35 0 0 1 7.5 5.71c.69.79.56 2.02-.21 2.68-.78.65-1.97.57-2.67-.2a17.92 17.92 0 0 0-13.8-6.41c-8.86 0-16.43 6.4-17.9 15.13-.08.97-.9 1.75-1.88 1.75l-6.96-.04h-.21a1.92 1.92 0 0 1-1.68-2.1 29.2 29.2 0 0 1 9.59-18.2 28.7 28.7 0 0 1 40.87 2.67c.7.78.62 1.97-.16 2.67-.82.7-2 .62-2.7-.17a25.24 25.24 0 0 0-8.52-6.4 24.94 24.94 0 0 0-10.37-2.23A25.04 25.04 0 0 0 4.18 24.8h3.15Z" fill="#E65545" class="shape"></path><path id="shape-2" d="M40.02 20.07c.7.78.61 1.98-.17 2.67-.78.7-1.96.62-2.66-.16a11.4 11.4 0 0 0-3.8-2.88 11.3 11.3 0 0 0-15.53 7.48c-.3 1-1.32 1.6-2.34 1.36a1.95 1.95 0 0 1-1.35-2.3 14.94 14.94 0 0 1 14.58-11.3 15 15 0 0 1 6.19 1.31 15.2 15.2 0 0 1 5.08 3.82Z" fill="#363D40" class="shape"></path><path id="shape-3" d="M42.4 41.78a1.9 1.9 0 1 1 2.86 2.5 21.62 21.62 0 0 1-7.5 5.64 21.84 21.84 0 0 1-23.26-3.17A22.1 22.1 0 0 1 6.96 33.2c0-1.03.86-1.9 1.93-1.9h6.96c.33 0 .66.09.9.25.53.2.94.66 1.1 1.28a11.3 11.3 0 0 0 3.98 6.12 11.26 11.26 0 0 0 6.92 2.34c1.64 0 3.2-.37 4.63-.98a11.3 11.3 0 0 0 3.81-2.84 1.89 1.89 0 0 1 2.83 2.5 14.97 14.97 0 0 1-20.48 1.98 15.27 15.27 0 0 1-4.96-6.82l-3.32-.04c1.01 3.4 3 6.45 5.7 8.75A18.1 18.1 0 0 0 36.2 46.5c2.38-1.1 4.5-2.71 6.18-4.72h.02Z" fill="#2A4B8C" class="shape"></path><path id="shape-4" d="M47.63 46.59c.7-.78 1.89-.87 2.7-.2.79.69.87 1.88.17 2.66a28.8 28.8 0 0 1-40.92 2.67 29.05 29.05 0 0 1-9.54-18.2 1.9 1.9 0 1 1 3.77-.46 25.25 25.25 0 0 0 8.27 15.83 25.18 25.18 0 0 0 16.67 6.33c7.25 0 14.14-3.15 18.88-8.63Z" fill="#1196D9" class="shape"></path></g><path id="text" d="M144.54 30.97c.58-2.55 3.07-3.58 5.5-3.62 2.16-.08 2.49-2.47 1.01-3.2-.7-.34-1.96-.21-2.62-.09-1.43.2-2.74.74-3.85 1.69l-.12.08c-.02-.5-.22-1-.57-1.36-.66-.66-1.64-.57-2.3-.04-.45.37-.65.9-.65 1.48v15c0 .5.12 1.03.45 1.4.7.74 2.21.7 2.78-.12a2 2 0 0 0 .37-1.28v-9.94Zm-29.08 9.98V18.4c0-.2-.04-.41-.08-.58a1.75 1.75 0 0 0-2.87-.9 1.9 1.9 0 0 0-.57.9c-.04.17-.04.37-.04.58v22.56c-.06.58.17 1.15.61 1.52a1.8 1.8 0 0 0 2.34 0c.28-.24.45-.57.53-.94.04-.16.08-.37.08-.58v-.01ZM80.07 16.7c-1.97-.5-4-.62-6.02-.37-5.36.8-9.7 4.76-10.97 10.03-1.52 6.33 1.39 12.74 7.29 15.46a15.07 15.07 0 0 0 9.87.74 13.8 13.8 0 0 0 5.6-3.04c.17-.17.3-.3.38-.42.49-.7.45-1.52-.13-2.1a1.76 1.76 0 0 0-1.72-.53c-.4.09-.73.3-1.02.54a9.7 9.7 0 0 1-3.64 2.18c-2.46.78-5.41.7-7.79-.41-4.67-2.18-6.67-7.65-5.03-12.62a9.62 9.62 0 0 1 7.2-6.42c2.01-.37 4.3-.16 6.19.66.99.45 1.9 1.08 2.66 1.85l.45.33c.2.12.37.16.53.2.62.17 1.27 0 1.68-.4.45-.42.62-1.03.45-1.6 0-.17-.08-.3-.16-.46-.25-.37-.61-.7-.9-.99a12.99 12.99 0 0 0-4.92-2.63Zm22.94 11.84c1.8 1.64 2.34 3.54 2.09 5.92a6.25 6.25 0 0 1-1.43 3.33 6.04 6.04 0 0 1-8.6.45c-1.48-1.44-1.97-3.08-1.93-5.1a6 6 0 0 1 9.87-4.6Zm-12.2 9.9a9.95 9.95 0 0 0 4.13 3.79 10.56 10.56 0 0 0 8.85-.2 9.75 9.75 0 0 0 3.23-2.84 9.38 9.38 0 0 0 1.77-4.73 9.4 9.4 0 0 0-1.8-6.74c-3.65-4.6-10-5.35-14.38-1.44a9.5 9.5 0 0 0-3.07 6.2 9.76 9.76 0 0 0 1.26 5.97l.01-.01Zm94.4-12.49v-7.6c0-.58-.16-1.07-.57-1.44a1.85 1.85 0 0 0-2.37 0c-.41.37-.62.86-.62 1.44V40.9c0 .2.04.41.08.58.2.86.86 1.23 1.68 1.31.82-.08 1.44-.45 1.68-1.31.04-.25.08-.45.08-.7a8.59 8.59 0 0 0 3.98 2.06c2.41.4 4.5.12 6.63-1.16a9.94 9.94 0 0 0 2.79-2.91c1.82-3.2 1.9-7.09.24-10.36-1.3-2.22-2.95-3.7-5.49-4.4a9.07 9.07 0 0 0-6.22.62c-.74.4-1.23.78-1.89 1.31v.01Zm8.32 1.81c2.05 1.27 2.82 3.33 2.82 5.63-.04 1.81-.36 3.17-1.51 4.56-1 1.2-2.5 1.85-4.06 1.77a5.27 5.27 0 0 1-5.16-3.5 8.65 8.65 0 0 1-.16-5.09 5.8 5.8 0 0 1 2.05-3.08 5.78 5.78 0 0 1 6.02-.29ZM174 28.91a2 2 0 0 0-.38-.53c-1.76-1.77-5.49-1.4-7.25.04-.73.7-1.64.94-2.45.24-.45-.4-.66-.9-.54-1.52.2-1.19 1.8-2.1 2.83-2.55 3.15-1.35 7.45-1.06 9.83 1.11a7.36 7.36 0 0 1 2.05 4.32c.08.53.12 1.15.12 1.73v9.12c0 .2-.04.41-.08.58-.33 1.35-1.93 1.85-2.91.86-.2-.16-.33-.41-.45-.66a2.07 2.07 0 0 1-.08-.49 8.76 8.76 0 0 1-6.76 1.8 6.4 6.4 0 0 1-1.27-.32 5.09 5.09 0 0 1-2.05-1.2 5.74 5.74 0 0 1-1.64-6.08c1.15-3.37 4.3-4.4 7.5-4.23 1.51.04 2.99.33 4.1.5 0-.91-.09-1.9-.58-2.72h.01Zm.56 8.22v-2.3c-.86-.2-2-.37-3.19-.45-1.76-.08-4.59.04-5.04 2.14a2.65 2.65 0 0 0 1.85 3.04c2.13.7 5.12-.58 6.38-2.43Zm-42.51-8.59c1.76 1.64 2.3 3.54 2.05 5.96a6.13 6.13 0 0 1-1.44 3.29 6.04 6.04 0 0 1-8.6.45 6.52 6.52 0 0 1-1.88-5.1 6.3 6.3 0 0 1 2.09-4.6 6.05 6.05 0 0 1 7.78 0Zm-12.25 9.9a9.44 9.44 0 0 0 4.14 3.79c2.9 1.23 6.02 1.2 8.85-.2a9.58 9.58 0 0 0 5.04-7.56 9.58 9.58 0 0 0-1.85-6.71c-3.6-4.6-9.95-5.34-14.37-1.44a9.41 9.41 0 0 0-3.08 6.17c-.16 2.18.2 4.07 1.27 5.96v-.01Zm39.36 2.47V18.35c0-.25-.04-.41-.08-.62a1.48 1.48 0 0 0-.53-.86c-.66-.6-1.67-.6-2.33 0-.3.24-.5.53-.58.9-.04.17-.08.37-.08.58V40.9c0 .2.04.41.08.58.08.37.25.7.53.94.66.58 1.72.58 2.38 0 .25-.24.45-.57.53-.94.04-.17.08-.37.08-.58v.01Z" fill="#363D40"></path></g></svg>
  374.                                         </a>
  375.                                     </div>
  376.                                     <input type="hidden" id="designUrl" value="">
  377.                                     <input type="hidden" id="designColorLabTokenProduct" value="{{ cartDetail.colorLabTokenProduct }}">
  378.                                     <input type="hidden" id="designColorLabIdProduct" value="{{ cartDetail.colorLabIdProduct }}">
  379.                                 {% else %}
  380.                                     <div class="txt_selectca" style=""> <a href="#" style="" class="crelloBtnImport crelloBtnImportNow" >{{ 'Vous pouvez changer votre crea' | trans({}, "productTranslate") }}</a></div>
  381.                                     <input type="checkbox" name="isFontBlanc" class="hide" checked="checked" value="{{ cartDetail.mauvaisFormat }}" id="isFontBlanc">
  382.                                     <input type="file" multiple id="fileDesign" name="fileDesign[]" style="display: none;"  accept="image/png, image/jpeg, image/jpg, application/pdf" >
  383.                                     <input type="hidden" id="fileDesignUrl" value="{{ cartDetail.filePapier }}">
  384.                                     <input type="hidden" id="fileDesignFirstImage" value="{{ cartDetail.filePapierFirstImage }}">
  385.                                 {% endif %}
  386.                             {% endif %}
  387.                         {% endif %}
  388.                     </div>
  389.                 </div>
  390.                 <div class=" rightBlock">
  391.                     <div id="blockPanierNew">
  393.                     </div>
  394.                     <div class="nousContacter" style="margin-bottom: 34px;">
  395.                         <h3>Nous contacter</h3>
  396.                         <div class="nousContacterContent">
  397.                             <a href="#"  data-toggle="modal" data-target="#contactModal" >
  398.                         <span>
  399.                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  400.                                 <g clip-path="url(#clip0_64_809)">
  401.                                 <path d="M6.54 5C6.6 5.89 6.75 6.76 6.99 7.59L5.79 8.79C5.38 7.59 5.12 6.32 5.03 5H6.54ZM16.4 17.02C17.25 17.26 18.12 17.41 19 17.47V18.96C17.68 18.87 16.41 18.61 15.2 18.21L16.4 17.02ZM7.5 3H4C3.45 3 3 3.45 3 4C3 13.39 10.61 21 20 21C20.55 21 21 20.55 21 20V16.51C21 15.96 20.55 15.51 20 15.51C18.76 15.51 17.55 15.31 16.43 14.94C16.33 14.9 16.22 14.89 16.12 14.89C15.86 14.89 15.61 14.99 15.41 15.18L13.21 17.38C10.38 15.93 8.06 13.62 6.62 10.79L8.82 8.59C9.1 8.31 9.18 7.92 9.07 7.57C8.7 6.45 8.5 5.25 8.5 4C8.5 3.45 8.05 3 7.5 3Z" fill="#303030"/>
  402.                                 </g>
  403.                                 <defs>
  404.                                 <clipPath id="clip0_64_809">
  405.                                 <rect width="24" height="24" fill="white"/>
  406.                                 </clipPath>
  407.                                 </defs>
  408.                             </svg>
  409.                         </span>
  410.                                 <span>Par téléphone</span>
  411.                             </a>
  412.                             <a href="#" id="contactChat">
  413.                         <span>
  414.                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  415.                                <path d="M13 2V9H3.17L2 10.17V2H13ZM14 0H1C0.45 0 0 0.45 0 1V15L4 11H14C14.55 11 15 10.55 15 10V1C15 0.45 14.55 0 14 0ZM19 4H17V13H4V15C4 15.55 4.45 16 5 16H16L20 20V5C20 4.45 19.55 4 19 4Z" fill="#303030"/>
  416.                             </svg>
  417.                         </span>
  418.                                 <span>Via notre chat</span>
  419.                             </a>
  420.                             <a href="{{ product.lienCalandlyOptionProduct }}"  {% if product.lienCalandlyOptionProductIsExtern %} target="_blank"{% endif %} >
  421.                                 <span>
  422.                                     <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
  423.                                         <g clip-path="url(#clip0_64_815)">
  424.                                         <path d="M21.5 12.22C21.5 6.73 17.24 3 12.5 3C7.81 3 3.5 6.65 3.5 12.28C2.9 12.62 2.5 13.26 2.5 14V16C2.5 17.1 3.4 18 4.5 18H5.5V11.9C5.5 8.03 8.63 4.9 12.5 4.9C16.37 4.9 19.5 8.03 19.5 11.9V19H11.5V21H19.5C20.6 21 21.5 20.1 21.5 19V17.78C22.09 17.47 22.5 16.86 22.5 16.14V13.84C22.5 13.14 22.09 12.53 21.5 12.22Z" fill="#303030"/>
  425.                                         <path d="M9.5 14C10.0523 14 10.5 13.5523 10.5 13C10.5 12.4477 10.0523 12 9.5 12C8.94772 12 8.5 12.4477 8.5 13C8.5 13.5523 8.94772 14 9.5 14Z" fill="#303030"/>
  426.                                         <path d="M15.5 14C16.0523 14 16.5 13.5523 16.5 13C16.5 12.4477 16.0523 12 15.5 12C14.9477 12 14.5 12.4477 14.5 13C14.5 13.5523 14.9477 14 15.5 14Z" fill="#303030"/>
  427.                                         <path d="M18.5 11.03C18.02 8.18 15.54 6 12.55 6C9.51997 6 6.25997 8.51 6.51997 12.45C8.98997 11.44 10.85 9.24 11.38 6.56C12.69 9.19 15.38 11 18.5 11.03Z" fill="#303030"/>
  428.                                         </g>
  429.                                         <defs>
  430.                                         <clipPath id="clip0_64_815">
  431.                                         <rect width="24" height="24" fill="white" transform="translate(0.5)"/>
  432.                                         </clipPath>
  433.                                         </defs>
  434.                                     </svg>
  435.                                 </span>
  436.                                 <span>Prendre RDV avec un conseiller</span>
  437.                             </a>
  438.                         </div>
  439.                         <div id="nosLovesPrinter">
  441.                         </div>
  442.                     </div>
  443.                     {#<div class="nosTips">#}
  444.                         {#<h3>Nos tips</h3>#}
  445.                         {#<div class="nosTipsContent">#}
  446.                             {#{% if product.tipsProduct|length > 0 %}#}
  447.                                 {#{% for item in product.tipsProduct %}#}
  448.                                     {#<div class="nosTipsItem">#}
  449.                                         {#<h4 class="nosTipsItemTitre">#}
  450.                                             {#{{ item.titre }}#}
  451.                                             {#<a href="#" class="nosTipsItemA">#}
  452.                                                 {#<svg class="vectorPlus activeVector" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">#}
  453.                                                     {#<path d="M11.25 6.75H6.75V11.25H5.25V6.75H0.75V5.25H5.25V0.75H6.75V5.25H11.25V6.75Z" fill="#323232"/>#}
  454.                                                 {#</svg>#}
  455.                                                 {#<svg class="vectorMoins" style="margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" width="12" height="2" viewBox="0 0 12 2" fill="none">#}
  456.                                                     {#<path d="M11.25 1.75H6.75H5.25H0.75V0.25H5.25H6.75H11.25V1.75Z" fill="#323232"/>#}
  457.                                                 {#</svg>#}
  458.                                             {#</a>#}
  459.                                         {#</h4>#}
  460.                                         {#<div  class="nosTipsItemDescription" style="display: none;">#}
  461.                                             {#{{ item.description|raw }}#}
  462.                                         {#</div>#}
  463.                                     {#</div>#}
  464.                                 {#{% endfor %}#}
  465.                             {#{% endif %}#}
  467.                         {#</div>#}
  468.                     {#</div>#}
  469.                 </div>
  470.             </div>
  471.             <div  id="section2OptionNew">
  472.                 <div class="row">
  473.                     <div class="col-md-12">
  474.                         <h2 class="h2productIndexOptionNew">Besoin d'un autre produit ?</h2>
  475.                     </div>
  476.                 </div>
  477.                 <div class="row" style="display: flex;justify-content: center;padding-bottom: 60px;">
  478.                     {% if product.recommendationProduct|length > 0 %}
  479.                         {% for item in  product.recommendationProduct %}
  480.                             <div class="col-6 col-md-3 col-lg-2 col-xl-2">
  481.                                 <div class="divProductImageCommande">
  482.                                     {% if item.titre %} <span>{{ item.titre }}</span>{% endif %}
  483.                                     <a style="position: relative;" class="new_option_product_a_img" href="{{ item.link }}">
  484.                                         <img class="" src="{{ asset('imageSite/'~item.image) }}">
  485.                                     </a>
  486.                                 </div>
  487.                             </div>
  488.                         {% endfor %}
  489.                     {% endif %}
  490.                 </div>
  491.             </div>
  492.             <div  id="section3OptionNew" style="background-image: url(/imageSite/{{ product.imageBloc1OptionProduct }});">
  493.                 <div class="section3OptionNewDiv">
  494.                     <h2 class="h2productIndexOptionNew h2productIndexOptionNewSection3">{{ product.titreBloc1OptionProduct }}</h2>
  495.                     <p>{{ product.descriptionBloc1OptionProduct|raw }}</p>
  496.                     {% if product.titreBtnBloc1OptionProduct %}<a href="{{ product.linkBtnBloc1OptionProduct }}" class="btnOptionNewBloc">{{ product.titreBtnBloc1OptionProduct }}</a>{% endif %}
  497.                 </div>
  498.             </div>
  499.             <div  id="section4OptionNew">
  500.                 <div class="section4OptionNewDiv">
  501.                     <h2 class="h2productIndexOptionNew h2productIndexOptionNewSection4">{{ product.titreBloc2OptionProduct }}</h2>
  502.                     <p>{{ product.descriptionBloc2OptionProduct|raw }}</p>
  503.                     <div class="" style="text-align: center ;text-align: center;margin-top: 45px;">
  504.                         {% if product.titreBtnBloc2OptionProduct %}<a href="{{ product.linkBtnBloc2OptionProduct }}" class="btnOptionNewBloc">{{ product.titreBtnBloc2OptionProduct }}</a>{% endif %}
  505.                     </div>
  506.                 </div>
  507.             </div>
  508.             <div  id="section3OptionNew" style="background-image: url(/imageSite/{{ product.imageBloc3OptionProduct }});">
  509.                 <div class="section3OptionNewDiv">
  510.                     <h2 class="h2productIndexOptionNew h2productIndexOptionNewSection3">{{ product.titreBloc3OptionProduct }}</h2>
  511.                     <p>{{ product.descriptionBloc3OptionProduct|raw }}</p>
  512.                     {% if product.titreBtnBloc3OptionProduct %}<a href="{{ product.linkBtnBloc3OptionProduct }}" class="btnOptionNewBloc">{{ product.titreBtnBloc3OptionProduct }}</a>{% endif %}
  513.                 </div>
  514.             </div>
  515.         </div>
  516.         <div class="modal mdl1"  id="verificationModal" tabindex="-1" role="dialog">
  517.             <div class="modal-dialog" style="margin-top: 6vw;" role="document">
  518.                 <div class="modal-content">
  519.                     <div class="modal-body">
  520.                         <div class="row">
  521.                             <div class="col-md-4">
  522.                                 <h4 style="font-weight: 700;">{{ 'Fond perdu' | trans({}, "productTranslate") }}</h4>
  523.                                 <p style="text-align: left;font-size: 14px;color: #6a6666; line-height: 20px;">{{ "Avec le fond perdu, vous êtes certain de ne pas retrouver de blancs sur votre design imprimé. Nous imprimons alors jusqu\'au bord du papier ou de la carte." | trans({}, "productTranslate") }}</p>
  524.                                 <h4 style="font-weight: 700;">{{ 'Régler le fond perdu' | trans({}, "productTranslate") }}</h4>
  525.                                 <ol style="text-align: left;font-size: 14px;color: #6a6666;padding-left: 10px;">
  526.                                     <li style="line-height: 20px;font-size: 14px;">{{ 'Etendez votre arrière-plan au-delà des lignes du fond perdu.' | trans({}, "productTranslate") }}</li>
  527.                                     <li style="line-height: 20px;font-size: 14px;">{{ 'Ne mettez aucun texte ou graphique important en dehors des lignes du fond perdu.' | trans({}, "productTranslate") }}</li>
  528.                                     <li style="line-height: 20px;font-size: 14px;">{{ 'Vérifiez chaque page que vous imprimez.' | trans({}, "productTranslate") }}</li>
  529.                                 </ol>
  530.                             </div>
  531.                             <div class="col-md-8">
  532.                                 <img src="{{ asset('/images/carte_fond_perdu.png') }}">
  533.                             </div>
  534.                         </div>
  535.                     </div>
  536.                     <div class="modal-footer" style="display: block">
  537.                         <div class="mt-4" style="display: flex;justify-content: space-evenly">
  538.                             <a class="close" data-dismiss="modal" aria-label="Close" href="#" style="padding: 10px 60px;color: #000;font-size: 16px;background: #F2F3F5;border-radius: 7px;">{{ "J\'ai compris" | trans({}, "productTranslate") }}</a>
  539.                             <a style="padding: 10px 60px;color: #000;font-size: 16px;background: #c7d0d8;border-radius: 7px;" href="https://blog.copees.com/2021/09/28/les-traits-de-coupe-avec-fonds-perdus-quest-ce-que-cest/" target="_blank">{{ 'Nos conseils pour les fonds perdus' | trans({}, "productTranslate") }}</a>
  540.                         </div>
  541.                     </div>
  542.                 </div>
  543.             </div>
  544.         </div>
  545.         {% include 'front/footer.html.twig' %}
  547.     {% endif %}
  554.     <div class="modal fade" id="exampleModal01" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  555.          style="display: none;" aria-hidden="true">
  556.         <div class="modal-dialog" role="document" style="margin-top: 4vw;">
  557.             <div class="modal-content nb_des nb_des_extra" style="border-radius: 0;">
  558.                 <div class="modal-header">
  559.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  560.                         <span aria-hidden="true">×</span>
  561.                     </button>
  562.                 </div>
  563.                 <div class="modal-body" id="contentModalAddToCartCrello">
  565.                 </div>
  566.             </div>
  567.         </div>
  568.     </div>
  570.     <div class="modal mdlContact"  id="contactModal" tabindex="-1" role="dialog">
  571.         <div class="modal-dialog" style="margin-top: 6vw;" role="document">
  572.             <div class="modal-content">
  573.                 <div class="modal-header">
  574.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  575.                         <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
  576.                             <rect width="30" height="30" rx="10" fill="black"/>
  577.                             <path d="M22 9.41L20.59 8L15 13.59L9.41 8L8 9.41L13.59 15L8 20.59L9.41 22L15 16.41L20.59 22L22 20.59L16.41 15L22 9.41Z" fill="white"/>
  578.                         </svg>
  579.                     </button>
  580.                 </div>
  581.                 <div class="contactModalImage"  style="background-image: url(/imageSite/{{ product.imageBlocTelOptionProduct }} );"></div>
  582.                 <div class="modal-body">
  583.                     <div class="contactModalDescription">
  584.                       {{ product.descriptionBlocTelOptionProduct|raw }}
  585.                     </div>
  586.                 </div>
  588.             </div>
  589.         </div>
  590.     </div>
  591.     <div class="modal mdl1"  id="outOfStockModal" tabindex="-1" role="dialog">
  592.         <div class="modal-dialog modal-lg" style="margin-top: 3vw;">
  593.             <div class="modal-content modalProduct modalProductAtributeStock">
  595.             </div>
  596.         </div>
  597.     </div>
  599.     <style>
  600.         footer {
  601.             padding-top: 0px;
  602.             margin-top: 0px;
  603.         }
  604.         .taille label {
  605.             padding: 0 12px;
  606.         }
  607.         .bloc_btn_crello {
  608.             margin-top: 40px;
  609.             background-color: #FDF18D;
  610.             color: #000;
  611.             min-height: 50px;
  612.             padding: 15px;
  613.             border-radius: 4px !important;
  614.             font-size: 14px;
  615.         }
  616.         .btnNoir{
  617.             color: #fff;
  618.             background-color: #000;
  619.             display: inline-block;
  620.             font-size: 12px;
  621.             padding: 15px 12px;
  622.             text-align: center;
  623.         }
  624.         .btnBlue{
  625.             color: #fff;
  626.             background-color: #5BAFF5;
  627.             display: inline-block;
  628.             font-size: 12px;
  629.             padding: 15px 12px;
  630.             text-align: center;
  631.         }
  632.         .mdl1 li::marker {
  633.             color: #6a6666;
  634.         }
  635.         .carousel-indicators li {
  636.             display: inline-block;
  637.             width: 10px;
  638.             height: 10px;
  639.             margin: 1px;
  640.             text-indent: -999px;
  641.             cursor: pointer;
  642.             background-color: #fff\9;
  643.             background-color: #fff;
  644.             border: 1px solid #000;
  645.             border-radius: 10px;
  646.         }
  647.         .carousel-indicators .active {
  648.             width: 12px;
  649.             height: 12px;
  650.             margin: 0;
  651.             background-color: #000;
  652.         }
  653.         .menu_left {
  654.             flex: 0 0 34%;
  655.             max-width: 34%;
  656.             position: initial;
  657.             padding-left: 0;
  658.             text-align: left;
  659.         }
  660.         .menu_right {
  661.             flex: 0 0 66%;
  662.             max-width: 66%;
  663.             padding-right: 40px !important;
  664.         }
  665.         .tooltip-inner h2 {
  666.             font-family: AktivGrotesk-Medium;
  667.             font-size: 16px;
  668.             font-weight: 400;
  669.             line-height: 18.91px;
  670.             text-align: center;
  671.             margin-top: 8px;
  672.             border-bottom: 1px solid #fff;
  673.             margin-bottom: 14px;
  674.         }
  675.         .tooltip-inner{
  676.             background-color: #5268ff!important;
  677.             color: #fff!important;
  678.             box-shadow: 4px 4px 10px 0px #00000040!important;
  679.             border-radius: 10px!important;
  680.             max-width:400px!important
  681.         }
  682.         .tooltip-inner. p{
  683.             font-family: AktivGrotesk-Light !important;
  684.             font-size: 9px !important;
  685.             font-weight: 400 !important;
  686.             line-height: 10.3px !important;
  687.             text-align: left !important;
  688.             background-repeat: no-repeat;
  689.             background-image: url(/images/Vector_icone_new_acceuil.png);
  690.             padding-left: 40px;
  691.             background-position: 10px top;
  692.             padding-right: 10px;
  693.         }
  694.     </style>
  695. {% endblock %}
  696. {% block javascripts %}
  697.     {{ parent() }}
  698.     <script src="{{ app.request.scheme ~'://' ~ app.request.httpHost}}/assets/pdf.js"></script>
  699.     <script>
  700.         // Loaded via <script> tag, create shortcut to access PDF.js exports.
  701.         var pdfjsLib = window['pdfjs-dist/build/pdf'];
  703.         // The workerSrc property shall be specified.
  704.         pdfjsLib.GlobalWorkerOptions.workerSrc = "{{ app.request.scheme ~'://' ~ app.request.httpHost}}/assets/pdf.worker.js";
  705.     </script>
  706.     <script src="https://maps.googleapis.com/maps/api/js?key={{ key_google_map }}&libraries=places"></script>
  707.     <script src="https://create.vista.com/js/frame_v2.min.js"></script>
  708.     <script src="https://app.colorlab.io/js/include.js"></script>
  709.     <script>
  710.         var productRequest = '{% if app.request.get('product') %}{{ app.request.get('product') }}{% else %}0{% endif %}';
  711.         var formatRequest = '{% if app.request.get('format') %}{{ app.request.get('format') }}{% else %}0{% endif %}';
  712.     </script>
  713.     {{ encore_entry_script_tags('page_product_option') }}
  714.     {{ encore_entry_script_tags('product_option_viewer') }}
  715.     {{ encore_entry_script_tags('color_lab_product') }}
  716.     <script src="https://code.jquery.com/jquery-3.4.1.js"  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="  crossorigin="anonymous"></script>
  717. {% endblock %}