ec-cubeの商品を【タグで絞込み検索】できるようにしてみた

2020.09.15
EC-CUBE

昨今、新型コロナウイルスの影響で実店舗を持っている、飲食店やアパレルショップでECサイトを開設する需要が増えているかと思います。
その中でも人気なオープンソースであるEC-CUBEのカスタム方法を紹介していきたいと思います。

EC-CUBEでは、商品にカテゴリーの他にタグというものを設定することができます。
カテゴリーとタグの違いについて簡単に簡単に説明すると、カテゴリーは階層をもって持つことができます。アパレル商品を例にすると、
メンズ　-　シャツ
　　　　∟ ボトムス
　　　　∟ アクセサリー
という感じに設定するもので、
タグはひとつひとつの商品に付ける目印のようなものでしょうか。例えば「カジュアル」「キレイめ」といったように特徴を表すものを設定します。

1. タグで絞り込み検索をする
- 1.1. 検索パラメーターにタグIDを追加
- 1.2. 商品一覧画面でタグ一覧を表示させる

タグで絞り込み検索をする

EC-CUBEでは、タグを設定することで商品の詳細ページで設定されたタグを表示してくれます。
ただ、言ってしますとそれだけです。
そこで、今回はせっかく設定したタグで商品を絞り込み検索できるようにするカスタム方法をご紹介したいと思います。

検索パラメーターにタグIDを追加

まずは、検索時のパラメーターにtag_idというものが入ってきたときに認識させるようにします。
下記の2ファイルを作成して、それぞれの内容をコピーして保存します。

app > Customize > Form > Extension > SearchProductTypeExtension.php

<?php
namespace Customize\Form\Extension;
 
use Eccube\Form\Type\SearchProductType;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\Extension\Core\Type\HiddenType;
use Symfony\Component\Form\FormBuilderInterface;
 
class SearchProductTypeExtension extends AbstractTypeExtension
{ 
     /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('tag_id', HiddenType::class, []);
    }

    /**
     * {@inheritdoc}
     */
    public function getExtendedType()
    {
        return SearchProductType::class;
    }
}

app > Customize > Repository > TagIdSearchCustomizer.php

<?php
 
namespace Customize\Repository;
 
use Eccube\Doctrine\Query\QueryCustomizer;
use Eccube\Repository\QueryKey;
use Doctrine\ORM\QueryBuilder;
 
/**
 * 
 */
class TagIdSearchCustomizer implements QueryCustomizer {
 
    /**
     * 検索パラメータにtag_idを追加
     */
    public function customize(QueryBuilder $builder, $params, $queryKey)
    {
        if (!empty($params['tag_id']) && $params['tag_id']) {
            $builder->innerJoin('p.ProductTag', 'pt');
            $builder->andWhere('pt.Tag = :tag_id');
            $builder->setParameter('tag_id', $params['tag_id']);
        }
    }
 
    public function getQueryKey(): string
    {
        return QueryKey::PRODUCT_SEARCH;
    }
 
}

これで、検索パラメータに「tag_id=3」が渡ってきたら、タグIDが3のものが絞込検索されて表示されます。

商品一覧画面でタグ一覧を表示させる

裏側の処理は出来たので、画面にタグ一覧を表示させリンクを作成していきましょう。
コチラも簡単で、EC-CUBEの管理画面から　コンテンツ管理 > ページ管理で商品一覧ページを選択して、表示させたい箇所に以下を追加します。
ちなみに私は、カテゴリーの下に表示させるようにしました。

{# タグ表示対応 #}
{% set Tags = repository('Eccube\\Entity\\Tag').getList() %}
{% set now_tag_id = app.request.query.get('tag_id') %}
<ul class="ec-productRole-custom__tags">
    {% if  now_tag_id is null or now_tag_id == '' %}
        <li class="ec-productRole-custom__tag">全て</li>
    {% else %}
        <a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'tag_id': ''})) }}">
            <li class="ec-productRole-custom__tag">全て</li>
         </a>
    {% endif %}
    {% for Tag in Tags %}
        {% if Tag.id == now_tag_id %}
            <li class="ec-productRole-custom__tag">{{ Tag }}</li>
        {% else %}
            <a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'tag_id': Tag.id})) }}">
            <li class="ec-productRole-custom__tag">{{ Tag }}</li>
            </a>
        {% endif %}
    {% endfor %}
</ul>

あとは、CSSで体裁を整えてあげます。
コンテンツ管理 > CSS管理で以下を追加してあげてください。こちらはお好みで編集していただいて構いません。

.ec-productRole-custom__tags {
    margin-top: 16px;
    padding: 10px;
    border-bottom: 1px dotted #ccc;
}
.ec-productRole-custom__tags > a:hover{
    text-decoration: none;
}
.ec-productRole-custom__tag {
    display: inline-block;
    padding: 2px 5px;
    list-style: none;
    font-size: 80%;
    border: solid 1px #D7DADD;
    border-radius: 3px;
    background-color: #F5F7F8;
    margin-bottom: 5px;
}