以前紹介した、Shopify商品閲覧履歴の実装方法なのですが…少し難点がありまして、他の商品カードと同じスタイルで表示しようとすると、JSで処置を追加してあげないといけなくなります。
どうゆうことかというと、「販売開始から特定の期間だけ新着とか出したい。」みたいなことがあると、その表示をするための処理を別で組まないといけなくなります。
また、その処理に変更があった場合、商品一覧などに使っている処理と、最近チェックした商品の処理と２ヶ所変更して、２ヶ所確認して…。
めっちゃ面倒だぁーー！
ということで、商品一覧で使うようなカードをそのまま使う形のコードを紹介しようと思います。
仕組み自体は、色々なところで応用が効くかと思うので、いろんな箇所で利用されてみてください。

recently-product-card.liquidセクションファイルの作成

<div class="js-recentlySectionId" data-recently-section-id="{{ section.id }}"  style="display: none;">
  {% if template contains 'product' %}
    {% render 'product-card', product: product %}
  {% endif %}
</div>
{% schema %}
{
  "name": "最近チェックした商品テンプレート",
  "class": "カードの外側にあたるクラス名を指定"
}
{% endschema %}

まずは、recently-product-card.liquidファイルをセクションフォルダーに作成します。この時、スキーマのクラス名にカードの一つ外側にあたるクラス名を指定します。js-recentlySectionIdの

タグに商品カードの基準となるクラス名を指定します。
renderで読み込んでいるファイル名はテーマに合わせて変更してください。

theme.liquidファイル内で、recently-product-card.liquidを読み込む

{% section 'recently-product-card' %}
<script type='text/javascript'>Shopify.recentlySectionId = document.querySelector('.js-recentlySectionId').dataset.recentlySectionId;</script>

上記のコードをtheme.liquid内のなるべく下の方に読み込みます。
早い段階で読み込む必要がないので、なるべく下で大丈夫です。

assetsフォルダー内にjquery.products.jsを作成します

/**
 * Cookie plugin
 *
 * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */

jQuery.cookie=function(b,j,m){if(typeof j!="undefined"){m=m||{};if(j===null){j="";m.expires=-1}var e="";if(m.expires&&(typeof m.expires=="number"||m.expires.toUTCString)){var f;if(typeof m.expires=="number"){f=new Date();f.setTime(f.getTime()+(m.expires*24*60*60*1000))}else{f=m.expires}e="; expires="+f.toUTCString()}var l=m.path?"; path="+(m.path):"";var g=m.domain?"; domain="+(m.domain):"";var a=m.secure?"; secure":"";document.cookie=[b,"=",encodeURIComponent(j),e,l,g,a].join("")}else{var d=null;if(document.cookie&&document.cookie!=""){var k=document.cookie.split(";");for(var h=0;h<k.length;h++){var c=jQuery.trim(k[h]);if(c.substring(0,b.length+1)==(b+"=")){d=decodeURIComponent(c.substring(b.length+1));break}}}return d}};

/**
 * Module to show Recently Viewed Products
 *
 * Copyright (c) 2014 Caroline Schnapp (11heavens.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */

