この記事は
たちくらが
に
書きました。

バブル全盛期の六本木でお仕事→ワーキングホリデー→海外をサーフィンしながら転々。→飲食店→土地開発コンサル会社→鉄鋼メーカー→大学でお勉強→システムエンジニア→Webのお仕事→フリーランス→食品メーカー→次へ。 ほぼ好奇心で生きていますが、転職・海外・波乗り・情報収集経験は人より多めです。

EC-CUBE：“5分で実装” 一覧＆詳細ページに「カートに入れる」ボタン設置して画面遷移させない機能を実装（v2.13.2のPC版）

LINEで送る
Pocket
このエントリーをはてなブックマークに追加

EC-CUBEはデフォルトの状態だと、商品ページで購入のためのボタンを押すたびに『かごの中』ページへ遷移してしまいます。
これだと複数の商品を購入したいお客様にとってはカートに入れるたびに商品ページに戻らなければならず面倒で、購買意欲もそがれます。
一点が高額の商材を扱うショップはいいのですが、そうでない場合はカートに入れた商品データを保持する機能は必須の機能だと思います。
今回はPC版ですが、スマホ版の実装方法はこちらをご参照ください。
ボタンの画像などを作成する必要があるので全てを5分で実装するのは難しいですけど、修正内容は簡単です。

カートに追加した時に表示される吹出し

データベースパラメータの設定

最初に「カートに入れる」ボタンをクリックしたあとに表示される吹出しタイプを選択するためのパラメーターを設定します。
データベースのテーブルにカラムを追加します。

『mtb_constants』テーブルに以下の内容でカラムを追加します。

  • id：CARTIN_ALERT
  • name：3
  • rank：1288（これは環境ごとに変えてください）
  • remarks：「カゴに入れる」ボタン押下時に表示されるタイプ　1/「OK」ボタンダイアログボックス　2/「カートへ移動する」、または「ページにとどまる」を選択　3/一定時間表示後、自動的に閉じる

商品一覧ページの修正

まず、クラスファイルを修正します。

data/class/pages/prodects/LC_Page_Products_List.php

doDefault()メソッド内を修正

/* L538辺りの2行をコメントアウト */
//SC_Response_Ex::sendRedirect(CART_URL, $arrQueryString);
//SC_Response_Ex::actionExit();

/* 以下を追記 */
//カゴに入れた直後にカート画面に飛ばない。携帯には適用しない。
if(SC_Display_Ex::detectDevice() == DEVICE_TYPE_MOBILE) {
  SC_Response_Ex::sendRedirect(CART_URL, $arrQueryString);
  SC_Response_Ex::actionExit();
} else {
  //セッションに保持
  $_SESSION['cart_buy_now'] = TRUE;
  //リンク元のURLにリダイレクト
  SC_Response_Ex::sendRedirect($_SERVER['HTTP_REFERER']);
  SC_Response_Ex::actionExit();
}
/* before here */

action()メソッド内の最後に追記

/* PCからのアクセス時 */
//カートに入れた状態をセッションで一時的に保持。アサイン後初期化。携帯は適用しない。
if(SC_Display_Ex::detectDevice() == DEVICE_TYPE_PC) {
  if ($_SESSION['cart_buy_now'] === true) {
    $_SESSION['cart_buy_now'] = '';
    $this->CartBuyNow = true;
  }
}
/* スマホからのアクセス時 */
if(SC_Display_Ex::detectDevice() == DEVICE_TYPE_SMARTPHONE) {
  if ($_SESSION['cart_buy_now'] === true) {
    $_SESSION['cart_buy_now'] = '';
    $this->CartBuyNow = true;
  }
}
// カテゴリーIDをアサイン
//$this->tpl_Category_Id = $_GET['category_id'];
$this->tpl_Product_Id = $this->arrProduct['product_id'];

続いてテンプレートファイルです。

data/Smarty/templates/任意のフォルダ/products/list.tpl

formタグを変更します。

<!-- L147行目あたりのformタグを変更 -->
<!--<form name="product_form<!--{*$id|h*}-->" action="?" onsubmit="return false;">-->
<form name="product_form<!--{$id|h}-->" method="post" action="?<!--{if $tpl_Product_Id != ''}-->product_id=<!--{$tpl_Product_Id}--><!--{/if}-->">

