カラーミーショップカスタマイズスクール〜商品ページ編

カスタマイズスクール　- 第１期生 vol.3　商品ページ　ワークショップ編」
「

講師：株式会社 paperboy&co. 運営支援グループ
　　　マネージャー／カラーミーショップエバンジェリスト　山下　諭
　　　https://www.facebook.com/grape.ceo　←友達申請はお気軽に！

目　次

Part １．イントロダクション
　Chapter1-1．本講座の目的・ゴール
　Chapter1-2．全５回の内容
　Chapter1-3．使用ツール
　Chapter1-4．おさらい

Part ２．トップページ編
　Chapter2-1．はじめに clearfix を指定
　Chapter2-2．オプションをインラインフレームで表示
　Chapter2-3．定価と販売価格の割引率表示
　Chapter2-4．フリーページの内容を商品ページ中に表示
　Chapter2-5．スクロール追従型ソーシャルボタンの設置
　Chapter2-6．商品説明文を 2 箇所に分割して表示
　Chapter2-7．
「カートに入れる」ボタンが画面上部についてくる
　Chapter2-8．カート画面をモーダル表示
　Chapter2-9．マウスオーバーで商品画像を拡大

Part ３．質疑応答

© カラーミーショップ　カスタマイズスクール　※無断転載・複写禁止

-1-

【Part1】イントロダクション
Chapter1-1．本講座の目的・ゴール
• 目的はショップ運営の業務効率化
• 技術者養成講座ではない
• ショップオーナーは仕組みとコツを掴む
• プロの WEB デザイナーは理解のスピードを短縮
• WEB デザインの知識のみでフルカスタマイズすると・・・

■心構え
• トライ＆エラー
• 細かいことは気にしない
• 割り切りも大切

Chapter1-2．全５回講義の内容〜基礎知識から魔改造まで〜
■第１回：基礎知識の習得
カラーミーショップでテンプレートを編集する前に知るべき内容を学びます。座学メイン。

■第２回：トップページ編
　ネットショップの顔となるトップページを実際のソースコードを編集しながら学びます。
共通ページとトップページを押さえればテンプレート編集の７割程度理解できます。

■第３回：商品ページ編（←今回）
商品ページは商品の数だけページが出力されます。カテゴリーやグループによって表示方法を変えたり、
話題の商品をソーシャル拡散したり、商品ページ特有のカスタマイズ方法を学びます。

■第４回：上級編
Smarty の構文を応用したワンランク上のカスタマイズ方法を伝授。

■第５回：魔改造・認定試験編
もはや達人芸や芸術の粋に達している魔改造の事例とその方法をご紹介。
テンプレートマスター認定試験と認定証授与。

-2-


【Part1】イントロダクション
Chapter1-3．編集環境・使用ソフト・アカウントの準備
■編集環境・使用ツール
• 使用ブラウザ：Google Chrome を推奨
http://www.google.com/intl/ja/chrome/browser/
• チャット・画面の確認
http://ec-campus.tv/video/36（要ユーザー登録）
• ソースコード共有
https://github.com/pepabo-unchi/custom/issues
• インターネット接続
Wi-Fi：アクセスポイント・パスワードはお手元の資料にあります

■特典
• カラーミーショップのテストアカウントを発行　※本番用での使用は NG
• 有料テンプレートは購入済の状態
ファッション（ホワイト）http://sample38.shop-pro.jp/
• Facebook ブループに招待　https://www.facebook.com/groups/colormeschool/
受講後に質問することができますのでご活用ください。
• アーカイブ視聴として EC キャンパススポット視聴権利を付与（２週間視聴可能）
• 受講回数に応じてホームページに掲載できる認定バッジを進呈
すべて受講するとテンプレートマスター認定証を授与

Chapter1-4．少しだけおさらい
■変数： <{$ 変数名 }>
例：<{$item}>
※ {$ 変数名 } こちらの記述が一般的だがカラーミーショップではコードの書きやすさに配慮して
　<{$ 変数名 }> という記述になります
※デリミター：区切り文字、山括弧・中括弧

■コメント
<{* コメントは HTML に出ないのでメモとして使います *}>
※これらコメントは誰でも見れるのでちょっとはずかしい…

/*CSS のコメント */
//JavaScript のコメント


-3-

【Part ３】商品ページ編
Chapter2-1．はじめに clearfix を指定
レイアウトが崩れないための指定。

■ソースコード
https://github.com/pepabo-unchi/custom/issues/9

■設置箇所
・共通 CSS の先頭
*{
margin: 0px;
padding: 0px;
}
※ここに下記ソースコードを貼り付け※
.clearfix { zoom: 1; }
.clearfix:after { content: ""; display: block; clear: both; }

Chapter．2-2. オプションをインラインフレームで表示
サイズや色といったオプション項目の在庫はポップアップ表示しないと確認できないので、iframe で商品
ページの中に埋め込むことで確認の手間を省く。


