[Shopify]「最近閲覧した商品履歴」をポップアップで表示する・セクションテンプレート #129

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

以前、ローカルストレージを使用した最近チェックした商品を表示するセクションをご紹介しました！今回は、その閲覧履歴の商品一覧をポップアップで表示できるセクションになります＾＾

商品ページにアクセスしてから5秒後にモーダルが表示される仕様です。今回はStep１で完結🎵コピペで5分もかからずに設置できちゃいますね。

🔸前回の記事

以前ご紹介した、ローカルストレージに閲覧履歴を保存するコードを使用します。

ベーステーマ：Dawn
※どのテーマでも機能のところは使えると思います。テーマやバージョンによってはレイアウトは調整必要かも。

✔️今回のゴール

最近チェックした商品を
モーダルで表示してみた。

画面遷移して5秒後に表示される。 pic.twitter.com/D7881a9wHW

— まりん@Shopify専門エンジニア🇦🇺 (@crowd37cord) July 7, 2024

❶商品ページへ遷移
❷5秒後に最近チェックした商品を表示
❸ローカルストレージへ格納しているデータの２番目以降から表示
❹閲覧商品格納は現在表示している商品の次の商品（２番目）以降から表示
❺画像のみで横にスクロール。

🔸CMSの特徴

・見出し
・ポップアップの横幅
・ポップアップのボーダー
・画像のサイズ（縦横共通）正方形になります
・カラー各種

---

【ご購入時のご注意】
※返金&サポート&コメント返信はしておりません。
※現時点の最新のDawnテーマをベースに作成してます。
※コード&設置方法のみのご紹介で解説などはしておりません。
※2024.7時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。（メンバーシップでコメント頂いた場合は修正します）

---

✔️設定手順

👉事前準備

下記で紹介したローカルストレージに格納するスニペットを作成して商品ページに挿入しておく。（無料エリアに記載しているコード）

❶スニペット作成（ファイル名なんでもOK）
　→（例）product-localstrage
（上記の記事の解説箇所またはStep1で紹介している）
❷既存の商品詳細セクションファイル（main-product.liquidなど）にスニペットを挿入（上記の記事のStep4で紹介している）

上記のコードは閲覧商品８個まで格納できます。
最大保存数を変更したい場合はここの数字を変更してください。