Shopifyに最強の「閲覧履歴」機能をアプリなしで実装！コピペで動く決定版コードを完全解説

{%- comment -%}
商品ページで画像情報を取得するための準備
{%- endcomment -%}
{%- assign featured_image = product.featured_media | default: product.featured_image -%}
{%- if template.name == 'index' or template.name == 'cart' -%}
<section class="recently-viewed-wrapper">
<div class="recently-viewed-wrap">
<div class="sec-head">
<h2 class="top-sec-ttl">
<span lang="en">{{ section.settings.title_en | escape }}</span>
<span lang="ja">{{ section.settings.title_ja | escape }}</span>
</h2>
<p class="top-sec-txt">{{ section.settings.text | escape }}</p>
</div>
<div class="recently-viewed-slide sec-slide">
<!-- JavaScriptによって商品がここに挿入されます -->
</div>
</div>
</section>
{%- endif -%}
<script>
document.addEventListener("DOMContentLoaded", () => {
const localStorageKey = "{{ shop.domain | append: '_recentlyedProduct'}}";
let productObject = null;
try {
productObject = {{ product | json }};
} catch (e) {}
// 1. 商品ページでのみ、履歴を「保存」する処理
if (productObject && productObject.id) {
const productDataForSave = {
productTitle: {{ product.title | json }},
productImg: "{{ featured_image | image_url: width: 300, height: 300, crop: 'center' }}",
productPriceRaw: {{ product.price }},
productPrice: "{{ product.price | money }}",
productUrl: "{{ shop.url }}{{ product.url }}",
productImageAltText: {{ featured_image.alt | json }}
};
try {
let currentHistory = JSON.parse(localStorage.getItem(localStorageKey));
if (!Array.isArray(currentHistory)) { currentHistory = []; }
const isAlreadyInList = currentHistory.some(item => item.productUrl === productDataForSave.productUrl);
if (!isAlreadyInList) {
const maxProducts = {{ section.settings.max_product_count }};
if (currentHistory.length >= maxProducts) {
currentHistory.shift();
}
currentHistory.push(productDataForSave);
localStorage.setItem(localStorageKey, JSON.stringify(currentHistory));
}
} catch (e) {
localStorage.setItem(localStorageKey, JSON.stringify([productDataForSave]));
}
}
// 2. 表示コンテナが存在する場合のみ、履歴を「表示」する処理
const container = document.querySelector('.recently-viewed-wrapper');
if (container) {
try {
const productData = JSON.parse(localStorage.getItem(localStorageKey));
if (!Array.isArray(productData) || productData.length === 0) {
container.style.display = 'none';
return;
}
const productListElement = container.querySelector(".recently-viewed-slide");
const reversedProductData = [...productData].reverse();
const productHtml = reversedProductData.map(item => {
const priceFormatted = item.productPrice.replace('¥', '').replace('.00', '');
let priceWithTax;
if (item.productPriceRaw) {
priceWithTax = (Math.floor(item.productPriceRaw * 1.10)).toLocaleString();
} else {
const priceAsNumber = parseInt(priceFormatted.replace(/,/g, ''), 10);
priceWithTax = (Math.floor(priceAsNumber * 1.10)).toLocaleString();
}
return `
<div class="recently-viewed-slide-item">
<a href="${item.productUrl}">
<div class="recently-viewed-item-img">
<img src="${item.productImg}" width="188" height="188" loading="lazy" alt="${item.productImageAltText || ''}" />
</div>
<h3 class="recently-viewed-item-name">${item.productTitle}</h3>
<div class="price__regular">
<span class="price-item price-item--regular">
${priceFormatted} <span>円</span>
</span>
</div>
<div class="price__taxes-included">
<span class="price-item price-item--taxes-included">
${priceWithTax} <span>円(税込)</span>
</span>
</div>
</a>
</div>
`;
}).join('');
productListElement.innerHTML = productHtml;
if (typeof $ !== 'undefined' && typeof $.fn.slick !== 'undefined') {
if ($(".recently-viewed-slide").hasClass('slick-initialized')) {
$(".recently-viewed-slide").slick('unslick');
}
$(".recently-viewed-slide").slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: {{ section.settings.autoplay }},
autoplaySpeed: {{ section.settings.autoplay_speed }},
speed: 700,
arrows: true,
dots: false,
responsive: [ { breakpoint: 896, settings: { infinite: true, centerMode: true, centerPadding: '20%', slidesToShow: 1, autoplay: false, arrows: false, dots: false, }, }, ],
});
}
} catch (e) {
container.style.display = 'none';
}
}
});
</script>
{% schema %}
{
"name": "閲覧履歴",
"tag": "section",
"class": "section",
"limit": 1,
"settings": [
{
"type": "header",
"content": "コンテンツ設定"
},
{
"type": "text",
"id": "title_en",
"default": "RECENTLY VIEWED",
"label": "見出し（英語）"
},
{
"type": "text",
"id": "title_ja",
"default": "最近チェックした商品",
"label": "見出し（日本語）"
},
{
"type": "text",
"id": "text",
"default": "お客様が最近チェックした商品はこちら",
"label": "説明テキスト"
},
{
"type": "range",
"id": "max_product_count",
"min": 6,
"max": 24,
"step": 1,
"unit": "商品",
"label": "最大表示（保存）数",
"default": 12
},
{
"type": "header",
"content": "スライダー設定"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "自動でスライドする（PCのみ）",
"default": true
},
{
"type": "range",
"id": "autoplay_speed",
"min": 2000,
"max": 9000,
"step": 500,
"unit": "ミリ秒",
"label": "スライド切り替え速度",
"default": 4000
}
],
"presets": [
{
"name": "閲覧履歴"
}
]
}
{% endschema %}
<style>
.recently-viewed-wrapper { position: relative; border-bottom: 1px solid #e6e6e6; padding: 0 0 40px; margin: 0 0 40px; }
.recently-viewed-wrap {}
.recently-viewed-slide { padding: 0 36px; }
.recently-viewed-slide-item { margin: 0 14px 0 0; }
.recently-viewed-slide-item a { display: block; color: #333; text-decoration: none; }
.recently-viewed-item-img { display: flex; justify-content: center; align-items: center; min-height: 188px; margin: 0 0 8px; }
.recently-viewed-item-img img { display: block; max-width: 188px; max-height: 188px; width: 100%; height: auto; margin: 0 auto; transition: 0.3s; }
.recently-viewed-slide-item a:hover .recently-viewed-item-img img { opacity: 0.7; }
.recently-viewed-item-name { font-size: 13px; font-weight: normal; margin: 0 0 4px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; min-height: 2.6em; }
.recently-viewed-slide-item .price__regular .price-item--regular { font-family: "Roboto"; font-size: 20px; font-weight: bold; color: #D61212; letter-spacing: 0; }
.recently-viewed-slide-item .price__taxes-included .price-item--taxes-included { font-family: "Roboto"; font-size: 12px; color: #333; letter-spacing: 0; }
.recently-viewed-slide-item .price__regular .price-item--regular span { font-family: "Noto Sans JP"; font-size: 12px; }
.recently-viewed-slide-item .price__taxes-included .price-item--taxes-included span { font-family: "Noto Sans JP"; font-size: 10px; }
.recently-viewed-slide .slick-prev, .recently-viewed-slide .slick-next { top: 40%; transform: translateY(-50%); }
@media screen and (max-width: 896px) {
.recently-viewed-wrapper { padding: 0 0 32px; margin: 0 0 32px; }
.recently-viewed-slide { padding: 0; }
}
</style>