お気に入りボタンプラグインでトップページに表示した商品のお気に入りボタンを設置する方法です。
JavaScriptを追加
管理画面のコンテンツ管理＞JavaScript管理に以下のコードを追加してください。
$(function(){
$(document).on('click', 'button#favorite[token-for-anchor]', function(e) {
const $this = $(this);
$.ajax({
type: "POST",
url: $this.attr('url'),
data: {
'_token': $this.attr('token-for-anchor'),
'_method': $this.attr('data-method'),
'product_id': $this.attr('data-product_id')
}
}).done(function (data) {
switch ($this.attr('data-method')) {
case 'post':
$this.attr('url', "{{ url('plg_product_favorite_api_delete') }}");
$this.attr('data-method', 'delete');
$this.text("お気に入りから削除");
break;
case 'delete':
$this.attr('url', "{{ url('plg_product_favorite_api_add') }}");
$this.attr('data-method', 'post');
$this.text("お気に入りに追加");
break;
}
}).fail(function (data) {
alert(data.responseJSON);
})
});
});お気に入り登録しているか判定するTwig関数を用意
カスタマイズディレクトリにお気に入り登録しているか判定するTwig関数を用意します。
<?php
namespace Customize\Twig\Extension;
use Eccube\Entity\Customer;
use Eccube\Entity\Product;
use Eccube\Repository\CustomerFavoriteProductRepository;
use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;
class CustomerFavoriteProductExtension extends AbstractExtension
{
/**
* @var CustomerFavoriteProductRepository
*/
private $customerFavoriteProductRepository;
public function __construct(CustomerFavoriteProductRepository $customerFavoriteProductRepository)
{
$this->customerFavoriteProductRepository = $customerFavoriteProductRepository;
}
public function getFunctions()
{
return [
new TwigFunction('is_favorite', [$this, 'isFavorite'])
];
}
public function isFavorite(?Customer $customer, Product $product): bool
{
if (null === $customer) {
return false;
}
return $this->customerFavoriteProductRepository->isFavorite($customer, $product);
}
}商品にお気に入りボタンを追加
表示したい任意の商品を以下のコードで設置してください。
今回は新着商品ブロックにお気に入りボタンを追加するサンプルです。
{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
<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">{{ 'front.block.new_item.title__en'|trans }}</span>
<span class="ec-secHeading__line"></span>
<span class="ec-secHeading__ja">{{ 'front.block.new_item.title__ja'|trans }}</span>
<a class="ec-inlineBtn--top" href="{{ url('product_list') }}">{{ 'front.block.new_item.more'|trans }}</a>
</div>
</div>
<div class="ec-newItemRole__listItem">
<a href="{{ url('product_detail', {'id': '1'}) }}">
<img src="{{ asset('cube-1.png', 'save_image') }}">
<p class="ec-newItemRole__listItemTitle">{{ 'front.block.new_item.item_1_name'|trans }}</p>
<p class="ec-newItemRole__listItemPrice">{{ 'front.block.new_item.item_1_price'|trans }}</p>
</a>
</div>
<div class="ec-newItemRole__listItem">
<a href="{{ url('product_detail', {'id': '2'}) }}">
<img src="{{ asset('sand-1.png', 'save_image') }}">
<p class="ec-newItemRole__listItemTitle">{{ 'front.block.new_item.item_2_name'|trans }}</p>
<p class="ec-newItemRole__listItemPrice">{{ 'front.block.new_item.item_2_price'|trans }}</p>
</a>
</div>
<div class="ec-newItemRole__listItem">
<a href="{{ url('product_detail', {'id': '1'}) }}">
<img src="{{ asset(''|no_image_product , 'save_image') }}">
<p class="ec-newItemRole__listItemTitle">{{ 'front.block.new_item.item_3_name'|trans }}</p>
<p class="ec-newItemRole__listItemPrice">{{ 'front.block.new_item.item_3_price'|trans }}</p>
</a>
</div>
{% set Product = repository("Eccube\\Entity\\Product").find(1) %}
<div class="ec-newItemRole__listItem">
<a href="{{ url('product_detail', {'id': Product.id}) }}">
<img src="{{ asset(''|no_image_product , 'save_image') }}">
<p class="ec-newItemRole__listItemTitle">{{ Product.name }}</p>
<p class="ec-newItemRole__listItemPrice">
{% if Product.hasProductClass %}
{% if Product.getPrice02Min == Product.getPrice02Max %}
{{ Product.getPrice02IncTaxMin|price }}
{% else %}
{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
{% endif %}
{% else %}
{{ Product.getPrice02IncTaxMin|price }}
{% endif %}
</p>
</a>
{%
set is_favorite = is_favorite(app.user, Product)
%}
<div class="ec-productRole__favorite__btn">
{% if is_favorite == false %}
<button id="favorite" class="ec-blockBtn--cancel"
url="{{ url('plg_product_favorite_api_add') }}" {{ csrf_token_for_anchor() }}
data-method="post" data-product_id="{{ Product.id }}">
{{ 'front.product.add_favorite'|trans }}
</button>
{% else %}
<button id="favorite" class="ec-blockBtn--cancel"
url="{{ url('plg_product_favorite_api_delete') }}" {{ csrf_token_for_anchor() }}
data-method="delete" data-product_id="{{ Product.id }}">
{{ 'product_list_fav_btn4.front.product.delete_favorite'|trans }}
</button>
{% endif %}
</div>
</div>
</div>
</div>
</div>