Shopify.Products = (function() {

  var config = {
    howManyToShow: 3,
    howManyToStoreInMemory: 10,
    wrapperId: 'recently-viewed-products',
    templateId: 'recently-viewed-product-template',
    onComplete: null,
    recentlySectionId: null
  };

  var productHandleQueue = [];
  var wrapper = null;
  var template = null;
  var shown = 0;

  var cookie = {
    configuration: {
      expires: 90,
      path: '/',
      domain: window.location.hostname
    },
    name: 'shopify_recently_viewed',
    write: function(recentlyViewed) {
      jQuery.cookie(this.name, recentlyViewed.join(' '), this.configuration);
    },
    read: function() {
      var recentlyViewed = [];
      var cookieValue = jQuery.cookie(this.name);
      if (cookieValue !== null) {
        recentlyViewed = cookieValue.split(' ');
      }
      return recentlyViewed;
    },
    destroy: function() {
      jQuery.cookie(this.name, null, this.configuration);
    },
    remove: function(productHandle) {
      var recentlyViewed = this.read();
      var position = jQuery.inArray(productHandle, recentlyViewed);
      if (position !== -1) {
        recentlyViewed.splice(position, 1);
        this.write(recentlyViewed);
      }
    }
  };

  var finalize = function() {
    wrapper.show();
    // If we have a callback.
    if (config.onComplete) {
      try { config.onComplete() } catch (error) { }
    }
  };

  var moveAlong = function() {
    if (productHandleQueue.length && shown < config.howManyToShow) {
      fetch(`/products/${productHandleQueue[0]}?sections=${config.recentlySectionId}`)
        .then((r) => r.json())
        .then(
          (d) => {
            // console.log(d);
            // console.log(d[`${config.recentlySectionId}`]);
            wrapper.append(d[`${config.recentlySectionId}`]);
            productHandleQueue.shift();
            shown++;
            moveAlong();
          },
          (e) => {
            console.log(e);
            cookie.remove(productHandleQueue[0]);
            productHandleQueue.shift();
            moveAlong();
          }
      );
    }
    else {
      finalize();
    }
  };

  return {

    resizeImage: function(src, size) {
      if (size == null) {
        return src;
      }

      if (size == 'master') {
        return src.replace(/http(s)?:/, "");
      }

      var match  = src.match(/\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?/i);

      if (match != null) {
        var prefix = src.split(match[0]);
        var suffix = match[0];

        return (prefix[0] + "_" + size + suffix).replace(/http(s)?:/, "")
      } else {
        return null;
      }
    },

    showRecentlyViewed: function(params) {
      var params = params || {};

      // Update defaults.
      jQuery.extend(config, params);

      // Read cookie.
      productHandleQueue = cookie.read();

      // Template and element where to insert.
      wrapper = jQuery('#' + config.wrapperId);

      // How many products to show.
      config.howManyToShow = Math.min(productHandleQueue.length, config.howManyToShow);

      // If we have any to show.
      if (config.howManyToShow && wrapper.length) {
        // Getting each product with an Ajax call and rendering it on the page.
        moveAlong();
      }
    },

    getConfig: function() {
      return config;
    },

    clearList: function() {
      cookie.destroy();
    },

    recordRecentlyViewed: function(params) {

      var params = params || {};

      // Update defaults.
      jQuery.extend(config, params);

      // Read cookie.
      var recentlyViewed = cookie.read();

      // If we are on a product page.
      if (window.location.pathname.indexOf('/products/') !== -1) {

        // What is the product handle on this page.
        var productHandle = window.location.pathname.match(/\/products\/([a-z0-9\-]+)/)[1];
        // In what position is that product in memory.
        var position = jQuery.inArray(productHandle, recentlyViewed);
        // If not in memory.
        if (position === -1) {
          // Add product at the start of the list.
          recentlyViewed.unshift(productHandle);
          // Only keep what we need.
          recentlyViewed = recentlyViewed.splice(0, config.howManyToStoreInMemory);
        }
        else {
          // Remove the product and place it at start of list.
          recentlyViewed.splice(position, 1);
          recentlyViewed.unshift(productHandle);
        }

        // Update cookie.
        cookie.write(recentlyViewed);

      }
    }
  };
})();

上記の内容をassetsフォルダ内に作成し、以下のコードをtheme.liquidのhead内の{{ content_for_header }}より下に追加する
※既に別でjQueryを読み込んでいる場合は、削除してください。

