EC-CUBE3の商品一覧画面にカートボタンを追加させる方法

EC-CUBE Advent Calendar 2017 4日目の記事です。

4日目はEC-CUBE3の商品一覧画面にカートボタンを追加する内容を書きます。

EC-CUBE2系では商品一覧からカートに追加するボタンが存在していたのですが3系からは無くなっています。

3系からこの機能が無くなったのかというと実はソースを眺めてみると実装されており、少しカスタマイズをするだけで実現可能です。

というわけで3系の商品一覧画面でもカートボタンを表示するカスタマイズを紹介します。

使用するEC-CUBE3ですが、本日時点のソースをcloneしたものを使います。 https://github.com/EC-CUBE/ec-cube

デフォルトだと商品一覧画面は以下のようになります。(商品を一つ追加しています。) f:id:amidaike:20171204201644p:plain

この一覧画面に規格選択およびカートボタンを表示させます。今回デザインは全く気にしていません。

  • src/Eccube/Resource/template/default/Product/list.twig

137行目から以下を追加します。

{% if Product.stock_find %}
    <!--▼買い物かご-->
    {% set form = forms[Product.id] %}
    <form name="form{{ Product.id }}" id="form{{ Product.id }}" action="{{ url('product_detail', {'id': Product.id}) }}" method="post">
        <dl>
            {% if form.classcategory_id1 is defined %}
                {# 規格1 #}
                <dt>
                    {{ form_label(form.classcategory_id1) }}:
                </dt>
                <dd>
                    {{ form_widget(form.classcategory_id1) }}
                    {{ form_errors(form.classcategory_id1) }}
                </dd>
                {# 規格2 #}
                {% if form.classcategory_id2 is defined %}
                    <dt>
                        {{ form_label(form.classcategory_id2) }}:
                    </dt>
                    <dd>
                        {{ form_widget(form.classcategory_id2) }}
                        {{ form_errors(form.classcategory_id2) }}
                    </dd>
                {% endif %}
            {% endif %}
            <dt>個数:</dt>
            <dd>
                {{ form_widget(form.quantity) }}
                {{ form_errors(form.quantity) }}
            </dd>
            {{ form_rest(form) }}
        </dl>
        <div>
            <button type="submit" class="add-cart btn btn-primary btn-block prevention-btn prevention-mask" data-cartid="{{ Product.id }}">カートに入れる</button>
        </div>
    </form>
    <!--▲買い物かご-->
{% else %}
    <div>ただいま品切れ中です</div>
{% endif %}

これだけで規格がある商品は規格の選択、およびカートボタンが表示されるようになりました。 f:id:amidaike:20171204202606p:plain

だたし、表示されるだけでカートボタンは正常に動作しません。 動作させるためにはJavaScriptの処理を追加させます。

45行目以降のscriptの中に以下を追加します。

eccube.productsClassCategories = {
    {% for Product in pagination %}
    "{{ Product.id|escape('js') }}": {{ Product.class_categories|json_encode|raw }}{% if loop.last == false %}, {% endif %}
    {% endfor %}
};

$('.add-cart').click(function() {
    var data = $(this).data();
    $('input[name="mode"]').val('add_cart');
    $('#form' + data.cartid).submit()
});

これを追加することでパーコレーターの規格1を選択すると、規格2が選択されるようになりました。

$('.add-cart').click(function() {
    var data = $(this).data();
    $('input[name="mode"]').val('add_cart');
    $('#form' + data.cartid).submit()
});

の処理でカートを追加するボタンを押すとカート画面へ遷移するようにしています。

規格が複数あったとしても問題なく動作します。 f:id:amidaike:20171204202639p:plain

これで商品一覧画面からカートへ追加する実装が可能となりました。EC-CUBE3では少しカスタマイズするだけで実現させたい機能が簡単に可能です。

動作しない、エラーが発生したという方はコメントしてくれれば確認します。

EC-CUBE3でページ管理から画面作成時にURLからuser_dataを無くす方法

EC-CUBE3にあるページ管理より新しいページを作成した場合、URLには必ずuser_dataが含まれます。

http://hogehoge/user_data/hoge

というようになります。

user_dataは別にあっても問題はありませんが、中には無くしてしまいたいという方もいると思います。以下のカスタマイズを行うことで実現可能となります。

EC-CUBE3.0.14を対象に説明します。

まず、FrontControllerProviderにあるuser_dataを定義しているルーティングの箇所をコメントアウトします。

  • src/Eccube/ControllerProvider/FrontControllerProvider.php.php
// user定義
// $c->match('/'.$app['config']['user_data_route'].'/{route}', '\Eccube\Controller\UserDataController::index')->assert('route', '([0-9a-zA-Z_\-]+\/?)+(?<!\/)')->bind('user_data');

ページ作成時にuser_dataの定義がなくても動作するように、PageControllerとPageLayoutRepositoryを修正します。

  • src/Eccube/Controller/Admin/Content/PageController.php
・120行目
// ファイル生成・更新
$templatePath = $app['eccube.repository.page_layout']->getWriteTemplatePath($editable);
↓
$templatePath = $app['eccube.repository.page_layout']->getWriteTemplatePath(false);


・156行目
$templatePath = $app['eccube.repository.page_layout']->getWriteTemplatePath($editable);
↓
$templatePath = $app['eccube.repository.page_layout']->getWriteTemplatePath(false);


・187行目
$templatePath = $app['eccube.repository.page_layout']->getWriteTemplatePath(true);
↓
$templatePath = $app['eccube.repository.page_layout']->getWriteTemplatePath(false);

というようにそれぞれ$app['eccube.repository.page_layout']->getWriteTemplatePath(false);と変更します。

  • src/Eccube/Repository/PageLayoutRepository.php
public function getReadTemplateFile($fileName, $isUser = false)
{
    if ($isUser) {
        $readPaths = array(
            $this->app['config']['user_data_realdir'],
        );
    } else {
        $readPaths = array(
            $this->app['config']['template_realdir'],
            $this->app['config']['template_default_realdir'],
        );
    }
・
・
・

と記述されている箇所を

public function getReadTemplateFile($fileName, $isUser = false)
{
    if ($isUser) {
        $readPaths = array(
            $this->app['config']['template_realdir'],
            $this->app['config']['user_data_realdir'],
        );
    } else {
        $readPaths = array(
            $this->app['config']['template_realdir'],
            $this->app['config']['template_default_realdir'],
        );
    }
・
・
・

$this->app['config']['template_realdir'],を263行目に追加します。

また、管理画面でのURL表記を変更するため、page_edit.twigも修正します。

  • app/template/admin/Content/page_edit.twig
・59行目
{{ url('top') }}{{ app.config.user_data_route }}/{{ form_widget(form.url) }}
↓
{{ url('homepage') }}{{ form_widget(form.url) }}

こちらはuser_dataを表示上からなくしているだけです。

ここまで対応すればほぼ完了なのですが、FrontControllerProviderからuser_dataへルーティング定義を削除してしまったため、新たに定義してあげる必要があります。どこに定義するのかというと、index.phpで定義してあげます。

  • html/index.php
// インストールされてなければインストーラにリダイレクト
if (isset($app['config']['eccube_install']) && $app['config']['eccube_install']) {
    $app->initialize();
    $app->initializePlugin();
    if ($app['config']['http_cache']['enabled']) {
        $app['http_cache']->run();
    } else {
        $app->run();
    }
} else {
・
・
・

と記載されている箇所を

// インストールされてなければインストーラにリダイレクト
if (isset($app['config']['eccube_install']) && $app['config']['eccube_install']) {
    $app->initialize();
    $app->initializePlugin();
 
    // ページレイアウトのカスタマイズに伴う修正
    $front = $app['controllers_factory'];
    // 強制SSL
    if ($app['config']['force_ssl'] == \Eccube\Common\Constant::ENABLED) {
        $front->requireHttps();
    }
 
    $front->match('/{route}', '\Eccube\Controller\UserDataController::index')->assert('route', '([0-9a-zA-Z_\-]+\/?)+(?<!\/)')->bind('user_data');
    $app->mount('', $front);
 
    if ($app['config']['http_cache']['enabled']) {
        $app['http_cache']->run();
    } else {
        $app->run();
    }
} else {
・
・
・

というように新たにuser_data用のルーティング定義を行います。

以上の作業を行うことで、ページ管理から新たなページを作成した場合、URLにはuser_dataはなくなります。

必要な方には必要なカスタマイズだと思いますので、user_dataをURLから無くしてしまいたい!という方は是非ご利用ください。

EC-CUBE3でログイン成功時に直前まで見ていた画面へ戻る方法

EC-CUBE3ではログインする場合、EC-CUBE2とは違いログイン画面を経由させる必要があります。

また、ログイン成功後は必ずサイトのトップページへ戻ってしまいます。

サイトの作りにもよりますが、例えばログイン後は前に見ていた画面を表示して欲しいという要望があった場合、 以下のカスタマイズを行うことで実現可能となります。

EC-CUBE3.0.14を対象に説明します。

まず、MypageControllerにあるlogin関数を修正します。

  • src/Eccube/Controller/Mypage/MypageController.php
/**
 * ログイン画面.
 *
 * @param Application $app
 * @param Request $request
 * @return \Symfony\Component\HttpFoundation\RedirectResponse|\Symfony\Component\HttpFoundation\Response
 */
public function login(Application $app, Request $request)
{
    if ($app->isGranted('IS_AUTHENTICATED_FULLY')) {
        log_info('認証済のためログイン処理をスキップ');

        return $app->redirect($app->url('mypage'));
    }

    /* @var $form \Symfony\Component\Form\FormInterface */
    $builder = $app['form.factory']
        ->createNamedBuilder('', 'customer_login');

    if ($app->isGranted('IS_AUTHENTICATED_REMEMBERED')) {
        $Customer = $app->user();
        if ($Customer) {
            $builder->get('login_email')->setData($Customer->getEmail());
        }
    }

    $event = new EventArgs(
        array(
            'builder' => $builder,
        ),
        $request
    );
    $app['eccube.event.dispatcher']->dispatch(EccubeEvents::FRONT_MYPAGE_MYPAGE_LOGIN_INITIALIZE, $event);

    $form = $builder->getForm();

    // ログイン前の画面へ戻す
    $error = $app['security.last_error']($request);
    if (!$error) {
        // ログインエラーがなければ戻り先をセット
        $referer = $request->headers->get('referer');

        if ($referer) {
            // refererチェック
            $referers = parse_url($referer);
            if ($referers['host'] == $request->getHost()) {
                // ホストが同一であればrefererをセット
                $requestStackUri = $app['request_stack']->getMasterRequest()->getUri();

                if ($request->getUri() == $requestStackUri) {
                    // ログイン画面遷移直前のuriをセット
                    $app->setLoginTargetPath($referer);
                } else {
                    // ログイン必須画面のuriをセット
                    $app->setLoginTargetPath($requestStackUri);
                }
            }
        }
    }

    return $app->render('Mypage/login.twig', array(
        'error' => $error,
        'form' => $form->createView(),
    ));
}

修正箇所は、

// ログイン前の画面へ戻す
$error = $app['security.last_error']($request);
if (!$error) {
    // ログインエラーがなければ戻り先をセット
    $referer = $request->headers->get('referer');

    if ($referer) {
        // refererチェック
        $referers = parse_url($referer);
        if ($referers['host'] == $request->getHost()) {
            // ホストが同一であればrefererをセット
            $requestStackUri = $app['request_stack']->getMasterRequest()->getUri();

            if ($request->getUri() == $requestStackUri) {
                // ログイン画面遷移直前のuriをセット
                $app->setLoginTargetPath($referer);
            } else {
                // ログイン必須画面のuriをセット
                $app->setLoginTargetPath($requestStackUri);
            }
        }
    }
}

return $app->render('Mypage/login.twig', array(
    'error' => $error,
    'form' => $form->createView(),
));

になります。ログイン前のrefererを取得し、ログイン成功時に直前まで見ていた画面へ戻すようにしています。ただし、ログインが必要な画面を直接指定された場合、refererを取得するとログインに成功してもrefererで指定した画面に遷移してしまうため、

$app['request_stack']->getMasterRequest()->getUri()

と本来指定されているURLを取得し、比較する事でログイン成功後の遷移先を変更するようにセットしています。

refererが取得できない環境は諦めてください。

あと、login.twigも変更する必要があります。以下抜粋です。

  • src/Eccube/Resource/template/default/Mypage/login.twig
{% if app.session.flashBag.has('eccube.login.target.path') %}
    {% for targetPath in app.session.flashBag.peek('eccube.login.target.path') %}
        <input type="hidden" name="_target_path" value="{{ targetPath }}" />
    {% endfor %}
{% endif %}

こちらの変更箇所ですが、

{% for targetPath in app.session.flashBag.peek('eccube.login.target.path') %}

の部分となり、getからpeekへと変更しています。なぜpeekに変更しているかというと、ログインエラー時にセットされていたtargepathの値が削除されてしまいますので、peekに変更しています。

以上の対応でログイン成功後は、直前まで見ていた画面へ遷移するようになります。

必要な方には必要なカスタマイズだと思います。特にスマホだとログイン後にトップページへ遷移してしまうと離脱されてしまう可能性が高くなりますのでこちらを是非活用してください。

EC-CUBE3でPC、スマホ、タブレットの判定方法

EC-CUBE3.0.14からPCとスマホを判別するMobile Detectというライブラリが導入されています。

mobiledetect.net

使い方は、PHP側からはShoppingService.php

// device type
if ($this->app['mobile_detect']->isMobile()) {
    $DeviceType = $this->app['eccube.repository.master.device_type']->find(DeviceType::DEVICE_TYPE_SP);
} else {
    $DeviceType = $this->app['eccube.repository.master.device_type']->find(DeviceType::DEVICE_TYPE_PC);
}

とありますので参考になりますが、Twigから使う場合、以下の通りとなります。

{% if app['mobile_detect'].isMobile %}
    Mobile、Tablet
{% else %}
    PC
{% endif %}
{% if app['mobile_detect'].isTablet %}
    Tablet
{% else %}
    PC、スマホ
{% endif %}
{% if app['mobile_detect'].isMobile and app['mobile_detect'].isTablet == false %}
    スマホ
{% else %}
    PC、Tablet
{% endif %}

レスポンシブデザインだと余り使いどころは無いかもしれませんがTwigでPCとスマホを判断したいという時に参考にしてください。

EC-CUBE3.0.13以下の方は独自でMoible Detectライブラリを導入する必要があります。
導入方法は以下のプルリクエストを参考にしてください。

モバイル種別判断用ライブラリの導入 · EC-CUBE/ec-cube@f0f5c70 · GitHub

composer.jsonApplication.phpにそれぞれ定義を追加し、EC-CUBEのルートディレクトリよりcomposer installを実行すればインストールされます。

EC-CUBE3.0.14がリリース、さくらのレンタルサーバでEC-CUBE3.0.14をインストールした時にhtmlをURLに付けさせない方法

3月14日にEC-CUBE3.0.14がリリースされました。

www.ec-cube.net

EC-CUBE3.0.14で特徴的なものとしては、

  • PHP7.1 対応

があります。

さくらのレンタルサーバはphp7.1がサポートされているため、 EC-CUBE3.0.14から安心して利用できるようになります。

そこで、XSERVERに引き続きさくらのレンタルサーバでhtmlをURLにつけさせない方法を説明します。

基本はXSERVERの時と全く同じです。

EC-CUBE3.0.11をXSERVERにインストールした時にhtmlを付けさせない方法 - AmidaikeBlog

※すでにDBが作成されている前提です。

レンタルサーバでは公開ディレクトリは固定されている事が多く変更する事は出来ないのですが、さくらのレンタルサーバの公開ディレクトリは、

/home/hoge/www

wwwが公開ディレクトリになっています。
hogeの部分は適宜ご自身の環境と読み替えてください。

過去に説明した記事であれば、.htaccessを色々とごにょごにょする事で対応してきましたが今回も、

インストール時にURLからhtmlを無くす | EC-CUBE 開発ドキュメント

こちらを参考にhtmlを外す方法を説明していきます。

EC-CUBE3.0.14のアップロード

EC-CUBE3.0.14を

EC-CUBEダウンロード | ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」

こちらからダウンロードし、 FTP等で/home/hoge直下にアップロードします。

EC-CUBE3.0.14の解凍

さくらのレンタルサーバSSHでログイン後、アップロードされたディレクトリからEC-CUBEを解凍します。

unzip eccube-3.0.14.zip

解凍したEC-CUBEをwww配下にコピーします。

cd eccube-3.0.14
cp -pr . ../www/

これで公開ディレクトリにEC-CUBEが解凍されました。

ファイル配置場所の変更

公開ディレクトリまでカレントディレクトリを移動し、htmlディレクトリに存在する必要なファイルを公開ディレクトリ直下に移動させます。

cd
cd /home/hoge/www
mv html/in* .
mv html/.htaccess .
mv html/robots.txt .

→今回はweb.configは不要なため移動させていません。

.htaccessの削除、.htaccess.sampleのリネーム

移動した.htaccessを削除し、public_html直下に存在している.htaccess.sampleに置き換えます。

rm .htaccess
mv .htaccess.sample .htaccess

index.php、install.phpの書き換え

  • index.phpの書き換え
vi index.php

を実行し、27行目のコメントアウトされている箇所を変更し、26行目をコメントアウトます。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
require __DIR__.'/../autoload.php';
//require __DIR__.'/autoload.php';

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//require __DIR__.'/../autoload.php';
require __DIR__.'/autoload.php';
  • install.phpの書き換え
vi install.php

を実行し、31行目のコメントアウトされている箇所を変更し、30行目をコメントアウトします。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
require __DIR__ . '/../autoload.php';
//require __DIR__ . '/autoload.php';

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//require __DIR__ . '/../autoload.php';
require __DIR__ . '/autoload.php';

autoload.phpの変更

  • autoload.phpの書き換え
vi autoload.php

を実行し、36行目のコメントアウトされている箇所を変更し、35行目をコメントアウトします。

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
define("RELATIVE_PUBLIC_DIR_PATH", '');
//define("RELATIVE_PUBLIC_DIR_PATH", '/html');

//[INFO]index.php,install.phpをEC-CUBEルート直下に移動させる場合は、コメントアウトしている行に置き換える
//define("RELATIVE_PUBLIC_DIR_PATH", '');
define("RELATIVE_PUBLIC_DIR_PATH", '/html');

.htaccessの追加

公開ディレクトリをEC-CUBEルート直下にしたため、このままだと見せる必要のないディレクトリまで見えてしまいます。
そのため、以下の.htaccessファイルを各ディレクトリ直下に配置してください。

order allow,deny
deny from all

この内容を srctestsvendorティレクトリ直下に配置します。(appディレクトリ直下には既に存在)

EC-CUBEのインストール

http://hoge.sakura.ne.jp とアクセスし、インストール作業が出来れば対応完了です。

以上がhtmlをURLから付けさせない方法となります。

インストール後もhtmlディレクトリを削除する事は可能ですが、非常にめんどくさいためインストール前に設定するのがオススメです。

この方法で上手く動かないという方はコメントください。

EC-CUBE3の入力チェック時のエラーメッセージで項目名を表示させる方法

EC-CUBE3では入力チェック時のエラーメッセージ表示が標準のままだと項目名が表示されておらず、表示させるためには少々手を加える必要があります。

そこで今回は項目名を表示させたいけど分からないという方のために項目名を表示する方法を説明します。

現在のエラーメッセージの表示は標準ではこのようになっています。

f:id:amidaike:20170118102207p:plain

キャプチャを確認してもらうと分かる通り項目名が表示されておらず、何が入力されていないのか分かりづらいです。このエラーメッセージ表示を、

f:id:amidaike:20170118102228p:plain

このように項目名を表示させるにはどうするかというと、 ECCUBEROOT/src/Eccube/Resource/template/default/Form/form_layout.twigの59行目にある

<p class="errormsg text-danger">{{ error.message |trans }}</p>

<p class="errormsg text-danger">{{ form.vars.name|trans }} : {{ error.message |trans }}</p

に修正します。

※ECCUBEROOT : EC-CUBE3がインストールされているディレクト

この修正だけだとまだ不完全で、

f:id:amidaike:20170118105002p:plain

とinput属性のnameがそのまま表示されてしまいます。この部分を日本語に表示させるには、

ECCUBEROOT/src/Eccube/Resource/locale/message.ja.ymlファイルに以下の設定を追加します。(追加する場所はどこでも可能)

name01:name02:kana01: セイ
kana02: メイ
・
・
・

この内容を追加することで項目名が日本語表示されます。

入力チェックエラー発生時に英語表記されたら他の項目に対してもmessage.ja.yml

画面上に表示された値: 日本語名

と追加していくことで日本語に対応可能です。

エラーメッセージに項目名を表示させたいという方は是非お試しください。

既に本番環境を運用されている方でこの方法を適用しても項目名が表示されないという方は、ECCUBEROOT/app/cache/translatorディレクトリを削除後に再度お試しください。

EC-CUBE3の標準デザインについて

EC-CUBE Advent Calendar 2016 22日目の記事です。

公開がかなり遅くなりましたが、22日目はEC-CUBE3の標準デザインについて説明します。

EC-CUBE3で採用されているcssについて

EC-CUBE3からはフロント画面、管理画面ともに標準でレスポンシブ対応となっています。

このレスポンシブ対応を実現するにあたり、EC-CUBE3ではbootstrap3を採用してます。

Bootstrap · The world's most popular mobile-first and responsive front-end framework.

EC-CUBE3で利用されているbootstrap3のcssファイルですが、フロント画面のみカスタマイズが行われており利用するには注意が必要です。

  • フロント画面で参照されるcssファイル
[ECCUBEROOT]/html/template/default/css
  • 管理画面で参照されるcssファイル
[ECCUBEROOT]/html/template/admin/assets/css

上記のディレクトリにcssファイルが格納されているのですが、フロント画面のbootstrap.custom.min.cssファイルにはbootstrap3のクラス定義は入っておりません。

また、フロント画面のhtmlタグを確認すると、

<link rel="stylesheet" href="/template/default/css/style.css?v=3.0.xx">
<link rel="stylesheet" href="/template/default/css/slick.css?v=3.0.xx">
<link rel="stylesheet" href="/template/default/css/default.css?v=3.0.xx">

というようにbootstrap3という文字が見当たりませんが、実際はstyle.css内で

@import url("bootstrap.custom.min.css"); /* only Grid system CSS */

というようにimportされています。

EC-CUBE3ではbootstrap3のデザインをそのまま適用するのではなく、下記のcssファイルでbootstrap3の定義を上書きしています。

  • フロント画面
[ECCUBEROOT]/html/template/default/css/default.css
  • 管理画面
[ECCUBEROOT]/html/template/admin/assets/css/dashboard

もしbootstrap3をそのまま適用したいという場合、面倒ですが定義を削除する必要があります。
フロント画面ではbootstrap3を新たにダウンロードして上書きする必要があります。

EC-CUBE3のデザイン変更時の方法・注意点

EC-CUBE3のデザインを変更する場合、

  • 既存のcssファイル(default.css)に対して変更する方法
  • 全く新しくcssファイルを適用する方法

があります。

それぞれ一長一短がありますが、標準デザインから全く別のデザインに変更するなら新たにcssファイルを定義しなおす方が楽です。

また、デザインを変更する点で気をつけなければいけない点ですが、

  • JavaScriptでidやclass名を指定している画面もあるため、先にJavaScript内で指定している定義を確認
  • プラグインを利用する場合、プラグインの種類によってidやclass名を指定して画面項目の表示を行っているものがあるため、利用するプラグインによって定義を確認

があります。それぞれよく忘れがちとなるためご注意ください。

今回はCSSファイルの扱い方について記述しましたが、次回は実際に画面を変更する方法を例を出して説明します。