マルチリンガルカート
目次＞ セットアップ＞ デザイン設定＞ テンプレートHTML＞テンプレートHTMLのちょっとしたテクニック
テンプレートHTML-Tips
外部リンクをはる

例えばトップページのサイドバーエリアにバナー画像の外部リンクを貼りたい場合は、 トップのテンプレートを編集します。
1.テンプレート編集の選択画面からトップのテンプレート編集画面を開きテンプレートをテキストエディタ等にコピーします。
※元に戻せるように念のためテンプレートをそれぞれ保存しておきましょう。

2.編集窓下の[画像管理]のリンクをクリックし、画像管理画面を開きます。
 

3. パソコンにある画像をサーバにアップし、 ファイル一覧より画像ファイル名をクリックし、 表示された画像のIMGタグをコピーします。-->画像管理
※サイドバーはデフォルト状態ではW150px以上の画像サイズになると ブラウザによってはレイアウトが崩れる場合がございます。
 -->全体の横幅を変える
 

4. コピーしたIMGタグをテキストエディタにペーストしてサイドバーエリアの一番下に挿入し、下記の要領にて 編集してまたテンプレート編集画面にコピー＆ペーストします。

※ <a href="リンク先のURL" target="_blank">< コピーしたIMGタグ></a>
 

5.変更したテンプレートを トップのテンプレートにペーストし[保存]します。
デザイン設定画面に戻り[プレビュー]で確認しましょう。

▲このページの先頭へ
全体の横幅を変える

テンプレートHTMLでは全体の幅デフォルト設定は780pxです。
全体の幅を拡げたい場合や大きな画像を表示させたい場合などに変更します。
1.テンプレート編集の選択画面からCSS編集画面を開き テンプレートをテキストエディタ等にコピーします。
※元に戻せるように念のためテンプレートをそれぞれ保存しておきましょう。
 

2. 外枠のCSSの#wrapperのWidthの値を780pxから大きくしします。 下記の要領にて編集してまたテンプレート編集画面にコピー＆ペーストします。

▲このページの先頭へ
サムネイル画像の大きさを100px以上にしたときは

テンプレートHTMLではサムネイル画像のデフォルト設定は100px 100pxです。
サムネイル画像を大きくした場合ブラウザによってはカラム落ちや画像と文字がかぶったりする場合などに変更します。
1.テンプレート編集の選択画面からCSS編集画面を開き テンプレートをテキストエディタ等にコピーします。
※元に戻せるように念のためテンプレートをそれぞれ保存しておきましょう。
 

2. 商品リストサムネイル枠のCSSそ編集します。thumbnailのwith:100px及びheight:100pxの値をそれぞれサムネイルの画像のサイズに合わせます。 下記の要領にて編集してまたテンプレート編集画面にコピー＆ペーストします。

▲このページの先頭へ
METAタグを追加・編集する

METAタグを追加編集することによってSEO対策・検索エンジン対策を行うことができます。

SEO対策・検索エンジン攻略の基本として、ページのソースに<HEAD>〜</HEAD>タグ内への、 Googleロボットなどの検索エンジンが読み込むタグを挿入することが基本となります。
 

<head>〜</head>内は下記の様に記述されていますので赤字のタグを挿入します。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"">
<title> [<{$shop_name}>]<{$titletag}></title>
<meta name="description"content=" (ページの説明文を挿入) ">
<meta name="keywords" content=" (ここにヒットさせたいキーワードを２〜３種類ぐらい挿入) ">
<link rel="stylesheet" href="<{$css_url}>" >
<script type="text/javascript" charset="UTF-8" src="/js/cart.js></scrip>
<meta name="robots" content="index,follow">
</head>

<title>(ページのタイトルを挿入) </title>
ここに入るタイトルが、検索エンジンの検索結果のページタイトルになります。ヒットさせたいキーワードと、サイトタイトルを入れるます。

<meta name="description" content=" (ページの説明文を挿入)">
ここに説明文を入れます。この説明文が検索結果のタイトルページの下の説明文になります。

<meta name="keywords" content=" (ここにヒットさせたいキーワードを挿入) ">
ここにキーワードを入れます。キーワードは出来れば５つ程度に抑えて下さい。

<meta name="robots" content="index,follow">
このタグを入れておかないと、ロボットがしっかりと読み込みませんので、忘れずに挿入してください


