2019年12月20日 / 最終更新日時 : 2019年12月20日あずみ EC-CUBE

【EC-CUBE4】お気に入り商品ブロックを作る方法

1 ログインユーザーのお気に入り商品を取得するTwig関数を作成
2 お気に入り商品ブロックを新規作成
3 レイアウト管理でお気に入り商品ブロックを設置

EC-CUBE4でお気に入り商品ブロックを作る方法です。

ログインユーザーのお気に入り商品を取得するTwig関数を作成

ログインユーザーのお気に入り商品一覧を取得するTwig関数を作成します。

サンプルコードは以下のとおりです。

<?php

namespace Customize\Twig;

use Doctrine\Common\Collections\Criteria;
use Eccube\Entity\Customer;
use Eccube\Repository\CustomerFavoriteProductRepository;
use Eccube\Request\Context;
use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;

class FavoriteProductExtentionExtension extends AbstractExtension
{
    /**
     * @var CustomerFavoriteProductRepository
     */
    private $customerFavoriteProductRepository;

    /**
     * @var Context
     */
    private $requestContext;

    public function __construct(
        CustomerFavoriteProductRepository $customerFavoriteProductRepository,
        Context $requestContext
    ) {
        $this->customerFavoriteProductRepository = $customerFavoriteProductRepository;
        $this->requestContext = $requestContext;
    }

    public function getFunctions(): array
    {
        return [
            new TwigFunction('favoriteProducts', function($limit = 5){
                $User = $this->requestContext->getCurrentUser();

                if($User && $User instanceof Customer) {
                    return $this->customerFavoriteProductRepository->findBy([
                        "Customer" => $User
                    ], ['create_date' => Criteria::DESC], $limit);
                }

                return [];
            }, ['pre_escape' => 'html', 'is_safe' => ['html']]),
        ];
    }
}

<?php

namespace Customize\Twig;

use Doctrine\Common\Collections\Criteria;

use Eccube\Entity\Customer;

use Eccube\Repository\CustomerFavoriteProductRepository;

use Eccube\Request\Context;

use Twig\Extension\AbstractExtension;

use Twig\TwigFunction;

class FavoriteProductExtentionExtension extends AbstractExtension

{

/**

* @var CustomerFavoriteProductRepository

private $customerFavoriteProductRepository;

/**

* @var Context

private $requestContext;

public function __construct(

CustomerFavoriteProductRepository $customerFavoriteProductRepository,

Context $requestContext

) {

$this->customerFavoriteProductRepository = $customerFavoriteProductRepository;

$this->requestContext = $requestContext;

}

public function getFunctions(): array

{

return [

new TwigFunction('favoriteProducts', function($limit = 5){

$User = $this->requestContext->getCurrentUser();

if($User && $User instanceof Customer) {

return $this->customerFavoriteProductRepository->findBy([

"Customer" => $User

], ['create_date' => Criteria::DESC], $limit);

}

return [];

}, ['pre_escape' => 'html', 'is_safe' => ['html']]),

];

}

お気に入り商品ブロックを新規作成

コンテンツ管理＞ブロック管理でお気に入り商品ブロックを新規作成します。

サンプルコードは以下のとおりです。

{% set favoriteProducts = favoriteProducts(5) %}

{% if favoriteProducts %}
<div class="ec-role">
    <div class="ec-newItemRole">
        <div class="ec-newItemRole__list">
            <div class="ec-newItemRole__listItem">
                <div class="ec-newItemRole__listItemHeading ec-secHeading--tandem">
                    <span class="ec-secHeading__en">FAVORITES</span>
                    <span class="ec-secHeading__line"></span>
                    <span class="ec-secHeading__ja">お気に入り商品</span>
                    <a class="ec-inlineBtn--top" href="{{ url('mypage_favorite') }}">{{ 'front.block.new_item.more'|trans }}</a>
                </div>
            </div>
            {% for fp in favoriteProducts %}
            {% set p = fp.product %}
            <div class="ec-newItemRole__listItem">
                <a href="{{ url('product_detail', {'id': p.id}) }}">
                    <img src="{{ asset(p.main_list_image|no_image_product, 'save_image') }}">
                    <p class="ec-newItemRole__listItemTitle">{{ p.name }}</p>
                    <p class="ec-newItemRole__listItemPrice">
                        {% if p.hasProductClass %}
                            {% if p.getPrice02Min == p.getPrice02Max %}
                                {{ p.getPrice02IncTaxMin|price }}
                            {% else %}
                                {{ p.getPrice02IncTaxMin|price }} ～ {{ p.getPrice02IncTaxMax|price }}
                            {% endif %}
                        {% else %}
                            {{ p.getPrice02IncTaxMin|price }}
                        {% endif %}
                    </p>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

{% set favoriteProducts = favoriteProducts(5) %}

{% if favoriteProducts %}

<span class="ec-secHeading__en">FAVORITES</span>

<span class="ec-secHeading__ja">お気に入り商品</span>

<a class="ec-inlineBtn--top" href="{{ url('mypage_favorite') }}">{{ 'front.block.new_item.more'|trans }}</a>

</div>

{% for fp in favoriteProducts %}

{% set p = fp.product %}

{% if p.hasProductClass %}

{% if p.getPrice02Min == p.getPrice02Max %}

{% else %}

{{ p.getPrice02IncTaxMin|price }} ～ {{ p.getPrice02IncTaxMax|price }}

{% endif %}

{% else %}

{% endif %}

</p>

</a>

</div>

{% endfor %}

</div>

{% endif %}

favoriteProductsの数値を変更することで取得する商品数を指定できます。

レイアウト管理でお気に入り商品ブロックを設置

コンテンツ管理＞レイアウト管理で作成したお気に入り商品ブロックを設置してください。

そうすると以下のように表示されます。

カテゴリー: EC-CUBE、EC-CUBE4