https://www.astro-p.co.jp/html/template/astroproducts/assets/js/function.js

1/*
2 * This file is part of EC-CUBE
3 *
4 * Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
5 *
6 * http://www.ec-cube.co.jp/
7 *
8 * For the full copyright and license information, please view the LICENSE
9 * file that was distributed with this source code.
10*/
11
12$(function() {
13
14    $('.pagetop').hide();
15
16    $(window).on('scroll', function() {
17        // ページトップフェードイン
18        if ($(this).scrollTop() > 300) {
19            $('.pagetop').fadeIn();
20        } else {
21            $('.pagetop').fadeOut();
22        }
23
24        // header
25        if (window.innerWidth < 960) {
26            if($(window).scrollTop() > 30) {
27                $('body').addClass('is-headerChange');
28                $('.ec-layoutRole__header').addClass('on-scroll');
29            } else {
30                $('body').removeClass('is-headerChange');
31                $('.ec-layoutRole__header').removeClass('on-scroll');
32            }
33        }
34
35        // PC表示の時のみに適用
36        if (window.innerWidth > 767) {
37
38            if ($('.ec-orderRole').length) {
39
40                var side = $(".ec-orderRole__summary"),
41                    wrap = $(".ec-orderRole").first(),
42                    headerHeight = $('.ec-layoutRole__header').height(),
43                    min_move = wrap.offset().top + headerHeight,
44                    max_move = wrap.height() - headerHeight * 3,
45                    margin_bottom = max_move - min_move;
46
47                var scrollTop = $(window).scrollTop();
48                if (scrollTop > min_move && scrollTop < max_move) {
49                    var margin_top = scrollTop - min_move + headerHeight + headerHeight;
50                    side.css({"margin-top": margin_top});
51                } else if (scrollTop < min_move) {
52                    side.css({"margin-top": 0});
53                } else if (scrollTop > max_move) {
54                    var margin_bottom = margin_bottom + headerHeight + headerHeight;
55                    side.css({"margin-top": margin_bottom});
56                }
57
58            }
59        }
60        return false;
61    });
62
63    // commonAcd
64    $('.js-commonAcd-trigger').on('click', function(){
65        $(this).toggleClass('is-active');
66        $(this).next('.js-commonAcd-target').toggleClass('is-open');
67    });
68
69    // commonAcd02
70    $('.js-commonAcd02-trigger').on('click', function(){
71        $(this).toggleClass('is-active');
72        $(this).closest('.js-commonAcd02-wrap').children('.js-commonAcd02-target').toggleClass('is-open');
73    });
74
75
76    $('.ec-headerNavSP').on('click', function() {
77        $('.ec-layoutRole').toggleClass('is_active');
78        $('.ec-drawerRole').toggleClass('is_active');
79        $('.ec-drawerRoleClose').toggleClass('is_active');
80        $('body').toggleClass('have_curtain');
81    });
82
83    $('.ec-overlayRole').on('click', function() {
84        $('body').removeClass('have_curtain');
85        $('.ec-layoutRole').removeClass('is_active');
86        $('.ec-drawerRole').removeClass('is_active');
87        $('.ec-drawerRoleClose').removeClass('is_active');
88    });
89
90    $('.ec-drawerRoleClose').on('click', function() {
91        $('body').removeClass('have_curtain');
92        $('.ec-layoutRole').removeClass('is_active');
93        $('.ec-drawerRole').removeClass('is_active');
94        $('.ec-drawerRoleClose').removeClass('is_active');
95    });
96
97    // TODO: カート展開時のアイコン変更処理
98    $('.ec-headerRole__cart').on('click', '.ec-cartNavi', function() {
99        // $('.ec-cartNavi').toggleClass('is-active');
100        $('.ec-cartNaviIsset').toggleClass('is-active');
101        $('.ec-cartNaviNull').toggleClass('is-active')
102    });
103
104    $('.ec-headerRole__cart').on('click', '.ec-cartNavi--cancel', function() {
105        // $('.ec-cartNavi').toggleClass('is-active');
106        $('.ec-cartNaviIsset').toggleClass('is-active');
107        $('.ec-cartNaviNull').toggleClass('is-active')
108    });
109
110    $('.ec-orderMail__link').on('click', function() {
111        $(this).siblings('.ec-orderMail__body').slideToggle();
112    });
113
114    $('.ec-orderMail__close').on('click', function() {
115        $(this).parent().slideToggle();
116    });
117
118    $('.is_inDrawer').each(function() {
119        var html = $(this).html();
120        $(html).appendTo('.ec-drawerRole');
121    });
122
123    $('.ec-blockTopBtn').on('click', function() {
124        $('html,body').animate({'scrollTop': 0}, 500);
125    });
126
127    // スマホのドロワーメニュー内の下層カテゴリ表示
128    // TODO FIXME スマホのカテゴリ表示方法
129    $('.ec-itemNav ul a').click(function() {
130        var child = $(this).siblings();
131        if (child.length > 0) {
132            if (child.is(':visible')) {
133                return true;
134            } else {
135                child.slideToggle();
136                return false;

137            }
138        }
139    });
140
141    // イベント実行時のオーバーレイ処理
142    // classに「load-overlay」が記述されていると画面がオーバーレイされる
143    $('.load-overlay').on({
144        click: function() {
145            loadingOverlay();
146        },
147        change: function() {
148            loadingOverlay();
149        }
150    });
151
152    // submit処理についてはオーバーレイ処理を行う
153    $(document).on('click', 'input[type="submit"], button[type="submit"]', function() {
154
155        // html5 validate対応
156        var valid = true;
157        var form = getAncestorOfTagType(this, 'FORM');
158
159        if (typeof form !== 'undefined' && !form.hasAttribute('novalidate')) {
160            // form validation
161            if (typeof form.checkValidity === 'function') {
162                valid = form.checkValidity();
163            }
164        }
165
166        if (valid) {
167            loadingOverlay();
168        }
169    });
170});
171
172$(window).on('pageshow', function() {
173    loadingOverlay('hide');
174});
175
176/**
177 * オーバーレイ処理を行う関数
178 */
179function loadingOverlay(action) {
180
181    if (action == 'hide') {
182        $('.bg-load-overlay').remove();
183    } else {
184        $overlay = $('<div class="bg-load-overlay">');
185        $('body').append($overlay);
186    }
187}
188
189/**
190 *  要素FORMチェック
191 */
192function getAncestorOfTagType(elem, type) {
193
194    while (elem.parentNode && elem.tagName !== type) {
195        elem = elem.parentNode;
196    }
197
198    return (type === elem.tagName) ? elem : undefined;
199}
200
201// anchorをクリックした時にformを裏で作って指定のメソッドでリクエストを飛ばす
202// Twigには以下のように埋め込む
203// <a href="PATH" {{ csrf_token_for_anchor() }} data-method="(put/delete/postのうちいずれか)" data-confirm="xxxx" data-message="xxxx">
204//
205// オプション要素
206// data-confirm : falseを定義すると確認ダイアログを出さない。デフォルトはダイアログを出す
207// data-message : 確認ダイアログを出す際のメッセージをデフォルトから変更する
208//
209$(function() {
210    var createForm = function(action, data) {
211        var $form = $('<form action="' + action + '" method="post"></form>');
212        for (input in data) {
213            if (data.hasOwnProperty(input)) {
214                $form.append('<input name="' + input + '" value="' + data[input] + '">');
215            }
216        }
217        return $form;
218    };
219
220    $('a[token-for-anchor]').click(function(e) {
221        e.preventDefault();
222        var $this = $(this);
223        var data = $this.data();
224        if (data.confirm != false) {
225            if (!confirm(data.message ? data.message : eccube_lang['common.delete_confirm'] )) {
226                return false;
227            }
228        }
229
230        // 削除時はオーバーレイ処理を入れる
231        loadingOverlay();
232
233        var $form = createForm($this.attr('href'), {
234            _token: $this.attr('token-for-anchor'),
235            _method: data.method
236        }).hide();
237
238        $('body').append($form); // Firefox requires form to be on the page to allow submission
239        $form.submit();
240    });
241});
242
243
244// 商品一覧デザイン調整
245function changeProductListHeight(commonProductList, productCountLg = 999, productCountMd = 3, productCountSm = 2)
246{
247    var windowWidth = window.innerWidth;
248    var imageHeight = commonProductList.first().find('.commonProductList-product-imgBlock').height();
249    var tagHeight = 25;
250    var commonProductLoopCount = 0;
251    if (windowWidth >= 960) {
252        commonProductLoopCount = productCountLg;
253    } else if (windowWidth >= 580) {
254        commonProductLoopCount = productCountMd;
255    } else {
256        commonProductLoopCount = productCountSm;
257    }
258
259    let lineMaxHeights = {
260        name: 0,
261        brand: 0,
262        price: 0,
263        point: 0,
264        review: 0,
265        spec: 0
266    }
267    //min-height を リセット
268    commonProductList.each(function(pCount) {
269        $(this).find('.commonProductList-product-wrap-head').css('min-height', ''),
270        $(this).find('.commonProductList-product-name').css('min-height', ''),
271        $(this).find('.commonProductList-product-brand').css('min-height', ''),
272        $(this).find('.commonProductList-product-priceBlock').css('min-height', ''),
273        $(this).find('.commonProductList-product-point').css('min-height', ''),
274        $(this).find('.commonProductList-product-statusBlock-review').css('min-height', ''),
275        $(this).find('.commonProductList-product-spec').css('min-height', '')
276    });
277
278    let elements = [];
279    commonProductList.each(function(pCount) {
280        currentProduct = {
281            wrap: $(this).find('.commonProductList-product-wrap-head').first(),
282            name: $(this).find('.commonProductList-product-name').first(),
283            brand: $(this).find('.commonProductList-product-brand').first(),
284            price: $(this).find('.commonProductList-product-priceBlock').first(),
285            point: $(this).find('.commonProductList-product-point').first(),
286            review: $(this).find('.commonProductList-product-statusBlock-review').first(),
287            spec: $(this).find('.commonProductList-product-spec').first()
288        };
289        
290        elements.push(currentProduct);
291
292        ['name','brand','price','point','review','spec'].forEach(function(e) {
293            const h = currentProduct[e].height() !== undefined ? currentProduct[e].height() : 0;
294            lineMaxHeights[e] = lineMaxHeights[e] > h ? lineMaxHeights[e] : h;
295        });
296
297        if ((pCount % commonProductLoopCount) === (commonProductLoopCount-1) || pCount >= (commonProductList.length-1)) {

298            elements.forEach(function(element,eCount) {
299                ['name', 'brand','price','point','review','spec'].forEach(function(e) {
300                    element[e].css('min-height', lineMaxHeights[e]);
301                });
302                element['wrap'].css('min-height', tagHeight+imageHeight+lineMaxHeights['name']);
303            });
304            lineMaxHeights = {
305                name: 0,
306                brand: 0,
307                price: 0,
308                point: 0,
309                review: 0,
310                spec: 0
311            }
312            elements = [];
313        }
314    });
315}
316
317$(window).on('load resize', function() {
318    // js-commonProductSlidePC
319    $('.js-commonProductSlidePC').each(function(){
320        var $nowSlide = $(this);
321        if ($nowSlide.hasClass('slick-initialized')) {
322            $nowSlide.slick('unslick');
323        }
324
325        var windowWidth = window.innerWidth;
326        var breakPoint = 960;
327    
328        var slidesToShowPC = 4;
329        var slidesToShow = windowWidth < breakPoint ? 2 : slidesToShowPC;
330
331        if(windowWidth < breakPoint) {
332            $nowSlide.addClass('is-noSlide');
333            if ($nowSlide.hasClass('slick-initialized')) {
334                $nowSlide.slick('unslick');
335            }
336        } else {
337            $nowSlide.slick({
338                infinite: false,
339                fade: false,
340                dots: false,
341                arrows: true,
342                autoplay: false,
343                speed: 300,
344                centerMode: false,
345                centerPadding: '0',
346                slidesToShow: slidesToShow,   // 一画面に表示する関連商品の数
347                slidesToScroll: 1, // スクロール時に移動する関連商品の数
348            });
349        }
350
351    });
352    $('.commonProductList.is-commonProductSwipeSP').each(function() {
353        $(this).find('.commonProductList-list.js-commonProductSlidePC').each(function() {
354            changeProductListHeight($(this).find('.commonProductList-product'), 999, 999, 999);
355        });
356    });
357    $('.commonProductList:not(.is-commonProductSwipeSP)').each(function() {
358        $(this).find('.commonProductList-list.js-commonProductSlidePC').each(function() {
359            changeProductListHeight($(this).find('.commonProductList-product'), 999, 3, 2);
360        });
361    });
362    changeProductListHeight($('.js-commonProductList-productPage .commonProductList-product'),4,3,2);
363});
364
365
366// scroll
367function smoothScroll(targetPosition) {
368    $("html,body").animate({
369        scrollTop: targetPosition
370    }, 500);
371};
372$(function () {
373    $('a[href^="#"]').not('.notSmooth').on("click", function (event) {
374        event.preventDefault();
375        var href = $(this).attr("href");
376        var position = (href === '#') ? 0 : $(href).offset().top - $('#header').outerHeight();
377        smoothScroll(position);
378    });
379    // 別ページの場合は以下
380    var urlHash = location.hash;
381    if (urlHash) {
382        $('body,html').stop().scrollTop(0);
383        setTimeout(function(){
384            var headerHight = $('#header').outerHeight();
385            var target = $(urlHash);
386            var position = target.offset().top - headerHight;
387            $('body,html').stop().animate({scrollTop:position}, 500);
388        }, 100);
389    }
390});