▲このページの先頭へ
検索バーの位置を変える

HTMLテンプレートではサイドバーに検索バーを配置しています。
これを共通ヘッダに変更する場合はトップテンプレートHTMLと共通ヘッダを変更します。
1.テンプレート編集の選択画面から
「トップのテンプレート」及び
「共通ヘッダのテンプレート」を
それぞれテキストエディタ等にコピーします。
※元に戻せるように念のためテンプレートをそれぞれ保存しておきましょう。
 

2. トップのテンプレートHTMLの編集
<!-- 商品検索 -->・・・<!-- 商品検索 -->までをコピーします。
 

3.共通ヘッダのテンプレートHTMLの
（1）<!--// ヘッダメニュー -->・・・<!--// ヘッダメニュー --> の下にペーストします。

(2)サイドバーはスペースの関係上[検索]ボタンの前に<br>タグを入れて改行表示させていますので
<input type="text" name="keyword" size="15"><br> の<br>タグを削除します。

（3）また、右端にボタンを表示させてますので、<div align="right"> <input type="submit" value="Search"></div>部分の
<div align="right">と</div>を削除します。
 

4.変更したテンプレートを 共通ヘッダのテンプレートにペーストし[保存]します。
デザイン設定画面に戻り[プレビュー]で確認しましょう。
 

5.トップのテンプレートHTML編集
<!-- 商品検索 -->・・・<!-- 商品検索 -->迄を削除します。
 

6.変更したテンプレートを トップのテンプレートにペーストし[保存]します。
デザイン設定画面に戻り[プレビュー]で確認しましょう。

7.同様に「商品詳細」のテンプレートHTMLの
<!-- 商品検索 -->・・・<!-- 商品検索 -->迄を削除します。

▲このページの先頭へ
日本国内価格を表示させない+（Overseas）の文言を表示させない

Multilingualcartでは「日本国内価格」と「日本国外価格」 を表示しています。
これを「日本国外価格」のみ表示させる場合には、「トップ」「商品詳細」「カート」 「注文用会員ログイン」「注文入力1」の合計5つのテンプレートを変更します。
１.テンプレート編集の選択画面から
「トップ」「商品詳細」「カート」「注文用会員ログイン」「注文入力1」のテンプレートを テキストエディタ等にコピーします。
※元に戻せるように念のためテンプレートをそれぞれ保存しておきましょう。
※例はsimple-Aになります。simple-Bは「トップ」以外は共通です。
 
２. 「トップ」のテンプレートHTMLの編集

（1）<!-- 並び替え(プルダウンメニュー) -->下の
<option value="2"<{if $sortkey == 2}> selected<{/if}>>The cheapest ranks(Japan)</option>
<option value="3"<{if $sortkey == 3}> selected<{/if}>>The most expansive ranks(Japan)</option>
を削除します。また国外価格を示す（Oversers）も不要になりますので削除します。

（2）<!-- 1商品ずつの定義 -->下の <{$goodslist[key].price}>&nbsp;< {$tsuka_tani}>(in Japan)/
を削除します。また国外価格を示す（Oversers）も不要になりますので削除します。
 

（2）変更したテンプレートを 「トップ」のテンプレートにペーストし[保存]します。 デザイン設定画面に戻り[プレビュー]で確認しましょう。
 

３. 「商品詳細」のテンプレートHTMLの編集

（1）<!-- 商品がある時、商品詳細を表示 -->下の
<tr><td class="cell_t">in Japan</td> <td class="cell_d"><b><{$goods.price}> &nbsp;<{$tsuka_tani}></b></td></tr>
を削除します。また国外価格を示すOverseasはPriceなどに変更します。
 

（2）変更したテンプレートを 「商品詳細」のテンプレートにペーストし[保存]します。 デザイン設定画面に戻り[プレビュー]で確認しましょう。
 

４. 「カート」のテンプレートHTMLの編集
　ここは２箇所削除します。

（１）<!-- 1商品の定義 -->下の
<tr><td class="cell_t">in Japan</td> <td class="cell_d"><b><{$goods.price}> &nbsp;<{$tsuka_tani}></b></td></tr>
及び
<{$cart[key].subtotal}>&nbsp; <{$tsuka_tani}> <br><span class="t10">(Japan)</span><br>
を削除します。また国外価格を示す（Oversers）も不要になりますので<br><span class="t10">(Overseas)</span>を削除します。
 

（2）変更したテンプレートを 「カート」のテンプレートにペーストし[保存]します。 デザイン設定画面に戻り[プレビュー]で確認しましょう。
 

５. 「注文用会員ログイン」のテンプレートHTMLの編集ここは３箇所削除します。

（1）<!-- 1商品の定義 -->下の
<{$cart[key].price}>&nbsp; <{$tsuka_tani}><br> <span class="t10"> (in Japan)</span><br>
と
<{$cart[key].subtotal}>&nbsp; <{$tsuka_tani}> <br> <span class="t10"> (Japan)</span><br>
と
<{$goods_total}>&nbsp; <{$tsuka_tani}><br> <span class="t10"> (in Japan)</span><br>
を削除します。
また国外価格を示す（Oversers）も不要になりますので<br><span class="t10">(Overseas)</span>を削除します。
 

（2）変更したテンプレートを 「注文用会員ログイン」のテンプレートにペーストし[保存]します。 デザイン設定画面に戻り[プレビュー]で確認しましょう。
 

６. 「注文入力1」のテンプレートHTMLの編集
　ここは３箇所削除します。

（１）<!-- 1商品の定義 -->下の
<{$cart[key].price}>&nbsp; <{$tsuka_tani}><br> <span class="t10"> (in Japan)</span><br>
と
<{$cart[key].subtotal}>&nbsp; <{$tsuka_tani}> <br> <span class="t10"> (Japan)</span><br>
と
<{$goods_total}>&nbsp; <{$tsuka_tani}><br> <span class="t10"> (in Japan)</span><br>
を削除します。
また国外価格を示す（Oversers）も不要になりますので<br><span class="t10">(Overseas)</span>を削除します。

 

（2）変更したテンプレートを「注文入力1」のテンプレートにペーストし[保存]します。 デザイン設定画面に戻り[プレビュー]で確認しましょう。
 
7. simple-Bの場合の「トップ」テンプレートHTMLの編集

(1)<!-- 並び替え(リンク) -->下の
<{/if}>&nbsp;
<{if $sortkey == 2}>The cheapest ranks(Japan)<{else}>
<a href="<{$sortkey_lprice}>">The cheapest ranks(Japan)</a>
<{/if}>&nbsp;
<{if $sortkey == 3}>The most expansive ranks(Japan)<{else}>
<a href="<{$sortkey_hprice}>">The most expansive ranks(Japan)</a>
<{/if}>
を削除します。
また国外価格を示す（Oversers）も不要になりますので削除します。

（2）<!-- 1商品ずつの定義 -->下の
<tr><td align="center">
<span class="t10"> <{$goodslist[key].price}> &nbsp;<{$tsuka_tani}>(Japan)</span> </td></tr>
を削除します。
また国外価格を示す（Oversers）も不要になりますので削除します。
▲このページの先頭へ
在庫数を表示させる

「商品一覧画面」に在庫数を表示させるには「トップのテンプレート」を変更します。
「商品詳細画面」に在庫数を表示させるには、「商品詳細のテンプレート」を変更します。
１.「商品一覧画面」の最低注文数の前に在庫数を表示させる場合

（1）テンプレート編集の選択画面から「トップのテンプレート」をテキストエディタ等にコピーします。
※元に戻せるように念のためテンプレートをそれぞれ保存しておきましょう。
 

（2）在庫数が「0」の時は表示しなくても良いので<!--// 在庫がない時はカートボタンを表示しない --> 〜<!--// 在庫がない時はカートボタンを表示しない --> を変更します。

<{if $goodslist[key].zaiko_flag && $goodslist[key].zaikosu <= 0}>
*Sold out
<{else}>の直下に下記のタグを挿入します。
　<{if $goodslist[key].zaiko_flag}>
　 在庫数：<{$goodslist[key].zaikosu}> 　<{/if}>
※　「在庫数」は任意の言語の文言に変更できます。
 

（3）変更したテンプレートを 「トップ」のテンプレートにペーストし[保存]します。
デザイン設定画面に戻り[プレビュー]で確認しましょう。
 

２.「商品詳細画面」の最低注文数の前に在庫数を表示させる場合

（1）テンプレート編集の選択画面から「トップのテンプレート」をテキストエディタ等にコピーします。
※元に戻せるように念のためテンプレートをそれぞれ保存しておきましょう。
 

