更新日: 2022 / 04 / 17

Bootcube2とUICubeの連携方法

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

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

Bootcube2とUICubeの連携方法

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

BootCube BootCubeとUICubeの連携方法1

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

BootCube BootCubeとUICubeの連携方法2

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

BootCube BootCubeとUICubeの連携方法3

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

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

// この行を削除
{% 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つのやり方としてはBootcube2のブロックを別ファイル名で作成し、売り上げランキングの方にコードをコピペする方法でもOKです。