カラーミー 2024年08月06日 naeco.jp カラーミーショップ JS / jQuery

カラーミーの検索ページをjQueryで読み込んで、ピックアップ商品を表示する

カラーミーショップの仕事でお話をうかがっているときに、トップページに新着商品を表示させるために、新着商品グループに登録して、そのグループの商品一覧ページをjQueryで読み込んで、トップページに表示する、ような方法を教えてもらいました（こういう方法は通常とりませんので、なるほどと思いました）。

jQueryでページを読み込む方法自体は目新しくありませんが、つかえそうな状況を思いついたので、コードについてかんたんに紹介します。

私が考えるに、トップページにピックアップ商品を表示するときに便利だと思います。
順番に見ていきましょう。

一般的な、トップページに新着商品を表示する方法

まず、トップページに新着商品を表示させる方法について書きます。

一般的な方法は、テンプレートプラスの新着商品に登録して表示する方法です（注：テンプレートプラスの機能は、エコノミープランでは使えません）。
カラーミー公式のヘルプセンターに詳しい記事があります。参考にどうぞ。

参考）新規で登録した商品を新着商品として表示したい

公式テンプレートのいくつかはデフォで表示されますが、表示されないテンプレートの場合は、Smartyでコードを追加して表示するのが一般的です。
私も、いつもこの方法をつかっています。

jQueryでページを読み込む

新着商品は上述のとおり、一般的な方法（テンプレートプラスの登録）をつかうほうが、メリットも多い気がします。

jQueryでページを読み込むデメリットは、読み込み・処理に余分な時間がかかることや、アクセス解析でアクセス数が狂ってきたりする点ではないでしょうか。

とはいえ、カラーミーショップ制作における条件や、内容によっては、jQueryでページを読み込む方法は便利につかえます。
カラーミーショップAPIをつかうよりもかんたんですから、臨機応変に使い分けます。

jQueryでページを読み込む方法として、$.load()をつかいます。ページソースを読み込んだうえで、全部または一部を取り出すことができます。

いろいろと作り込む必要がある場合は機能が多い $.ajax()と、使い分けます（$.load()は簡易的な位置づけ）。

$.load()をつかう方法

カラーミーショップ内のページを読み込む場合は、$.load()をつかうと、かんたんにページを読み込めます。機能の詳細は検索して調べてください。

新着商品よりも、商品検索ページを読み込む方が面白い感じでつかえると思います。
下例はキーワード「chair」で検索した結果のページを読み込んで表示しています。

キーワードを変更すると、夏物や冬物、その他いろいろな文字で、商品をピックアップができます。
また、あらかじめ商品説明にキーワードを仕込んでおくと、狙い通りにピックアップできます。

naeco.jp が制作した無料テンプレートのトップページに実装する場合を想定して、コードを書いてみました。

$.load() コード例

<script>
$(function(){
  $('#srh_item').load("?mode=srh&keyword=chair .c-item-list__item",function(){
    $('#srh_item .c-item-list__item:not(:lt(8))').remove();
  });
});
</script>
<div class="c-section">
  <div class="u-container">	    
    <div class="c-heading">
      <div class="c-heading__left">
        <h2 class="c-heading-ttl">PICKUP</h2>
      </div>
    </div>
  </div>
  <div class="u-container">	
    <ul id="srh_item" class="c-item-list"></ul>
  </div>
</div>

3-5行目が必須で、その他は設置場所にあわせて任意です。
以下、太字部分は任意です。

3行目…chairというキーワードを含む商品を表示したい場合　?mode=srh&keyword=chair
3行目…特定のグループの商品を表示したい場合はURLを変更　?mode=grp&gid=2804750
3行目…"?mode=srh&keyword=chair .c-item-list__item"はセレクタを指定して、要素の一部を取り出している
4行目….c-item-list__item:not(:lt(8))').remove()　表示件数8を超えた要素は削除

$.ajax()をつかって通信する（余談）

やることがシンプルな場合は$.load()だけで作れます。
外部サーバーから読み込む場合や、いろいろ処理が必要になる場合はうまくいかないです。

外部サーバーで何か処理が必要な場合に問題になるのは、異なるドメインによるクロスオリジンリソース共有 (CORS) の制限です。

カラーミー内からカラーミーのページを読み込む場合は$.load()でかんたんに読み込めましたが、異なるドメイン間（カラーミーと外部サーバー）では読み込みなどが制限されるので、コードを工夫しないと通信できませんということです。

カラーミーショップAPIをつかいたい場合も、通常、CORSの制限がありますので、データのやり取りに $.ajax()をつかいます。覚えておくといつか役に立ちます。

昔に書いた、外部サーバーと通信するときのカラーミー側のコード例を置いておきます。
下例の場合は、商品名にキーワードを仕込んでいて、それを切り出して、PHPに渡しています。
PHP側ではカラーミーショップAPIが動作して、必要な情報を取ってきて、カラーミー側に返す処理になっています。

下例だけのコードでは動作しませんので、あくまでもjQueryの勉強用です。
$.ajax、JSONP、callbackあたりがキモだったと思います。
このあたりの資料を調べて、解読してください。

$.ajax コード例

<!-- 関連商品追加コード -->
<div id="kanren">
  <div id="ca-container3" class="ca-container">
    <h2>
      <a href="?mode=srh&sort=p&keyword=<{$product.name|strip_tags:''|regex_replace:'/■.+/':''|escape:'url'}>"><{$product.name|strip_tags:''|regex_replace:'/■.+/':''}>に関連した商品</a>
    </h2>
    <div class="ca-wrapper"></div>
  </div>
</div>
<!--// 関連商品追加コード -->
<script type="text/javascript" src="https://your-server.jp/carousel/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="https://your-server.jp/carousel/jquery.contentcarousel.js"></script>
<script type="text/javascript">
  $.getJSONP = function(url,callback,param) {
    return $.ajax({
      url:url,
      dataType:"jsonp",
      success:callback
    });
  }
  $.getJSONP("https://your-server.jp/php/kanren.php?id=<{$product.id}>&name=<{$product.name|strip_tags:''|regex_replace:'/ ■.+/':''|escape:'url'}>" , onDataHandler)
  function onDataHandler(response) {
    str = response.str;
    $('.ca-wrapper').html(str);
    $('#ca-container3').contentcarousel();
  }
</script>

おわりに

カラーミーショップのトップページに何か表示したいという場合が結構あります。
管理画面内の登録をつかう場合もありますし、今回のように、ページを読み込んで表示する方が都合よいときもあります。

記事で紹介したように、検索キーワードを指定して、ピックアップ商品を並べるという案は、なかなか使い勝手がよい気がします（ページが動的になり面白いです）。

トップページ内だけでなく、（たぶん）フリーページ内でも使えますから、複数の商品カテゴリーから何点かピックアップして一つのページに並べたりもできます。ピックアップページとして、こういうのもいいですよね。

$.load()はよいことばかりでなく、デメリットもありますので、そのあたりとの兼ね合いも考えて、つかってみてください。

追記　2024.08.06

カラーミーWPオプションでつくったブログ記事ページはカラーミーショップと同ドメインなので、$.load()で取ってカラーミーショップ上に表示できるかもしれませんね（確かめていません。やってみないとわかりませんが）。

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら