カラーミーショップカスタマイズスクール〜商品ページ編
- 1. カスタマイズスクール - 第1期生 vol.3 商品ページ ワークショップ編 」
「
講師:株式会社 paperboy&co. 運営支援グループ
マネージャー/カラーミーショップエバンジェリスト 山下 諭
https://www.facebook.com/grape.ceo ←友達申請はお気軽に!
目 次
Part 1.イントロダクション
Chapter1-1.本講座の目的・ゴール
Chapter1-2.全5回の内容
Chapter1-3.使用ツール
Chapter1-4.おさらい
Part 2.トップページ編
Chapter2-1.はじめに clearfix を指定
Chapter2-2.オプションをインラインフレームで表示
Chapter2-3.定価と販売価格の割引率表示
Chapter2-4.フリーページの内容を商品ページ中に表示
Chapter2-5.スクロール追従型ソーシャルボタンの設置
Chapter2-6.商品説明文を 2 箇所に分割して表示
Chapter2-7.
「カートに入れる」ボタンが画面上部についてくる
Chapter2-8.カート画面をモーダル表示
Chapter2-9.マウスオーバーで商品画像を拡大
Part 3.質疑応答
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-1-
- 2. 【Part1】イントロダクション
Chapter1-1.本講座の目的・ゴール
• 目的はショップ運営の業務効率化
• 技術者養成講座ではない
• ショップオーナーは仕組みとコツを掴む
• プロの WEB デザイナーは理解のスピードを短縮
• WEB デザインの知識のみでフルカスタマイズすると・・・
■心構え
• トライ&エラー
• 細かいことは気にしない
• 割り切りも大切
Chapter1-2.全5回講義の内容〜基礎知識から魔改造まで〜
■第1回:基礎知識の習得
カラーミーショップでテンプレートを編集する前に知るべき内容を学びます。座学メイン。
■第2回:トップページ編
ネットショップの顔となるトップページを実際のソースコードを編集しながら学びます。
共通ページとトップページを押さえればテンプレート編集の7割程度理解できます。
■第3回:商品ページ編(←今回)
商品ページは商品の数だけページが出力されます。カテゴリーやグループによって表示方法を変えたり、
話題の商品をソーシャル拡散したり、商品ページ特有のカスタマイズ方法を学びます。
■第4回:上級編
Smarty の構文を応用したワンランク上のカスタマイズ方法を伝授。
■第5回:魔改造・認定試験編
もはや達人芸や芸術の粋に達している魔改造の事例とその方法をご紹介。
テンプレートマスター認定試験と認定証授与。
-2-
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
- 3. 【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 キャンパススポット視聴権利を付与(2週間視聴可能)
• 受講回数に応じてホームページに掲載できる認定バッジを進呈
すべて受講するとテンプレートマスター認定証を授与
Chapter1-4.少しだけおさらい
■変数: <{$ 変数名 }>
例:<{$item}>
※ {$ 変数名 } こちらの記述が一般的だがカラーミーショップではコードの書きやすさに配慮して
<{$ 変数名 }> という記述になります
※デリミター:区切り文字、山括弧・中括弧
■コメント
<{* コメントは HTML に出ないのでメモとして使います *}>
※これらコメントは誰でも見れるのでちょっとはずかしい…
<!--HTML のコメント -->
/*CSS のコメント */
//JavaScript のコメント
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-3-
- 4. 【Part 3】商品ページ編
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 で商品
ページの中に埋め込むことで確認の手間を省く。
■ソースコード
https://github.com/pepabo-unchi/custom/issues/1
■設置箇所
・商品詳細 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-
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
- 5. 【Part 3】商品ページ編
Chapter.2-3. 定価と販売価格の割引率表示
用意されている $product.discount_rate は販売価格と会員価格の割引率なので、定価と販売価格の割引
率を表示。定価と会員価格なども応用可能。
■ソースコード
https://github.com/pepabo-unchi/custom/issues/2
■設置箇所
・商品詳細 HTML
↓下記ソースコードの直後に
<!-- 割引率 -->
<{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}>%OFF</span>
<{/if}>
■キャプチャ
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-5-
- 7. 【Part 3】商品ページ編
Chapter.2-6. 商品説明文を 2 箇所に分割して表示する
商品説明を画像の上下に表示したり、価格表の中に商品説明を入れたりすることができます。
■ソースコード
https://github.com/pepabo-unchi/custom/issues/5
※画像下と表の中に表示する場合のサンプルです
■設置箇所
・商品詳細 HTML
商品説明箇所に下記ソースを記述
<script type="text/javascript">
$(function() {
var $productExplain = $('#product_explain');
if ($productExplain.find('div').size() > 0) {
$('#exp-1-view').html($('#exp-1').html());
$('#exp-2-view').html($('#exp-2').html());
$('#exp-3-view').html($('#exp-3').html());
$productExplain.hide();
}
});
</script>
<br clear="both">
<div id="product_explain">
<{$product.explain}>
</div>
・商品詳細 CSS
任意の箇所に id を付けることで表示
例)<div id="exp-1-view"></div>
■キャプチャ
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-7-
- 8. 【Part 3】商品ページ編
Chapter.2-7.「カートに入れる」ボタンが画面上部についてくる
カートに入れるボタンの下に説明が続く場合に、上に戻らなくてもカートに追加できるように画面の上に
ボタンを表示。
■ソースコード https://github.com/pepabo-unchi/custom/issues/6
■設置箇所
・商品詳細 HTML
↓カートに入れるの 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> の直前に下記ソースをコピーして貼り付ける→ソースコード参照
・商品詳細 CSS →ソースコード参照
■キャプチャ
Chapter.2-8. カート画面をモーダル表示
カートに追加してから購入完了するまでモーダル表示にすることでページ遷移がなくなり、デザイン上も
統一性を担保した状態で購入まで可能になる。
■ソースコード https://github.com/pepabo-unchi/custom/issues/7
■設置箇所
・商品詳細 HTML
↓ <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> の直前に下記ソースをコピーして貼り付ける→ソースコード参照
・商品詳細 CSS →ソースコード参照
-8-
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止