templates/_partials/_script.html.twig line 1

Open in your IDE?
  1. <script src="{{ asset("/slick/jquery-3.6.0.min.js") }}" type="text/javascript"></script>
  2. <script src="{{ asset("/slick/jquery-migrate-3.4.0.min.js") }}"></script>
  3. <script src="{{ asset("/slick/slick.js?v2022") }}" type="text/javascript" charset="utf-8"></script>
  5. {#<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>#}
  6. {#<script src="{{ asset("/bootstrap.bundle.min.js") }}"></script>#}
  9. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  11. <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
  12. <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/i18n/defaults-*.min.js"></script>
  15. <script src="{{ asset("/zoom/jquery.elevateZoom-3.0.8.min.js") }}"></script>
  16. <script src="{{ asset("/zoom/lightbox.min.js") }}"></script>
  17. <script src="{{ asset("/rSlider.min.js") }}"></script>
  20. <script>
  21.     function zoom(element) {
  22.         let elemt = $("#"+element);
  23.         elemt.elevateZoom({
  24.             scrollZoom: true,
  25.             zoomWindowFadeIn: 300,
  26.             zoomWindowFadeOut: 300,
  27.             lensFadeIn: 300,
  28.             lensFadeOut: 300,
  29.             zoomWindowHeight:250,
  30.             zoomWindowWidth:250,
  31.             easing : true,
  32.             borderSize: 1,
  33.             borderColour: '#048b9a',
  34.             responsive: true,
  35.             cursor: 'pointer',
  36.         });
  37.     }
  38.     // zoom("z-image-1")
  40.     $(".navbar-toggler").click(function (e) {
  41.         let cible = $('.navbar-collapse');
  42.         if (cible.hasClass("show")){
  43.             $(this).attr("data-bs-target","navbarText_no")
  44.             cible.removeClass('show');
  45.             cible.addClass('hide');
  46.         }else{
  47.             $(this).attr("data-bs-target","navbarText")
  48.             cible.addClass('show');
  49.             cible.removeClass('hide');
  50.         }
  51.     })
  53.     $(".product_one_block_link").click(function () {
  54.         window.location.href = $(this).attr("data-link");
  55.     })
  57.     function linkClick(linkData) {
  58.         window.location.href = linkData;
  59.     }
  61.     $(".show_image_with_color").click(function () {
  62.         let id = $(this).attr("id");
  63.         let idProduit = $(this).attr("data-id-produit")
  64.         let idColor = $(this).attr("data-id-color")
  65.         let typeColor = $(this).attr("data-type-color")
  66.         let urlImages = $(this).attr("data-url")
  67.         let cible = $(".show-img-selected-color-in-product");
  69.         $(".img_with_color").addClass("d-none");
  70.         $(".show_image_with_color_"+id).removeClass("d-none");
  71.         cible.html("<p class='text-center'>Chargement...</p>");
  73.         $.ajax({
  74.             method: "POST",
  75.             url: urlImages,
  76.             data: {"idProduit":idProduit,"idColor":idColor,"typeColor":typeColor,"isMobil":2},
  77.             // dataType: 'json'
  78.         }).done(function( images ) {
  79.             cible.html(images);
  80.             // $(".price-products-fiche").text($(".price_loaded").text());
  82.         });
  83.     })
  85.     $('.show_image_with_color_mobil').on('change', function (e) {
  86.         var optionSelected = $("option:selected", this);
  88.         let idProduit = optionSelected.attr("data-id-produit")
  89.         let idColor = optionSelected.attr("data-id-color")
  90.         let typeColor = optionSelected.attr("data-type-color")
  91.         let urlImages = optionSelected.attr("data-url")
  92.         let cible = $(".show-img-selected-color-in-product-mobil");
  94.         $(".img_with_color").addClass("d-none");
  96.         if (idProduit){
  97.             cible.html("<p class='text-center'>Chargement...</p>");
  99.             $.ajax({
  100.                 method: "POST",
  101.                 url: urlImages,
  102.                 data: {"idProduit":idProduit,"idColor":idColor,"typeColor":typeColor,"isMobil":1},
  103.                 // dataType: 'json'
  104.             }).done(function( images ) {
  105.                 cible.html(images);
  106.                 // $(".price-products-fiche").text($(".price_loaded").text());
  107.                 $('.center-list-sm').slick({
  108.                     centerMode: false,
  109.                     // centerPadding: '60px',
  110.                     slidesToShow: 1,
  111.                     infinite: false,
  112.                     dots: true,
  113.                 });
  114.             });
  115.         }
  116.     });
  118. </script>
  120. <script type="text/javascript">
  122.     $(document).on('ready', function() {
  124.         $('.center').slick({
  125.             centerMode: false,
  126.             // centerPadding: '60px',
  127.             slidesToShow: 3,
  128.             infinite: false,
  129.             responsive: [
  130.                 {
  131.                     breakpoint: 1193,
  132.                     settings: {
  133.                         arrows: true,
  134.                         centerMode: true,
  135.                         // centerPadding: '40px',
  136.                         slidesToShow: 1
  137.                     }
  138.                 },
  139.                 {
  140.                     breakpoint: 768,
  141.                     settings: {
  142.                         arrows: true,
  143.                         centerMode: true,
  144.                         // centerPadding: '40px',
  145.                         slidesToShow: 1
  146.                     }
  147.                 },
  148.                 {
  149.                     breakpoint: 480,
  150.                     settings: {
  151.                         arrows: true,
  152.                         centerMode: true,
  153.                         // centerPadding: '40px',
  154.                         slidesToShow: 1
  155.                     }
  156.                 }
  157.             ],
  158.             dots: true,
  159.         });
  161.         $('.center-list-sm').slick({
  162.             centerMode: false,
  163.             // centerPadding: '60px',
  164.             slidesToShow: 1,
  165.             infinite: false,
  166.             dots: true,
  167.         });
  168.         $('.port_center-list').slick({
  169.             centerMode: false,
  170.             // centerPadding: '60px',
  171.             slidesToShow: 1,
  172.             infinite: false,
  173.             dots: true,
  174.         });
  176.     });
  177. </script>
  179. <script type="text/javascript">
  181.     $('.option_select').selectpicker({
  182.         placeholder: 'Option'
  183.     });
  184.     $('.garantie_select').selectpicker({
  185.         placeholder: 'Garantie',
  186.     });
  187.     $('.color_select').selectpicker({
  188.         placeholder: 'Couleurs',
  189.     });
  191.     $('.sliders_0').slick({
  192.         infinite: false,
  193.         slidesToShow: 5,
  194.         slidesToScroll: 1,
  195.         arrows: true,
  196.         // centerMode: true,
  197.         variableHeight: true,
  198.         responsive: [
  199.             {
  200.                 breakpoint: 1200,
  201.                 settings: {
  202.                     slidesToShow: 4,
  203.                 }
  204.             },
  205.             {
  206.                 breakpoint: 991,
  207.                 settings: {
  208.                     slidesToShow: 3,
  209.                 }
  210.             },
  211.             {
  212.                 breakpoint: 767,
  213.                 settings: {
  214.                     slidesToShow: 2,
  215.                 }
  216.             }
  217.         ]
  218.     });
  219.     $('.sliders_1').slick({
  220.         infinite: false,
  221.         slidesToShow: 5,
  222.         slidesToScroll: 1,
  223.         arrows: true,
  224.         // centerMode: true,
  225.         variableHeight: true,
  226.         responsive: [
  227.             {
  228.                 breakpoint: 1200,
  229.                 settings: {
  230.                     slidesToShow: 4,
  231.                 }
  232.             },
  233.             {
  234.                 breakpoint: 991,
  235.                 settings: {
  236.                     slidesToShow: 3,
  237.                 }
  238.             },
  239.             {
  240.                 breakpoint: 767,
  241.                 settings: {
  242.                     slidesToShow: 2,
  243.                 }
  244.             }
  245.         ]
  246.     });
  247.     $('.sliders_2').slick({
  248.         infinite: false,
  249.         slidesToShow: 5,
  250.         slidesToScroll: 1,
  251.         arrows: true,
  252.         // centerMode: true,
  253.         variableHeight: true,
  254.         responsive: [
  255.             {
  256.                 breakpoint: 1200,
  257.                 settings: {
  258.                     slidesToShow: 4,
  259.                 }
  260.             },
  261.             {
  262.                 breakpoint: 991,
  263.                 settings: {
  264.                     slidesToShow: 3,
  265.                 }
  266.             },
  267.             {
  268.                 breakpoint: 767,
  269.                 settings: {
  270.                     slidesToShow: 2,
  271.                 }
  272.             }
  273.         ]
  274.     });
  279.     (function () {
  280.         'use strict';
  282.         var init = function () {
  284.             var sliderInput1 = new rSlider({
  285.                 target: '#sliderInput1',
  286.                 values: ["2 à 4 plcs","5 à 6 plcs", "6 à 8 plcs", "9 plcs et +"],
  287.                 range: false,
  288.                 tooltip: true,
  289.                 scale: false,
  290.                 labels: true,
  291.                 step: 0,
  292.                 set: ["2 à 4 plcs"],
  293.                 onChange: function (vals) {
  294.                     // console.log(vals);
  295.                 }
  296.             });
  298.             var sliderInput2 = new rSlider({
  299.                 target: '#sliderInput2',
  300.                 values: [0+" €",4500+" €", 6500+" €", 8500+" €", 10000+" €", 15000+" €", 20000+" € et +"],
  301.                 range: true,
  302.                 tooltip: true,
  303.                 scale: false,
  304.                 labels: false,
  305.                 step: 0,
  306.                 set: [0+" €", 20000+" € et +"],
  307.                 onChange: function (vals) {
  308.                     // console.log(vals);
  309.                 }
  310.             });
  311.         };
  312.         window.onload = init;
  313.     })();
  316.     // $("body").click(function () {
  317.     //     console.log(mySlider.getValue());
  318.     // })
  319. </script>