カートに入れるだけでなく、そこでレジにも進めるように『レジに進む』ボタンも追記します。
デフォルトでは『かごに入れる』ボタンだったと思うので、その直後のL250あたりに以下を追記します。

<!-- レジに進むボタン追記 -->
<a href="<!--{$smarty.const.CART_URL}-->"><img class="hover_change_image" src="<!--{$TPL_URLPATH}-->img/images/products_detail_btn03.png" alt="レジに進む" /></a>

最後に、いちばん最下行に以下を追記します。
最初にデータベースに登録したカラムのパラメータを受け取って表示方法を振り分ける処理です。
基本的に今回は「CARTIN_ALERT」に3が設定されている場合を想定しています。

<!-- ファイル最下部に追記 -->
<!--{if $smarty.const.CARTIN_ALERT == 1}-->
<!--{if $CartBuyNow == true}-->
<script type="text/javascript">
alert("買い物かごに商品が追加されました。");
</script>
<!--{/if}-->
<!--{/if}-->
<!--{if $smarty.const.CARTIN_ALERT == 2}-->
<!--{if $CartBuyNow == true}-->
<script type="text/javascript">
if (confirm('買い物かごに商品が追加されました。\n「カゴの中を見る」に移動→OK\nページにとどまる→キャンセル')==true){
location.href = "<!--{$smarty.const.CART_URLPATH}-->"; // example_confirm.htmlへ遷移
}
</script>
<!--{/if}-->
<!--{/if}-->
<!--{if $smarty.const.CARTIN_ALERT == 3}-->
<!--{if $CartBuyNow == true}-->
<script type="text/javascript">
noty({text: '買い物かごに商品が追加されました。',layout: 'center', timeout: '2000'});
</script>
<!--{/if}-->
<!--{/if}-->
<!-- before here -->

以上で一覧ページは表示されたかと思います。
ボタンのデザインはお好みでCSSでもいいですし、buttonタグに変えて画像ボタンでもなんでもどうぞ。
続いては、商品詳細ページでの画面遷移しない「買い物かご」ボタン設置方法です。

商品詳細ページの修正

こちらもクラスファイルから修正します。

data/class/pages/prodects/LC_Page_Products_Detail.php

一覧ページ同様、action()メソッド内の最後（L245辺り）に追記

//カートに入れた状態をセッションで一時的に保持。アサイン後初期化。携帯は適用しない。
if(SC_Display_Ex::detectDevice() == DEVICE_TYPE_PC) {
  if ($_SESSION['cart_buy_now'] === true) {
    $_SESSION['cart_buy_now'] = '';
    $this->CartBuyNow = true;
  }
}
/* スマートフォン対応 */
if(SC_Display_Ex::detectDevice() == DEVICE_TYPE_SMARTPHONE) {
  if ($_SESSION['cart_buy_now'] === true) {
    $_SESSION['cart_buy_now'] = '';
    $this->CartBuyNow = true;
  }
}
// カテゴリーIDをアサイン
//$this->tpl_Category_Id = $_GET['category_id'];
$this->tpl_Product_Id = $this->arrProduct['product_id'];

doCart()メソッド内を修正

//L525辺りをコメントアウトしてif文で振り分け
//SC_Response_Ex::sendRedirect(CART_URL, $arrQueryString);
//SC_Response_Ex::actionExit();
//カゴに入れた直後にカート画面に飛ばない。携帯には適用しない。
if(SC_Display_Ex::detectDevice() == DEVICE_TYPE_MOBILE) {
  SC_Response_Ex::sendRedirect(CART_URL, $arrQueryString);
  SC_Response_Ex::actionExit();
} else {
  //セッションに商品を買った事を保持する
  $_SESSION['cart_buy_now'] = TRUE;
  //リンク元のURLにリダイレクトさせる
  SC_Response_Ex::sendRedirect($_SERVER['HTTP_REFERER']);
  SC_Response_Ex::actionExit();
}

次はテンプレートです。

data/Smarty/templates/任意のフォルダ/products/detail.tpl

