トップ > EC-CUBE > EC-CUBE おしゃれなECサイトのスクロールする買い物カゴの設置

EC-CUBE おしゃれなECサイトのスクロールする買い物カゴの設置

EC-CUBE
2012年3月28日 18:44
,,,
最近のECサイトでは様々な工夫がなされています。
その中の一つが、スクロールについてくる買い物かごです。

これは、見た目にもハイテクノロジーを匂わす部分はありますが、それ以上に買い物の効率性を上げてくれるものでもあります。
特に、1つの商品の単価の低いネットショップであれば、次に次にとカゴに入れていってほしいですから、尚更その方面に頭を悩ませなければなりません。

というわけで、前口上に追いつくほど良いものが提示できるか分かりませんが、設置していきます。
この記事は最終更新日から1年以上が経過しています。

jQuery Sticky Sidebarのダウンロードと設置

まずは、jQuery Sticky Sidebarのダウンロードから。
Sticky Sidebar jQuery plugin | Phil Parsons

ダウンロード後、解凍、そしてECCUBEにアップとなります。

解凍したフォルダのjsフォルダにある3ファイル。
jquery.easing.1.3.js
stickysidebar.jquery.js
stickysidebar.jquery.min.js
↓
ECCUBEの　/html/js　へアップロード

そして、ECCUBEの管理画面より
デザイン管理－PC－ブロック設定　の画面に行き、新しくブロックを登録。
ブロック名：スクロールかご(なんでもいいです)
ファイル名：cart2(なんでもいいです)

ファイルの中身(参考として使って下さい。CSSとか無視してます)

<!--{* カゴ商品詳細表示 *}-->
<div id="basket">
	<div class="basket_f clearfix">
		<h2>カゴに入っている商品</h2>
		<ul>
	  <!--{section name=cnt loop=$arrCartList step=-1 max=12}-->
	    <!--{if $arrCartList[cnt].productsClass.name != ''}-->
	    <li class="basket_in">
	      <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrCartList[cnt].productsClass.main_list_image|sfNoImageMainList|h}-->&width=60&height=60" />
	      <br>個数：<!--{$arrCartList[cnt].quantity}-->
	    </li>

	    <!--{/if}-->
	  <!--{/section}-->
	  	</ul>
	</div>  

               <p class="cart_price">合計<span class="atten"><!--{$arrCartList.0.ProductsTotal|number_format|default:0}--></span>円</p>

        <div class="cart_bt"><a href="<!--{$smarty.const.CART_URLPATH}-->">精算する</a></div>

	</div>


   <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/stickysidebar.jquery.js"></script>

    <script>

      $(function () {
        $("#basket").stickySidebar({
            timer: 100, 
            easing: "linear",
            speed :100,
            padding :50
        });
      });
    </script>

もう一度、管理画面よりデザイン管理－PC－レイアウト設定　の画面に行きます。
下部より商品一覧ページのレイアウト編集に切り替え、新しく作ったブロックをヘッダー部の【ヘッダー】ログインの下に配置。

これで表示はされるはずです。商品一覧ページをご覧ください。
※デフォルト状態ならば、食品カテゴリーでもみてみましょう。

右上に、ちらちら動くものが見えるはずです。
画像も空欄としてふわふわしています。

それはいいとして、スクロールしてついてくれば、第一段階終了です。

カゴとしての計算機能を機能させる

見た目は出来ましたが、中身は空っぽです。
商品なんかも入ったりしません。

なので、次の工程はPHPファイルを3つ作製します。

/data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Cart2.php　を作成

<?php
// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php';

/**
 * カート のページクラス.
 *
 * @package Page
 * @author LOCKON CO.,LTD.
 * @version $Id:LC_Page_FrontParts_Bloc_Cart.php 15532 2007-08-31 14:39:46Z nanasess $
 */
class LC_Page_FrontParts_Bloc_Cart2 extends LC_Page_FrontParts_Bloc {

    // }}}
    // {{{ functions

    /**
     * Page を初期化する.
     *
     * @return void
     */
    function init() {
        parent::init();
        $masterData = new SC_DB_MasterData_Ex();
        $this->arrProductType = $masterData->getMasterData("mtb_product_type"); //商品種類を取得
    }

    /**
     * Page のプロセス.
     *
     * @return void
     */
    function process() {
        $this->action();
        $this->sendResponse();
    }

    /**
     * Page のアクション.
     *
     * @return void
     */
    function action() {
        $objCart = new SC_CartSession_Ex();
        $this->isMultiple = $objCart->isMultiple();
        $this->hasDownload = $objCart->hasProductType(PRODUCT_TYPE_DOWNLOAD);
        $this->arrCartList = $this->lfGetCartData($objCart);
    }

    /**
     * デストラクタ.
     *
     * @return void
     */
    function destroy() {
        parent::destroy();
    }