（2）在庫数が「0」の時は表示しなくても良いので<!--// 在庫がない時はカートボタンを表示しない --> 〜<!--// 在庫がない時はカートボタンを表示しない --> を変更します。

<{if $goods.zaiko_flag && $goods.zaikosu <= 0}>
*SOLD OUT
<{else}>の直下に下記のタグを挿入します。

　<{if $goods.zaiko_flag}>
在庫数：<{$goods.zaikosu}>
<{/if}>

※　「在庫数」は任意の言語の文言に変更できます。
 

（3）変更したテンプレートを 「商品詳細」のテンプレートにペーストし[保存]します。
デザイン設定画面に戻り[プレビュー]で確認しましょう。
▲このページの先頭へ
SOLDOUTを表示する（simple-Bのみ）

サムネイル画像表示のテンプレート『simple-B』では「商品一覧画面」で在庫数「0」の時SOLDOUT表示をしません。
表示させたい場合は「トップのテンプレート」を変更します。
.「トップ」の日本国外価格表示の下にSOLDOUTを表示させる場合

1.テンプレート編集の選択画面から「トップのテンプレート」をテキストエディタ等にコピーします。
※元に戻せるように念のためテンプレートをそれぞれ保存しておきましょう。
 

2.<!--// １商品ずつの定義 --> ・・・<!--// １商品ずつの定義 --> を変更します。

テーブルのセルを一行追加するので </table>の終了タグの直前に下記のタグを挿入します。
<tr><td align="center"><span class="t10"><{if $goodslist[key].zaiko_flag && $goodslist[key].zaikosu <= 0}>*SOLD OUT<{/if}></span></td></tr>
※　「*SOLDOUT」は任意の言語の文言に変更できます。
 

3.変更したテンプレートを 「トップ」のテンプレートにペーストし[保存]します。
デザイン設定画面に戻り[プレビュー]で確認しましょう。

▲このページの先頭へ
通貨近似値表示機能を追加する

トップと商品詳細ページの価格表示を基準通貨+ユーザー(注文者)が選んだ通貨で表示できるようにする 。
「トップ」「商品詳細画面」に通貨近似値表示をさせるには「共通ヘッダ」「トップのテンプレート」「商品詳細のテンプレート」を変更します。
.通貨近似値表示させる場合

1.「共通ヘッダのテンプレート」及び
「トップのテンプレート」
「商品詳細のテンプレート」を
それぞれテキストエディタ等にコピーします。
※元に戻せるように念のためテンプレートをそれぞれ保存しておきましょう。
 

2.共通ヘッダのテンプレートの編集

<!--// 言語選択 --> ・・・<!--// 言語選択 --> を変更します。

<!-- 言語選択 -->
<{if count($langslct) > 0}>
<div id="header_lang_select_area">
タグの直後に下記のタグを挿入します。
<!-- 通貨変換 -->
<{$tsuka_conv_tag}>
<!-- 通貨変換 -->
 

2.トップのテンプレートの編集(simple-Aの場合)
<!--// 1商品ずつの定義 --> ・・・<!--// 1商品ずつの定義 --> を変更します。

<{$goodslist[key].price}>&nbsp;<{$tsuka_tani}>(日本国内価格)/<{$goodslist[key].price2}>&nbsp;<{$tsuka_tani}>(日本国外価格)
タグの直後に下記のタグを挿入します。
<{$goodslist[key].price2_conv}><br>
 

2.トップのテンプレートの編集(simple-Bの場合)
<!--// 1商品ずつの定義 --> ・・・<!--// 1商品ずつの定義 --> を変更します。

<tr><td align="center"><span class="t10"><{$goodslist[key].price}>&nbsp;<{$tsuka_tani}>(Japan)</span></td></tr> <tr><td align="center"><span class="t10"><{$goodslist[key].price2}>&nbsp;<{$tsuka_tani}>(Overseas)</span></td></tr>
タグの直後に下記のタグを挿入します。
<br><{$goodslist[key].price2_conv}>
 

2.商品詳細のテンプレートの編集
<!--// 商品がある時、商品詳細を表示 --> ・・・<!--// 商品がある時、商品詳細を表示 --> を変更します。

