モバイル・一覧リストページに画像を表示する
 このカスタマイズはバージョンン2.3.2で行っています。
それ以外のバージョンでは、画像サイズが上手く表示出来ない場合があります。その場合は画像サイズをどちらか一方ではなく、縦横とも数値で指定（例えば width="50" height=60" など）して下さい。
必ず携帯の画面から表示確認して下さい。 |
1、画像にリンクが無い場合
2、画像にリンクがある場合
1、リンクをもたない画像を、ただ挿入する場合は次のソースを追加して下さい。
 → 
cube/data/Smarty/templates/default/mobile/product/list.tpl
47行目
「価格」の前の行に次を挿入。
<img
src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProduct.main_list_image}-->"
alt="<!--{$arrProduct.name|escape}-->" width="48" align="left" /> |
画像を商品詳細ページにリンクする
画像にリンクを持たせたい。そのほうが文字をリンクするよりわかりやすいようなきがする。
そんな場合は以下のソースを書き換えて下さい。
ちなみに画像にリンクをもたせるのでしたら「商品詳細へ」という部分が不要だと思うので、そこを削除しました。
→ 
cube/data/Smarty/templates/default/mobile/product/list.tpl
44行目からを入れ替えて下さい
<!-- ▼商品 ここから -->
<!--{if $i+1<9}--><!--{$i+1|numeric_emoji}--><!--{else}-->[<!--{$i+1}-->]<!--{/if}-->
<!-- 商品名 --><!--{$arrProduct.name|escape}--><br>
価格：
<!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
￥<!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{else}-->
￥<!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜￥<!--{$arrProduct.price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{/if}-->
<br>
<div align="right">
<!--{if $i+1<9}-->
<a href="<!--{$smarty.const.MOBILE_DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->" accesskey="<!--{$i+1}-->">商品詳細へ→</a>
<!--{else}-->
<a href="<!--{$smarty.const.MOBILE_DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->">商品詳細へ→</a>
<!--{/if}-->
</div>
<br>
<!-- ▲商品 ここまで --> |
↓
<div align="right">
<!--{if $i+1<9}-->
<a href="<!--{$smarty.const.MOBILE_DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->" accesskey="<!--{$i+1}-->"><img
src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProduct.main_list_image}-->"
alt="<!--{$arrProduct.name|escape}-->"height="48" align="left" />
</a>
<!--{else}-->
<a href="<!--{$smarty.const.MOBILE_DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->"><img
src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProduct.main_list_image}-->"
alt="<!--{$arrProduct.name|escape}-->" height="48" align="left" />
</a>
<!--{/if}-->
</div>
<p><!-- ▼商品 ここから -->
<!--{if $i+1<9}--><!--{$i+1|numeric_emoji}--><!--{else}-->[<!--{$i+1}-->]<!--{/if}-->
<!-- 商品名 --><!--{$arrProduct.name|escape}--></p>
<p>価格（税込）：
<!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
￥<!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{else}-->
￥<!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜￥<!--{$arrProduct.price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{/if}-->
</p>
<!-- ▲商品 ここまで --> |
赤字の height ですが、widthを優先すると画像によって改行の乱れが出てしまう場合がありましたので高さを固定しました。
扱う写真によっては横を固定したほうがいい場合もあるかと思いますので、ここらへんはそれぞれで考えて下さい。
表示崩れに関しては、重なりますがこちらにまとめておきました。
このカスタマイズはバージョンン2.3.2で行っています。
それ以外のバージョンでは、画像サイズが上手く表示出来ない場合があります。その場合は画像サイズをどちらか一方ではなく、縦横とも数値で指定（例えば width="50" height=60" など）して下さい。
必ず携帯の画面から表示確認して下さい。 |
さらに
 こんなふうに画像をボーダーで囲むほうがいいようでしたら
<div align="right">
<!--{if $i+1<9}-->
<a href="<!--{$smarty.const.MOBILE_DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->" accesskey="<!--{$i+1}-->"><img
src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProduct.main_list_image}-->"
alt="<!--{$arrProduct.name|escape}-->" height="48" border="1" align="left" style="float:left;" /></a>
<!--{else}-->
<a href="<!--{$smarty.const.MOBILE_DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->"><img
src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProduct.main_list_image}-->"
alt="<!--{$arrProduct.name|escape}-->" height="48" border="1" align="left" style="float:left;" /></a>
<p><!-- ▼商品 ここから -->
<!--{if $i+1<9}--><!--{$i+1|numeric_emoji}--><!--{else}-->[<!--{$i+1}-->]<!--{/if}-->
<!-- 商品名 --><!--{$arrProduct.name|escape}--></p>
<p>価格（税込）：
<!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
￥<!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{else}-->
￥<!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜￥<!--{$arrProduct.price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{/if}-->
</p>
<!-- ▲商品 ここまで --> |
ボーダーの太さは赤の数字を適当な太さに調整して下さい。
|
→ 
