2012-08-01

[カラーミーショップ] 在庫表を商品詳細画面にiframeで表示

カラーミーショップのカスタマイズメモ。

カラーミーショップでは、カラーやサイズによる在庫表示を別ウィンドウにて行います。
つい最近に機能が追加されて、カートに入れる際のカラー、サイズの選択を
表形式で行えるようになったのですが、気分的には、選択は従来通りリストボックスで、
在庫の有無を表で見せたいところです。
そんなときiframeでオプション在庫表を商品詳細ページに表示するやり方です。

具体的にはオプション在庫表をiframeで商品詳細に表示させ、
そのiframeの高さをオプション在庫表のHTMLでJavasciptによって変更させています。


http://www.aeggplantshop.com/?pid=46543048


<商品詳細>
<{if $opt_url <> ""}>
<div id="option_area">
<iframe id="optiontable" name="optiontable" src="/?mode=opt&pid=<{$product.id}>" width="270" height="100" scrolling="no" align="top" frameborder="0">
<{if $product.stock_disp == true}>
<a href="<{$opt_url}>">オプションの在庫・価格の詳細はコチラ</a>
<{else}>
<a href="<{$opt_url}>">オプションの価格詳細はコチラ</a>
<{/if}>
</iframe>
<div>○ 在庫あり/△ 残りわずか/× 完売しました</div>
</div>
<{/if}>


<オプション在庫・値段表>
<script type="text/javascript">
function iframeResize(){
var ua= window.navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') != -1) {
var PageHight = document.body.scrollHeight + 20;
} else if(ua.indexOf("opera") != -1){
var PageHight = document.body.scrollHeight + 20;
} else {
var PageHight = document.body.scrollHeight - 20;
}
window.parent.document.getElementById('optiontable').style.height = PageHight + 'px';
}
window.onload = iframeResize;
</script>


20の部分はそれぞれで調整の必要があるかと思います。

Comment:

Trackback URL: