<script type="text/javascript">独自タグを参照ののち、JavaScriptの処理がなされます。
<!--
sample_function("<{$product.name}>");
//-->
</script>
特定のフォントのときに隙間があくと判明しました。<div style="width: 15px; margin: 0px;font-family:Courier;">ためしに、別のテンプレートで再現するか確認しましたが、問題発生したフォントでも隙間はできませんでした。
<script src="http://～/sample.js" type="text/javascript"></script>ポイントは前回説明済みですので、今回は補足事項のみ。
<form name="product_form" method="post" action="<{$cart_url}>">
（中略）
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }>
<tr>
<th>購入数</th>
<td style="padding: 0px 5px;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0px;">
<input type="text" name="product_num" value="<{$product.init_num}>" style="width: 50px;" onKeyUp="change_key_num()"/>
</td>
<td style="padding: 0px;">
<div style="width: 15px; margin: 0px;">
<a href="<{$num_up_url|regex_replace:'/f_change_num2/':'change_button_num'}>"><img src="<{$num_up_img_url}>"></a>
<a href="<{$num_dw_url|regex_replace:'/f_change_num2/':'change_button_num'}>"><img src="<{$num_dw_img_url}>"></a>
</div>
</td>
<td style="padding: 0px;"><{$product.unit}></td>
</tr>
</table>
</td>
</tr>
<{/if}>
（中略）
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }>
<tr>
<th>購入数</th>
<td style="padding: 0px 5px;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0px;">
<input type="text" name="product_num2" value="<{$product.init_num}>" style="width: 50px;" onKeyUp="change_key_num2()" />
</td>
<td style="padding: 0px;">
<div style="width: 15px; margin: 0px;">
<a href="<{$num_up_url|regex_replace:'/f_change_num2\(document.product_form.product_num/':'change_button_num(document.product_form.product_num2'}>"><img src="<{$num_up_img_url}>"></a>
<a href="<{$num_dw_url|regex_replace:'/f_change_num2\(document.product_form.product_num/':'change_button_num(document.product_form.product_num2'}>"><img src="<{$num_dw_img_url}>"></a>
</div>
</td>
<td style="padding: 0px;"><{$product.unit}></td>
</tr>
</table>
</td>
</tr>
<{/if}>
（中略）
</form>
function change_key_num(){
document.product_form.product_num2.value = document.product_form.product_num.value;
}
function change_key_num2(){
document.product_form.product_num.value = document.product_form.product_num2.value;
}
//***********************************
//個数UP・DOWNボタン処理（差し替え版）
//***********************************
function change_button_num(select, pType, pMinNum, pStockNum) {
if( select.value.match(/[^0-9]/)){ select.value = pMinNum; return; }
wNum = parseInt(select.value);
if (pType == "0" && wNum > pMinNum) {
document.product_form.product_num.value = String(wNum-1);
document.product_form.product_num2.value = String(wNum-1);
}
if (pType == "1") {
if (pStockNum) {
if (wNum >= pStockNum) return;
}
document.product_form.product_num.value = String(wNum+1);
document.product_form.product_num2.value = String(wNum+1);
}
}
<form name="product_form" method="post" action="<{$cart_url}>">以下の独自タグで、JavaScriptを呼び出します。
（中略）
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }>
<tr>
<th>購入数</th>
<td style="padding: 0px 5px;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0px;">
<input type="text" name="product_num" value="<{$product.init_num}>" style="width: 50px;" />
</td>
<td style="padding: 0px;">
<div style="width: 15px; margin: 0px;">
<a href="<{$num_up_url}>"><img src="<{$num_up_img_url}>"></a>
<a href="<{$num_dw_url}>"><img src="<{$num_dw_img_url}>"></a>
</div>
</td>
<td style="padding: 0px;"><{$product.unit}></td>
</tr>
</table>
</td>
</tr>
<{/if}>
（中略）
</form>
//***********************************数量を増減させるボタンを押すと、cart.js（最初からあるJavaScript）の関数「f_change_num2」が呼び出されます。pTypeで増か減かの条件分岐。
//個数UP・DOWNボタン処理
//***********************************
function f_change_num2(select, pType, pMinNum, pStockNum) {
if( select.value.match(/[^0-9]/)){ select.value = pMinNum; return; }
wNum = parseInt(select.value);
if (pType == "0" && wNum > pMinNum) {
select.value = String(wNum-1);
}
if (pType == "1") {
if (pStockNum) {
if (wNum >= pStockNum) return;
}
select.value = String(wNum+1);
}
}
<div id="result" style="color:#666;padding:0px 5px;margin-bottom:15px;">
検索条件
[カテゴリー]：<{if $search_category!=""}><strong><{$search_category}></strong><{/if}>
[検索文字]：<{if $search_keyword!=""}><strong><{$search_keyword}></strong><{/if}>
<br />
HIT件数：<strong><{$productlist_num}></strong>件
</div>
<table class="main_title" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:1px;">
<tr><td id="title"><img src="http://img.shop-pro.jp/tmpl_img/11/sp.gif" width="15px" height="5px">▼ 検索結果</td></tr>
</table>
//条件分岐。見出し変更と関数呼び出し
<{if $search_keyword=="指定なし"}>
<script type="text/javascript">
<!--
document.getElementById("title").innerHTML = "▼ カテゴリー別商品";
SetCategory("<{$smarty.get.cid}>","<{$search_category}>","<{$shop_name}>");
//-->
</script>
<{else}>
<script type="text/javascript">
<!--
document.getElementById("title").innerHTML = "▼ 検索結果";
//-->
</script>
<{/if}>
//ウィンドウのタイトル変更、パンくずリスト作成
function SetCategory(cid,cname,sname) {
strTag1=' <a href="./">ホーム</a> ＞ <a href="./?mode=srh&sort=n&cid=';
strTag2='">';
strTag3='</a>';
if(cid != "") {
document.getElementById("result").innerHTML=strTag1+cid+"%2C0&keyword="+strTag2+cname+strTag3;
window.document.title = cname + " - " + sname;
}
else {
document.getElementById("result").innerHTML=strTag1+"& keyword="+strTag2+"全ての商品"+strTag3;
window.document.title = "全ての商品 - " + sname;
}
}
<script type="text/javascript">
function SetCategory(cid,cname,sname) {
～
}
</script>
大カテゴリーを”キーワードなし”で検索し、その結果を表示させるこの方法だと、大カテゴリー下の小カテゴリーの商品を含め全商品が表示可能です。
<{if $search_keyword == "指定なし"}>（大カテゴリーの商品一覧用処理）は「document.getElementById(id名).innerHTML」を使用します。
（大カテゴリーの商品一覧用処理）
<{/if}>
<{if $product.ot1_url != ""}>その他画像１のURLが空白でなければ、画像+画像のURLリンクを作成します、という意味です（以下２～3も同様です）。URLは「参照」ボタンをクリックしたあとで、一定の基準にのっとり、自動的に生成されます。
<div class="sub">
<a target="_blank" href="<{$product.ot1_url}>"><img src="<{$product.ot1_url}>" /></a>
</div>
<{/if}>
<{if $product.ot2_url != ""}>
<div class="sub">
<a target="_blank" href="<{$product.ot2_url}>"><img src="<{$product.ot2_url}>" /></a>
</div>
<{/if}>
<{if $product.ot3_url != ""}>
<div class="sub">
<a target="_blank" href="<{$product.ot3_url}>"><img src="<{$product.ot3_url}>" /></a>
</div>
<{/if}>
[並び順を変更] ・おすすめ順 ・価格順 ・新着順となっています。具体的には、以下のように並び替えられます。
「GMOとくとくID」でログインしたユーザーによる商品の購入。（販売手数料：1.5%）興味のある方は、カラーミー公式の「販売手数料の課金対象について」をご覧下さい。
カラメルを一度訪れた後30日以内にショップに訪れて購入した受注の場合、表示されます。（販売手数料：3.5%）常連のお客様であっても、がんがん販売手数料がとられ、理不尽と感じる方も多いようです。
エンドユーザー様が、『カラメル』へアクセスをすると、カラメルのCookieが発行されます。
そのため、カラメル経由からの誘導でなくても、カラメルのCookieを保有しているエンドユーザー様は、販売手数料の対象となります。
×SSL非対応 background-image:url(http://hoge.heteml.jp/bg.jpg);
○SSL対応 background-image:url(https://ssl*.heteml.jp/hoge/bg.jpg);
https://img01.shop-pro.jp/PA01234/001/etc/hogehoge.jpg背景画像と配色が変更できれば、デザイン的には必要十分と思います。