L45あたりにあるformタグを修正します。

<!--<form name="form1" id="form1" method="post" action="?">-->
<form name="form1" id="form1" method="post" action="?<!--{if $tpl_Product_Id != ''}-->product_id=<!--{$tpl_Product_Id}--><!--{/if}-->">

L300あたりの「かごに入れる」ボタン直後に「レジに進む」ボタンを追記します。

<a href="<!--{$smarty.const.CART_URL}-->"><img class="hover_change_image" src="<!--{$TPL_URLPATH}-->img/images/products_detail_btn03.png" alt="レジに進む" /></a>

ファイル最下部のdivの閉じタグ直後に以下を追記します。

<!--{if $smarty.const.CARTIN_ALERT == 1}-->
<!--{if $CartBuyNow == true}-->
<script type="text/javascript">
  alert("買い物かごに商品が追加されました。");
</script>
<!--{/if}-->
<!--{/if}-->
<!--{if $smarty.const.CARTIN_ALERT == 2}-->
<!--{if $CartBuyNow == true}-->
<script type="text/javascript">
  if (confirm('買い物かごに商品が追加されました。\n「カゴの中を見る」に移動→OK\nページにとどまる→キャンセル')==true){
    location.href = "<!--{$smarty.const.CART_URLPATH}-->"; // example_confirm.html へジャンプ
  }
</script>
<!--{/if}-->
<!--{/if}-->
<!--{if $smarty.const.CARTIN_ALERT == 3}-->
<!--{if $CartBuyNow == true}-->
<script type="text/javascript">
  noty({text: '買い物かごに商品が追加されました。',layout: 'center', timeout: '20000'});
</script>
<!--{/if}-->
<!--{/if}-->

ページ共通で必要な修正

一覧ページと詳細ページ双方の挙動に影響する共通の修正です。

data/class/SC_CartSession.php

L230あたりにある、addProduct()メソッド末尾に以下を追記

$this->getCartList($productTypeId);

jQueryで吹出し表示

カートに入ったことを知らせる吹出しを表示させるため、jQueryプラグインを使います。
今回使うのは『noty』です。

jsおよびcssファイルはパスが通るところに。今回は以下の場所に配置しました。
・js/jquery.noty/jquery.noty.css
・js/jquery.noty/noty_theme_default.css
・js/jquery.noty/jquery.noty.js

『noty』は、jQuery本体のバージョンが古いと動かないので、バージョンを上げましょう。
今回はjQueryのバージョン1.7.2を使ってますが「Google Hosted Libraries」から読み込んでもよいでしょう。

data/Smarty/templates/任意のフォルダ/site_frame.tpl

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

または「Google Hosted Libraries」から読み込んで、

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

headタグの閉じタグ直前に『noty』を読み込むタグを挿入

<!--アラートの吹出し用-->
<!--{if $smarty.const.CARTIN_ALERT == 3}-->
<!--{assign var=list value="`$smarty.const.ROOT_URLPATH`products/list.php"}-->
<!--{assign var=detail value="`$smarty.const.ROOT_URLPATH`products/detail.php"}-->
<!--{if $smarty.server.PHP_SELF==$list || $smarty.server.PHP_SELF==$detail}-->
<link media="screen" rel="stylesheet" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.noty/jquery.noty.css" />
<link media="screen" rel="stylesheet" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.noty/noty_theme_default.css" />
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.noty/jquery.noty.js"></script>
<!--{/if}-->
<!--{/if}-->

上手く動きましたでしょうか？
問題がありましたらご質問をどうぞ。

いつも読んでくれてありがとね！
LINEで送る
Pocket
このエントリーをはてなブックマークに追加

この記事のカテゴリーは『 IT & Web Design 』です。

たちくら

バブル全盛期の六本木でお仕事→ワーキングホリデー→海外をサーフィンしながら転々→飲食店→土地開発コンサル会社→鉄鋼メーカー→大学でお勉強→システムエンジニア→Webのお仕事→フリーランス→食品メーカー→次へ。 ほぼ好奇心で生きていますが、転職・海外・波乗り・情報収集経験は人より多めです。

PAGE TOP