https://shop.la-1.tokyo/assets/js/product/detail.js?3563250954

1// (c) 2023 W2 Co.,Ltd.
2window.addEventListener('load', function () {
3  /**
4   * detail Image Slider
5  */
6  if ($('#js-detailMainImg').length) {
7    const detailThumsImgSlider = new Swiper(
8      '#js-thumsImg',
9      {
10        slidesPerView: 6.2,
11        spaceBetween: 8,
12        freeMode: true,
13        watchSlidesVisibility: true,
14        watchSlidesProgress: true,
15        speed: 600,
16        breakpoints: {
17          768: {
18            slidesPerView: 0,
19            spaceBetween: 0,
20            touchRatio: 0,
21          }
22        }
23      });
24    const detailMainImgSlider = new Swiper(
25      '#js-detailMainImg',
26      {
27        preloadImages: false,
28        lazy: {
29          loadPrevNext: true,
30        },
31        loop: false,
32        slidesPerView: 1,
33        freeMode: false,
34        spaceBetween: 10,
35        centerInsufficientSlides: true,
36        speed: 500,
37        pagination: false,
38        centeredSlides: true,
39        watchOverflow: true,
40        navigation: {
41          nextEl: '.m-productDetailImg-slideController__next',
42          prevEl: '.m-productDetailImg-slideController__prev',
43        },
44        thumbs: {
45          swiper: detailThumsImgSlider,
46        },
47      });
48    /**
49     * detail Image Slider
50    */
51    let variationImgNum = 0;
52    $(document).on(
53      'click',
54      '.js-detailVariationImg',
55      function () {
56        variationImgNum = $(this).index('.js-detailVariationImg');
57        detailMainImgSlider.slideToLoop(variationImgNum + 1);
58      });
59  }
60  /**
61   * sp cart modal open
62  */
63  if($('#js-skuSelectMultiModal').length){
64    const spCartModalOpenClass = 'active';
65    $(document).on(
66      'click',
67      '#js-skuSelectMultiModalOpen',
68      function () {
69        if ($('#js-skuSelectMultiModal').hasClass(spCartModalOpenClass)){
70          $('#js-skuSelectMultiModal').removeClass(spCartModalOpenClass);
71          $('body').removeClass(lockedClass);
72        }else{
73          $('#js-skuSelectMultiModal').addClass(spCartModalOpenClass);
74          $('body').addClass(lockedClass);
75        }
76      });
77    $spCartModalCloseBtn.on(
78      'click',
79      '.m-modalBoxSpHeding__closeBtn, .m-modalBoxSp__bg,m-modalBox__bg, .m-modalBoxSpFooterBtn__close',
80      function() {
81        $('#js-skuSelectMultiModal').removeClass(spCartModalOpenClass);
82        $('body').removeClass(lockedClass);
83      });
84  }
85  /**
86   * p-productDetaiMain-guideTabBox
87  */
88  $(document).on(
89    'click',
90    '.p-productDetaiMain-guideTabBox-item__head',
91    function () {
92      const targetBox = $(this).closest('.p-productDetaiMain-guideTabBox-item');
93      if(!$(targetBox).hasClass('current')){
94        $(targetBox).siblings('.p-productDetaiMain-guideTabBox-item').removeClass('current');
95        $(targetBox).addClass('current');
96      }
97    });
98  /**
99  /**
100   * PJ_W2_MERCURY-347 matrixSelect Action
101  */
102  const $typeMatrixEl = $('.m-productSkuMatrix');
103  if ($typeMatrixEl.length) {
104    /* matrixTable move operationProcess */
105    const $typeMatrixTableWrap = $('.c-productMatrixTable-wrap');
106    const $typeMatrixTableEl = $('.c-productMatrixTable');
107    const $matrixTableBlockEl = $('.c-productMatrixTable__td');
108    const matrixTableControllerName = 'm-productSkuMatrixController';
109    const matrixTableControllerModifier = '--active';
110    const $matrixTableControllerEl = $('.' + matrixTableControllerName);
111    if ($typeMatrixTableWrap.length && $typeMatrixTableEl.length && $matrixTableBlockEl.length && $matrixTableControllerEl.length) {
112      const matrixTableBlockMoveNum = 2;
113      const matrixTableNext = '.js-skuMatrixTable-next';
114      const matrixTablePrev = '.js-skuMatrixTable-prev';
115      const $matrixTableNextEl = $(matrixTableNext);
116      const $matrixTablePrevEl = $(matrixTablePrev);
117      let typeMatrixElWidth = $typeMatrixEl.innerWidth();
118      let matrixTableWidth = $typeMatrixTableEl.outerWidth();
119      let matrixTableBlockWidth = $matrixTableBlockEl.outerWidth();
120      let matrixTablePosition = 0;
121
122      // Controller Activation Decision
123      if (typeMatrixElWidth < matrixTableWidth) {
124        $matrixTablePrevEl.prop('disabled', true);
125        $matrixTableControllerEl.addClass(matrixTableControllerName + matrixTableControllerModifier);
126      }
127
128      // next・prev Button Behavior
129      $(document).on('click', matrixTableNext, function () {
130        const matrixTableScrollRight = $typeMatrixTableWrap.scrollLeft() + (matrixTableBlockWidth * matrixTableBlockMoveNum);
131        $typeMatrixTableWrap.animate({ scrollLeft: matrixTableScrollRight }, 200, 'linear');
132      });
133      $(document).on('click', matrixTablePrev, function () {
134        const matrixTableScrollLeft = $typeMatrixTableWrap.scrollLeft() - (matrixTableBlockWidth * matrixTableBlockMoveNum);
135        $typeMatrixTableWrap.animate({ scrollLeft: matrixTableScrollLeft }, 200, 'linear');
136      });
137
138      // Scrolling Behavior
139      $typeMatrixTableWrap.on('scroll', function () {
140        matrixTablePosition = $(this).scrollLeft() + typeMatrixElWidth;
141        if (Math.round(matrixTablePosition) >= matrixTableWidth) {
142          $matrixTableNextEl.prop('disabled', true);
143        } else if (matrixTablePosition <= typeMatrixElWidth) {
144          $matrixTablePrevEl.prop('disabled', true);
145        } else {
146          $matrixTableNextEl.prop('disabled', false);
147          $matrixTablePrevEl.prop('disabled', false);
148        }
149      });
150
151      // 画面サイズ更新時
152      window.addEventListener("resize", function () {
153        typeMatrixElWidth = $typeMatrixEl.innerWidth();
154        matrixTableWidth = $typeMatrixTableEl.outerWidth();
155        matrixTableBlockWidth = $matrixTableBlockEl.outerWidth();
156
157        // スクロール表示判断 + スクロール位置初期化
158        if (typeMatrixElWidth < matrixTableWidth) {
159          $matrixTableControllerEl.addClass(matrixTableControllerName + matrixTableControllerModifier);
160          $typeMatrixTableWrap.animate({ scrollLeft: 0 }, 0, 'linear');
161          $matrixTablePrevEl.prop('disabled', true);
162          $matrixTableNextEl.prop('disabled', false);
163        }
164        else {
165          $matrixTableControllerEl.removeClass(matrixTableControllerName + matrixTableControllerModifier);
166        }
167      });
168    }
169  }
170});