バージョン選択

フォーラム

メニュー

オンライン状況

56 人のユーザが現在オンラインです。 (43 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 56
もっと...

サイト内検索

質問 > フロント機能 > 横型商品一覧にカゴ入れるボタンをつけたい。

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
AMUAMU
投稿日時: 2011/4/28 3:29
対応状況: −−−
登録日: 2009/5/2
居住地: 東京都
投稿: 2712
Re: 横型商品一覧にカゴ入れるボタンをつけたい。
ご自身で推察されているように、$idの値も各商品毎に正しい値が割り当てられるように修正が必要だと思います。


----------------
EC-CUBE公式エヴァンジェリスト
EC-CUBEインテグレートパートナー (株)スピリット・オブ
移転・拡張・高速化・問題解決
各種カスタマイズ・支援依頼承ります。

[url=h

sower
投稿日時: 2011/4/29 9:10
対応状況: −−−
半人前
登録日: 2011/4/19
居住地:
投稿: 11
Re: 横型商品一覧にカゴ入れるボタンをつけたい。
お世話になっています。

いい加減な(?)推察でしたが、$idあたりの修正が必要とのお言葉をいただき勇気を持っていろいろやってみましたが、いまだ解決せずまた書き込みしました。

行き詰まっているのは、<!--{$id}-->を<!--{$arrProducts[cnt].product_id}-->に、2つ目以降は[cnt]を[$cnt3]、[$cnt2]と書き直すと、なんだかいい感じなのですが、カートへは左上の商品しか入りません。

もしかして、以下の部分の修正も必要なのではと思いましたが、これまたてんで分かりません。

<form name="form1" id="form1" method="post" action="<!--{$smarty.server.REQUEST_URI|escape}-->">
<input type="hidden" name="pageno" value="<!--{$tpl_pageno|escape}-->" />
<input type="hidden" name="mode" value="" />
<input type="hidden" name="orderby" value="<!--{$orderby|escape}-->" />
<input type="hidden" name="product_id" value="" />

すみません、どことどこを直す必要があるのか、もう少し分かるように教えていただければ幸いです。
(これはマイナーなカスタマイズなのでしょうか。取り組みたい人も、取り組んだ人も少ない?)
fukap
投稿日時: 2011/4/29 17:39
対応状況: −−−
仙人
登録日: 2009/7/7
居住地: 滋賀県
投稿: 907
Re: 横型商品一覧にカゴ入れるボタンをつけたい。
そのカスタマイズはやったことがないので、参考程度に。

$cnt2 や $cnt3 はassignで定義しないと使えないと思います。
<!--{section name=cnt loop=$arrProducts}-->〜<!--{/section}-->の間で、

  <!--{assign var=left value=$smarty.section.cnt.index*3}-->
  <!--{assign var=center value=$smarty.section.cnt.index*3+1}-->
  <!--{assign var=right value=$smarty.section.cnt.index*3+2}-->

を書き加え、1列目の商品を、
<!--{$arrProducts[$left].product_id}-->

2列目の商品を、
<!--{$arrProducts[$center].product_id}-->

3列目の商品を、
<!--{$arrProducts[$right].product_id}-->

とやれば、うまくいったりしませんか?
なんとなくですが。
sower
投稿日時: 2011/4/29 23:48
対応状況: −−−
半人前
登録日: 2011/4/19
居住地:
投稿: 11
Re: 横型商品一覧にカゴ入れるボタンをつけたい。
fukap様、書き込みありがとうございます。

私の理解があまりにも悪いため、意味することと違うことをしている可能性もありますが、教えていただいたことをもとに、以下のように直してみました。

<!--{section name=cnt loop=$arrProducts step=3}-->
<!--{assign var=left value=$smarty.section.cnt.index*3+1}-->
<!--{assign var=center value=$smarty.section.cnt.index*3+2}-->
<!--{assign var=right value=$smarty.section.cnt.index*3+3}-->
<div class="item-line">
<!-- ▼1つめの商品 -->
<!--{assign var=id value=$arrProducts[cnt].product_id}-->

(中略)

1行目はEC-CUBEの学校の講座を参照した横型商品一覧の横3商品型のいち文。2,3,4行目はfukap様に教えていただいた文。5行目以降からはそのまま。そして、これにカゴボタンを「商品コメント」の下に挿入。

<!--▼買い物かご-->
<div class="in_cart">
<dl>
<!--{assign var=class1 value=classcategory_id`$id`_1}-->
<!--{assign var=class2 value=classcategory_id`$id`_2}-->
<!--{if $tpl_classcat_find1[$id]}-->
<dt><!--{$tpl_class_name1[$id]|escape}-->:</dt>
<dd>
<select name="<!--{$class1}-->" style="<!--{$arrErr[$class1]|sfGetErrorColor}-->" onchange="lnSetSelect('<!--{$class1}-->', '<!--{$class2}-->', '<!--{$id}-->','');">
<option value="">選択してください</option>
<!--{html_options options=$arrClassCat1[$id] selected=$arrForm[$class1]}-->
</select>
<!--{if $arrErr[$class1] != ""}-->
<br /><span class="attention">※ <!--{$tpl_class_name1[$id]}-->を入力して下さい。</span>
<!--{/if}-->
</dd>
<!--{/if}-->
<!--{if $tpl_classcat_find2[$id]}-->
<dt><!--{$tpl_class_name2[$id]|escape}-->:</dt>
<dd>
<select name="<!--{$class2}-->" style="<!--{$arrErr[$class2]|sfGetErrorColor}-->">
<option value="">選択してください</option>
</select>
<!--{if $arrErr[$class2] != ""}-->
<br /><span class="attention">※ <!--{$tpl_class_name2[$id]}-->を入力して下さい。</span>
<!--{/if}-->
</dd>
<!--{/if}-->
<!--{assign var=quantity value=quantity`$id`}-->
<dt>個数:</dt>
<dd><input type="text" name="<!--{$quantity}-->" size="3" class="box54" value="<!--{$arrForm[$quantity]|default:1}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr[$quantity]|sfGetErrorColor}-->" />
<!--{if $arrErr[$quantity] != ""}-->
<br /><span class="attention"><!--{$arrErr[$quantity]}--></span>
<!--{/if}-->
</dd>
</dl>
<div class="cartbtn">
<a href="<!--{$smarty.server.REQUEST_URI|escape}-->#product<!--{$arrProducts[$left].product_id}-->" onclick="fnChangeAction('<!--{$smarty.server.REQUEST_URI|escape:"javascript"}-->#product<!--{$arrProducts[$left].product_id}-->'); fnModeSubmit('cart','product_id','<!--{$arrProducts[$left].product_id}-->'); return false;" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin_on.gif','cart<!--{$arrProducts[$left].product_id}-->');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin.gif','cart<!--{$arrProducts[$left].product_id}-->');">
<img src="<!--{$TPL_DIR}-->img/products/b_cartin.gif" width="115" height="25" alt="カゴに入れる" name="cart<!--{$arrProducts[$left].product_id}-->" id="cart<!--{$arrProducts[$left].product_id}-->" /></a>
</div>
</div>
<!--▲買い物かご-->
</div>
<!-- ▲1つめの商品 -->

(以下略)

上の赤字の部分のように、<!--{$id}-->をfukap様に教えていただいたものと差し替えました。結果は、まだカゴボタンは機能しません。具体的にはボタンをクリックしてもカゴ画面に移動せず、また商品がカゴに入ることもありません。さらにボタンのロールオーバーが正しく反応するのは上の1行目だけで、2行目はどれにマウスオーバーしても左端が反応します。こういった具合です。

現在、すでにできているのは横型商品一覧と、それを横3商品に直せたところまでです。カゴボタンの設置は見た目だけできていますが、ボタンは正しく機能できていません。(たぶん、個数や規格の機能も横型にして動かなくなったかもしれませんが、そこまでまだ検証できていません…)
なんとかなればいいのですが。もう少しいじってみようと思います。
fukap
投稿日時: 2011/4/30 11:40
対応状況: −−−
仙人
登録日: 2009/7/7
居住地: 滋賀県
投稿: 907
Re: 横型商品一覧にカゴ入れるボタンをつけたい。
いえ、こちらこそ斜め読みでご迷惑掛けてすいません。
私もEC-CUBE勉強中なので、ご容赦ください。

今度は「EC-CUBEの学校」の該当記事を読んできました。
以下のようなコードでどうでしょうか?(長くてスイマセン)

<!--{section name=cnt loop=$arrProducts step=3}-->

<div class="item-line">

  <!-- ▼1つめの商品 -->

  <!--{assign var=id value=$arrProducts[cnt].product_id}-->

  <div class="item-box-wrap">

  <!--商品写真-->
    <div class="item-box-photo">
      <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[cnt].product_id}-->"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProducts[cnt].main_list_image}-->" alt="<!--{$arrProducts[cnt].name|escape}-->" /></a>
    </div>

  <!--商品名-->
    <h3>
      <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[cnt].product_id}-->"><!--{$arrProducts[cnt].name|escape}-->:<!--{$id}--></a>
    </h3>

  <!--商品価格-->
    <div class="item-box-price">
    <!--{if $arrProducts[cnt].price02_min == $arrProducts[cnt].price02_max}-->
      <!--{$arrProducts[cnt].price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->

    <!--{else}-->

      <!--{$arrProducts[cnt].price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProducts[cnt].price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->

    <!--{/if}-->円

    </div>


  <!--売り切れの場合-->

    <!--{if $arrProducts[cnt].stock_max == 0 && $arrProducts[cnt].stock_unlimited_max != 1}-->

    <div class="item-box-soldout">
      申し訳ございませんが、只今品切れ中です。
    </div>

    <!--{/if}-->

  <!--商品コメント-->
    <div class="item-box-comment">
      <!--{$arrProducts[cnt].main_list_comment|escape|nl2br}-->
    </div>

          <!--▼買い物かご-->
           <div class="in_cart">
             <dl>

         <!--{assign var=class1 value=classcategory_id`$id`_1}-->
         <!--{assign var=class2 value=classcategory_id`$id`_2}-->
         <!--{if $tpl_classcat_find1[$id]}-->
           <dt><!--{$tpl_class_name1[$id]|escape}-->:</dt>
           <dd>
             <select name="<!--{$class1}-->" style="<!--{$arrErr[$class1]|sfGetErrorColor}-->" onchange="lnSetSelect('<!--{$class1}-->', '<!--{$class2}-->', '<!--{$id}-->','');">
             <option value="">選択してください</option>
             <!--{html_options options=$arrClassCat1[$id] selected=$arrForm[$class1]}-->
             </select>
             <!--{if $arrErr[$class1] != ""}-->
             <br /><span class="attention">※ <!--{$tpl_class_name1[$id]}-->を入力して下さい。</span>
             <!--{/if}-->
           </dd>
         <!--{/if}-->
         <!--{if $tpl_classcat_find2[$id]}-->
           <dt><!--{$tpl_class_name2[$id]|escape}-->:</dt>
           <dd>
             <select name="<!--{$class2}-->" style="<!--{$arrErr[$class2]|sfGetErrorColor}-->">
             <option value="">選択してください</option>
             </select>
             <!--{if $arrErr[$class2] != ""}-->
             <br /><span class="attention">※ <!--{$tpl_class_name2[$id]}-->を入力して下さい。</span>
             <!--{/if}-->
           </dd>
         <!--{/if}-->

         <!--{assign var=quantity value=quantity`$id`}-->
           <dt>個数:</dt>
           <dd><input type="text" name="<!--{$quantity}-->" size="3" class="box54" value="<!--{$arrForm[$quantity]|default:1}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr[$quantity]|sfGetErrorColor}-->" />
             <!--{if $arrErr[$quantity] != ""}-->
             <br /><span class="attention"><!--{$arrErr[$quantity]}--></span>
             <!--{/if}-->
           </dd>
         </dl>
             <div class="cartbtn">
             <a href="<!--{$smarty.server.REQUEST_URI|escape}-->#product<!--{$id}-->" onclick="fnChangeAction('<!--{$smarty.server.REQUEST_URI|escape:"javascript"}-->#product<!--{$id}-->'); fnModeSubmit('cart','product_id','<!--{$id}-->'); return false;" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin_on.gif','cart<!--{$id}-->');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin.gif','cart<!--{$id}-->');">
               <img src="<!--{$TPL_DIR}-->img/products/b_cartin.gif" width="115" height="25" alt="カゴに入れる" name="cart<!--{$id}-->" id="cart<!--{$id}-->" /></a>
             </div>
           </div>
             <!--▲買い物かご-->

  </div>

  <!-- ▲1つめの商品 -->


  <!-- ▼2つめの商品 -->

  <!--{assign var=cnt4 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-2` }-->
	<!--{assign var=id4 value=$arrProducts[$cnt4].product_id}-->

  <!--{if $arrProducts[$cnt4].product_id}-->

  <div class="item-box-wrap">

  <!--商品写真-->
    <div class="item-box-photo">
      <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[$cnt4].product_id}-->"><img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProducts[$cnt4].main_list_image}-->" alt="<!--{$arrProducts[$cnt4].name|escape}-->" /></a>
    </div>

  <!--商品名-->
    <h3>
      <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[$cnt4].product_id}-->"><!--{$arrProducts[$cnt4].name|escape}-->:<!--{$cnt4}--></a>
    </h3>

  <!--商品価格-->

    <div class="item-box-price">

    <!--{if $arrProducts[$cnt4].price02_min == $arrProducts[$cnt4].price02_max}-->
      <!--{$arrProducts[$cnt4].price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
    <!--{else}-->

      <!--{$arrProducts[$cnt4].price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProducts[$cnt4].price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->

    <!--{/if}-->円

    </div>

  <!--売り切れの場合-->

    <!--{if $arrProducts[$cnt4].stock_max == 0 && $arrProducts[$cnt4].stock_unlimited_max != 1}-->

    <div class="item-box-soldout">
      申し訳ございませんが、只今品切れ中です。
    </div>

    <!--{/if}-->

  <!--商品コメント-->

    <div class="item-box-comment">

      <!--{$arrProducts[$cnt4].main_list_comment|escape|nl2br}-->

    </div>

          <!--▼買い物かご-->
           <div class="in_cart">
             <dl>

         <!--{assign var=class1 value=classcategory_id`$id4`_1}-->
         <!--{assign var=class2 value=classcategory_id`$id4`_2}-->
         <!--{if $tpl_classcat_find1[$id4]}-->
           <dt><!--{$tpl_class_name1[$id4]|escape}-->:</dt>
           <dd>
             <select name="<!--{$class1}-->" style="<!--{$arrErr[$class1]|sfGetErrorColor}-->" onchange="lnSetSelect('<!--{$class1}-->', '<!--{$class2}-->', '<!--{$id4}-->','');">
             <option value="">選択してください</option>
             <!--{html_options options=$arrClassCat1[$id4] selected=$arrForm[$class1]}-->
             </select>
             <!--{if $arrErr[$class1] != ""}-->
             <br /><span class="attention">※ <!--{$tpl_class_name1[$id4]}-->を入力して下さい。</span>
             <!--{/if}-->
           </dd>
         <!--{/if}-->
         <!--{if $tpl_classcat_find2[$id4]}-->
           <dt><!--{$tpl_class_name2[$id4]|escape}-->:</dt>
           <dd>
             <select name="<!--{$class2}-->" style="<!--{$arrErr[$class2]|sfGetErrorColor}-->">
             <option value="">選択してください</option>
             </select>
             <!--{if $arrErr[$class2] != ""}-->
             <br /><span class="attention">※ <!--{$tpl_class_name2[$id4]}-->を入力して下さい。</span>
             <!--{/if}-->
           </dd>
         <!--{/if}-->

         <!--{assign var=quantity value=quantity`$id4`}-->
           <dt>個数:</dt>
           <dd><input type="text" name="<!--{$quantity}-->" size="3" class="box54" value="<!--{$arrForm[$quantity]|default:1}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr[$quantity]|sfGetErrorColor}-->" />
             <!--{if $arrErr[$quantity] != ""}-->
             <br /><span class="attention"><!--{$arrErr[$quantity]}--></span>
             <!--{/if}-->
           </dd>
         </dl>
             <div class="cartbtn">
             <a href="<!--{$smarty.server.REQUEST_URI|escape}-->#product<!--{$arrProducts[$cnt4].product_id}-->" onclick="fnChangeAction('<!--{$smarty.server.REQUEST_URI|escape:"javascript"}-->#product<!--{$arrProducts[$cnt4].product_id}-->'); fnModeSubmit('cart','product_id','<!--{$arrProducts[$cnt4].product_id}-->'); return false;" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin_on.gif','cart<!--{$arrProducts[$cnt4].product_id}-->');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin.gif','cart<!--{$arrProducts[$cnt4].product_id}-->');">
               <img src="<!--{$TPL_DIR}-->img/products/b_cartin.gif" width="115" height="25" alt="カゴに入れる" name="cart<!--{$id4}-->" id="cart<!--{$id4}-->" /></a>
             </div>
           </div>
             <!--▲買い物かご-->

  </div>

  <!--{/if}-->

  <!-- ▲2つめの商品 -->

  <!-- ▼3つめの商品 -->

  <!--{assign var=cnt3 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1` }-->
	<!--{assign var=id3 value=$arrProducts[$cnt3].product_id}-->

  <!--{if $arrProducts[$cnt3].product_id}-->

  <div class="item-box-wrap">


  <!--商品写真-->
    <div class="item-box-photo">
      <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[$cnt3].product_id}-->"><img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProducts[$cnt3].main_list_image}-->" alt="<!--{$arrProducts[$cnt3].name|escape}-->" /></a>
    </div>

  <!--商品名-->
    <h3>
      <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[$cnt3].product_id}-->"><!--{$arrProducts[$cnt3].name|escape}-->:<!--{$cnt3}--></a>
    </h3>

  <!--商品価格-->

    <div class="item-box-price">
    <!--{if $arrProducts[$cnt3].price02_min == $arrProducts[$cnt3].price02_max}-->
      <!--{$arrProducts[$cnt3].price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
    <!--{else}-->

      <!--{$arrProducts[$cnt3].price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProducts[$cnt3].price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->

    <!--{/if}-->円

    </div>

  <!--売り切れの場合-->

    <!--{if $arrProducts[$cnt3].stock_max == 0 && $arrProducts[$cnt3].stock_unlimited_max != 1}-->
    <div class="item-box-soldout">
      申し訳ございませんが、只今品切れ中です。
    </div>

    <!--{/if}-->

  <!--商品コメント-->

    <div class="item-box-comment">

      <!--{$arrProducts[$cnt3].main_list_comment|escape|nl2br}-->

    </div>

          <!--▼買い物かご-->
           <div class="in_cart">
             <dl>

         <!--{assign var=class1 value=classcategory_id`$id3`_1}-->
         <!--{assign var=class2 value=classcategory_id`$id3`_2}-->
         <!--{if $tpl_classcat_find1[$id3]}-->
           <dt><!--{$tpl_class_name1[$id3]|escape}-->:</dt>
           <dd>
             <select name="<!--{$class1}-->" style="<!--{$arrErr[$class1]|sfGetErrorColor}-->" onchange="lnSetSelect('<!--{$class1}-->', '<!--{$class2}-->', '<!--{$id3}-->','');">
             <option value="">選択してください</option>
             <!--{html_options options=$arrClassCat1[$id3] selected=$arrForm[$class1]}-->
             </select>
             <!--{if $arrErr[$class1] != ""}-->
             <br /><span class="attention">※ <!--{$tpl_class_name1[$id3]}-->を入力して下さい。</span>
             <!--{/if}-->
           </dd>
         <!--{/if}-->
         <!--{if $tpl_classcat_find2[$id3]}-->
           <dt><!--{$tpl_class_name2[$id3]|escape}-->:</dt>
           <dd>
             <select name="<!--{$class2}-->" style="<!--{$arrErr[$class2]|sfGetErrorColor}-->">
             <option value="">選択してください</option>
             </select>
             <!--{if $arrErr[$class2] != ""}-->
             <br /><span class="attention">※ <!--{$tpl_class_name2[$id3]}-->を入力して下さい。</span>
             <!--{/if}-->
           </dd>
         <!--{/if}-->

         <!--{assign var=quantity value=quantity`$id3`}-->
           <dt>個数:</dt>
           <dd><input type="text" name="<!--{$quantity}-->" size="3" class="box54" value="<!--{$arrForm[$quantity]|default:1}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr[$quantity]|sfGetErrorColor}-->" />
             <!--{if $arrErr[$quantity] != ""}-->
             <br /><span class="attention"><!--{$arrErr[$quantity]}--></span>
             <!--{/if}-->
           </dd>
         </dl>
             <div class="cartbtn">
             <a href="<!--{$smarty.server.REQUEST_URI|escape}-->#product<!--{$arrProducts[$cnt3].product_id}-->" onclick="fnChangeAction('<!--{$smarty.server.REQUEST_URI|escape:"javascript"}-->#product<!--{$arrProducts[$cnt3].product_id}-->'); fnModeSubmit('cart','product_id','<!--{$arrProducts[$cnt3].product_id}-->'); return false;" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin_on.gif','cart<!--{$arrProducts[$cnt3].product_id}-->');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin.gif','cart<!--{$arrProducts[$cnt3].product_id}-->');">
               <img src="<!--{$TPL_DIR}-->img/products/b_cartin.gif" width="115" height="25" alt="カゴに入れる" name="cart<!--{$id3}-->" id="cart<!--{$id3}-->" /></a>
             </div>
           </div>
             <!--▲買い物かご-->

  </div>

  <!--{/if}-->

  <!-- ▲3つめの商品 -->

</div>

<!--{/section}-->

「EC-CUBEの学校」のサンプルコードを必要最低限だけ直しましたので、かなり汚いコードになっていますがご容赦。
sectionのループで0・3・6・・という具合に3つ飛びにカウンタが回るので、2列目と3列目は$cnt4・$cnt3でカウンタを取得しています。
$id4・$id3で2列目と3列目の各アイテムの商品IDを取得し、買い物カゴに代入しています。
私の環境では動いているので、たぶん動くんではないかなと。(規格回りはテストしていないです)

会員コンテンツのコードを張ると、著作権侵害とかならないかな・・・?(汗)
sower
投稿日時: 2011/5/1 11:06
対応状況: −−−
半人前
登録日: 2011/4/19
居住地:
投稿: 11
Re: 横型商品一覧にカゴ入れるボタンをつけたい。
fukap様、再度の有益な書き込みをありがとうございます。
(どういうわけか、しばらくコミュニティサイトにログインできず、お返事が遅くなってしまいました。申し訳ありません。)
書いてくださったコードを試してみましたが、結論から書きますとまだうまくいっていません。

カゴボタンをクリックしてもカゴに入らず、カゴの中の画面にも移動せずです。マウスオーバーした時に表示されるリンク先のURLは、それぞれ固有の番号になっていますが、ロールオーバーは反応していません。

しかし、fukap様からの前回と今回の書き込みで、assignで定義して番号をふったidに[cnt]をそれぞれ対応させるといった書き方が、なんとなく分かりました。

たぶんいい感じなので、さらにいじってみます。遅くなりましたがお礼とご報告まで。
fukap
投稿日時: 2011/5/1 11:35
対応状況: −−−
仙人
登録日: 2009/7/7
居住地: 滋賀県
投稿: 907
Re: 横型商品一覧にカゴ入れるボタンをつけたい。
ん〜再度、上記コードをそのままうちのテストサイトの{section name=cnt ...}〜{/section} 部に
上書きでコピペしましたが、買い物カゴには正常にデータが飛んでいるように見えます。

ロールオーバーが反応していないということなので、
<a>タグのonmouseoverやonmouseoutあたりを見直してみてください。

コードをコピペする際に、メモ帳などに一旦貼り付けてから行うと、
コードの途中で改行されて分断されてしまい、正常に動作しないことがあります。
それは起こっていませんか?

また泥臭い方法ですが、{section name=cnt ...}〜{/section} 部に上記コードをそのままコピペした
場合はどうなりますか?

もしそれでも動作しない場合は、{section name=cnt ...}〜{/section} 部の前後にある
<form>〜</form>タグ等がカスタマイズの途中で損なわれて、正常に動作しないのかもしれません。
買い物カゴは<form>〜</form>を使って、カートにPOSTされていますので。
sower
投稿日時: 2011/5/1 12:07
対応状況: −−−
半人前
登録日: 2011/4/19
居住地:
投稿: 11
Re: 横型商品一覧にカゴ入れるボタンをつけたい。
何度もお時間をとっていただき感謝しております。
たった今、デフォルトのテンプレで再度試したところ、ちょっとCSSが利かずに横型にはなりませんでしたが、カゴボタンは正常に機能しました。

たぶん、私がカスタマイズしている稚拙なテンプレートで初め試したので、なにか他のjavascriptのidとか(?)と緩衝して動かなかったのだと思います。
今後はそれをどうやって突き止めるのかが課題となりそうです・・・。
なにしろjavascriptも見よう見まねのコピペですので、あちこち調べてみます。

まずはfukap様のコードに問題なく、私の方の問題だったことをご報告いたします。
本当にありがとうございました。
sower
投稿日時: 2011/5/3 9:58
対応状況: −−−
半人前
登録日: 2011/4/19
居住地:
投稿: 11
Re: 横型商品一覧にカゴ入れるボタンをつけたい。
最後にもう一度投稿させていただきます。
fukap様の助けをお借りして、ようやくカゴボタンの設置ができました。ありがとうございました。
今後、同様の問題でこのスレにたどり着いたみなさまには、fukap様が提示してくださったコードで無事機能しますのでお試しください。

私がこのコードで初めのうちうまく動かなかった原因は、自作で設置した個数を指定する窓の表示・非表示の切り替えの一文でした。
これを削除すると、正しくカゴボタンが機能するようになりました。

これで一件落着ですが、今度はいかにして「個数を指定する窓の表示・非表示の切り替え」をするか? という問題に直面しました。
これに関しては、まだまだ勉強が必要そうです。(またここのお世話になるかもしれません。その時はどうぞよろしくお願いします。)

最後に、このスレ主の方には横から失礼させていただいたことをお詫び申し上げるとともに、私の今回の問題が解決する機会を与えて
くださったことに深く感謝いたします。ありがとうございました。
have
投稿日時: 2011/6/24 22:18
対応状況: −−−
一人前
登録日: 2010/11/4
居住地: 東京都
投稿: 83
Re: 横型商品一覧にカゴ入れるボタンをつけたい。
引用:


<!--{section name=cnt loop=$arrProducts step=3}-->

<div class="item-line">

  <!-- ▼1つめの商品 -->

  <!--{assign var=id value=$arrProducts[cnt].product_id}-->

  <div class="item-box-wrap">

  <!--商品写真-->
    <div class="item-box-photo">
      <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[cnt].product_id}-->"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProducts[cnt].main_list_image}-->" alt="<!--{$arrProducts[cnt].name|escape}-->" /></a>
    </div>

  <!--商品名-->
    <h3>
      <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[cnt].product_id}-->"><!--{$arrProducts[cnt].name|escape}-->:<!--{$id}--></a>
    </h3>

  <!--商品価格-->
    <div class="item-box-price">
    <!--{if $arrProducts[cnt].price02_min == $arrProducts[cnt].price02_max}-->
      <!--{$arrProducts[cnt].price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->

    <!--{else}-->

      <!--{$arrProducts[cnt].price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProducts[cnt].price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->

    <!--{/if}-->円

    </div>


  <!--売り切れの場合-->

    <!--{if $arrProducts[cnt].stock_max == 0 && $arrProducts[cnt].stock_unlimited_max != 1}-->

    <div class="item-box-soldout">
      申し訳ございませんが、只今品切れ中です。
    </div>

    <!--{/if}-->

  <!--商品コメント-->
    <div class="item-box-comment">
      <!--{$arrProducts[cnt].main_list_comment|escape|nl2br}-->
    </div>

          <!--▼買い物かご-->
           <div class="in_cart">
             <dl>

         <!--{assign var=class1 value=classcategory_id`$id`_1}-->
         <!--{assign var=class2 value=classcategory_id`$id`_2}-->
         <!--{if $tpl_classcat_find1[$id]}-->
           <dt><!--{$tpl_class_name1[$id]|escape}-->:</dt>
           <dd>
             <select name="<!--{$class1}-->" style="<!--{$arrErr[$class1]|sfGetErrorColor}-->" onchange="lnSetSelect('<!--{$class1}-->', '<!--{$class2}-->', '<!--{$id}-->','');">
             <option value="">選択してください</option>
             <!--{html_options options=$arrClassCat1[$id] selected=$arrForm[$class1]}-->
             </select>
             <!--{if $arrErr[$class1] != ""}-->
             <br /><span class="attention">※ <!--{$tpl_class_name1[$id]}-->を入力して下さい。</span>
             <!--{/if}-->
           </dd>
         <!--{/if}-->
         <!--{if $tpl_classcat_find2[$id]}-->
           <dt><!--{$tpl_class_name2[$id]|escape}-->:</dt>
           <dd>
             <select name="<!--{$class2}-->" style="<!--{$arrErr[$class2]|sfGetErrorColor}-->">
             <option value="">選択してください</option>
             </select>
             <!--{if $arrErr[$class2] != ""}-->
             <br /><span class="attention">※ <!--{$tpl_class_name2[$id]}-->を入力して下さい。</span>
             <!--{/if}-->
           </dd>
         <!--{/if}-->

         <!--{assign var=quantity value=quantity`$id`}-->
           <dt>個数:</dt>
           <dd><input type="text" name="<!--{$quantity}-->" size="3" class="box54" value="<!--{$arrForm[$quantity]|default:1}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr[$quantity]|sfGetErrorColor}-->" />
             <!--{if $arrErr[$quantity] != ""}-->
             <br /><span class="attention"><!--{$arrErr[$quantity]}--></span>
             <!--{/if}-->
           </dd>
         </dl>
             <div class="cartbtn">
             <a href="<!--{$smarty.server.REQUEST_URI|escape}-->#product<!--{$id}-->" onclick="fnChangeAction('<!--{$smarty.server.REQUEST_URI|escape:"javascript"}-->#product<!--{$id}-->'); fnModeSubmit('cart','product_id','<!--{$id}-->'); return false;" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin_on.gif','cart<!--{$id}-->');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin.gif','cart<!--{$id}-->');">
               <img src="<!--{$TPL_DIR}-->img/products/b_cartin.gif" width="115" height="25" alt="カゴに入れる" name="cart<!--{$id}-->" id="cart<!--{$id}-->" /></a>
             </div>
           </div>
             <!--▲買い物かご-->

  </div>

  <!-- ▲1つめの商品 -->


  <!-- ▼2つめの商品 -->

  <!--{assign var=cnt4 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-2` }-->
	<!--{assign var=id4 value=$arrProducts[$cnt4].product_id}-->

  <!--{if $arrProducts[$cnt4].product_id}-->

  <div class="item-box-wrap">

  <!--商品写真-->
    <div class="item-box-photo">
      <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[$cnt4].product_id}-->"><img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProducts[$cnt4].main_list_image}-->" alt="<!--{$arrProducts[$cnt4].name|escape}-->" /></a>
    </div>

  <!--商品名-->
    <h3>
      <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[$cnt4].product_id}-->"><!--{$arrProducts[$cnt4].name|escape}-->:<!--{$cnt4}--></a>
    </h3>

  <!--商品価格-->

    <div class="item-box-price">

    <!--{if $arrProducts[$cnt4].price02_min == $arrProducts[$cnt4].price02_max}-->
      <!--{$arrProducts[$cnt4].price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
    <!--{else}-->

      <!--{$arrProducts[$cnt4].price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProducts[$cnt4].price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->

    <!--{/if}-->円

    </div>

  <!--売り切れの場合-->

    <!--{if $arrProducts[$cnt4].stock_max == 0 && $arrProducts[$cnt4].stock_unlimited_max != 1}-->

    <div class="item-box-soldout">
      申し訳ございませんが、只今品切れ中です。
    </div>

    <!--{/if}-->

  <!--商品コメント-->

    <div class="item-box-comment">

      <!--{$arrProducts[$cnt4].main_list_comment|escape|nl2br}-->

    </div>

          <!--▼買い物かご-->
           <div class="in_cart">
             <dl>

         <!--{assign var=class1 value=classcategory_id`$id4`_1}-->
         <!--{assign var=class2 value=classcategory_id`$id4`_2}-->
         <!--{if $tpl_classcat_find1[$id4]}-->
           <dt><!--{$tpl_class_name1[$id4]|escape}-->:</dt>
           <dd>
             <select name="<!--{$class1}-->" style="<!--{$arrErr[$class1]|sfGetErrorColor}-->" onchange="lnSetSelect('<!--{$class1}-->', '<!--{$class2}-->', '<!--{$id4}-->','');">
             <option value="">選択してください</option>
             <!--{html_options options=$arrClassCat1[$id4] selected=$arrForm[$class1]}-->
             </select>
             <!--{if $arrErr[$class1] != ""}-->
             <br /><span class="attention">※ <!--{$tpl_class_name1[$id4]}-->を入力して下さい。</span>
             <!--{/if}-->
           </dd>
         <!--{/if}-->
         <!--{if $tpl_classcat_find2[$id4]}-->
           <dt><!--{$tpl_class_name2[$id4]|escape}-->:</dt>
           <dd>
             <select name="<!--{$class2}-->" style="<!--{$arrErr[$class2]|sfGetErrorColor}-->">
             <option value="">選択してください</option>
             </select>
             <!--{if $arrErr[$class2] != ""}-->
             <br /><span class="attention">※ <!--{$tpl_class_name2[$id4]}-->を入力して下さい。</span>
             <!--{/if}-->
           </dd>
         <!--{/if}-->

         <!--{assign var=quantity value=quantity`$id4`}-->
           <dt>個数:</dt>
           <dd><input type="text" name="<!--{$quantity}-->" size="3" class="box54" value="<!--{$arrForm[$quantity]|default:1}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr[$quantity]|sfGetErrorColor}-->" />
             <!--{if $arrErr[$quantity] != ""}-->
             <br /><span class="attention"><!--{$arrErr[$quantity]}--></span>
             <!--{/if}-->
           </dd>
         </dl>
             <div class="cartbtn">
             <a href="<!--{$smarty.server.REQUEST_URI|escape}-->#product<!--{$arrProducts[$cnt4].product_id}-->" onclick="fnChangeAction('<!--{$smarty.server.REQUEST_URI|escape:"javascript"}-->#product<!--{$arrProducts[$cnt4].product_id}-->'); fnModeSubmit('cart','product_id','<!--{$arrProducts[$cnt4].product_id}-->'); return false;" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin_on.gif','cart<!--{$arrProducts[$cnt4].product_id}-->');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin.gif','cart<!--{$arrProducts[$cnt4].product_id}-->');">
               <img src="<!--{$TPL_DIR}-->img/products/b_cartin.gif" width="115" height="25" alt="カゴに入れる" name="cart<!--{$id4}-->" id="cart<!--{$id4}-->" /></a>
             </div>
           </div>
             <!--▲買い物かご-->

  </div>

  <!--{/if}-->

  <!-- ▲2つめの商品 -->

  <!-- ▼3つめの商品 -->

  <!--{assign var=cnt3 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1` }-->
	<!--{assign var=id3 value=$arrProducts[$cnt3].product_id}-->

  <!--{if $arrProducts[$cnt3].product_id}-->

  <div class="item-box-wrap">


  <!--商品写真-->
    <div class="item-box-photo">
      <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[$cnt3].product_id}-->"><img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProducts[$cnt3].main_list_image}-->" alt="<!--{$arrProducts[$cnt3].name|escape}-->" /></a>
    </div>

  <!--商品名-->
    <h3>
      <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[$cnt3].product_id}-->"><!--{$arrProducts[$cnt3].name|escape}-->:<!--{$cnt3}--></a>
    </h3>

  <!--商品価格-->

    <div class="item-box-price">
    <!--{if $arrProducts[$cnt3].price02_min == $arrProducts[$cnt3].price02_max}-->
      <!--{$arrProducts[$cnt3].price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
    <!--{else}-->

      <!--{$arrProducts[$cnt3].price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProducts[$cnt3].price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->

    <!--{/if}-->円

    </div>

  <!--売り切れの場合-->

    <!--{if $arrProducts[$cnt3].stock_max == 0 && $arrProducts[$cnt3].stock_unlimited_max != 1}-->
    <div class="item-box-soldout">
      申し訳ございませんが、只今品切れ中です。
    </div>

    <!--{/if}-->

  <!--商品コメント-->

    <div class="item-box-comment">

      <!--{$arrProducts[$cnt3].main_list_comment|escape|nl2br}-->

    </div>

          <!--▼買い物かご-->
           <div class="in_cart">
             <dl>

         <!--{assign var=class1 value=classcategory_id`$id3`_1}-->
         <!--{assign var=class2 value=classcategory_id`$id3`_2}-->
         <!--{if $tpl_classcat_find1[$id3]}-->
           <dt><!--{$tpl_class_name1[$id3]|escape}-->:</dt>
           <dd>
             <select name="<!--{$class1}-->" style="<!--{$arrErr[$class1]|sfGetErrorColor}-->" onchange="lnSetSelect('<!--{$class1}-->', '<!--{$class2}-->', '<!--{$id3}-->','');">
             <option value="">選択してください</option>
             <!--{html_options options=$arrClassCat1[$id3] selected=$arrForm[$class1]}-->
             </select>
             <!--{if $arrErr[$class1] != ""}-->
             <br /><span class="attention">※ <!--{$tpl_class_name1[$id3]}-->を入力して下さい。</span>
             <!--{/if}-->
           </dd>
         <!--{/if}-->
         <!--{if $tpl_classcat_find2[$id3]}-->
           <dt><!--{$tpl_class_name2[$id3]|escape}-->:</dt>
           <dd>
             <select name="<!--{$class2}-->" style="<!--{$arrErr[$class2]|sfGetErrorColor}-->">
             <option value="">選択してください</option>
             </select>
             <!--{if $arrErr[$class2] != ""}-->
             <br /><span class="attention">※ <!--{$tpl_class_name2[$id3]}-->を入力して下さい。</span>
             <!--{/if}-->
           </dd>
         <!--{/if}-->

         <!--{assign var=quantity value=quantity`$id3`}-->
           <dt>個数:</dt>
           <dd><input type="text" name="<!--{$quantity}-->" size="3" class="box54" value="<!--{$arrForm[$quantity]|default:1}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr[$quantity]|sfGetErrorColor}-->" />
             <!--{if $arrErr[$quantity] != ""}-->
             <br /><span class="attention"><!--{$arrErr[$quantity]}--></span>
             <!--{/if}-->
           </dd>
         </dl>
             <div class="cartbtn">
             <a href="<!--{$smarty.server.REQUEST_URI|escape}-->#product<!--{$arrProducts[$cnt3].product_id}-->" onclick="fnChangeAction('<!--{$smarty.server.REQUEST_URI|escape:"javascript"}-->#product<!--{$arrProducts[$cnt3].product_id}-->'); fnModeSubmit('cart','product_id','<!--{$arrProducts[$cnt3].product_id}-->'); return false;" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin_on.gif','cart<!--{$arrProducts[$cnt3].product_id}-->');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin.gif','cart<!--{$arrProducts[$cnt3].product_id}-->');">
               <img src="<!--{$TPL_DIR}-->img/products/b_cartin.gif" width="115" height="25" alt="カゴに入れる" name="cart<!--{$id3}-->" id="cart<!--{$id3}-->" /></a>
             </div>
           </div>
             <!--▲買い物かご-->

  </div>

  <!--{/if}-->

  <!-- ▲3つめの商品 -->

</div>

<!--{/section}-->

「EC-CUBEの学校」のサンプルコードを必要最低限だけ直しましたので、かなり汚いコードになっていますがご容赦。
sectionのループで0・3・6・・という具合に3つ飛びにカウンタが回るので、2列目と3列目は$cnt4・$cnt3でカウンタを取得しています。
$id4・$id3で2列目と3列目の各アイテムの商品IDを取得し、買い物カゴに代入しています。
私の環境では動いているので、たぶん動くんではないかなと。(規格回りはテストしていないです)

会員コンテンツのコードを張ると、著作権侵害とかならないかな・・・?(汗)


fukap様上記のソースを/data/Smarty/templates/default/products/list.tplの145行〜273行に書き換えると商品一覧ページに
「システムエラーが発生しました。大変お手数ですが、サイト管理者までご連絡ください。」
エラーが出ました。
 宜しくお願いいたします。
-------------------------------------
EC-CUBE] 2.11.1
[レンタルサーバ] さくらスタンダード
[OS] FreeBSD 7.1-RELEASE-p15 i386
[PHP] PHP5.2.17
[データベース]MySql 5.1
[WEBサーバ] Apache/1.3.42 (Unix) mod_ssl/2.8.31 OpenSSL/0.9.8e
« 1 (2) 3 »
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は89,281名です
総投稿数は110,072件です

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2314
5
umebius
2085
6
yuh
1819
7
h_tanaka
1652
8
red
1570
9
mcontact
1301
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.