Shopifyで「最近閲覧した商品」を表示する方法【アプリ不要】

2024-04-14
2020-08-08

Keywords:
[ EC ]
[ Programming ]
[ Shopify ]
[ pickup ]

(この記事にはプロモーション用のリンクが含まれます)

こんにちは！

ShopifyはECプラットフォームの一つですが、大きな特徴の一つとして、その拡張性の高さがあります。

「こんな機能が欲しい！」と思ったら、多くの場合は、Shopifyアプリストアで、自分が欲しい機能を持つアプリを見つけることができます。四次元ポケットみたいですね。

このようにShopifyアプリはとても便利なのですが、幾つかの問題点もあります。

・日本語対応アプリはまだまだ少ない
・月額課金のアプリが多い
・テーマと競合してエラーが生じることがある

有料アプリをたくさん実装すると、月額課金が膨らんでしまうので、できるだけアプリ数を抑えていきたいですよね。

実は、Shopifyで機能を追加する方法は、アプリだけではありません。

Shopifyテーマのソースコードを直接変更する「テーマカスタマイズ」という方法によって、機能を追加することもできます。

テンプレートファイルを編集するので難易度は高めなのですが、この方法を覚えるとテーマ拡張の幅が広がりそうです！

WordPressでウェブサイトを構築したことのある方にとっては、このテーマカスタマイズは馴染みのある方法ですね。

この記事では、事例を紹介しつつ、テーマカスタマイズの方法を見ていきたいと思います。

Shopifyで「最近閲覧した商品」を表示する方法

前置きが長くなりましたが、本題に入ります。

以前に次のようなツイートをしました。

Shopifyテーマをカスタマイズして「最近閲覧した商品」を表示できるようにしました！
アプリ不要です😇
・閲覧データを保存(クッキー)
・表示する商品数は調整可能
・クッキー保存期間も調整できる
元記事はこちらhttps://t.co/UpDf6KtQTN
注意点もあるので、何かの形でまとめて情報シェアします！ pic.twitter.com/26XddttxZs
— Takeru | WEB Development (@mikey_an0101) August 3, 2020

ECサイトで商品を閲覧しているときに、少し前に見たアイテムが表示されることがありますよね。

気になる商品の場合、もう一度閲覧して、そのまま購入に進むこともあります。

このように、ECサイトではお馴染みの機能ですが、閲覧履歴の表示をShopifyで実装するためにはどうしたら良いでしょうか？

もちろん、アプリは用意されています。例えばこちら↓

Personalized Recommendations

試しにインストールしてみましたが、最近閲覧した商品、おすすめ商品、売れ筋商品などを表示可能。

ダッシュボードもかなり使いやすい印象です。

しかし有料アプリなので月額課金が発生してしまう。。

売上金額が500ドル以上の場合、月額29.99ドルが課金されます。予算的に余裕があれば、検討してみても良いかもしれませんね。

しかし、「閲覧履歴を表示するために毎月3,000円も払いたくないよぉ」という方もいるかもしれません。

そこでテーマカスタマイズの出番です。先ほど述べたように、Shopifyテーマのソースコードを編集すれば便利な機能を無料で実装できることがあります。

実は、上記のような要望に応えてテーマカスタマイズ向けのコードが用意されており、Githubからダウンロード可能になっています。

Shopifyは、テーマやアプリが世界中で開発が進められており、英語で検索すれば多くの情報が入手できます。素晴らしいですね。

Githubのオリジナルコードに加えて、コードの解説記事（英語）があり、大変参考になります。

（解説記事のURLは、たかぼーさんに教えていただきました！ありがとうございます！🙇🏻‍♂️）

以下、基本的にはオリジナルのGithubのコードに基づいて、実装方法を説明したいと思います。

Githubからコードをダウンロード

まずは、こちらサイトからコードをダウンロードしてください。

https://github.com/carolineschnapp/recently-viewed

ダウンロードするファイル名はこちらです。

・jquery.products.min.js

このファイルは、ユーザーの閲覧データをクッキーに保存して商品ページに表示するためのJavaScriptです。

次に、こちらのサイトからコードをダウンロードします。

https://github.com/BorisMoore/jquery-tmpl

ダウンロードするファイル名はこちら。

・jquery.tmpl.min.js

このファイルは、jsonデータをHTMLコンテンツに渡すためのJavaScriptライブラリです（jQueryテンプレート）。

Assetフォルダにファイルを追加

次に、ダウンロードした2つのファイルを、Assetフォルダに追加します。

テーマ編集→コードを編集→Assetフォルダをクリック→ 新しいassetを追加する→ファイルをアップロード

今回はテーマカスタマイズに馴染みがない方向けに、管理画面のテーマエディタを使う方法で説明します。

この他にもTheme Kitを使ってローカル開発環境で編集する方法があり、この場合は自分のお気に入りのテキストエディタを使用することができます。

興味がある方はこちらのページで調べてみてください！

Snippetフォルダにファイルを追加

次に、Snippetフォルダに新しいファイルを追加します。

Snippetフォルダをクリック→新しいsnippetを追加する→ファイル名：recently-viewed.liquid

recently-viewed.liquidに、以下のコードを貼り付けてください。

