カラーミーで繰り返しコードを直打ちするときの裏技

カラーミーショップは、ショップサイトになにか表示する場合、おもにSmarty(テンプレートエンジン)、独自タグ、HTML/CSSを使って、レイアウトします。

管理画面で登録していない項目を表示する場合は、テンプレート内にコード直打ち(ハードコーディング)することもあります(ただし、テンプレート内にコード直打ちすると、オーナー様ご自身で更新しづらくなります)。

今回は、繰り返し同じようなコードを記述し、かつ運用時にときどき更新が必要な場合に、作業効率がグンと上がるコーディングの工夫を紹介します。
コード部分がコンパクトになるため、可読性やメンテナンス性も上がります。

前置きが長くなりますが、最後までお付き合いください。
サンプルコードはすこし難しいので、使い慣れている方向けです。

SmartyとjQueryを使います

Smartyは、カラーミーショップでふだん使っているテンプレート言語です。
条件文(if)や繰り返し文(section)など、プログラミング言語で見かける構文があります。


カラーミーショップのページを開くと、最初にサーバー側でSmartyが処理され、次にブラウザー側でjQuery(またはJavaScript)が処理される順番になります(重要!)。

SmartyとjQueryを使って、繰り返しのコードを改良します。

どういう場面で効果があるか

直打ちする際に、同じようなコードを繰り返し書く場面があります。
以下に例を挙げます。

  • フリーページに、複数の商品を並べるために、コード直打ちする
  • トップページに、複数のカテゴリ―に関連情報を表示し、時期によって入れ替えがある
  • ヘッダーのグローバルナビゲーションで、コード直打ちで作る
  • 商品以外で、スライドショー機能を使う(お客様の声など、たまに入れ替える)


運用時に更新する可能性が高いか、という点が重要です。
たとえばフッターの文字・リンクはめったに更新しないでしょうから、こういう場所は裏技を使っても、運用時の効率は変わりません。

フリーページに、コード直打ちで商品を並べる例

たとえば、トップページにカテゴリーの商品を表示したい要望があったとします。
そういう場合は、売れ筋商品・おすすめ商品・新着商品に登録して商品を表示するのが一般的です。
カラーミーショップの管理画面を使うほうが、商品の登録・削除がしやすいです。

状況によっては、そうしないこともあります。
今回は、コード直打ちで、ピックアップした商品を並べるページを、フリーページで作るという想定で、サンプルコードを書きました。

コーディングの考え方としては、

  1. SmartyとHTMLを使って、繰り返し表示するベースになるHTMLを作り
  2. 表示項目(商品名、価格、URLなど)をJavaScriptの配列に用意
  3. 作ったHTMLの該当箇所に、表示項目をjQueryで挿入していきます


カラーミーショップのSmartyでは配列に割り当てができませんので、代わりにJavaScriptで配列を用意しておきます

できあがりは、以下のような感じになります。

カラーミー制作の仕事でなにかを並べるとき、スライドショーを使うことが多いので、サンプルコードにもslickを入れています。

サンプルコードと解説

2-8行目、14-32行目は、配列に用意しておく情報です(運用時に更新が発生する箇所)。
サンプルでは、カテゴリ―情報と、商品情報の2種類用意しています。
ここを修正すると、表示している商品を変更できます。修正箇所が上部にまとまっているのでわかりやすく、運用しやすくなります。

80-97行目は、ベースになるHTMLの部分です。
section(Smarty)で繰り返して、必要な数だけHTMLを生成します。
コード直打ちする場合に比べるとコード量が激減します。
また、レイアウト修正が発生した場合には、一つ直すだけでよいというメリットもあります。

35-61行目は、jQueryの処理部分です。
ベースになるHTMLの該当箇所に、ダブらないのclassを割り当てておくことで、配列に用意した表示項目を適切な場所に挿入することができます。

ピックアップ商品を並べるサンプルコード

<script>
//カテゴリー情報(見出し行, URL)
const cate = [
  ['Chair', 'cbid=2815966&csid=0'],
  ['Table', 'cbid=2836319&csid=0']
];
//表示するカテゴリー数 value="??"
<{assign var="loop" value="2"}>

//配列の初期化
const array=[];
for (let l=0; l<cate.length; l++) array[l]=[];