■設置箇所
・商品詳細 HTML
↓下記ソースコードを  の直前に記述
<{if $opt_url <> ""}>
<iframe src="?mode=opt&pid=<{$product.id}>" name="test" width="730" height="300"
scrolling="auto" border="0" frameborder="0"></iframe>
<{/if}>
・オプション在庫・値段表 HTML/CSS
　→ソースコードを参照

■キャプチャ

-4-

Chapter．2-3. 定価と販売価格の割引率表示
用意されている $product.discount_rate は販売価格と会員価格の割引率なので、定価と販売価格の割引
率を表示。定価と会員価格なども応用可能。


■設置箇所
↓下記ソースコードの直後に

<{if $members_login_flg == true && $product.discount_flg == true}><span
class="discount"><{$product.discount_rate}>OFF!!</span>
↓下記ソースコードを貼り付け
<{elseif $product.price_disp == true }>

<{assign var="sData" value=$product.sales|regex_replace:"[[(]+[S]+[)]]":""}>
<{assign var="sData" value=$sData|replace:",":""}>
<{assign var="sData" value=$sData|replace:"円":""}>

<{math equation="round(($sData/105)*100)" assign="sData"}>

<{assign var="tData" value=$product.price|regex_replace:"[[(]+[S]+[)]]":""}>
<{assign var="tData" value=$tData|replace:",":""}>
<{assign var="tData" value=$tData|replace:"円":""}>

<{math equation="round(($tData/105)*100)" assign="tData"}>

<{math equation="round((($tData-$sData)/$tData)*100)" assign="uData"}>

<span style="color:black;display:inline;">→<{$uData}>％ＯＦＦ</span>
<{/if}>

■キャプチャ


-5-

Chapter．2-4. フリーページの内容を商品ページ中に表示
指定のカテゴリーの商品ページに共通のブランド紹介文などを表示してコンテンツを効率的に管理。


■設置箇所
↓下記ソースコードを <{* オプション情報を表示 *}> の直後に記述
<{if $bid_name == " インテリア "}>
<{include file = "file:44/free2.tpl"}>
<{/if}>
※ file:44　←テンプレート No.
※ free2　←フリーページ No.

■キャプチャ

Chapter．2-5. スクロール追従型ソーシャルボタンの設置
ページのどこからでもソーシャル拡散してもらえるように、スクロール追従型の各種ソーシャルボタンを
枠外に設置。


■設置箇所
・商品詳細 HTML →ソースコード参照
・商品詳細 CSS →ソースコード参照
※ブラウザの幅が 1240px より狭い場合は表示しません

-6-


Chapter．2-6. 商品説明文を 2 箇所に分割して表示する
商品説明を画像の上下に表示したり、価格表の中に商品説明を入れたりすることができます。

※画像下と表の中に表示する場合のサンプルです

■設置箇所
商品説明箇所に下記ソースを記述
<script type="text/javascript">
$(function() {
var $productExplain = $('#product_explain');
if ($productExplain.find('div').size() > 0) {
$('#exp-1-view').html($('#exp-1').html());
$productExplain.hide();
}
});
</script>
<br clear="both">
<div id="product_explain">
<{$product.explain}>
</div>
・商品詳細 CSS
任意の箇所に id を付けることで表示
例）<div id="exp-1-view"></div>

■キャプチャ


-7-

Chapter．2-7.「カートに入れる」ボタンが画面上部についてくる
カートに入れるボタンの下に説明が続く場合に、上に戻らなくてもカートに追加できるように画面の上に
ボタンを表示。

■ソースコード　 https://github.com/pepabo-unchi/custom/issues/6
■設置箇所
↓カートに入れるの button 要素に add-cart-button-on-page という id 属性をつける。

<button type="submit"><span> カートに入れる </span></button>

<button type="submit" id="add-cart-button-on-page"><span> カートに入れる </span></button>
・</form> の直前に下記ソースをコピーして貼り付ける→ソースコード参照

■キャプチャ

Chapter．2-8. カート画面をモーダル表示
カートに追加してから購入完了するまでモーダル表示にすることでページ遷移がなくなり、デザイン上も
統一性を担保した状態で購入まで可能になる。

■ソースコード　 https://github.com/pepabo-unchi/custom/issues/7
■設置箇所
↓ <form> 要素に product_form という id 属性をつける。

<form name="product_form" method="post" action="<{$cart_url}>">

<form id="product_form" name="product_form" method="post" action="<{$cart_url}>">
・</form> の直前に下記ソースをコピーして貼り付ける→ソースコード参照

-8-

Chapter．2-8. カート画面をモーダル表示
■キャプチャ

Chapter．2-9. マウスオーバーで商品画像を拡大
1000px 以上の大きい画像を登録してマウスオーバーで拡大表示することで、質感等のディテールを見せ
る。


■設置箇所
・商品詳細 HTML →ソースコード参照

■キャプチャ


-9-

カラーミーショップカスタマイズスクール〜商品ページ編

Recommended

Recommended

More Related Content

More from ec-campus

More from ec-campus (20)

Recently uploaded

Recently uploaded (6)

カラーミーショップカスタマイズスクール〜商品ページ編