    /**
     * カートの情報を取得する
     *
     * @param SC_CartSession $objCart カートセッション管理クラス
     * @return array $arrCartList カートデータ配列
     */
    function lfGetCartData(&$objCart) {
        $arrCartKeys = $objCart->getKeys();
        foreach ($arrCartKeys as $cart_key) {
            // カート情報を取得
            $arrCartList = $objCart->getCartList($cart_key);
            // カート内の商品ＩＤ一覧を取得
            $arrAllProductID = $objCart->getAllProductID($cart_key);
            // 商品が1つ以上入っている場合には商品名称を取得
            if (count($arrCartList) > 0){

                foreach($arrCartList['productsClass'] as $key => $val){
                    $arrCartList[$key]['product_name'] = $val['name'];
                }
            }
            // 購入金額合計
            $products_total += $objCart->getAllProductsTotal($cart_key);
            // 合計数量
            $total_quantity += $objCart->getTotalQuantity($cart_key);

            // 送料無料チェック
            if (!$this->isMultiple && !$this->hasDownload) {
                $is_deliv_free = $objCart->isDelivFree($cart_key);
            }
        }

        $arrCartList[0]['ProductsTotal'] = $products_total;
        $arrCartList[0]['TotalQuantity'] = $total_quantity;

        // 店舗情報の取得
        $arrInfo = SC_Helper_DB_Ex::sfGetBasisData();
        $arrCartList[0]['free_rule'] = $arrInfo['free_rule'];

        // 送料無料までの金額
        if ($is_deliv_free) {
            $arrCartList[0]['deliv_free'] = 0;
        } else {
            $deliv_free = $arrInfo['free_rule'] - $products_total;
            $arrCartList[0]['deliv_free'] = $deliv_free;
        }

        return $arrCartList;
    }
}
?>

/data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Cart_Ex2.php　を作成

<?php

// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Cart2.php';

/**
 * カート のページクラス(拡張).
 *
 * LC_Page_カート をカスタマイズする場合はこのクラスを編集する.
 *
 * @package Page
 * @author LOCKON CO.,LTD.
 * @version $Id: LC_Page_FrontParts_Bloc_Cart_Ex.php 20764 2011-03-22 06:26:40Z nanasess $
 */
class LC_Page_FrontParts_Bloc_Cart_Ex2 extends LC_Page_FrontParts_Bloc_Cart2 {

    // }}}
    // {{{ functions

    /**
     * Page を初期化する.
     *
     * @return void
     */
    function init() {
        parent::init();
    }

    /**
     * Page のプロセス.
     *
     * @return void
     */
    function process() {
        parent::process();
    }

    /**
     * デストラクタ.
     *
     * @return void
     */
    function destroy() {
        parent::destroy();
    }
}
?>

html/frontparts/bloc/cart2.php　を作成

<?php

// {{{ requires
require_once realpath(dirname(__FILE__)) . '/../../require.php';
require_once CLASS_EX_REALDIR . 'page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Cart_Ex2.php';

// }}}
// {{{ generate page

$objPage = new LC_Page_FrontParts_BLoc_Cart_Ex2();
$objPage->blocItems = $params['items'];
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>
</code>

最後にデータベースにアクセスし、テーブルdtb_blocにアクセス。
bloc_name『スクロールかご』というデータがあるので、編集。
あとは「php_path」を「frontparts/bloc/cart2.php」に設定して終了(画像参照)。
WS0001
以上で完成です。
テストとしてカゴに商品を入れてみましょう。
画像付きで追加されるはずです。

CSSで成形

もう少しです。CSSで見やすくしたらフィニッシュです。
※以下のCSSは参考までです。たいしたものではないので、そのまま使うよりカスタマイズした方が身のためです。

/* 動く買い物かご
----------------------------------------------- */
#basket {
    background-color: #FFFFFF;
    border: 1px solid #FF9900;
    margin-right: 10px;
    padding: 8px 5px 8px 3px;
    position: absolute;
    right: 10px;
    top: 90px;
    width: 150px;
}

li.basket_in {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    float: left;
    margin: 8px 0 5px 9px;
    width: 60px;
}

#basket .cart_price {
    background: url("../img/background/line_dot_01.gif") repeat-x scroll center top transparent;
    clear: both;
    margin: 3px 0 7px;
    padding-top: 3px;
}

#basket .atten {
    font-weight: bold;
    margin: 0 2px;
}

#basket .cart_bt{
background-color: #f98b3e;
padding:5px;
margin:0 25px;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f98b3e', endColorstr='#df4a06',GradientType=0 ); /* ie */
background-image: -moz-linear-gradient(top, #f98b3e, #df4a06);
background-image: -ms-linear-gradient(top, #f98b3e, #df4a06);
background-image: -o-linear-gradient(top, #f98b3e, #df4a06);
background-image: -webkit-gradient(linear, center top, center bottom, from(#f98b3e), to(#df4a06));
background-image: -webkit-linear-gradient(top, #f98b3e, #df4a06);
background-image: linear-gradient(top, #f98b3e, #df4a06);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}

#basket .cart_bt a{
color:#fff;
font-weight:bold;
}

で、以下の画像の用になるはずです。
WS0000

総括

以上で完成となります。
CSSは改良の余地ありですね。
結構、奇怪な動きをしたりするので。

ECCUBEでは今回のようにPHPと連動したものを追加する場合、ファイルを複数追加する事が多いです。
ファイル名が間違ってるだけで動かなかったり、面倒な事が多いです。
自分も完全に理解しているところではないので、コピペですまして、なんとか動くようにしています。

わからなくても、動かせればいいんです。
便利なECサイトの機能として満足してもらえばいいのです。
そして、お金になればいいのです。

というような感覚で自分はECサイトと向き合っています。

目指したものは、アスクルの販売サイトだったのですが、まだ足りず。
色々な意見が欲しいところです。

関連記事

EC-CUBE

EC-CUBEに設置したCKEditorに画像アップ機能を追加

2012年4月19日 20:35
EC-CUBE

EC-CUBEの小技：意外に危険な管理画面の落とし穴の修正

2012年5月10日 16:36
EC-CUBE

EC-CUBEの小技：商品一覧ページの表示件数の変更方法と端末ごとの振り分け

2012年6月6日 20:34
EC-CUBE

EC-CUBEの小技：商品詳細ページに商品規格一覧を表示

2012年4月20日 11:49

ブログ運営

株式会社ちょもらんま

https://qomolangma.jp