EC-CUBEでamazonのような、スライドするお薦め商品パネルの設置

最近のECサイトでは、当たり前のように設置してあるのが、スライドするおススメ商品パネルです。

始まりがいつか知りませんが、意識しだしたのがamazonというのはよくある話でして。
そして、こういうものはあるとクリックされるのが人情のようで、やっぱり欲しくなるのも心情です。

というわけで、ECCUBEのおススメ枠を利用して、こういうものの作り方をご紹介します。

jQueryのダウンロードとアップロード

まずはjcarousellite.jsというものが必要になるので、ダウンロードしましょう。

jcarouselliteダウンロード先

海外サイトに拒絶反応が出る人は、次のようにやってみましょう。
ページのVersionの一番上の新しいやつの右端。
(Packed)のリンク部分で右クリックし、名前をつけてリンク先を保存。
名前はもともとついているので、変更しない。

以上でダウンロードできたと思います。

次に/html/jsのディレクトリにさっきのものをアップロード。

これで第一段階終了。

recommend.tplを改良

/data/Smarty/templates/default/frontparts/bloc/recommend.tpl
<!-- //////////////////////////////////// script //////////////////////////////////// -->
<script type="text/javascript">
		$(function() {
			$(".jCarouselLite").jCarouselLite({
				btnNext: ".next",
				btnPrev: ".prev",
				visible : 4,
				speed: 300,
				easing: "linear"
			});
		});
</script>
<!-- //////////////////////////////////// script //////////////////////////////////// -->

<!--{if count($arrBestProducts) > 0}-->
    <div class="bloc_outer clearfix">
        <div id="recommend_area">
            <h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_recommend.jpg" alt="*" class="title_icon" /></h2>

<div class="carousel">
	<a href="#" class="prev"></a>
	<a href="#" class="next"></a>
	<div class="jCarouselLite">
		<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative; list-style-type: none; z-index: 1; width: 2880px; left: -800px; ">


<!-- //////////////////////////////////// Panel 1 //////////////////////////////////// -->
        
                <!--{foreach from=$arrBestProducts item=arrProduct name="recommend_products"}-->
			<li>
                    <div class="product_item clearfix">
                        <div class="productImage">
                            <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->">
                                <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->&amp;width=80&amp;height=80" alt="<!--{$arrProduct.name|h}-->" />
                            </a>
                        </div>
                        <div class="productContents">
                            <h3>
                                <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|mb_truncate:19:"..."}--></a>
                            </h3>
                            <p class="sale_price">
                                価格: <span class="price"><!--{$arrProduct.price02_min|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円</span>
                            </p>
                            <p class="mini comment"><!--{$arrProduct.comment|mb_truncate:19:"..."|nl2br}--></p>
                        </div>
                    </div>
                    <!--{if $smarty.foreach.recommend_products.iteration % 2 === 0}-->
                        <div class="clear"></div>
                    <!--{/if}-->
              </li>
                <!--{/foreach}-->
<!-- //////////////////////////////////// Panel 1 //////////////////////////////////// -->

        </ul>
</div>
</div>


        </div>
    </div>
<!--{/if}-->
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jcarousellite_1.0.1.pack.js"></script>
丸々上記のものに書き換えてみてください。おそらく、動くかと思います。
見た目がぐずぐずなので、動かしようもないでしょうが。

CSSで成形

形をCSSで整えます。

.carousel {
	margin: 0px;
	position: relative;
	width: 566px;
	.slider-wrap:center;
    border: solid 1px #ccc;
    border-top: none;
    padding:5px;
    font-size:90%;
}

.jCarouselLite { 
	position: relative;
	overflow: hidden;
	margin: auto; 
	padding-top:5px;
}

.jCarouselLite li {
    float: left;
    height: 160px;
    overflow: hidden;
    width: 121px;
    text-align:center;
    padding-right:10px;
}

.prev {
float: left;
margin: 55px 2px 0 0;
width: 17px;
height: 17px;
background: url(../img/button/btn_minus.jpg) no-repeat;
cursor: pointer;
}

.next {
float: right;
margin: 55px 0 0 2px;
width: 17px;
height: 17px;
background: url(../img/button/btn_plus.jpg) no-repeat;
cursor: pointer;
}

以下の画像のようになればほぼ完成なのですが、いかがでしょう?



まとめ

あとは微調整、微調整です。
テスト環境ならば、数値をいじって変化を楽しんでも良いですし、自由です。

こちら、デザインをそれっぽくすればamazonなわけですが、いずれやりたいです。

注意点としては、jQueryが上手くうごくかどうかですね。
アップロード場所を間違えないようにして下さい。

というわけで以上です。

2 Comments

  1. daihachi様


    素晴らしい記事ありがとう御座います。

    この度、非常に初心者の私がこの記事を機に先日はじめて触ったEC CUBEに
    jqueryを導入しようと試みましたが、やはり問題が御座いました(汗)


    私は、先日ヘテムルサーバーよりEC CUBEをダウンロードして、
    テンプレートは、勿論デフォルトです。


    そして、まず行った手順としては、

    1.jcarousellite.jsをDLして任意の場所へアップ


    2.recommend.tplを上記のものへ上書き


    3.cssに上記のものを追加




    上記の工程を行う上で、2つおそらく間違えの原因かもしれないと思う
    事が御座いました。


    ・追加するCSSの場所

    これは、bloc.cssやbloc_alpha.css….といくつか御座います。
    色々な階層にCSSがあり、戸惑っております;

    user_data/packages/default/css

    上記のディレクトリの中のファイルだとは思うのですが(汗)






    ・jqueryのファイル。


    jqueryはjquery.comよりファイルをダウンロードしなければ、使えないのかと思ったのですが、
    この記事は、比較的WEBに詳しい方向け?なのかと思いまして、これはやらなくても良い工程なのでしょうか?


    また、アップロードするとすればどのディレクトリに配置すればよいのかご教授をお願い致します


    長々恐縮ですが、ご回答いただけましたら幸いです。
    何卒宜しくお願い致します。

    • いつも記事を見て下すってありがとうございます。

      質問にお答えさせていただきます。


      アップが済んだら、読み込ませるところを記事にしていませんでしたね。

      http://daihachi.sub.jp/archives/740

      この記事にsite_frame.tplいじりかた
      jQueryなどの設置の仕方が書いてあります。

      ちなみに、jquery自体は/html/jsにデフォルトで設置してあるはずなので、大丈夫です。


      CSSに関してはuser_data/packages/default/css/bloc.cssで大丈夫ですよ。
      新しい追加なので、どのCSSでも反応してくれるでしょうし。


      以上で大丈夫だと思いますが、いかがでしょうか。

Leave a Reply

Your email address will not be published.


*