こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。
以前、クリエイターモードで『カテゴリーページ』を”カテゴリー別にデザイン”したいをご紹介しましたが、今回は『カテゴリー識別コード』を使って、クリエイターモードで『商品詳細ページ』を"基本カテゴリー別にデザイン"するソース例をご紹介します！
クリエイターモードで使えるタグはタグリファレンスをご確認ください。
カテゴリー識別コードって？
カテゴリー識別コードは、カテゴリー固有のIDです。
【商品管理】>【カテゴリーの設定】>【カテゴリーの設定】
該当のカテゴリーを選択し「編集」ボタンから「カテゴリー識別コード」を確認することができます。
基本カテゴリーって？
【商品管理】>【商品の設定】>【商品の検索/修正】
「商品カテゴリー」の「基本カテゴリー」項目に星がついているカテゴリーです。
《ご注意！》 一つの商品に複数カテゴリーを設定している場合
・この記事でご案内する内容は「基本カテゴリー」に設定されている商品詳細ページに反映されるソース例です。
※一つの商品に複数のカテゴリーを設定している場合、基本カテゴリ―以外のカテゴリーページから経由された場合でも、デザインが反映されます。
クリエイターモード
『商品詳細ページ』を"基本カテゴリー別デザイン"するソース例
【独自デザイン】>【クリエイターモード】>【商品詳細】内に入力します。
それでは早速、みていきましょう。
【ソース例その1】条件分岐（if文）を使う
「カテゴリー識別コード」を利用して、条件に応じて処理を変えることができます。
▼HTML内へ
▼「ct1」のページにだけ表示する場合（条件分岐：等しい）
|
1 2 3 |
<{if $item.base_category.code == 'ct1'}> ct1のページにだけ表示します。 <{/if}> |
▼「ct1、ct3」のページにだけ表示する場合（条件分岐：もしくは）
|
1 2 3 |
<{if $item.base_category.code == 'ct1' || $item.base_category.code == 'ct3'}> ct1、ct3のページにだけ表示します。 <{/if}> |
▼「ct1」以外のページに表示する場合（条件分岐：異なる）
|
1 2 3 |
<{if $item.base_category.code != 'ct1'}> ct1以外のページに表示します。 <{/if}> |
→かんたんですね。
【ソース例その2】classやidとして使う
カテゴリー別に異なるCSSを適用させることができます。
▼HTML内へ
|
1 2 3 |
<div id="category-<{$item.base_category.code}>"> 内容入力 </div> |
→この内容は全ページに表示されます。
▼CSS内へ
|
1 2 3 4 5 6 7 8 9 |
/*ct1ページにだけに反映します。*/ #category-ct1{ background: #000; /*背景色黒の指定*/ color: #fff;/*文字色白の指定*/ } /*ct2ページにだけに反映します。*/ #category-ct2{ color: #f00;/*文字色赤の指定*/ } |
→指定したカテゴリーの商品詳細ページに対してCSSが適用されます。
【ソース例その3】画像名として使う
カテゴリー別に異なる画像を表示させることができます。
（1）カテゴリー識別コードを画像名としてアップロード！
ファイルサーバーに下記のようにカテゴリー識別コードを画像名としてアップロードしておきます。
例）
「ct1用の画像」icon-ct1.png
「ct2用の画像」icon-ct2.png
「ct3用の画像」icon-ct3.png
画像アップロード先参考：オンラインマニュアル「100MBサーバー/ギガプラス10」
（2）ソースを入力！
画像のファイルパスは、このようになります。
|
1 |
<img src="https://gigaplus.makeshop.jp/ショップID/icon-<{$item.base_category.code}>.png" class="image-<{$item.base_category.code}>"> |
ソースを入力するときは、【ソース例その1】にあった
条件分岐（if文）を用いて下記のように入力しましょう。
▼HTML内へ
▼「ct2」のページに「icon-ct2.png」を表示する場合
|
1 2 3 |
<{if $item.base_category.code == 'ct2'}> <a href="xxx.html"><img src="http://gigaplus.makeshop.jp/ショップID/icon-<{$item.base_category.code}>.png" class="image-<{$item.base_category.code}>"></a> <{/if}> |
▼「ct1、ct2、ct3」のページにそれぞれ、「icon-ct1.png、icon-ct2.png、icon-ct3.png」を表示する場合
|
1 2 3 |
<{if $item.base_category.code == 'ct1' || $item.base_category.code == 'ct2' || $item.base_category.code == 'ct3'}> <a href="xxx.html"><img src="https://gigaplus.makeshop.jp/ショップID/icon-<{$item.base_category.code}>.png" class="image-<{$item.base_category.code}>"></a> <{/if}> |
→ 同じHTMLでも、指定したページによって異なる画像を表示させることができます！
完了
『特定の商品詳細ページにのみ』表示させたい場合は、クリエイターモードで《特定の商品詳細ページ》にのみ画像やテキストを表示させたいをご確認ください。
いかがでしたでしょうか。
クリエイターモードで『商品詳細ページ』を"基本カテゴリー別にデザイン"する際にどうぞご参考ください。
それではまた！
