app/template/default/Item/NewCartArea/script.twig line 1

Open in your IDE?
  1. <script src="/javascripts/debounce.js?20240718"></script>
  2. <script>
  3.     //
  4.     function selectColorByGclId($newCartArea, gclId) {
  5.         const $form = $newCartArea.closest('form');
  6.         const formId = $form.attr('id');
  7.         const $sizeSelector = $newCartArea.find('.size-selector')
  8.             .removeClass('active')
  9.             .filter(`[data-gcl-id="${gclId}"]`).addClass('active').find('input.kazu[name^="product_matrix"]').attr('form', formId)
  10.         ;
  11.     }
  12.     //
  13.     $(function () {
  14.         //
  15.         $('.new-cart-area').each(function (i) {
  16.             //
  17.             const $newCartArea = $(this);
  18.             const $colorSelector = $newCartArea.find('.color-selector').each(function (j) {
  19.                 //
  20.                 const $colorSelector = $(this);
  21.                 //
  22.                 $colorSelector.find('.color-tile')
  23.                     .on('click', function (e) {
  24.                         //
  25.                         const $colorTile = $(this);
  26.                         const $selectedColorImageHolder = $colorTile.find('.image-holder');
  27.                         const $selectedColorImage = $colorTile.find('img');
  28.                         const $selectedColorTitle = $selectedColorImageHolder.siblings('.tile-name');
  29.                         const $currentColorImgHolder = $newCartArea.find('.current-sku-info .current-color .image-holder');
  30.                         const $currentColorImg = $newCartArea.find('.current-sku-info .current-color .current-color-img');
  31.                         const $currentColorTitle = $currentColorImgHolder.siblings('.tile-name');
  32.                         const gclId = $colorTile.data('gclId');
  33.                         //
  34.                         selectColorByGclId($newCartArea, gclId);
  35.                         //
  36.                         $colorSelector.find('.color-tile').removeClass('active');
  37.                         $colorTile.addClass('active');
  38.                         //
  39.                         $currentColorImgHolder.removeClass('sokujitsu-hassou');
  40.                         if ($selectedColorImageHolder.is('.sokujitsu-hassou')) $currentColorImgHolder.addClass('sokujitsu-hassou');
  41.                         $currentColorImg.attr('src', $selectedColorImage.attr('src'));
  42.                         $currentColorTitle.text($selectedColorTitle.text());
  43.                     })
  44.                     .eq(0)
  45.                     .click()
  46.                 ;
  47.                 //
  48.             });
  49.         });
  50.         $('.btn_next_item').on("click", function(e) {
  51.             const $anchorWrapper = $(this).closest('.anchor-wrapper');
  52.             const $currentAnchor = $anchorWrapper.find('.anchor');
  53.             const currentIndex = $('.anchor').index($currentAnchor);
  54.             const targetIndex = currentIndex + 1;
  55.             const $targetAnchor = $('.anchor').eq(targetIndex);
  56.             $('body,html').animate({
  57.                 scrollTop: $targetAnchor.offset().top
  58.             }, 500);
  59.         });
  60.         var isProgress = false;
  61.         $(".add-to-cart").on("click", debounce(function(event){
  62.             const $button = $(this);
  63.             const $form = $button.closest('form');
  64.             let getClass = $(this).children().attr('class');
  65.             let EstimateType = "{{EstimateType()}}";
  66.             let actionUrl = '';
  67.             console.log(EstimateType);
  68.             if (isProgress){
  69.                 return;
  70.             }
  71.             isProgress  = true
  72.             if(getClass === 'muji'){
  73.                 actionUrl = "/cart/add_Normal";
  74.             }else if(getClass === 'print' || getClass === 'susoage'){
  75.                 actionUrl = "/cart/valid_estimate";
  76.             }else if(getClass === 'sample'){
  77.                 actionUrl = "/cart/add_sample";
  78.             }
  79.             $.ajax({
  80.                 type: "POST",
  81.                 url: actionUrl,
  82.                 data: $form.serialize(),
  83.                 dataTyep: 'text',
  84.                 timespan: 1000,
  85.             })
  86.                 .done(function(data, textStatus, jqXHR) {
  87.                     console.log(jqXHR.status); // 200
  88.                     console.log(textStatus); // success
  89.                     console.log(data);
  90.                     if(data.status=='OK'){
  91.                         console.log(data.data);
  92.                         if(getClass == 'print' || getClass == 'susoage'){
  93.                             $form.attr('action','/estimate/');
  94.                             $form.submit();
  95.                         }else{
  96.                             window.location.href= '/cart';
  97.                         }
  98.                     }
  99.                     if(data.status=='Error'){
  100.                         console.log(data.Errors);
  101.                         var errorMsg="";
  102.                         $.each(data.Errors ,function(index,val){
  103.                             errorMsg += val.message+"\n";
  104.                         });
  105.                         if (data.show_error_modal) {
  106.                             showErrorModal(errorMsg)
  107.                         } else {
  108.                             alert(errorMsg);
  109.                             $form[0].reset();
  110.                         }
  111.                         $('#OlToken').val(data.OlToken);
  112.                     }
  113.                 })
  114.                 .fail(function(jqXHR, textStatus, errorThrown) {
  115.                     console.log(jqXHR.status); // 404...
  116.                     console.log(textStatus); // error
  117.                     console.log(errorThrown); // NOT FOUND
  118.                     $form[0].reset();
  119.                     alert('送信エラー:もう一度やり直してください');
  120.                     location.reload();
  121.                 })
  122.                 .always(function() {
  123.                     console.log("complete"); // complete
  124.                     var overlayEle = $('.bg-load-overlay');
  125.                     if (overlayEle.length) {
  126.                         overlayEle.fadeOut(function () {
  127.                             $(this).remove();
  128.                         });
  129.                     }
  130.                     isProgress = false;
  131.                 });
  132.         }, 500));
  133.         $('.sokujitsu-hassou-banner > dl > .overlay').on('click', function () {
  134.             $(this).hide();
  135.             $(this).parent('dl').removeClass('closed').addClass('opened');
  136.         });
  137.         $('.btn-up-down').each(function (i) {
  138.             //
  139.             const $wrapper = $(this);
  140.             const $quantity = $wrapper.siblings('input.kazu');
  141.             //
  142.             $wrapper.find('.btn-up,.btn-down').on('click', function (e) {
  143.                 //
  144.                 const $btn = $(this);
  145.                 const step = parseInt($quantity.attr('step')) || 1;
  146.                 const min = parseInt($quantity.attr('min')) || 0;
  147.                 const quantity = parseInt($quantity.val()) || 0;
  148.                 //
  149.                 if ($btn.is('.btn-up')) {
  150.                     $quantity.val(quantity + step);
  151.                 } else if ($btn.is('.btn-down')) {
  152.                     $quantity.val(Math.max(min, quantity - step));
  153.                 }
  154.             });
  155.         })
  156.     });
  157. </script>