BootCubeとUICubeの連携方法

EC-CUBE4向けレスポンシブテンプレートのBootCubeとUICubeを連携させて、デフォルトにはない売り上げランキングやカテゴリーごとの新着商品などを作成し、オリジナルショップを作る方法を紹介します。

UICubeの使い方はこちらのドキュメントをご覧ください。

BootCubeとUICubeの連携方法

まずはUICubeをインストールして使いたい機能のあるプラグインを作成します。ここでは売り上げランキングを作ってみます。

BootCube BootCubeとUICubeの連携方法1

プラグインと同時にブロックが生成されます。ファイル名は、プラグインコード_block.twigのようになります。このときコード上部にあるデータ取得の部分だけはあとで使うためコピーしてきます。

BootCube BootCubeとUICubeの連携方法2

生成されたブロックと同じファイル名でBootCubeのブロックを作成します。ここではレイアウト4の新着商品を選択します。

BootCube BootCubeとUICubeの連携方法3

するとUICubeで作った売り上げランキングブロックにBootCubeのコードがコピーされます。あとはコピーしておいたデータ取得の部分を変更すれば完了です。

なお、売り上げランキングの表示設定(タイトルなど)は反映されないのでご注意ください。

// この行を削除
{% set Products = repository('Eccube\\Entity\\Product').findBy([], [],9) %}

// 下の2行を追加
{% set Products = repository('Plugin\\Ranking\\Entity\\RankingConfig').getProductRanking %}
{% set Config = repository('Plugin\\Ranking\\Entity\\RankingConfig').get %}

BootCube BootCubeとUICubeの連携方法4

もう1つのやり方としてはBootCubeのブロックを別ファイル名で作成し、売り上げランキングの方にコードをコピペする方法でもOKです。

Copyright © 2020 homupedia.com