EC-CUBE 4.1系で使える 商品の人気雰囲気演出機能 プラグインを公開しました

執筆者情報

中村 圭介

株式会社カジヤ/代表取締役　男性向けファッション通販サイト運営の会社を経験し、現職に至る。デザインや開発から、ECやメディアのコンサルティングまでを一貫して行う。お付き合いのあるお客様の事業を成功に導けるように、再現性のある成長支援ができる会社を目指す。

当社が開発したEC-CUBE 4系のプラグインが公開されました。無料ですのでお気軽にご利用ください。

https://www.ec-cube.net/products/detail.php?product_id=2382

1. EC-CUBE 4系 商品の人気雰囲気演出機能 はどんなプラグイン？

EC-CUBE 4系の商品ページに、「この商品を X人がカートに追加しています」「この商品を X人がお気に入りに登録しています」という表示を追加してくれるプラグインです。

2. 商品の人気雰囲気演出機能の機能紹介

2-1. 表示される人数の仕様

2-2. 表示時間やカラー等の変更方法

プラグインを有効化すると、app/template/%theme% 内に /Tiip/asset.twig , /Tiip/snipet.twig というファイルが生成されます。このファイルのJavaScriptの変数やCSSを変更することで、簡単に調整ができますので、ご自由に編集してください。

<script>
const TiipOpt = {
startTime : 0, {# 表示開始までの時間(ミリ秒 1s = 1000 ) #}
endTime : 5000, {# 表示終了まで #}
}
</script>
<style>
:root {
--ttip-card-bg-color: #eda106d1; {# カード背景のカラー(デフォルト:オレンジ[#eda106d1]) #}
--ttip-card-txt-color: #ffffff; {# カード背景のカラー(デフォルト:ホワイト[#FFFFFFF]) #}
--ttip-card-timelag: 0.5s; {# カード表示/非表示時の時間差 #}
}

3. カスタマイズ例

3-1. 表示時間：２秒、背景：青、カード間の時間差：０秒

<script>
const TiipOpt = {
startTime : 0, {# 表示開始までの時間(ミリ秒 1s = 1000 ) #}
endTime : 2000, {# 表示終了まで #}
}
</script>
<style>
:root {
--ttip-card-bg-color: #069fedd1; {# カード背景のカラー（デフォルト：オレンジ[#eda106d1]） #}
--ttip-card-txt-color: #ffffff; {# カード背景のカラー（デフォルト：ホワイト[#FFFFFFF]） #}
--ttip-card-timelag: 0s; {# カード表示／非表示時の時間差 #}
}

3-2. 表示を下から上に変更

.tiip-cartin,
.tiip-favorite{
- transform: translate(-20px, 0);
+ transform: translate(0, 20px);
}
.tiip-area.slideOut .tiip-cartin,
.tiip-area.slideOut .tiip-favorite{
- transform: translate(10px, 0);
+ transform: translate(0, -10px);
}


3-3. 表示位置を右上に変更

.tiip-area{
- bottom: 15px;
- left: 15px;
+ top: 15px;
+ right: 15px;
}

4. 株式会社カジヤでは、EC-CUBE4系のプラグイン開発や制作・カスタマイズを承っております

当社では、通販サイトの立ち上げからカスタマイズだけでなく、Webコンサルティングや日々の更新業務の代行まで、幅広くサポートを行っております。（参考料金についてはこちらをご確認ください）。

EC-CUBEのカスタマイズやリニューアル、新規オープンのご相談や、通販の売上UP、メディア集客でお困りのことがございましたら、以下フォームよりお気軽にご相談くださいませ。