https://www.suzette-shop.jp/common/js/suz-top.js?=2

1jQuery(function(){
2
3	//ブランドトップの判定
4    function categoryTopCheck() {
5        if(jQuery('.category-top-flag').length) {
6            jQuery('body').addClass('category-top');
7        }
8    }
9
10	//トップスライダー
11	function topSwiper() {
12		var bar = document.querySelector('.top-swiper__bar');
13		var barDuration = 5000;
14		var slideLength = jQuery('.top-swiper').find('.swiper-slide').length;
15		var currentNum = jQuery('.top-swiper__num .currentNum');
16    	var totalNum = jQuery('.top-swiper__num .totalNum');
17		var topSwiper = new Swiper (".top-swiper .swiper", {
18			// ここからオプション
19			loop: true,
20			//speed: 800,
21			centeredSlides:true,
22			slidesPerView: 1,
23			spaceBetween: 0,
24			//lazy: true,
25			pagination: {
26				el: ".swiper-pagination",
27			},
28			autoplay: {
29				delay: barDuration,
30			},
31			breakpoints: {
32				// ウィンドウサイズが767px以下
33				767: {
34					slidesPerView:2.6,
35					spaceBetween: 25,
36				},
37			},
38			on: {
39				//初期化
40				init: function () {
41					currentNum.text(this.realIndex + 1)
42					totalNum.text(slideLength);
43				},
44				//スライドしたら
45				slideChange: function(){
46					currentNum.text(this.realIndex + 1);
47				},
48				//スライド（次または前）へのアニメーションの開始後にイベント発生
49				slideChangeTransitionStart: function (result) {
50					bar.style.transitionDuration = '0s',
51					bar.style.transform = 'scaleX(0)'
52				},
53				//スライド（次または前）へのアニメーションの開始後にイベント発生
54				slideChangeTransitionEnd: function (result) {
55					bar.style.transitionDuration = barDuration + 'ms',
56					bar.style.transform = 'scaleX(1)'
57				},
58			}
59		});
60	}
61
62	//テキスト省略
63	function strSlice(srtlenght) {
64		var count = srtlenght;
65		jQuery('.re-txt').each(function() {
66			var thisText = jQuery(this).text();
67			var textLength = thisText.length;
68			if (textLength > count) {
69				var showText = thisText.substring(0, count);
70				var insertText = showText += '…';
71				jQuery(this).html(insertText);
72			};
73		});
74	}
75
76
77
78	// 幅が767px以下のビューポートをターゲットとする条件を作成
79	var _mediaQuery = window.matchMedia('(max-width: 767px)');
80	function handleTabletChange(e) {
81	// メディアクエリがtrueかどうかを確認
82		if (e.matches) {
83			strSlice(60);
84		}else{
85			strSlice(90);
86		}
87		//共通
88		categoryTopCheck();
89		topSwiper();
90	}
91	// イベントリスナーを登録
92	_mediaQuery.addListener(handleTabletChange);
93	// 初期チェック
94	handleTabletChange(_mediaQuery);
95
96});
97
98jQuery(window).on('load', function () {
99
100
101	//Ranking
102	function RankingSwiper(_target) {
103		var _elm = jQuery(_target);
104		var _elmSwiper = _elm.find('.swiper');
105		var rankingSwiper = new Swiper (_elmSwiper, {
106			// ここからオプション
107			loop:false,
108			slidesPerView: 'auto',
109			centeredSlides : false,
110			loopAdditionalSlides:6,
111			/*/*breakpoints: {
112				// ウィンドウサイズが767px以下
113				767: {
114					loop: false,
115					allowTouchMove: false,
116					slidesPerView: 3,
117					spaceBetween: 8,
118					slidesPerColumnFill: 'column',
119					slidesPerColumn: 2,
120					slidesPerGroup: 2,
121				},
122			},*/
123			on: {
124				init: function () {
125					_elmSwiper.css('opacity','1');
126				},
127			},
128		})
129	}
130	function RankingNonSwiper(_target) {
131		var _elm = jQuery(_target);
132		var _elmSwiper = _elm.find('.swiper');
133		var _elmBtnNext = _elm.find('.ranking-swiper-button-next');
134		var _elmBtnPrev = _elm.find('.ranking-swiper-button-prev');
135		var rankingSwiper = new Swiper (_elmSwiper, {
136			// ここからオプション
137			loop: false,
138			allowTouchMove: false,
139			speed: 800,
140			spaceBetween: 25,
141			slidesPerView:6,
142			navigation: {
143				nextEl: _elmBtnNext,
144				prevEl: _elmBtnPrev,
145			},
146			on: {
147				init: function () {
148					_elmSwiper.css('opacity','1');
149				},
150			},
151		})	
152	}
153	function RankingNaviBtn(){
154		jQuery('.ranking-navi-swiper__btn').on('click', function () {
155			var _num = jQuery('.ranking-navi-swiper__btn').index(jQuery(this));
156			var _target = jQuery('.ranking-wrap__tab').eq(_num);
157			jQuery('.ranking-wrap__tab.active').removeClass('active');
158			jQuery('.ranking-navi-swiper__btn.active').removeClass('active');
159			jQuery(this).addClass('active');
160			_target.addClass('active');
161		});
162	}
163	function RankingNaviSwiper() {
164		var rankingnaviSwiper = new Swiper (".ranking-navi-swiper .swiper", {
165			// ここからオプション
166			speed: 400,
167			spaceBetween: 10,
168			loop: true,
169			allowTouchMove: true,
170			slidesPerView:2,
171			slideToClickedSlide: true,
172			centeredSlides: false,
173			breakpoints: {
174				// ウィンドウサイズが767px以下
175				767: {
176					loop: false,
177					allowTouchMove: false,
178					slidesPerView: 3,
179				},
180			},
181			on: {
182				init: function () {
183					console.log('ranking navi init');
184					var _tempH = 0;
185					var _nowH = 0;
186					jQuery('.ranking-navi-swiper .swiper .swiper-slide').each(function (i) {
187						_nowH = jQuery(this).innerHeight();
188						if(_nowH > _tempH) {
189							_tempH = jQuery(this).innerHeight();
190						}
191					});

192					jQuery('.ranking-navi-swiper .swiper .swiper-slide').each(function (i) {
193						jQuery(this).css('height',_tempH);
194					});
195				},
196				slideChange: function(){
197					var _num = this.realIndex;
198					var _target = jQuery('.ranking-wrap__tab').eq(_num);
199					jQuery('.ranking-wrap__tab.active').removeClass('active');
200					_target.addClass('active');
201				},
202			},
203		})	
204	}
205
206
207	// 幅が767px以下のビューポートをターゲットとする条件を作成
208	var _mediaQuery = window.matchMedia('(max-width: 767px)');
209	function handleTabletChange(e) {
210	// メディアクエリがtrueかどうかを確認
211		if (e.matches) {//SP実行
212			// jQuery('.ranking-wrap__tab').each(function (i) {
213			// 	var _swichFlag = jQuery(this).find('.ranking-item-swiper');
214			// 	RankingSwiper(_swichFlag);
215			// });
216		}else{//PC実行
217			//Rankingのswiperを実行
218			RankingNaviBtn();
219		}
220		//共通
221		RankingNaviSwiper();
222		insertRanking('feed-all','/shop/e/eallrank/','/api/goodslistapi.aspx?event=allrank&top=10&type=json&charset=UTF-8');
223		insertRanking('feed-henri','/shop/e/ehcrank/','/api/goodslistapi.aspx?event=hcrank&top=10&type=json&charset=UTF-8');
224		insertRanking('feed-c3','/shop/e/ec3rank/','/api/goodslistapi.aspx?event=c3rank&top=10&type=json&charset=UTF-8');
225		insertRanking('feed-casaneo','/shop/e/ecarank/','/api/goodslistapi.aspx?event=carank&top=10&type=json&charset=UTF-8');
226	}
227	// イベントリスナーを登録
228	_mediaQuery.addListener(handleTabletChange);
229	// 初期チェック
230	handleTabletChange(_mediaQuery);
231});
232
233// 検索フォーム箇所SPのみ発火
234if(jQuery(window).width()>=767){
235	// アコーディオン
236	var pcToggleRemove = jQuery(".search_wrap .toggle-btn");
237		pcToggleRemove.each(function(){
238		jQuery(this).removeClass("toggle-btn");
239	});
240}
241
242
243
244// 検索フォーム
245jQuery(function(){
246	jQuery('#choice_search').on('click', function() {
247
248		let checkCategoryValue = '';
249		let checkPriceValue = '';
250		let checkQuantityValue = '';
251
252		for (let i = 0; i < lenCategory; i++){
253			if (categoryRadio.item(i).checked){
254			checkCategoryValue = categoryRadio.item(i).value;
255			}
256		}
257		for (let i = 0; i < lenPrice; i++){
258			if (priceRadio.item(i).checked){
259				checkPriceValue = priceRadio.item(i).value;
260			}
261		}
262		for (let i = 0; i < lenQuantity; i++){
263			if (quantityRadio.item(i).checked){
264				checkQuantityValue = quantityRadio.item(i).value;
265			}
266		}
267		console.log('カテゴリ選択されているのは ' + checkCategoryValue + ' です');
268		console.log('価格選択されているのは ' + checkPriceValue + ' です');
269		console.log('個数選択されているのは ' + checkQuantityValue + ' です');
270
271
272		// https://20.89.26.223/shop/goods/search.aspx?keyword=&ct=H1&goods_code=&name=&min_price=&max_price=&seq=&search=%E6%A4%9C%E7%B4%A2%E3%81%99%E3%82%8B&variation=
273		cartLink = '/shop/goods/search.aspx?keyword'+ checkQuantityValue +'&ct'+ checkCategoryValue +'&goods_code=&name='+ checkPriceValue +'&seq=&search=%E6%A4%9C%E7%B4%A2%E3%81%99%E3%82%8B&variation=';
274		console.log(cartLink);
275		jQuery('#choice_search').attr('href',cartLink);
276
277	});
278	let categoryRadio = document.getElementsByName('category');
279		let lenCategory = categoryRadio.length;
280		categoryRadio[0].checked = true;
281
282		let priceRadio = document.getElementsByName('price');
283		let lenPrice = priceRadio.length;
284		priceRadio[0].checked = true;
285
286		let quantityRadio = document.getElementsByName('quantity');
287		let lenQuantity = quantityRadio.length;
288		quantityRadio[0].checked = true;
289	
290
291})
292
293//event_ランキング設置場所変更
294jQuery(function () {
295    var insertBox = document.getElementById('event_insert');
296    // console.log(insertBox)
297    var eventContents = document.getElementsByClassName('block-top-event');
298    // console.log(eventContents.item(0))
299
300    insertBox.appendChild(eventContents.item(0));
301}());
302
303//画像透過処理
304
305jQuery(function(){
306
307	var fadeSpeed = 300;
308	jQuery('a').on({
309		'mouseover':function(){
310			if(jQuery(this).hasClass('rollover_')){
311				jQuery(this).find('img').eq(1).fadeIn(fadeSpeed);
312			} else {

313				jQuery(this).find('img').stop(true,false).animate({
314					opacity: 0.7
315				}, fadeSpeed);
316			}
317		},
318		'mouseleave':function(){
319			if(jQuery(this).hasClass('rollover_')){
320				jQuery(this).find('img').eq(1).fadeOut(fadeSpeed);
321			} else {
322				jQuery(this).find('img').stop(true,false).animate({
323					opacity: 1
324				}, fadeSpeed);
325			}
326		}
327	})
328
329	jQuery('input[type=image]').hover(function(){
330		jQuery(this).stop(true,false).animate({
331			opacity: 0.7
332		}, fadeSpeed);
333	}, function(){
334		jQuery(this).stop(true,false).animate({
335			opacity: 1
336		}, fadeSpeed);
337	});
338
339
340	jQuery('input[type="button"],input[type="submit"],input[type="image"]').on({
341		'mouseover':function(){
342			if(jQuery(this).hasClass('rollover_')){
343				jQuery(this).find('img').eq(1).fadeIn(fadeSpeed);
344			} else {
345				jQuery(this).stop(true,false).animate({
346					opacity: 0.7
347				}, fadeSpeed);
348			}
349		},
350		'mouseleave':function(){
351			if(jQuery(this).hasClass('rollover_')){
352				jQuery(this).find('img').eq(1).fadeOut(fadeSpeed);
353			} else {
354				jQuery(this).stop(true,false).animate({
355					opacity: 1
356				}, fadeSpeed);
357			}
358		}
359	})
360
361	jQuery('a.double_image_over_').each(function(){
362		if(jQuery(this).find('img').length>1){
363			jQuery(this).find('.overImg_').hide();
364			jQuery(this).off('mouseover');
365			jQuery(this).off('mouseleave');
366			jQuery(this).on({
367				'mouseover':function(){
368					jQuery(this).find('.overImg_').stop().fadeIn(fadeSpeed);
369				},
370				'mouseleave':function(){
371					jQuery(this).find('.overImg_').stop().fadeOut(fadeSpeed);
372				}
373			})
374		}
375	})
376
377});
378if(jQuery(".goods_detail_ input.btn_cart_l_")[0]){
379	var crsirefo_jscart = "";
380	var $detailpage_btn = jQuery('<a href="'+EC_WWW_ROOT + '/shop/cart/cart.aspx'+'?goods='+jQuery('#hidden_goods').val()+'" class="btn_cart_clone_"><img></a>');
381	jQuery('img',$detailpage_btn).attr({
382		src : jQuery(".goods_detail_ input.btn_cart_l_").attr('src'),
383		alt : jQuery(".goods_detail_ input.btn_cart_l_").attr('alt')
384	}).addClass('btn_cart_clone_');
385
386	jQuery($detailpage_btn).css({
387		'display':'block',
388		'margin-bottom':'10px'
389	}).hover(function(){
390			if(jQuery(this).hasClass('rollover_')){
391				jQuery(this).find('img').eq(1).fadeIn(300);
392			} else {
393				jQuery(this).find('img').stop(true,false).animate({
394					opacity: 0.7
395				}, 300);
396			}
397		}, function(){
398			if(jQuery(this).hasClass('rollover_')){
399				jQuery(this).find('img').eq(1).fadeOut(300);
400			} else {
401				jQuery(this).find('img').stop(true,false).animate({
402					opacity: 1
403				}, 300);
404			}
405		}).on('click',function(){ return false; });
406	jQuery("input.btn_cart_l_").parent('.cartbox_').prepend($detailpage_btn);
407	jQuery(".goods_detail_ input.btn_cart_l_").hide();
408}
409
410jQuery(window).on('load', function () {
411	jQuery(function(){
412		jQuery('#brand_intro ul').each(function() {
413			jQuery(this).addClass('move_');
414		});
415		jQuery('.category_title_').each(function() {
416			jQuery(this).addClass('border_');
417		});
418	});
419});