themes/BootstrapTheme/SyliusShopBundle/views/_scripts.html.twig line 1

Open in your IDE?
  1. <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  2. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js" charset="UTF-8"></script>
  3. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" charset="UTF-8"></script>
  4. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/dimmer.min.js" charset="UTF-8"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" integrity="sha512-Eak/29OTpb36LLo2r47IpVzPBLXnAMPAVypbSZiZ4Qkf8p/7S/XRG5xp7OKWPPYfJT6metI+IORkR5G8F900+g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js" integrity="sha512-Yk47FuYNtuINE1w+t/KT4BQ7JaycTCcrvlSvdK/jry6Kcxqg5vN7/svVWCxZykVzzJHaxXk5T9jnFemZHSYgnw==" crossorigin="anonymous"></script>
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" integrity="sha512-6qkvBbDyl5TDJtNJiC8foyEVuB6gxMBkrKy67XpqnIDxyvLLPJzmTjAj1dRJfNdmXWqD10VbJoeN4pOQqDwvRA==" crossorigin="anonymous" />
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-expander/1.7.0/jquery.expander.min.js" integrity="sha512-owmUWt/accgjJVsM8cWGa/n2qT77yC2+dJ8BDmGOQSKQ42DApWgpjINbUhWQ9CTTpdlTJa6OJEycyuaSzBN6lw==" crossorigin="anonymous"></script>
  10. <link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet">
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js" integrity="sha512-m5kAjE5cCBN5pwlVFi4ABsZgnLuKPEx0fOnzaH5v64Zi3wKnhesNUYq4yKmHQyTa3gmkR6YeSKW1S+siMvgWtQ==" crossorigin="anonymous"></script>
  12. <script src="https://cdn.jsdelivr.net/npm/jquery-multifile@2.2.2/jquery.MultiFile.min.js" type="text/javascript" language="javascript"></script>
  13. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  15. <script>
  16.     $(document).on('click', '[data-toggle="lightbox"]', function(event) {
  17.         event.preventDefault();
  18.         $(this).ekkoLightbox({ wrapping: false });
  19.     });
  20.     $('.scrollPerso').mCustomScrollbar({
  21.         theme:"dark"
  22.     })
  23.     $('.expand-me').expander({
  24.         slicePoint: 150,
  25.         expandEffect: 'slideDown',
  26.         expandText: '<a href="#" class="text-underline color-bleu" title=""> + {{"app.taxon.lire_lasuite" |trans}}</a>',
  27.         userCollapseText: '<a href="#" class="text-underline color-bleu" title=""> - {{"app.taxon.reduire" |trans}}</a>'
  28.     });
  29.     function initZoomable(selector) {
  30.         if (selector) {
  31.             var $elt = $(selector), option = {url: $elt.attr('href')};
  32.             $(selector).on('click', function (e) {
  33.                 e.preventDefault();
  34.             }).trigger('zoom.destroy').zoom(option);
  35.         }
  36.     }
  38.     function changeImg(srcImg,srcImg2){
  39.         document.getElementById('big').src = srcImg ;
  40.         document.getElementById('bigLink').href = srcImg2;
  41.         document.getElementsByClassName('zoomImg')[0].href=srcImg2;
  42.         initZoomable('.zoomable');
  43.     }
  44.     $("#bigLink").on('click', function (e) {
  45.         e.preventDefault();
  46.     });
  48.     $('#bigLink').zoom();
  51. </script>
  53. {# gestion de la partie configurateur #}
  54. <script>
  55.     //import SyliusVariantImages from '/../../assets/js/sylius-variant-images';
  56.     $( document ).ready(function() {
  57.         var checkboxOptionPerforatedBottom =  $('#add_specific_product_to_cart_perforated_bottom_option');
  58.         var optionPerforatedBottom =  $('#option_perforated_bottom');
  59.         var howManyPerforatedBottom =  $('#add_specific_product_to_cart_how_many_perforated_bottom');
  60.         var priceTotal = 0;
  61.         var priceTotalWithoutPromo = 0;
  62.         var productConfigurable = 0;
  63.         var typeCategories = ['depart', 'suivant'];
  65.         $('.pb-2').find('.app_product_vaiant').each(function() {
  66.             let price = $(this)
  67.                 .find("#price")
  68.                 .attr("data-price");
  70.             let priceWithoutPromo = $(this)
  71.                 .find("#price")
  72.                 .attr("data-original-value");
  74.             let quantity = $(this.parentNode)
  75.                 .find("input[type=number]")
  76.                 .val();
  78.             if (quantity != null && price != null) {
  79.                 priceTotal = priceTotal + (parseInt(quantity) * parseInt(price));
  80.                 if(priceWithoutPromo !== ""){
  81.                     priceTotalWithoutPromo = priceTotalWithoutPromo + (parseInt(quantity) * parseInt(priceWithoutPromo));
  82.                 }else{
  83.                     priceTotalWithoutPromo = priceTotalWithoutPromo + (parseInt(quantity) * parseInt(price));
  84.                 }
  85.             }
  86.             productConfigurable = 1
  87.         });
  89.         if(productConfigurable === 1){
  90.           $('.btn-add-panier').attr("disabled", "disabled");
  91.             let priceEuros = ((priceTotal/100));
  92.             let priceEurosWithoutPromo = ((priceTotalWithoutPromo/100));
  93.             let displayPrice = new Intl.NumberFormat('fr-FR', {
  94.                 style: 'currency',
  95.                 currency: 'EUR'
  96.             });
  97.             $("#product-price").text(displayPrice.format(priceEuros));
  98.             $("#product-price-without-promo").text(displayPrice.format(priceEurosWithoutPromo));
  99.             buildImageVariant();
  100.         }
  104.         // $('input[type=number]:not(.free-option)').change(function(){
  105.         //     let cart = document.querySelector('.prix-art-panier');
  106.         //     var priceTotal = 0;
  107.         //     var priceTotalWithoutPromo = 0;
  108.         //     let hasQuantity = 0;
  109.         //     $('.pb-2.tr-visible').find('.app_product_vaiant').each(function() {
  110.         //         let price = $(this)
  111.         //             .find("#price")
  112.         //             .attr("data-price");
  113.         //
  114.         //         let priceWithoutPromo = $(this)
  115.         //             .find("#price")
  116.         //             .attr("data-original-value");
  117.         //
  118.         //         let quantity = $(this.parentNode)
  119.         //             .find("input[type=number]:not(.free-option)")
  120.         //             .val();
  121.         //         hasQuantity+=parseInt(quantity);
  122.         //         if (quantity != null && price != null) {
  123.         //             priceTotal = priceTotal + (parseInt(quantity) * parseInt(price));
  124.         //             if(priceWithoutPromo !== ""){
  125.         //                 priceTotalWithoutPromo = priceTotalWithoutPromo + (parseInt(quantity) * parseInt(priceWithoutPromo));
  126.         //             }else{
  127.         //                 priceTotalWithoutPromo = priceTotalWithoutPromo + (parseInt(quantity) * parseInt(price));
  128.         //             }
  129.         //         }
  130.         //
  131.         //     });
  132.         //     if(hasQuantity === 0){
  133.         //         $('.btn-add-panier').attr("disabled", "disabled");
  134.         //     }else{
  135.         //         $('.btn-add-panier').removeAttr("disabled");
  136.         //     }
  137.         //     let priceEuros = ((priceTotal/100));
  138.         //     let priceEurosWithoutPromo = ((priceTotalWithoutPromo/100));
  139.         //     let displayPrice = new Intl.NumberFormat('fr-FR', {
  140.         //         style: 'currency',
  141.         //         currency: 'EUR'
  142.         //     });
  143.         //     $("#product-price").text(displayPrice.format(priceEuros));
  144.         //     $("#product-price-without-promo").text(displayPrice.format(priceEurosWithoutPromo));
  145.         // });
  146.         var $selects = $('.filtreOptions');
  147.         typeCategories.forEach(function(category, index){
  148.             let filterableRows = $('.sylius-product-variants').find('tr.' + category);
  149.            filterableRows.parent().parent().parent().hide().filter(function() {
  150.                 return $(this).find('td').not('.quantity').not("#price").not(".stock").filter(function() {
  151.                     let tdText = $(this).attr('data-value-code');
  152.                     let selectValue = $('#filtreOptions_' + $(this).data('input')+'_'+category).val();
  153.                     return tdText === selectValue;
  154.                 }).length === $(this).find('td').not('.quantity').not("#price").not(".stock").length;
  155.             }).show().addClass("tr-visible");
  156.         });
  158.         $selects.on('change', function() {
  159.             $('input[type=number]:not(.free-option)').each(function() {
  160.                     $(this).val("0");
  161.                     $(this).trigger("change");
  162.                 }
  163.             );
  164.             typeCategories.forEach(function(category, index) {
  165.                 let filterableRows = $('.sylius-product-variants').find('tr.' + category);
  166.                 filterableRows.parent().parent().parent().hide().removeClass("tr-visible").filter(function () {
  167.                         return $(this).find('td').not('.quantity').not("#price").not(".stock").filter(function () {
  168.                                 let tdText = $(this).attr('data-value-code'),
  169.                                     selectValue = $('#filtreOptions_' + $(this).data('input')+'_'+category).val();
  170.                             return tdText === selectValue;
  172.                             }).length === $(this).find('td').not('.quantity').not("#price").not(".stock").length;
  173.                     }).show().addClass("tr-visible");
  174.             });
  175.             buildImageVariant();
  176.         });
  178.         if(!checkboxOptionPerforatedBottom.checked){
  179.             optionPerforatedBottom.hide();
  180.             howManyPerforatedBottom.val(0);
  181.         }else{
  182.             optionPerforatedBottom.show();
  183.         }
  184.         checkboxOptionPerforatedBottom.change(function(){
  185.             if(this.checked){
  186.                 optionPerforatedBottom.show();
  187.             } else {
  188.                 optionPerforatedBottom.hide();
  189.                 howManyPerforatedBottom.val(0);
  190.             }
  191.         });
  193.         //new SyliusVariantImagesTest();
  195.         buildImageVariant();
  197.         function buildImageVariant(){
  200.             let mainImageLink = document.querySelector('[data-product-image]');
  201.             let variantPath ="";
  202.             let triggers;
  205.             if(productConfigurable === 1){
  206.                 triggers = document.querySelectorAll('.trigger-variant-image.depart');
  207.             }else{
  208.                 triggers = document.querySelectorAll('.table-devis .form-control');
  209.             }
  211.             //let variantsDiv = document.querySelectorAll('.sylius-image-variants');
  213.             let triggersArray = Array.prototype.slice.call(triggers, 0);
  215.             for (var i = 0; i < triggersArray.length; i++) {
  216.                 var element = triggersArray[i];
  217.                 //let elementWithoutSpace = element.value.replace(/\s/g, "");
  218.                 variantPath+=element.value;
  219.             }
  221.             //var imageObjects = document.querySelectorAll('.img-bit-article a img');
  222.             //var imageVariants = document.querySelectorAll('.sylius-image-variants');
  225.             var imageVariants = $('.sylius-image-variants').find('div[data-variant-options = "'+ variantPath +'"]');
  226.             //var imageVariantsToNotDisplay = $('div[data-variant-options]').not('div[data-variant-options="' + variantPath + '"]');
  228.             imageVariants.each(function(index, element){
  229.                 let imagePath = $(element).attr("data-variant-image-path");
  230.                 mainImageLink.setAttribute('src',imagePath);
  231.                 mainImageLink.setAttribute('data-product-image',imagePath);
  232.                 mainImageLink.setAttribute('data-product-link',imagePath);
  233.                 $(mainImageLink).find('a').each(function(index, element){
  234.                     $(element).css('display', 'block');
  235.                     $(element).attr("href", imagePath);
  236.                     $(element).find('img').each(function(index, img){
  237.                         $(img).attr('src', imagePath);
  238.                     })
  239.                 });
  240.             });
  241.             let swipper_images = $('.supp-img').find('.sylius-image-variants');
  242.             swipper_images.each(function (index, element){
  243.                 let data_variants = $(element).find('div[data-variant-image-path]');
  244.                 // if(data_variants.length === 0){
  245.                 //     $(element.parentNode).css('display', 'none');    // POUR CACHER LES IMAGES QUI N ONT PAS DE VARIANTS
  246.                 // }
  247.                 data_variants.each(function(indexVariant, imageVariant){
  248.                     let imagePath = $(imageVariant).attr("data-variant-image-path");
  249.                     if(imagePath !== mainImageLink.getAttribute('src') ){
  250.                         // $(element.parentNode).css('display', 'none');
  251.                         // $(element.parentNode).css('background-color', 'red');
  252.                     }else{
  253.                         $(element.parentNode).css('display', 'block');
  254.                     }
  255.                 })
  256.             });
  257.         }
  259.     });
  261. </script>
  263. {{ encore_entry_script_tags('app', null, 'bootstrapTheme') }}