商品詳細ページのレイアウト変更

サブ画像(その他の画像)と規格画像をスライド表示に変更することができます。

■data/Smarty/templates/default/products/detail.tplの記述を変更します。

下記のように、detail_pc_sub.tpldetail_pc_class.tplに「2」を追加してください。
<!--【PC】商品サブ画像-->
<!--{include file="`$smarty.const.TEMPLATE_REALDIR`products/detail_template/detail_pc_sub.tpl"}-->
<!--【PC】規格画像-->
<!--{include file="`$smarty.const.TEMPLATE_REALDIR`products/detail_template/detail_pc_class.tpl"}-->
        
↓「2」を追加する。
<!--【PC】商品サブ画像-->
<!--{include file="`$smarty.const.TEMPLATE_REALDIR`products/detail_template/detail_pc_sub2.tpl"}-->
<!--【PC】規格画像-->
<!--{include file="`$smarty.const.TEMPLATE_REALDIR`products/detail_template/detail_pc_class2.tpl"}-->
        
上記の修正により、サブ画像(その他の画像)と規格画像が6列横並び(左図)からスライド表示(右図)に変更されます。
*
*

画像の登録数が6以上になるとスライドを開始します。下図は画像登録数による表示の違いです。規格画像も同様の表示となります。

  • *
  • *
  • *
  • *
  • *
  • 登録数 1
  • 登録数 2
  • 登録数 3
  • 登録数 4
  • 登録数 5

ソースコードの配置を変えることでレイアウトを変更することができます。

(1)インストール時は、「メイン画像」の下に「カゴに入れる」があり、右側のエリアに「サブ画像」「規格画像」があります。
*
*
(2)下図の例では、「メイン画像」の下に「サブ画像」「規格画像」を配置し、「カゴに入れる」は右側のエリアに移動しています。
*
*
2015年3月10日以前にご購入(ダウンロード)していただいた方はダウンロードしてご利用ください。
レスポンシブWebデザイン版
非レスポンシブ版
このページの先頭へ