//Chair
array[0] = [
  ['171261598', 'Yellow Chair', '1,084円'],
  ['171261599', 'Yellow Rolling Chair', '1,084円'],
  ['171261602', 'Sofa Chair', '2,000円'],
  ['171261604', 'Wing Chair', '2,500円'],
  ['171261605', 'White Armchair', '9,999円']
];

//Table
array[1] = [
  ['171261607', 'White Table', '500円'],
  ['171261609', 'Gray Table', '500円'],
  ['171261610', 'Square White Table', '900円'],
  ['171261608', 'Wooden Table', '9,999円'],
  ['171261617', 'Wooden Table (lightbox test)', '9,999円']
];
//表示する商品数 value="??"
<{assign var="loop2" value="5"}>


$(function() {
  for(let i=0; i<cate.length; i++) {
    //カテゴリータイトル
    var pos_h = '.wrapper.w' + i + ' .heading';
    var txt_h = '<a href="https://naeco2.shop-pro.jp/?mode=cate&' + cate[i][1] + '">'+ cate[i][0] + '</a>'
    $(pos_h).html(txt_h);   

    for(let j=0; j<array[i].length; j++) {
      var pos = '.wrapper.w' + i + ' .c' + j;

      //画像
      var pos_i = pos + ' > .img';
      var txt_i = '<img src="https://img21.shop-pro.jp/PA01488/210/product/' + array[i][j][0] + '.jpg">'
      $(pos_i).html(txt_i);

      //商品名
      var pos_n = pos + ' > .name';
      var txt_n = '<a href="https://naeco2.shop-pro.jp/?pid=' + array[i][j][0] + '">' + array[i][j][1] + '</a>'
      $(pos_n).html(txt_n);

      //価格
      var pos_p = pos + ' > .price';
      var txt_p = '<span>' + array[i][j][2] + '</span>'
      $(pos_p).html(txt_p);
    }
  }
});
</script>

<style>
.slider {
  margin: 0 -10px;
}
.card {
  padding: 0 10px;
}
.name {
  font-size: 1.2em;
  padding: 5px 0 0;
}
.price {
  color: #999;
}
</style>

<{section name=num loop=$loop}>
<div class="wrapper w<{$smarty.section.num.index}>">	
  <h2 class="heading">
  </h2>
  <div class="slider">
    <{section name=num2 loop=$loop2}>
    <div class="card c<{$smarty.section.num2.index}>">
      <div class="img">
      </div>
      <div class="name">
      </div>
      <div class="price">
      </div>	
    </div>
    <{/section}>
  </div>
</div>
<{/section}>

<link rel="stylesheet" href="https://img.shop-pro.jp/tmpl_js/87/slick.css">
<link rel="stylesheet" href="https://img.shop-pro.jp/tmpl_js/87/slick-theme.css">
<script src="https://img.shop-pro.jp/tmpl_js/87/slick.min.js"></script>

<script>
$(function() {	
  $('.slider').slick({
    arrows: true,		
    slidesToShow: 4,
    slidesToScroll: 4,
    swipeToSlide: true,
    dots: true,	
    responsive: [
    {
      breakpoint: 600, //599px以下のサイズに適用
      settings: {
        slidesToShow: 2,
        adaptiveHeight: true,					
      },
    },
    ],
  });
});  
</script>


繰り返し記述するメインコード部分と商品情報に関連する部分を切り離すことで、メンテナンスしやすくなります。
ただし、jQuery部分は利用する場面に応じて書き換えないといけないので、コーディングが苦手なかたには向いていないです。
商品を並べる以外にもいろいろ使い道がありますので、同じコードを繰り返し直打ちするような場面で検討してみてください。

また、配列を使わない場面でも使えます。
文字数を減らす省コード化になるときはsection文を使うとよいです。
カラーミーショップのテンプレートは文字数上限(65,000文字くらい)がありますので、凝ったページを作るときは省コード化も必要です。テンプレート内が読みやすくもなりますしね。

星(SVG画像)を5つ並べるコード例

<{section name=num loop=5}><svg role="img" aria-hidden="true"><use xlink:href="#star"></use></svg><{/section}>

おわりに

カラーミーショップでは、Smartyの配列の割り当てが機能しないので、JavaScriptの配列に表示項目の情報を入れておくことが大事です。

配列が使えると、カスタマイズで凝ったことができます。


今回は1ページ内に繰り返しコード直打ちするパターンでしたが、複数ページに同じコードを埋め込みたい場合は、フリーページを使った裏技もあります。こちらも併せて参考にしてください。

執筆者

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

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

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