EC-CUBE4:サイト全体(ヘッダー・Body)の背景設定

カスタマイズご希望の方はこちら

カスタマイズ内容

ヘッダーとBodyの背景デザインを50点の中から選択、変更できます。

001

▼デザインパターンのサンプル
https://www.kaiplus.com/user_data/design_ec4.php

変更は、default_frame.twigを直接書き換えます。

■src/Eccube/Resource/template/default/default_frame.twig

127行目付近、コメントアウト {# #} を削除し数値を変更→001~050
——————————————-
{# ▼ヘッダー・Bodyの背景 コメントアウトを解除し数値を変更→001~050 #}
{# <link rel=”stylesheet” href=”{{ asset(‘assets/css/design/001/style.css’) }}”> #}
——————————————-

デザインの確定後は上記変更のままでもよいのですが、次の方法によりcssへのリンクを1つ減らすことができます。

① /css/design/確定した番号/style.css の内容をすべてコピーします。
② /css/style.css の最後に貼り付けます。
③ default_frame.twigからコードを削除します。
カスタマイズご希望の方はこちら

EC-CUBE4プラグイン:オススメ商品管理プラグイン

→ 通常のEC-CUBEにも適用できます
EC-CUBEカスタマイズ版付属プラグイン

プラグインのインストール

オーナーズストア > プラグイン > プラグイン一覧
(1)ユーザー独自プラグインの「アップロードして新規追加」をクリックして、インストールしてください。
(2)インストールが完了したら、有効化アイコンをクリックして、プラグインを稼働して下さい。
(3)コンテンツ管理 > レイアウト管理で、ブロックを配置して下さい。

001

商品の登録

(1)コンテンツ管理のメニューをクリック

008

(2)「新規登録」ボタンをクリック

009

(3)「商品の追加」ボタンをクリック

010

(4)商品検索画面が表示されるので、検索結果から商品を「決定」します。

012

プラグイン設定

プラグイン一覧の設定アイコンをクリックすると、表示の仕方を設定することが出来ます。

020

004

 

スライドの表示件数と横並びの列数

twig ファイルを修正することで、表示件数や列数を変更することができます。
プラグインのインストールで生成される下記フォルダのファイルを修正します。
■app/template/default/Block/osusume_product_block.twig

スライドの表示件数
<script> 内を修正
slidesToShow: の値を変更します。4→5
slidesToScroll は、スライドが切り替わる際の移動する商品の個数なので、必ずしもslidesToShow と同じにする必要はありません。

横並びの列数
<style> 内のwidth: の値を変更します。20%→25%

016

↓ 上段は、スライドの表示件数を5に変更。下段は、表示件数4。

014

↓ 横並び5 列に変更。

015
→ 通常のEC-CUBEにも適用できます

EC-CUBE4プラグイン:手動ランキング管理プラグイン

→ 通常のEC-CUBEにも適用できます
EC-CUBEカスタマイズ版付属プラグイン

プラグインのインストール

オーナーズストア > プラグイン > プラグイン一覧
(1)ユーザー独自プラグインの「アップロードして新規追加」をクリックして、インストールしてください。
(2)インストールが完了したら、有効化アイコンをクリックして、プラグインを稼働して下さい。
(3)コンテンツ管理 > レイアウト管理で、ブロックを配置して下さい。

001

商品の登録

(1)コンテンツ管理のメニューをクリック

008

(2)「新規登録」ボタンをクリック

009

(3)「商品の追加」ボタンをクリック

010

(4)商品検索画面が表示されるので、検索結果から商品を「決定」します。

012

プラグイン設定

プラグイン一覧の設定アイコンをクリックすると、表示の仕方を設定することが出来ます。

020

006

スライドの表示件数と横並びの列数

twig ファイルを修正することで、表示件数や列数を変更することができます。
プラグインのインストールで生成される下記フォルダのファイルを修正します。
■app/template/default/Block/rankingmanual_product_block.twig

スライドの表示件数
<script> 内を修正
slidesToShow: の値を変更します。4→5
slidesToScroll は、スライドが切り替わる際の移動する商品の個数なので、必ずしもslidesToShow と同じにする必要はありません。

横並びの列数
<style> 内のwidth: の値を変更します。20%→25%

016

↓ 上段は、スライドの表示件数を5に変更。下段は、表示件数4。

014

↓ 横並び5 列に変更。

015
→ 通常のEC-CUBEにも適用できます

EC-CUBE4プラグイン:最近のチェック商品プラグイン

→ 通常のEC-CUBEにも適用できます
EC-CUBEカスタマイズ版付属プラグイン

プラグインのインストール

オーナーズストア > プラグイン > プラグイン一覧
(1)ユーザー独自プラグインの「アップロードして新規追加」をクリックして、インストールしてください。
(2)インストールが完了したら、有効化アイコンをクリックして、プラグインを稼働して下さい。
(3)コンテンツ管理 > レイアウト管理で、ブロックを配置して下さい。

001

商品の登録

自動的に商品が表示されるので、登録画面はありません。

プラグイン設定

プラグイン一覧の設定アイコンをクリックすると、表示の仕方を設定することが出来ます。

020

002

スライドの表示件数と横並びの列数

twig ファイルを修正することで、表示件数や列数を変更することができます。
プラグインのインストールで生成される下記フォルダのファイルを修正します。
■app/template/default/Block/checked_item_recently.twig

スライドの表示件数
<script> 内を修正
slidesToShow: の値を変更します。4→5
slidesToScroll は、スライドが切り替わる際の移動する商品の個数なので、必ずしもslidesToShow と同じにする必要はありません。

横並びの列数
<style> 内のwidth: の値を変更します。20%→25%

016

↓ 上段は、スライドの表示件数を5に変更。下段は、表示件数4。

014

↓ 横並び5 列に変更。

015
→ 通常のEC-CUBEにも適用できます

EC-CUBE4プラグイン:新商品自動表示プラグイン

→ 通常のEC-CUBEにも適用できます
EC-CUBEカスタマイズ版付属プラグイン

プラグインのインストール

オーナーズストア > プラグイン > プラグイン一覧
(1)ユーザー独自プラグインの「アップロードして新規追加」をクリックして、インストールしてください。
(2)インストールが完了したら、有効化アイコンをクリックして、プラグインを稼働して下さい。
(3)コンテンツ管理 > レイアウト管理で、ブロックを配置して下さい。

001

商品の登録

自動的に商品が表示されるので、登録画面はありません。

プラグイン設定

プラグイン一覧の設定アイコンをクリックすると、表示の仕方を設定することが出来ます。

020

003

スライドの表示件数と横並びの列数

twig ファイルを修正することで、表示件数や列数を変更することができます。
プラグインのインストールで生成される下記フォルダのファイルを修正します。
■app/template/default/Block/new_product_auto.twig

スライドの表示件数
<script> 内を修正
slidesToShow: の値を変更します。4→5
slidesToScroll は、スライドが切り替わる際の移動する商品の個数なので、必ずしもslidesToShow と同じにする必要はありません。

横並びの列数
<style> 内のwidth: の値を変更します。20%→25%

016

↓ 上段は、スライドの表示件数を5に変更。下段は、表示件数4。

014

↓ 横並び5 列に変更。

015
→ 通常のEC-CUBEにも適用できます

EC-CUBE4プラグイン:自動売上ランキング設定プラグイン

→ 通常のEC-CUBEにも適用できます
EC-CUBEカスタマイズ版付属プラグイン

プラグインのインストール

オーナーズストア > プラグイン > プラグイン一覧
(1)ユーザー独自プラグインの「アップロードして新規追加」をクリックして、インストールしてください。
(2)インストールが完了したら、有効化アイコンをクリックして、プラグインを稼働して下さい。
(3)コンテンツ管理 > レイアウト管理で、ブロックを配置して下さい。

001

商品の登録

自動的に商品が表示されるので、登録画面はありません。

プラグイン設定

プラグイン一覧の設定アイコンをクリックすると、表示の仕方を設定することが出来ます。

020

022

スライドの表示件数と横並びの列数

twig ファイルを修正することで、表示件数や列数を変更することができます。
プラグインのインストールで生成される下記フォルダのファイルを修正します。
■app/template/default/Block/rankingauto_block.twig

スライドの表示件数
<script> 内を修正
slidesToShow: の値を変更します。4→5
slidesToScroll は、スライドが切り替わる際の移動する商品の個数なので、必ずしもslidesToShow と同じにする必要はありません。

横並びの列数
<style> 内のwidth: の値を変更します。20%→25%

016

↓ 上段は、スライドの表示件数を5に変更。下段は、表示件数4。

014

↓ 横並び5 列に変更。

015
→ 通常のEC-CUBEにも適用できます

EC-CUBE4プラグイン:関連商品プラグイン

→ 通常のEC-CUBEにも適用できます
EC-CUBEカスタマイズ版付属プラグイン

プラグインのインストール

オーナーズストア > プラグイン > プラグイン一覧
(1)ユーザー独自プラグインの「アップロードして新規追加」をクリックして、インストールしてください。
(2)インストールが完了したら、有効化アイコンをクリックして、プラグインを稼働して下さい。
(3)コンテンツ管理 > レイアウト管理で、ブロックを配置して下さい。

001

商品の登録

(1)「関連商品プラグイン」をインストールすると、商品登録画面に「関連商品」項目が追加されます。

018

(2)矢印をクリックすると展開するので、「商品を選択」ボタンをクリックして商品を登録してください。

019

プラグイン設定

プラグイン一覧の設定アイコンをクリックすると、表示の仕方を設定することが出来ます。

020

007

関連商品は商品詳細ページで表示されます。

関連商品の登録数の初期値は10 ですが、変更が可能です。
■ app/Plugin/RelatedProduct4/Resource/config/services.yml
3 行目付近、
———————
related_product.max_item_count: 10
———————
数値を変更します。

スライドの表示件数と横並びの列数

twig ファイルを修正することで、表示件数や列数を変更することができます。
プラグインのインストールで生成される下記フォルダのファイルを修正します。
■app/Plugin/RelatedProduct4/Resource/template/front/related_product.twig

スライドの表示件数
<script> 内を修正
slidesToShow: の値を変更します。4→5
slidesToScroll は、スライドが切り替わる際の移動する商品の個数なので、必ずしもslidesToShow と同じにする必要はありません。

横並びの列数
<style> 内のwidth: の値を変更します。20%→25%

016
→ 通常のEC-CUBEにも適用できます

EC-CUBE4帳票PDFプラグイン(納品書・見積書・請求書・領収書)

→ 通常のEC-CUBEにも適用できます

000 ■ご注文者の住所・氏名・電話番号

■帳票ごとに異なるメッセージを保存できます。

■ロゴや印鑑枠が不要の場合は作成時に非表示設定が可能。

■お届け先の住所・氏名・電話番号・お問い合わせ番号
お問い合わせ番号は作成時に非表示設定が可能。

■お支払い、配送情報
配送業者は作成時に非表示設定が可能。

■ご注文手続き画面でのお問い合わせを表示します。
不要の場合は、作成時に非表示設定が可能。

EC-CUBE4では、受注一覧が配送先ごとに表示されるようになり、デフォルトの作成機能では、複数配送先をまとめて作成することが出来ません。
本プラグインは、EC-CUBE3・2系と同様、注文者と配送先を一括でまとめて作成することができます。

プラグインのインストール

(1)オーナーズストア > プラグイン一覧
ユーザー独自プラグインの「アップロードして新規追加」ボタンをクリックし、「参照」でプラグインの圧縮ファイルを選択して「アップロード」します。
▼プラグインの圧縮ファイル
—————————–
ReportPdf.tar.gz
—————————–

000-1

 

(2)追加された「帳票PDFプラグイン」の「有効」ボタンをクリックします。

000-2

(3)受注管理>受注一覧
「納品書出力」のボタンやアイコンをクリックすると、プラグインによる帳票を作成することができます。
ブラウザによっては、ブラウザの「更新」をしないと反映されない場合がありますので、その場合は、受注一覧画面でブラウザの更新を行って下さい。
▼参考
デフォルトの帳票出力画面
→ /admin/order/export/pdf
プラグインの帳票出力画面
→ /admin/order/export/report_pdf

帳票出力と各帳票の入力欄

納品書出力のアイコンをクリックすると、帳票出力画面が表示されます。
帳票の種類で帳票を選択すると、それぞれの帳票で必要な入力欄だけが表示されます。

▼納品書(納品書メッセージ、備考、表示の有無)

002

▼見積書(見積書メッセージ、備考、表示の有無)

003

 

▼請求書(請求書メッセージ、備考、表示の有無)

004

▼領収書(領収書、備考)

005

入力内容を保存する
チェックを入れて、作成をクリックすると、入力内容がデータベースに登録されます。
次回からは、データベース登録が反映され、入力された状態で画面が開きます。
入力欄を変更し、チェック→作成を行うと、最新の入力が登録されます。
ただし、以下の入力欄は登録されませんので、作成ごとに入力してください。
・帳票の種類(初期値は常に「納品書」)
・タイトル
・領収書の「No.」
・領収書の「但」

領収書「左上に住所を表示」

左上に住所を表示をチェックすると、住所、氏名、電話番号が表示されます。
窓枠付き封筒に入れたときの住所表示を想定しています。

007

105

帳票タイトルの変更方法

twigファイルを直接編集してください。
■app/Plugin/ReportPdf/Resource/template/admin/report_pdf.twig
98行目付近の<script>内の文言を変更して下さい。

106

配送先が複数ある注文の場合

EC-CUBE4では、
受注一覧がお届け先別に表示されるようになっています。
↓赤枠は同じ注文ID

101

配送先ごとのアイコンのクリックで、出力されるPDFは多少異なります。

帳票出力画面で
注文者・配送先を一括で作成するを選択すると、
① 左上の宛名は、常に注文者が表示されます。
② お届け先の情報は、受注一覧のお届け先が表示されます。
③ 総合計金額が表示されます。
④ 購入商品の明細には、商品名や金額、請求金額などがまとめて表示されます。
⑤ お届け先ごとの情報(住所・氏名や購入商品の明細)が、次ページから、お届け先ごとに出力されます。

107

配送先ごとに作成するを選択すると、
① 左上の宛名とお届け情報は、受注一覧のお届け先が表示されます。
② 総合計金額は表示されません。
③ 購入商品の明細には、お届け先に関わる商品名だけが表示されます。

108

注文者・配送先を一括で作成するを選択した場合

109

2ページ目以降、
すべてのお届け先情報が出力されます。

110

111

112

配送先ごとに作成するを選択した場合

113

領収書には適用されません。
領収書は受注一覧のお届け先が宛名となります。
金額は、総合計金額が表示され、購入商品の明細もまとめて表示されます。

114

 

PDF帳票サンプル

納品書
納品書(複数配送あり)
納品書(配送先ごと)
見積書
請求書
領収書
領収書(複数配送)
→ 通常のEC-CUBEにも適用できます

EC-CUBE4プラグイン:ピックアップ商品管理プラグイン

→ 通常のEC-CUBEにも適用できます
EC-CUBEカスタマイズ版付属プラグイン

プラグインのインストール

オーナーズストア > プラグイン > プラグイン一覧
(1)ユーザー独自プラグインの「アップロードして新規追加」をクリックして、インストールしてください。
(2)インストールが完了したら、有効化アイコンをクリックして、プラグインを稼働して下さい。
(3)コンテンツ管理 > レイアウト管理で、ブロックを配置して下さい。

001

商品の登録

(1)コンテンツ管理のメニューをクリック

008

(2)「新規登録」ボタンをクリック

009

(3)「商品の追加」ボタンをクリック

010

(4)商品検索画面が表示されるので、検索結果から商品を「決定」します。

012

プラグイン設定

プラグイン一覧の設定アイコンをクリックすると、表示の仕方を設定することが出来ます。

020

005

スライドの表示件数と横並びの列数

twig ファイルを修正することで、表示件数や列数を変更することができます。
プラグインのインストールで生成される下記フォルダのファイルを修正します。
■app/template/default/Block/pickup_product_block.twig

スライドの表示件数
<script> 内を修正
slidesToShow: の値を変更します。4→5
slidesToScroll は、スライドが切り替わる際の移動する商品の個数なので、必ずしもslidesToShow と同じにする必要はありません。

横並びの列数
<style> 内のwidth: の値を変更します。20%→25%

016

↓ 上段は、スライドの表示件数を5に変更。下段は、表示件数4。

014

↓ 横並び5 列に変更。

015

 
→ 通常のEC-CUBEにも適用できます
 

EC-CUBE3:商品をカレンダーに表示する

このカスタマイズを現行サイトへ実装したい方はこちら

カスタマイズ内容

・カレンダーはブロックとして配置します。
・カレンダーは、jQueryプラグイン「Zabuto Calendar」を利用しています。
・商品登録に「カレンダー日付」欄が設置されます。「カレンダー日付」欄が登録されていれば、カレンダーに表示されます。
・商品登録に「販売終了日時」欄が設置されます。「販売終了日時」を過ぎると、カートボタンは表示されません。
・商品ページ(詳細・一覧)に「カレンダー日付」と「販売終了日時」が表示されます。
・商品一覧ページでは、「カレンダー日付順」(昇順)で並び替えることができます。
・1日に登録できる商品は1点だけです。1日に複数の商品を登録することはできません。
・管理画面の商品マスターに検索条件「カレンダー日付」が追加され、「カレンダー日付」で検索した場合、検索結果では商品が「カレンダー日付」順(昇順)に並びます。
・モーダルウィンドウの項目の表示・非表示は、管理画面のショップマスターで指定できます。

商品のカレンダー表示

・1日に登録できる商品は1点だけです。1日に複数の商品を登録することはできません。

001

続きを読む EC-CUBE3:商品をカレンダーに表示する