EC-CUBEの小技:商品詳細ページに親切設計スピンボタンの設置

スピンボタンというのがどういうものかというと、ボタンひとつで商品数を上下出来るって機能です。
これがあることによって、片手で、マウスだけで、買い物を済ます事が出来るという、親切設計なわけです。

で、このスピンボタンというものの名前がわからず、それを見つけるまでが大変でしたが、実際、設置は簡単です。
というわけで、ご紹介。

jQuery で簡単設置

まず、以下のサイトより、jquery-spin.tar.gzをダウンロードしましょう。
Google Codeに置いてあるので、リンクから移動し、ダウンロード。
jQuery Spin | Screw-Axis

ファイルを解凍し、jquery-spin.js を /html/js へ。
画像のフォルダを /html/user_data/packages/default/img へ入れましょう。

次に、コードを修正していきます。
/data/Smarty/templates/default/site_frame.tpl
44行目付近に以下を追加。
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-spin.js"></script></code>

<strong>/data/Smarty/templates/default/products/detail.tpl</strong>
43行目付近に以下を追加。
<code lang="php"><script>
  $(document).ready(function(){
		$.spin.imageBasePath = '/user_data/packages/default/img/spin1/';
		$('#spin1').spin({
		max:<!--{$arrProduct.stock_max|escape}-->,min: 0
		});
  });
</script>

あとは、<★数量★>の input type のところに、id=”spin1″ を追加すれば、表示されます。

ちなみに、スクリプトの max:~ の部分ですが、在庫の最大値まで数量ボタンを押せるというものです。
在庫以上にボタンを押せても、何にもなりませんからね。

ボタン画像ですが、サイズがあっていませんので、ちゃんとはまるように自作しましょう。

以上でした。

2 Comments

  1. こんにちは。

    参考にさせていただき手順通りに作業を行いましたが
    テキスト入力から変更されません。
    ソースを見ると




    $(document).ready(function(){
    $.spin.imageBasePath = ‘/user_data/packages/default/img/spin1/’;
    $(‘#spin1’).spin({
    max:,min: 0
    });
    });


    これらは表示されています。
    EC CUBEのバージョンの問題でしょうか。
    尚、2.12.3で作業しています。

    ちなみに以下はダブルクォーテーションで囲えば良いのですよね?
    id=”spin1″

    何かヒントを頂ければ幸いです。
    宜しくお願いします。

    • コード自体はシンプルなものなので、問題はないかと思います。

      jquery-spin.js が読み込まれてない場合もありますが、いかがでしょうか?
      作動しない場合、一度ローカル環境で動いているかどうかを確かめて、お試しください。

Leave a Reply

Your email address will not be published.


*