{%- comment -%} 最近チェックした商品 読み込み {%- endcomment -%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
{{ "jquery.products.js" | asset_url | script_tag }}

main-product.liquidに以下のコードを書き込む

{%- comment -%} 最近チェックした商品 書き込み {%- endcomment -%}
<script type="text/javascript">
Shopify.Products.recordRecentlyViewed();
</script>

商品ページが読み込まれた時に、商品データをクッキーに入力するコードになります。

sectionsフォルダにrecently-prouct-slider.liquidを作成するし以下のコードを書き込む

{% comment -%}
------------------------------------
最近チェックした商品
------------------------------------
{%- endcomment -%}

<!-- product-recently-viewed -->
<div class="product-recently-viewed collection-slider">
  <div class="container">
    <h2 class="product-recently-viewed__title section__title">最近チェックした商品</h2>

    <ul id="js-recentlySliderBody" class="js-recentlySlider collection-slider__list product-recently-viewed__list">

      {% unless customer %}
        {%- comment -%} 未ログイン時 {%- endcomment -%}
        <p id="wishlist-empty-text"
          style="padding: 60px 0; text-align: center;min-height: 320px; display: flex; align-items: center;">
          まだ最近チェックした商品がありません
        </p>
      {% endunless %}

    </ul>
  </div>
</div>

{%- comment -%} ログイン時のみ発動 {%- endcomment -%}
{% if customer %}
  {%- comment -%} コントロールjs {%- endcomment -%}
  <script>
    window.addEventListener( 'load', function(){
      const recentlyViewController = (function(){

        // クッキーからデータを取得する
        let recentlyItems = jQuery.cookie('shopify_recently_viewed');

        // 閲覧履歴がある時 クッキーにデータがある時
        if(recentlyItems != null ) {
          Shopify.Products.showRecentlyViewed({
            howManyToShow: 8,// 表示する商品数を変更できます。
            wrapperId: 'js-recentlySliderBody',
            recentlySectionId: Shopify.recentlySectionId,
            onComplete: function() {
              // データが読み込まれた後発火させたい時

              // 非表示にしているアイテムを表示させる
              let lists = Array.from(document.querySelectorAll('li.recently-slider__item'));
              lists.forEach((item) => {
                item.style.display = "block";
              });
            }
          });
        } else {
          // 閲覧履歴がない時の処理 クッキーにデータがない時
          document.getElementById('js-recentlySliderBody').insertAdjacentHTML("afterbegin",`<p id="wishlist-empty-text" style="padding: 60px 0; text-align: center;min-height: 320px; display: flex; align-items: center;">まだ最近チェックした商品がありません</p>`);
        }

      })();
    }, false);
  </script>
{% endif %}

{% schema %}
{
  "name": "Product Recently Viewed",
  "settings": [
  ],
  "presets": [
    {
      "name": "Product Recently Viewed"
    }
  ]
}
{% endschema %}

注意点

商品詳細ページで読み込まれている商品カードは表示させないようにstyle="display:none;"を指定してあります。
なので、最近チェックした商品内の商品カードは、表示されるようにスタイルを指定してやる必要があります！

仕組み

どういう仕組みかというと、セクションのレンダリング機能を使用して商品カードを呼び出しています。
本家のjquery.products.jsの商品データを取得している処理を変更し、商品ページに読み込まれている商品に付随した商品カードデータを呼び出して、閲覧履歴内で表示しています。（fetch(/products/${productHandleQueue[0]}?sections=${config.recentlySectionId})の部分）
　
なので、最初に作成したrecently-product-card.liquid内で呼び出している{% render 'product-card', product: product %}をテーマ内で統一してあげることで、スタイルや特定の条件で表示するラベルのコントロールなどを一元管理することができるようになります。

まとめ

面倒くさがりが産んだ、仕組みですが、今回学んだjquery.product.jsの仕組みとセクションのレンダリングを使用することで、アプリを使わずに機能を拡張することができそうです。
例えば、商品一覧の商品カードをクリックして、商品詳細のモーダルが開くとか…。商品詳細でカートに追加ボタンを押すことでサイドからカートの中身が出てくるなど…。jquery.product.jsは可変してお気に入り機能にしている人がいるとかいないとか…。
また、一段とLiquidが面白くなりました！
機会があれば、その内容も記事にしてみようと思います。
　
あとは、お決まりの…
ARCHETYPでは、Shopifyのテーマ開発やアプリ開発をやりたいエンジニアを募集しております！
気になった方はお気軽にエントリーをお待ちしております！
https://www.archetyp.jp/recruit/
noteでブログもやってるので良かったらチェックしてください！
https://note.com/archetyp