<tr><td class="cell_t">in Japan</td><td class="cell_d"><b><{$goods.price}>&nbsp;<{$tsuka_tani}></b></td></tr>
<tr><td class="cell_t">Overseas</td><td class="cell_d"><b><{$goods.price2}>&nbsp;<{$tsuka_tani}></b></td></tr>
タグの直後に下記のタグを挿入します。
<br><{$goods.price2_conv}>
 

3.変更したテンプレートを 「共通ヘッダ」「トップ」「商品詳細」のテンプレートにペーストし[保存]します。
デザイン設定画面に戻り[プレビュー]で確認しましょう。

▲このページの先頭へ

会員登録機能に「会社名」「部署名」を追加する

BtoBで販売する場合など会員情報の項目に「会社名」「部署名」を追加できます。
「会員登録/変更」のテンプレートを変更します。

1.「会員登録/変更」のテンプレートを
テキストエディタ等にコピーします。
※元に戻せるように念のためテンプレートを保存しておきましょう。
 

2.テンプレートの編集

会員登録フォームを変更します。

<span class="note">*</span>の項目は必ず入力してください。
<table class="tbl" cellspacing="1" width="100%">
タグの直後に下記のタグを挿入します。
<tr><td class="cell_t" width="20%">貴社名</td><td class="cell_d" width="*"><input type="text" name="company_name" class="frm_str" size="45" maxlength="85" value="<{$company_name}>"></td>
</tr><tr><td class="cell_t" width="20%">部署名</td><td class="cell_d" width="*">
<input type="text" name="company_section" class="frm_str" size="45" maxlength="85" value="<{$company_section}>"></td></tr>
 

3.変更したテンプレートを 「会員登録/変更」のテンプレートにペーストし[保存]します。
デザイン設定画面に戻り[プレビュー]で確認しましょう。

4.実際に会員登録をしてみて動作確認をしましょう。


▲このページの先頭へ

会員登録に「会員オプション情報（自由項目）」を追加する

BtoBで販売する場合など会員情報の項目に「会社名」「部署名」を追加できます。
「会員登録/変更」のテンプレートを変更します。

1.「会員登録/変更」のテンプレートを
テキストエディタ等にコピーします。
※元に戻せるように念のためテンプレートを保存しておきましょう。
 

2.テンプレートの編集

会員登録フォームを変更します。

<td class="cell_t">パスワード<span class="note">*</span></td>
<td class="cell_d"><input type="password" name="password" class="frm_num" size="20" maxlength="8" value="<{$password}>"><span class="note2">(4〜8文字以内、半角英数字)</span></td>
</tr>
タグの直後に下記のタグを挿入します。
<tr><td class="cell_t" width="20%">オプション項目1</td><td class="cell_d" width="*"><input type="text" name="option_1" class="frm_str" size="45" maxlength="85" value="<{$option_1}>"></td></tr><tr><td class="cell_t" width="20%">オプション項目2</td><td class="cell_d" width="*"><input type="text" name="option_2" class="frm_str" size="45" maxlength="85" value="<{$option_2}>"></td></tr><tr><td class="cell_t" width="20%">オプション項目3</td><td class="cell_d" width="*"><input type="text" name="option_3" class="frm_str" size="45" maxlength="85" value="<{$option_3}>"></td>
</tr><tr><td class="cell_t" width="20%">オプション項目4</td><td class="cell_d" width="*">
<input type="text" name="option_4" class="frm_str" size="45" maxlength="85" value="<{$option_4}>"></td></tr><tr><td class="cell_t" width="20%">オプション項目5</td>
<td class="cell_d" width="*"><input type="text" name="option_5" class="frm_str" size="45" maxlength="85" value="<{$option_5}>"></td></tr>

3.「オプション項目1〜5」は「会員管理：会員オプション情報の設定」で設定したオプション項目名にをそれぞれ変更します。
ここでは一例として「オプション項目1→テスト」「オプション項目2→契機」「オプション項目3→購入回数」「オプション項目4→年収」「オプション項目5→カード情報」の文言に編集しました。

 

4.変更したテンプレートを 「会員登録/変更」のテンプレートにペーストし[保存]します。
デザイン設定画面に戻り[プレビュー]で確認しましょう。

5.実際に会員登録をしてみて動作確認をしましょう。

6.また、HTMLでソースを編集して回答をプルダウンメニューで選択させることも可能です。

目次に戻る 【Multilingualcart 】操作マニュアル