templates/FrontBundle/Page/shop-product.html.twig line 1

Open in your IDE?
  1. {% extends 'FrontBundle/layout_shop.html.twig' %}
  3. {% block title %}{{ app_sitename }} - {{ product.nameLocale(app.request.locale) }}{% endblock %}
  4. {% block description %}{{ product.descriptionLocale(app.request.locale)|replace({'\r\n': ' '})|raw }}{% endblock %}
  5. {% block google %}
  6.     <!-- Google tag (gtag.js) -->
  7.     <script async src="https://www.googletagmanager.com/gtag/js?id=AW-11336737773">
  8.     </script>
  9.     <script>
  10.         window.dataLayer = window.dataLayer || [];
  11.         function gtag(){dataLayer.push(arguments);}
  12.         gtag('js', new Date());
  14.         gtag('config', 'AW-11336737773');
  15.     </script>
  16. {% endblock %}
  19. {% block extra_class %}stack{% endblock %}
  20. {# {% block menu_min %}200{% endblock %} #}
  21. {# {% block menu_max %}2636{% endblock %} #}
  23. {% block stylesheets %}
  24.   <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  25.   <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  26.   <link href="/front/css/nouislider.css" rel="stylesheet">
  29.     <style>
  30.         .option-content{
  31.             border-radius: 14px;
  32.             background: #931517;
  33.             display: flex;
  34.             justify-content: center;
  35.             align-items: center;
  36.             width: 119px;
  37.             height: 19px;
  38.             flex-shrink: 0;
  39.             margin: 1.5rem auto 0.5rem auto;
  40.             color: #fff;
  41.             padding: 0.5rem 1rem;
  42.             font-size: 13px;
  43.             font-weight: 600;
  44.         }
  46.         .page_boutique-produit #product .options .col-md-6  li
  47.         {
  48.             background-color: #FFFFFF;
  49.             border-radius: 15px;
  50.             padding: 5px;
  51.             margin: 12px;
  52.             width: calc(25% - -59px);
  53.             float: left;
  54.             position: relative;
  55.             height: 74px;
  56.             border: 1px solid #FFFFFF;
  57.         }
  58.         .page_boutique-produit #product .options ul{
  59.             padding: 0;
  60.         }
  62.         .page_boutique-produit #product .options .title span.sub {
  63.             width: 100%;
  64.             display: inline-block;
  65.             font-size: 11px;
  66.         }
  67.         .page_boutique-produit #product .options .price{
  68.             margin: 3px 0 0 0 ;
  69.         }
  71.         .bon-cadeau-17 .bon-cadeau-option-block1,
  72.         .bon-cadeau-18 .bon-cadeau-option-block1,
  73.         .bon-cadeau-19 .bon-cadeau-option-block1,
  74.         .bon-cadeau-20 .bon-cadeau-option-block1,
  75.         .bon-cadeau-6 .bon-cadeau-option-block1,
  76.         .bon-cadeau-7 .bon-cadeau-option-block1,
  77.         .bon-cadeau-8 .bon-cadeau-option-block1,
  78.         .bon-cadeau-9 .bon-cadeau-option-block1 {
  79.           display: none;
  80.         }
  82.         .btn-primary.active,
  83.         .btn-primary:hover {
  84.             color: #ffffff;
  85.             text-decoration: none;
  86.             border: 1px solid var(--red);
  87.             background-color: var(--red);
  88.         }
  90.     </style>
  91. {% endblock %}
  94. {% block body %}
  97.     <section id="product" class="espace-content full mb-5 pb-5" style="margin-top: 60px;" data-id="{{ product.id }}">
  98.       <div class="content pt-5 pb-5 mt-5" style="padding: 0 150px">
  99.         <div class="row">
  100.           <a href="{{ path('framework_front_shop_cat', {'category_slug': product.category.slug, 'locale': app.request.locale}) }}" class="link-back mb-4"><img src="/front/img/button-arrow-r-l.svg" alt="back" width="25px" class="me-2" />{{ 'shop_product_back'|tr(tr)|raw }} {{ product.category.nameLocale(app.request.locale)|lower }}</a>
  101.           <div class="col-md-12">
  102.                 <ul class="breadcrumb">
  103.                   <li><a href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}">{{ 'shop_title'|tr(tr)|raw }}</a></li>
  104.                   <li><a href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}/articles/{{ product.category.slug }}">{{ product.category.nameLocale(app.request.locale) }}</a></li>
  105.                   <li><span>{{ product.nameLocale(app.request.locale) }}</span></li>
  106.                 </ul>
  107.               <a href="#" class="favoris trigger-modal {{ (is_granted('IS_AUTHENTICATED_REMEMBERED')) ? 'bookmark' : 'not-logged-in' }} {{ (saved) ? 'saved' : '' }}" data-id="{{ product.id }}"><i></i></a>
  108.               </div>
  109.           <div class="col-md-5">
  111.             <div class="owl-carousel product mt-5">
  112.               {% for image in product.allImages %}
  113.               <div class="item"><img src="/uploads/products/{{product.id}}/{{image}}" alt="product" /></div>
  114.               {% endfor %}
  115.             </div>
  116.               <div class="row ">
  117.                   <div class="col-9 mx-auto">
  118.                     {% if product.published %}
  119.                       <a href="#" class="btn-sm btn-primary active add-cart mb-3" data-type="bons" data-id="{{ product.id }}"><img src="/front/img/cart.svg" alt="cart" class="me-2" /> {{ 'shop_product_cart_add'|tr(tr)|raw }}</a>
  120.                       <a href="/{{app.request.locale}}/boutique/panier" class="btn-sm btn-primary text w-100 text-center">{{ 'shop_product_cart_view'|tr(tr)|raw }}</a>
  121.                     {% else %}
  122.                       <h6 class="text-center">{{ 'shop_nostock'|tr(tr)|raw }}</h6>
  123.                     {% endif %}
  124.                   </div>
  125.               </div>
  126.           </div>
  127.           <div class="col-md-7 description mt-5 pt-0">
  128.             <div class="row">
  129.               <div class="col-12"><h1 class="title" style="letter-spacing: initial;">{{ product.nameLocale(app.request.locale) }}</h1></div>
  130.               <div class="col-12 to-cart mt-3 mb-3">
  131.                 <p class="price mt-2 me-4" data-price="{{ product.price }}"><i>{{ product.priceFr }}</i> €</p>
  132.                 <p class="qty me-4"><i class="qty-bons-before">{{ 'shop_product_for'|tr(tr)|raw }}</i><a href="#" data-action="minus">-</a><span>1</span><a href="#" data-action="plus">+</a><i class="qty-bons-after">{{ 'shop_product_for1'|tr(tr)|raw }}</i></p>
  133.                 <p class="per-person p-0">{% if product.category.slug == 'bon-cadeau' %}<span>{{ 'shop_product_price'|tr(tr)|raw }}</span>{% endif %}</p>
  134.               </div>
  135.             </div>
  136.             <div class="row">
  137.               <div class="col-12">
  139.                 <div class="desc mb-3">
  140. {#                  <label>Description :</label> #}
  141.                   <p>{{ product.descriptionLocale(app.request.locale)|replace({'\r\n': '<br>'})|raw }}</p>
  142.                 </div>
  143.                 <div class="additional mb-3">
  144.                   {{ product.additionalLocale(app.request.locale)|raw }}
  145.                 </div>
  146.                 <div class="usecase">
  147.                   <p class="mb-2">{{ (product.slug == 'bon-cadeau-34') ? '' : 'shop_product_use'|tr(tr)|raw }} {{ product.usecaseLocale(app.request.locale) }}</p>
  148.                   <p class="mb-5 text-xs">{{ 'shop_product_use2'|tr(tr)|raw }}</p>
  149.                 </div>
  150. {#                <div class="info mt-5 mb-5">
  151.                   <label>Informations complémentaires :</label>
  152.                   <p>{{ product.additionalLocale(app.request.locale)|replace({'\r\n': '<br>'})|raw }}</p>
  153.                 </div> #}
  155.                 <div id="bloc2" class="row mb-5"></div>
  157.                 {% if product.category.slug == 'bon-cadeau' %}
  158.                 <div class="options {{ product.slug }}">
  160.                   <label>{{ 'shop_product_options_title'|tr(tr)|raw }}</label>
  161.                     <div class="row">
  162.                         <div class="col-md-6 bon-cadeau-option-block1">
  163.                               <span class="option-content">
  164.                                 Restaurant
  165.                             </span>
  166.                             <ul class="mt-3">
  167.                                 {% for option in options %}
  168.                                     {% if option.restaurant  == true %}
  169.                                         <li class="option-{{option.id}}" style="height: 85px">
  170.                                             {% if option.desc != '' %}<span class="infos" data-desc="{{ option.desc }}" title="{{ option.desc }}">i</span>{% endif %}
  171.                                             <p class="title">{{ option.name }}<br>{% if option.sub != '' %} <span class="sub">{{ option.sub }}</span> {% endif %}</p>
  172.                                             <p class="price" {% if not option.lounge and option.id < 3 %}style="margin: 5px 0 5px 0 !important;"{% endif %} {% if option.price == 64 %} style="margin: 13px 0 5px 0 !important;"{% endif %}>(+ {{ option.price }} €)</p>
  173.                                             <p class="qty" data-price="{{ option.price }}" data-id="{{ option.id }}"><a href="#" data-action="minus">-</a><span>0</span><a href="#" data-action="plus">+</a></p>
  174.                                         </li>
  175.                                     {% endif %}
  176.                                 {% endfor %}
  177.                             </ul>
  178.                         </div>
  179.                         <div class="col-md-6 bon-cadeau-option-block3">
  180.                             <span class="option-content">
  181.                               {{ 'cadeau_title'|tr(tr)|raw }}
  182.                             </span>
  183.                             <ul class="mt-3">
  184.                                 {% for option in options %}
  185.                                     {% if option.boutique  == true %}
  186.                                         <li class="option-{{option.id}}">
  187.                                             {% if option.desc != '' %}<span class="infos" data-desc="{{ option.desc }}" title="{{ option.desc }}">i</span>{% endif %}
  188.                                             <p class="title">{{ option.name }}<br>{% if option.lounge %}<span>Lounge Club</span>{% endif %}</p>
  189.                                             <p class="price" {% if not option.lounge and option.id < 3 %}style="margin-top: 10px;"{% endif %}>(+ {{ option.price }} €)</p>
  190.                                             <p class="qty" data-price="{{ option.price }}" data-id="{{ option.id }}"><a href="#" data-action="minus">-</a><span>0</span><a href="#" data-action="plus">+</a></p>
  191.                                         </li>
  192.                                     {% endif %}
  193.                                 {% endfor %}
  194.                             </ul>
  195.                         </div>
  196.                     </div>
  197.                     <div class="row">
  198.                         <div class="col-md-6 bon-cadeau-option-block2">
  199.                             <span class="option-content">
  200.                                 Lounge Club
  201.                             </span>
  202.                             <ul class="mt-3">
  203.                                 {% for option in options %}
  204.                                     {% if option.lounge  == true %}
  205.                                         <li class="option-{{option.id}}">
  206.                                             {% if option.desc != '' %}<span class="infos" data-desc="{{ option.desc }}" title="{{ option.desc }}">i</span>{% endif %}
  207.                                             <p class="title">{{ option.name }}<br>{% if option.lounge %}<span>Lounge Club</span>{% endif %}</p>
  208.                                             <p class="price" {% if not option.lounge and option.id < 3 %}style="margin-top: 10px;"{% endif %}>(+ {{ option.price }} €)</p>
  209.                                             <p class="qty" data-price="{{ option.price }}" data-id="{{ option.id }}"><a href="#" data-action="minus">-</a><span>0</span><a href="#" data-action="plus">+</a></p>
  210.                                         </li>
  211.                                     {% endif %}
  212.                                 {% endfor %}
  213.                             </ul>
  214.                         </div>
  215.                     </div>
  217.                 </div>
  218.                 {% endif %}
  221.               </div>
  222.             </div>
  223.             <div class="floating-cart"><img src="/front/img/cart.svg" alt="cart" /></div>
  224.           </div>
  225.         </div>
  226.       </div>
  227.     </section>
  229.     <section id="similar" class="espace-content full mb-5 pb-5" style="margin-top: 40px;">
  230.       <div class="content">
  231.         <h2 class="pt-5 mb-3 no-bar">{{ 'shop_product_similar_title'|tr(tr)|upper|raw }}<span class="full-bar"></span></h2>
  232.       </div>
  233.     </section>
  235.     <section class="items-slider espace-content p-0 mt-5 mb-5">
  237.         <div class="content pt-5 pb-5 mt-5">
  238.           <div class="owl-carousel related p-0">
  241.             {% for item in similar %}
  242.                 {% if item.id > 31 and item.published %}
  243.               <div class="item row">
  244.                 <div class="col-12 ">
  245.                   <a href="/{{app.request.locale}}/{{ 'boutique'|getUrl(app.request.locale) }}/produit/{{ item.slug }}">
  246.                     <img alt="slug" class="cover" src="/uploads/products/{{item.id}}/{{ item.mainImage }}" />
  247.                   </a>
  248.                   <a href="/{{app.request.locale}}/{{ 'boutique'|getUrl(app.request.locale) }}/produit/{{ item.slug }}">
  249.                     <span class="name">{{ item.nameLocale(app.request.locale) }}</span>
  250.                     <span class="price">{{ item.priceFr }} €</span>
  251.                   </a>
  252.                   <a href="/{{app.request.locale}}/{{ 'boutique'|getUrl(app.request.locale) }}/produit/{{ item.slug }}">
  253.                     <span class="category">{{ item.category.nameLocale(app.request.locale) }}</span>
  254.                   </a>
  255.                 </div>
  256.               </div>
  257.             {% endif %}
  258.             {% endfor %}
  261.           </div>
  264.           <div class="horizontal-bar-container">
  265.             <div class="horizontal-bar"></div>
  266.             <div class="horizontal-bar-ctrl"></div>
  267.           </div>
  270.         </div>
  272.     </section>
  275.     <section class="actu-content newsletter" style="margin-bottom: 180px;">
  276.       <div class="content mt-5 pt-5">
  277.         <h2 class="mb-5 no-bar">{{ 'newsletter_title'|tr(tr)|upper|raw }}<span class="full-bar"></span></h2>
  278.         <div class="pt-5">
  279.           <form>
  280.             <p class="title">{{ 'newsletter_subtitle'|tr(tr)|raw }}</p>
  281.             <p class="desc">{{ 'newsletter_desc'|tr(tr)|raw }}</p>
  282.             <div class="email-input">
  283.               <input type="text" value="" placeholder="{{ 'newsletter_email'|tr(tr)|raw }}" class="email mt-3" />
  284.               <a href="#" class="register">&nbsp;</a>
  285.             </div>
  286.             <div class="row">
  287.               <div class="col-12 mt-4">
  288.                 <input type="checkbox" id="confirm" class="apple-switch" checked="checked" />
  289.                 <label for="confirm">{{ 'newsletter_agree'|tr(tr)|raw }}</label>
  290.                 <p class="text-center mt-4" id="message_newsletter"></p>
  291.               </div>
  292.             </div>
  293.           </form>
  294.         </div>
  296.       </div>
  297.     </section>
  300.     {% include ('FrontBundle/Partial/modal.html.twig') %}
  301.     {% include 'FrontBundle/Partial/footer.html.twig' %}
  303. {% endblock %}
  305. {% block javascripts %}
  307.   <script src="/front/js/owl.carousel.min.js"></script>
  310.   <script type="text/javascript">
  312.     function updatePrice(){
  313.       console.log('updateprice')
  314.       var product_price = parseFloat($('#product .price').data('price'));
  315.       var qty = parseInt($('.to-cart span').text());
  316.       var options_prices = 0;
  317.       var option_qty_save = 0;
  319.       var price = 0;
  321.       $('#product .options li .qty').each(function(index, value) {
  322.         var option_price = parseFloat($(this).data('price'));
  323.         var option_qty = parseInt($(this).find('span').text());
  325.         if(option_qty > 0){
  326.           options_prices = options_prices + (option_price * option_qty);
  327.           option_qty_save = option_qty
  328.         }
  329.       }).promise().done( function(){ 
  330.         // price = (product_price + options_prices) * qty;
  331.         price = (product_price * qty) + options_prices; //NOUVEAU CALCUL
  332.         $('#product .price i').text(price.toFixed(2).replace( '.', ',' ));
  334.         if(option_qty_save == 0 && qty == 1){
  335.           $('.per-person').fadeIn();
  336.         } else {
  337.           $('.per-person').fadeOut();
  338.         }
  339.       });
  340.     }
  342.     $( document ).ready(function() {
  346.       if( window.innerWidth <= 1024 ){
  347.         $('#product .col-md-5').addClass('col-md-4');
  348.         $('#product .col-md-5').removeClass('col-md-5');
  349.         $('#product .col-md-7').addClass('col-md-8');
  350.         $('#product .col-md-7').removeClass('col-md-7');
  352.         $('#bloc2').append($('.to-cart'));
  353.       }
  355.       // HIDE FORFAITS DUO
  356.       var product_slug = '{{product.slug}}';
  357.       var slugs = ['bon-cadeau-6', 'bon-cadeau-7', 'bon-cadeau-8', 'bon-cadeau-9'];
  358.       if(jQuery.inArray(product_slug, slugs) != -1) {
  359.         $('.options .option-1').hide();
  360.         $('.options .option-2').hide();
  361.       } 
  362.       // END HIDE FORFAITS DUO
  366.       $('.additional li').each(function(index, value) {
  367.         if($(this).data('info')){
  369.           var add_desc = '';
  371.           if( $(this).data('info') == 'sp-ga' ){
  372.             /*add_desc = "{{ 'shop_bons_desc1'|tr(tr)|raw }}".replace(/'/g, "\\'");*/
  373.             add_desc = "{{ 'shop_bons_desc1'|tr(tr)|raw }}";
  374.           } else if( $(this).data('info') == 'mj-m1' ){
  375.             /*add_desc = "{{ 'shop_bons_desc2'|tr(tr)|raw }}".replace(/'/g, "\\'");*/
  376.             add_desc = "{{ 'shop_bons_desc2'|tr(tr)|raw }}";
  377.           } else if( $(this).data('info') == 'mj-m2' ){
  378.             /*add_desc = "{{ 'shop_bons_desc3'|tr(tr)|raw }}".replace(/'/g, "\\'");*/
  379.             add_desc = "{{ 'shop_bons_desc3'|tr(tr)|raw }}";
  380.           } else if( $(this).data('info') == 've-m1' ){
  381.             /*add_desc = "{{ 'shop_bons_desc4'|tr(tr)|raw }}".replace(/'/g, "\\'");*/
  382.             add_desc = "{{ 'shop_bons_desc4'|tr(tr)|raw }}";
  383.           } else if( $(this).data('info') == 've-m2' ){
  384.             /*add_desc = "{{ 'shop_bons_desc5'|tr(tr)|raw }}".replace(/'/g, "\\'");*/
  385.             add_desc = "{{ 'shop_bons_desc5'|tr(tr)|raw }}";
  386.           }
  388.           $(this).append('<span class="infos" data-desc="'+add_desc+'">i</span>')
  389.         }
  390.       });
  394.       $('.infos').each(function(index, value) {
  395.         $(this).tooltipster({
  396.             content: $(this).data('desc'),
  397.             delay: 200,
  398.             contentAsHTML: true,
  399.             trigger: 'click'
  400.         });
  401.       });
  404.       $('#product .bookmark').click(function(e){
  405.         e.preventDefault();
  407.         if( $(this).hasClass('saved') ){
  408.           var action = 'unsave';
  409.         } else {
  410.           var action = 'save';
  411.         }
  412.         
  414.         $.ajax({
  415.           type: "POST",
  416.           url: "/shop/product/"+action+"/{{ product.id }}",
  417.           data: null,
  418.           dataType: "json",
  419.           success: function(response) {
  421.             if( action == 'save' ){
  422.               $('#product .bookmark').addClass('saved');
  423.               $('#product .bookmark span').text('Produit sauvegardé');
  424.             } else {
  425.               $('#product .bookmark').removeClass('saved');
  426.               $('#product .bookmark span').text('Ajouter aux favoris');
  427.             }
  430.           }
  431.         });
  433.       });
  436.     
  438.       $('.options .qty a').click(function(e){
  439.         e.preventDefault();
  441.         var element = $(this).parents('.qty');
  443.         var count = parseInt(element.find('span').text());
  445.         if( $(this).data('action') == 'plus' ){
  448. // BLOCK FORFAITS DUO EN FONCTION DU NOMBRE DE PARTICIPANTS
  449. console.log('check forfait duo');
  450. var qtyPres = parseInt($('.to-cart span').text());
  451. var maxDuo = parseInt((qtyPres / 2)+(qtyPres % 2));
  452. var currentDuo = parseInt($('.qty[data-id="1"] span').text()) + parseInt($('.qty[data-id="2"] span').text()) + 1;
  453. var refFix = parseInt(element.data('id'));
  454. // console.log('max forfait duo : '+maxDuo);
  455. // console.log('currentDuo : '+currentDuo);
  456. // console.log('ref : '+refFix);
  458. if(refFix == 1 || refFix == 2){
  459.   if(currentDuo > maxDuo){
  460.     // console.log('ok block');
  461.     return 0;
  462.   }
  463. }
  464. // FIN BLOCK FORFAITS DUO EN FONCTION DU NOMBRE DE PARTICIPANTS
  466.           count++;
  467.         } else {
  468.           count--;
  469.           if(count < 0){
  470.             count = 0;
  471.           }
  472.         }
  474.         if(count > 0){
  475.           $(this).parents('li').addClass('active');
  476.         } else {
  477.           $(this).parents('li').removeClass('active');
  478.         }
  480.         element.find('span').text(count);
  482.         updatePrice();      
  484.       });
  485.       
  488.       $('.to-cart .qty a').click(function(e){
  489.         e.preventDefault();
  491.         var element = $(this).parents('.qty');
  493.         var count = parseInt(element.find('span').text());
  495.         if( $(this).data('action') == 'plus' ){
  496.           count++;
  497.         } else {
  498.           count--;
  499.           if(count < 1){
  500.             count = 1;
  501.           }
  502.         }
  504.         element.find('span').text(count);
  506.         updatePrice();
  507.         
  508.       });
  512.     $('.owl-carousel.product').owlCarousel({
  513.       loop:false,
  514.       margin:34,
  515.       nav:false,
  516.       dots:false,
  517.       responsive:{
  518.           0:{
  519.               items:1
  520.           },
  521.           600:{
  522.               items:1
  523.           },
  524.           1920:{
  525.               items:1
  526.           }
  527.       }
  528.     });
  531.     var owl = $('.owl-carousel.related');
  532.     owl.owlCarousel({
  533.       loop:false,
  534.       margin:110,
  535.       nav:true,
  536.       responsive:{
  537.           0:{
  538.               items:1
  539.           },
  540.           768:{
  541.               items:2
  542.           },
  543.           1024:{
  544.               items:3
  545.           },
  546.           1920:{
  547.               items:4
  548.           }
  549.       }
  550.     });
  552.     owl.on('changed.owl.carousel', function(event) {
  554.       var itemsNbr = owl.data()['owl.carousel'].settings.items;
  555.       var itemsTotal = event.item.count;
  557.       var itemsIndex = event.item.index;
  559.       var pagesNbr = itemsTotal - itemsNbr;
  561.       var horizontalBar = $('.horizontal-bar').outerWidth();
  562.       var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
  564.       var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
  566.       var left = itemsIndex * 100 / pagesNbr; // percent
  568.       left = left * courseLength / 100;
  570.       $('.horizontal-bar-ctrl').css('left', left+'px');
  571.       
  572.     });
  574.   });
  577.   </script>
  578.     <!-- script pour gérer la connexion lors de la demande d'ajout de favoris --->
  579.     <script>
  580.         $(document).ready(function() {
  581.             $('.trigger-modal').on('click', function(e) {
  582.                 e.preventDefault(); // Empêche le comportement par défaut du lien
  583.                 const url = "/" + $("html").attr("lang") + "/user/connected";
  584.                 $.ajax({
  585.                     url: url,
  586.                     success: function(data) {
  587.                         if (!data.isLoggedIn) {
  588.                             const locale = data.locale;
  589.                             let modalTitle, modalContent, modalButtonText;
  591.                             if(locale === "fr") {
  592.                                 modalTitle = "Connexion nécessaire";
  593.                                 modalContent = "Pour réaliser cette action vous devez être connecté. Si vous n'avez pas encore de compte, vous pouvez en créer un.";
  594.                                 modalButtonText = "Se connecter";
  595.                             } else if(locale === "en") {
  596.                                 modalTitle = "Connection required";
  597.                                 modalContent = "You must be logged in to perform this action. If you don't have an account yet, you can create one.";
  598.                                 modalButtonText = "Sign in";
  599.                             } else if (locale === "de") {
  600.                                 modalTitle = "Verbindung erforderlich";
  601.                                 modalContent = "Um diese Aktion durchzuführen, müssen Sie angemeldet sein. Wenn Sie noch kein Konto haben, können Sie eines erstellen.";
  602.                                 modalButtonText = "Sich anmelden";
  603.                             }
  605.                             // Mise à jour du texte du bouton
  606.                             $(".modalbutton").text(modalButtonText);
  608.                             // Mise à jour du titre et du contenu de la modale
  609.                             $("#modalLoginReminderLabel").text(modalTitle);
  610.                             $("#modalLoginReminder .modal-body").text(modalContent);
  612.                             // Affichage de la modale
  613.                             $("#modalLoginReminder").modal('show');
  614.                         }
  615.                     }
  616.                 });
  617.             });
  618.         });
  622.     </script>
  623. {% endblock %}