{{ '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' | script_tag }}
{{ 'jquery.tmpl.min.js' | asset_url | script_tag }}
{{ 'jquery.products.min.js' | asset_url | script_tag }}
<style>
  .products:hover{
    opacity: 0.8;
  }
</style>
<div class="clearfix"></div>

  <div class="product-template__container page-width head-room">
        <aside class="grid">
          <div class="grid__item">
            <div id="recently-viewed-products" class="collection clearfix " >
             <div class="section-header">
              <h2 class="section-header__title" style="text-align:center;">最近閲覧した商品</h2>         
             </div>  
            </div>
          </div>
        </aside>  
  </div>
{% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
   <div class="grid grid--uniform grid--view-items leg-room">
      {% raw %}
      
      <script id="recently-viewed-product-template"  type="text/x-jquery-tmpl">
      <div class="grid__item small--one-half medium-up--one-quarter" itemscope itemtype="http://schema.org/Product" >
      <div id="product-${handle}" class="products"}>
        <div class="image">
          <a href="${url}">
            <img src="${Shopify.Products.resizeImage(featured_image, "medium")}" />
          </a>
        </div>
        <div class="details">
          <a href="${url}" >
            <span class="h4 grid-view-item__title product-card__title">${title}</span>
          </a>
        </div>
      </div>
      </div>
      </script>
      {% endraw %}

      <script>
      Shopify.Products.showRecentlyViewed( { howManyToShow:3 } );// 表示する商品数を変更できます。
      </script>
  </div>

これは閲覧した商品を表示するためのコードです。表示形式を調整する際は、このファイルを使用します。

また、上記のコードの{ howManyToShow:3 }の数字を変えることで、表示する商品数を変更可能です！

theme.liquidにコードを追加

今度は、Layoutフォルダのtheme.liquidファイルを編集します。

以下のコードを貼り付けてください。貼り付ける位置は、body閉じタグの直前です！

  {% if template contains 'product' %}

{{ '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' | script_tag }}
{{ 'jquery.products.min.js' | asset_url | script_tag }}

<script>
Shopify.Products.recordRecentlyViewed();
</script>

{% endif %}

これは、ユーザーが商品ページを閲覧している場合だけ、ページ情報を記録するためのコードです。

product.liquidにコードを追加

最後に、Templatesフォルダのproduct.liquidファイルを編集します。「最近閲覧した商品」を表示したい場所に、以下のコードを貼り付けてください。

 {% include 'recently-viewed' %}

コード編集に関しては以上です。

お疲れ様でした！と言いたいところなのですが、実はまだ続きがあります。。

商品のURLを変更（日本語対応）

本来ならば上記の方法で動作するはずなのですが、日本語のページの場合、これだけでは動作しないことがあります。

僕も試してみましたが、何回試しても閲覧履歴が表示されず、心が折れかけました。。

沼にハマりかけましたが、JavaScriptファイルのソースコードを確認したところ、正規表現により、URLが英数字の場合のみ動作するように構成されていました。

Shopifyでは、デフォルト設定として、商品URLの末尾が商品名になるように設定されています。つまり、商品名が日本語の場合はURL末尾が日本語になり、これがエラーの原因でした。

そこで、全ての商品のURLを修正してアルファベットと数字に直したところ、直近の閲覧商品一覧が無事に表示されました 😌

以下、動作するURLと動作しないURLの具体例です。

・動作しないURL↓
https://hoge/products/パスタ-1
・動作するURL↓
https://hoge/products/pasta-1

ちなみに、商品URLは、管理画面の商品登録ページの一番下の欄「ウェブサイトのSEOを編集する」で変更することができます！

補足

URLを英数字に修正してもうまくいかない場合は、URLに記号が含まれていないか確認してください。上記の方法では、ハイフン（-）はOKなのですが、アンダースコア（_）が弾かれてしまいます。さらに言うと、アルファベットの大文字も弾かれます。

ただし、対策はありますので安心してください。

jquery.tmpl.min.jsファイルの中で以下のコードを探します。

var k=window.location.pathname.match(/\/products\/([a-z0-9\]+)/)[1];var i=jQuery.inArray(k,j);

上記のコードを次のコードで置き換えます。

var k=window.location.pathname.match(/\/products\/([a-zA-Z0-9\-_%!?@]+)/)[1];var i=jQuery.inArray(k,j);

これで、アルファベットの大文字や記号（@-_!?%）がURLに含まれていても、動作するようになったと思います。

おわり

今回の記事では、テーマカスタマイズをすることにより、「ユーザーが最近閲覧した商品」リストの表示方法をご紹介しました。

閲覧履歴表示は、全ての商品に適用することのできる便利な機能だと思います。実装すればコンバージョン率アップも期待できますね。

このようなテーマカスタマイズは、簡単＆無料で実装できます。ご自身のShopifyサイトで試してみてはいかがでしょうか？

Shopifyテーマをカスタマイズをする方にとって、今回の記事がお役に立てれば幸いです！

Shopifyで「最近閲覧した商品」を表示する方法【アプリ不要】

[ EC ]

[ Programming ]

[ Shopify ]

[ pickup ]