閲覧履歴
4
20
large
off
horizontal
off
#202124
#202124
#ffffff
let timerRV = setInterval(function() {
if ($ && $.fn && $.fn.slick) {
mainRV();
clearInterval(timerRV);
const parentElement = document.querySelector('.spHeaderBrand__detailMenu__news__header__heading');
if (parentElement) {
parentElement.classList.remove('hidden');
}
} else {
console.log('waiting for jQuery and slick');
console.log('jQuery', $);
console.log('jQuery.fn', $.fn);
console.log('jQuery.fn.slick', $.fn.slick);
}
}, 1000);
document.querySelector('#spHeader__topMenu__btn').addEventListener('click', function() {
$('.sidebar-recentlyview').slick('unslick');
$(".sidebar-recentlyview").slick({
slidesToShow: 3.5,
slidesToScroll: 1,
arrows: true,
infinite: false,
autoplay: false,
initialSlide: 0
});
});
function mainRV() {
var divParent = document.createElement('div');
divParent.setAttribute('class', 'sidebar-recentlyview-main');
$('.spHeaderBrand__detailMenu__recentlyViewedItems__header').append(divParent);
var divChild = document.createElement('div');
divChild.setAttribute('class', 'sidebar-recentlyview');
$('.sidebar-recentlyview-main').append(divChild);
const sidebarAppend = document.querySelectorAll('.Qe_Recently-view .slick-slide:not(.slick-cloned)');
Array.from(sidebarAppend).forEach((element, index) => {
var eleHtml = element.innerHTML;
$('.sidebar-recentlyview').append(eleHtml);
});
$(".sidebar-recentlyview").slick({
slidesToShow: 3.5,
slidesToScroll: 1,
arrows: true,
infinite: false,
autoplay: false,
initialSlide: 0
});
$('.recently_sliders').slick('unslick');
$('.recently_sliders').slick({
slidesToShow: 4,
infinite: false,
slidesToScroll: 1,
centerMode: false,
arrows: true,
responsive: [{
breakpoint: 749,
settings: {
slidesToShow: 2.5,
arrows: true,
}
}]
});
$('.Qe_Recently-view').addClass('slick-active');
$(".product_price_regular").each(function() {
var salePriceElement = $(this).find('s').next();
var regularPriceElement = $(this).text();
console.log('salePriceElement', salePriceElement);
console.log('regularPriceElement', regularPriceElement);
var regularPriceTextArray = regularPriceElement.split(/\s+/);
console.log('regularPriceTextArray', regularPriceTextArray);
var salePriceText = regularPriceTextArray[1] != undefined ? regularPriceTextArray[1] : regularPriceTextArray[0];
console.log('regularPriceTextArray[1]', regularPriceTextArray[1]);
var regularPriceText = regularPriceTextArray[0];
console.log('regularPriceTextArray[0]', regularPriceTextArray[0]);
$(this).empty();
var regularPriceNumber = Number(regularPriceText.slice(1).replace(/,/g, ''));
console.log('regularPriceNumber', regularPriceNumber);
var salePriceNumber = Number(salePriceText.slice(1).replace(/,/g, ''));
console.log('salePriceNumber', salePriceNumber);
var differenceInPrice = regularPriceNumber - salePriceNumber;
console.log('differenceInPrice', differenceInPrice);
var discountPercent = Math.round(differenceInPrice / regularPriceNumber * 100);
console.log('discountPercent', discountPercent);
var wrapperElement = document.createElement('div');
wrapperElement.setAttribute('class', 'products-card__price');
var priceElement = document.createElement('span');
priceElement.setAttribute('class', 'products-card__price');
if (discountPercent !== 0) {
priceElement.classList.add('onSale');
}
priceElement.innerHTML = salePriceText;
var taxElement = document.createElement('span');
taxElement.setAttribute('class', 'products-card__price__tax');
taxElement.innerHTML = '税込';
if (discountPercent !== 0) {
taxElement.classList.add('onSale');
}
wrapperElement.appendChild(priceElement);
wrapperElement.appendChild(taxElement);
if (discountPercent !== 0) {
var discountElement = document.createElement('span');
discountElement.setAttribute('class', 'products-card__price__discount');
discountElement.innerHTML = discountPercent + '%OFF';
wrapperElement.appendChild(discountElement);
}
$(this).append(wrapperElement);
});
}
.Qe_Recently-view{max-width: 1044px;margin: 0 auto 50px; padding:0 10px; min-width:1044px; }
.Qe_Recently-view .box-slider .product_title{width: 100%; font-weight: 400; font-size: 12px; line-height: 15px; margin-bottom: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.Qe_Recently-view .box-slider img{margin-bottom: 0px; aspect-ratio: 5/6!important; object-fit: cover; width: 100%;}
.Qe_Recently-view .box-outer {padding: 0 4px; margin:0px;}
.Qe_Recently-view .box-slider .product_title{padding:0 0px; text-align: left; margin-top: 3px; margin-bottom:11px;}
.Qe_Recently-view .product_price_main{text-align:left; font-size:16px; font-weight:400;}
.Qe_Recently-view .recently-viewed-ttl{text-align: left; font-weight: 700; font-size: 18px; line-height: 22px; border-bottom: 1px solid #ddd; padding-bottom: 8px; margin: 0 4px 10px 4px;}
.Qe_Recently-view .product_price_main .product_price s{margin:0 3px 0 0px;}
.Qe_Recently-view .box-slider:hover{opacity: .6;}
.Qe_Recently-view .recently_sliders .slick-next:before{display:none;}
.Qe_Recently-view .recently_sliders .slick-prev:before{display:none;}
.Qe_Recently-view .recently_sliders .slick-next {background-image: url(https://store.sanyo-shokai.co.jp/cdn/shop/t/7/assets/circle-arrow-right.svg); height: 25px; width: 25px; right: 10px; top: 40%; z-index: 2;}
.Qe_Recently-view .recently_sliders .slick-prev {background-image: url(https://store.sanyo-shokai.co.jp/cdn/shop/t/7/assets/circle-arrow-left.svg); height: 25px; width: 25px; top: 40%;
z-index: 2; left:10px;}
.Qe_Recently-view .recently_sliders .slick-next.slick-disabled,
.Qe_Recently-view .recently_sliders .slick-prev.slick-disabled {
display: none!important;
}
@media only screen and (min-width:768px) and (max-width:991px) {
}
@media only screen and (max-width:1100px) {
.Qe_Recently-view {max-width:100%; min-width:100%;}
}
@media only screen and (max-width:749px) {
.Qe_Recently-view .recently-viewed-ttl {
font-size: 14px;
}
.Qe_Recently-view .recently_sliders .slick-next {
top: 27%!important;
}
.Qe_Recently-view .recently_sliders .slick-prev {
top: 27%!important;
}
}
.Qe_Recently-view:not(.slick-active) {
display: none!important;
}
.slick-track {
margin-left: 0!important;
}
¥
グレー系（05）
ダークグレー系（08）
グレー系（05）
ダークグレー系（08）
表示について
