EC-CUBE4で新着商品を自動表示するカスタマイズ
EC-CUBE4をインストールした直後のデフォルトデザインテンプレートには、トップページに新着商品を自動表示する機能がありません。商品を追加するたびに手動で追加することは非常に手間ですので、これを自動で表示するよう、見た目も含めてカスタマイズ方法をご紹介します。
もくじ
カスタマイズした環境
- EC-CUBE バージョン4.0.3
- テンプレート デフォルト
新着商品の自動化と見た目の変更
手動で追加する必要がある新着商品の一覧を、▼下記のように４列で自動表示に変更します。
カスタマイズ方法
① 新着商品のtwigファイルを作成
デフォルトのデザインテンプレートにある新着商品ブロックをそのまま流用します。
/src/Eccube/Resource/template/default/Block/new_item.twigファイルをコピーし、
↓
/app/template/default/Block/new_item.twigへ移動します。
② new_item.twig に新着商品を出力
①でコピーした/app/template/default/Block/new_item.twigに下記コードを記述します。
※元のnew_item.twigの内容は必ずバックアップしてください。
{#
/*
*
* new_item.twig
*
*/
#}
{% set Products = CustomizeNewProduct() %}
{% if Products|length > 0 %}
<div class="ec-role">
<div class="ec-newItemRole">
<div class="ec-secHeading">
<span class="ec-secHeading__en">NEW Goods</span>
<span class="ec-secHeading__line"></span>
<span class="ec-secHeading__ja">新入荷商品</span>
</div>
<div class="ec-newItemRole__list">
{% for Product in Products %}
<div class="ec-newItemRole__listItem">
<a href="{{ url('product_detail', {'id': Product.id}) }}">
<img src="{{ asset(Product.main_list_image|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>
</div>
{% endfor %}
</div><!-- .ec-newItemRole__listItem end -->
<div clas="ec-newItemRole__listItemHeading ec-secHeading--tandem">
<a class="ec-inlineBtn--top" href="{{ url('product_list') }}?orderby={{eccube_config.eccube_product_order_newer}}">» 全商品一覧はこちら</a>
</div>
</div><!-- .ec-newItemRole end -->
</div><!-- .ec-role end -->
{% endif %}
③ TwigExtention用のファイルを作成
/app/Customize/Twig/Extension/TwigExtension.phpを作成
※/Customize/以下のディレクトリが無ければ新規作成してください。
④ TwigExtension.phpに新着商品を表示するためのコードを記述
TwigExtension.phpに下記コードをそのままコピーしてください。
<?php
namespace Customize\Twig\Extension;
use Doctrine\Common\Collections;
use Doctrine\ORM\EntityManagerInterface;
use Eccube\Common\EccubeConfig;
use Eccube\Entity\Master\ProductStatus;
use Eccube\Entity\Product;
use Eccube\Entity\ProductClass;
use Eccube\Repository\ProductRepository;
class TwigExtension extends \Twig_Extension
{
private $entityManager;
protected $eccubeConfig;
private $productRepository;
/**
TwigExtension constructor.
**/
public function __construct(
EntityManagerInterface $entityManager,
EccubeConfig $eccubeConfig,
ProductRepository $productRepository
) {
$this->entityManager = $entityManager;
$this->eccubeConfig = $eccubeConfig;
$this->productRepository = $productRepository;
}
/**
Returns a list of functions to add to the existing list.
@return array An array of functions
**/
public function getFunctions()
{
return array(
new \Twig_SimpleFunction('CustomizeNewProduct', array($this, 'getCustomizeNewProduct')),
);
}
/**
Name of this extension
@return string
**/
public function getName()
{
return 'CustomizeTwigExtension';
}
/**
新着商品を10件返す
@return Products|null
**/
public function getCustomizeNewProduct()
{
try {
$searchData = array();
$qb = $this->entityManager->createQueryBuilder();
$query = $qb->select("plob")
->from("Eccube\\Entity\\Master\\ProductListOrderBy", "plob")
->where('plob.id = :id')
->setParameter('id', $this->eccubeConfig['eccube_product_order_newer'])
->getQuery();
$searchData['orderby'] = $query->getOneOrNullResult();
// 新着順の商品情報10件取得
$qb = $this->productRepository->getQueryBuilderBySearchData($searchData);
$query = $qb->setMaxResults(10)->getQuery();
$products = $query->getResult();
return $products;
} catch (\Exception $e) {
return null;
}
return null;
}
}
?>
⑤ スタイルシートの修正
スタイルシートで商品のレイアウトを調整します。PCは４列、スマホは３列表示するように変更します。こちらは導入するサイトのレイアウトによって適宜変更して下さい。
管理画面の「コンテンツ管理」＞「CSS管理」のカスタマイズ用CSSで上書きします。
/* トップページ新着商品リスト */
.ec-newItemRole .ec-newItemRole__list{
flex-wrap:wrap;
}
.ec-newItemRole .ec-newItemRole__list .ec-newItemRole__listItem{
width:20%;
margin:0 auto 20px auto;
}
.ec-newItemRole .ec-newItemRole__list .ec-newItemRole__listItem a{
max-width:96%;
display:block;
}
.ec-newItemRole .ec-newItemRole__listItemPrice{
color:#cc0000;
font-weight:bold;
text-align: right;
font-size:18px;
}
@media screen and (max-width:768px){
.ec-newItemRole .ec-newItemRole__list .ec-newItemRole__listItem{
width:33.3%;
}
}
⑥ キャッシュファイルを削除
管理画面のキャッシュ管理＞「キャッシュ削除」またはサーバーから直接/var/cache/以下すべてのファイルを削除します。