EC-CUBE3カスタマイズ:No.012 商品・項目プルダウンお問い合わせフォーム

現行サイトへ、カスタマイズの実装を希望される方はこちら

▽カスタマイズ内容

・お問い合わせ内容に「お問い合わせ項目」がプルダウンで表示されます。
・「お問い合わせ項目」はマスターデータ管理[mtb_contact_option]で登録します。
・商品詳細ページの「この商品へのお問い合わせ」をクリックすると、その商品に対応したお問い合わせ画面が開きます。
・メールに反映されます。

▽デモサイト
http://kaiplus.com/part/eccube3-1/contact

▼お問い合わせ内容に「お問い合わせ項目」がプルダウンで表示されます。

001

続きを読む EC-CUBE3カスタマイズ:No.012 商品・項目プルダウンお問い合わせフォーム

EC-CUBE3カスタマイズ:No.011 配送伝票番号、伝票URLをメールとMYページに表示(複数配送先に対応)

現行サイトへ、カスタマイズの実装を希望される方はこちら

▽カスタマイズ内容

・カスタマイズ前の、既存の注文データには反映されません。
・まずは、基本情報設定>配送方法設定>各配送方法の編集画面で、伝票No.URL(配送業者の問合せURL)を入力します。
このURLが注文データに登録され、メールに反映されます。
・URLを途中で変更した場合、変更されたURLは変更後の注文に対して適用されます。
変更前のURLには反映されません。
・受注管理>受注登録・編集で、お届け先情報の「配送伝票番号」を登録しないと、発送メールやMYページには反映されません。
・複数の配送先が指定されている場合でも、配送伝票番号は配送先ごとに登録できます。
・マイページのご注文履歴の詳細ページに表示されます。

▽デモサイト
http://kaiplus.com/part/eccube3-1

▼基本情報設定>配送方法設定>各配送方法の編集画面で、伝票No.URL(配送業者の問合せURL)を入力

001

続きを読む EC-CUBE3カスタマイズ:No.011 配送伝票番号、伝票URLをメールとMYページに表示(複数配送先に対応)

EC-CUBE3カスタマイズ:No.010 「支払い方法」の詳細を購入手続きと注文メールに表示する

現行サイトへ、カスタマイズの実装を希望される方はこちら

▽カスタマイズ内容

・基本情報設定 > 支払い方法設定の「編集」画面で「サイト表示」欄と「メール表示」欄に入力します。
・ご注文のご確認ページには、「サイト表示」欄に入力した内容が反映されます。
・メールには、「メール表示」欄に入力した内容が反映されます。

▽デモサイト
http://kaiplus.com/part/eccube3-1/

▼基本情報設定 > 支払い方法設定の「編集」画面で「サイト表示」欄と「メール表示」欄に入力します。

001

002

続きを読む EC-CUBE3カスタマイズ:No.010 「支払い方法」の詳細を購入手続きと注文メールに表示する

EC-CUBE3カスタマイズ:No.009 商品一覧ページを商品タグごとに表示

現行サイトへ、カスタマイズの実装を希望される方はこちら

▽カスタマイズ内容

・商品登録画面で「タグ」を設定した商品をタグごとに一覧で表示します。
・「商品タグ検索」ブロックを配置して一覧ページへ誘導します。
・「商品タグ検索」ブロックに表示されるタグ名は、管理画面での登録内容が自動で反映されます。

▽デモサイト
http://kaiplus.com/part/eccube3-4/

▼商品登録画面で「タグ」を設定した商品をタグごとに一覧で表示します。

001

続きを読む EC-CUBE3カスタマイズ:No.009 商品一覧ページを商品タグごとに表示

EC-CUBE3カスタマイズ:No.006 特集ページ(ランディングページ)

現行サイトへ、カスタマイズの実装を希望される方はこちら

▽カスタマイズ内容

・コンテンツ管理 > 特集ページ(LP)管理 で特集ページの一覧を表示。
作成するページ数に制限はありません。
・「公開」「非公開」の選択が可能。
・「ページのタイトル」「URL名」「カノニカルタグ」「Author」「Description」「Keywords」をページごとに設定可能。
・登録した画像にイメージマップを設定可能。
・TinyMCE(WYSIWYG)により、コンテンツを自由に作成できる。
・YouTube動画の表示が可能。
・商品を20点まで登録可能。

▽デモサイト
http://kaiplus.com/part/eccube3-1/lp?name=special_selection

▼コンテンツ管理 > 特集ページ(LP)管理 で特集ページの一覧を表示

・ 作成するページ数に制限はありません。
・ 「特集ページ(LP)を新規入力」または「編集」をクリックすると、登録・編集画面が開きます。
・ URL欄に、特集ページのURLが表示されます。

001

続きを読む EC-CUBE3カスタマイズ:No.006 特集ページ(ランディングページ)

EC-CUBE3カスタマイズ:No.005 規格画像+規格のプルダウン・ラジオボタン・マトリクス・規格ごとカートボタンが選択できる

現行サイトへ、カスタマイズの実装を希望される方はこちら

▽カスタマイズ内容

「No.003 規格画像をアップロードする」
「No.004 規格のプルダウン・ラジオボタン・マトリクス・規格ごとカートボタンが選択できる」
両方の機能を合わせ持ちます。
・商品登録画面で商品独自のレイアウトを指定したとき
★SHOPマスター設定と同じ
★通常(プルダウン)
★規格ごとにカートボタン
★縦1列の規格一覧
★規格マトリクス

▽デモサイト
http://kaiplus.com/part/eccube3015-3/products/list?category_id=5

 1 規格画像のアップロード方法

(1)「classcate_image」フォルダの作成

管理画面、コンテンツ管理>ファイル管理
「フォルダ作成」欄に「classcate_image」と入力し、「作成」ボタンをクリックする。

001規格画像はすべて、「classcate_image」フォルダに入れます。
「classcate_image」内にアップロードすると、ファイル一覧で「サムネイル画像」が表示されるようになっています。

(2)商品ごとにフォルダを用意する

ファイルが混乱しないように、「classcate_image」内に商品ごとのフォルダを用意します。

① 「classcate_image」の「表示」をクリック

002

② フォルダ名を入力して「作成」ボタンをクリックします。
フォルダ名は任意です。区別しやすいものにしてください。ここでは、商品IDをフォルダ名にしています。
003パスが「user_data > classcate_image」となっていることを確認してください。

(3)フォルダ(商品ごと)に画像をアップロードする

① 商品のフォルダの「表示」をクリックして、フォルダを開きます。

004

② 「ファイルを選択」をクリックしてPC内の画像を選択し、「アップロード」をクリックします。

005

③ 画像がアップロードされ、サムネイルで表示されます。クリックすると拡大表示します。
ファイル名には「フォルダ名」が付加されます。規格画像を設定する際、このフォルダ名(パス)が重要です。→ フォルダ名/ファイル名

006

④ すべての画像をアップロードします。
規格画像を設定する際、「フォルダ名も含めたファイル名」をコピー&ペーストします。ファイル名をクリックすると同時にファイル名が選択状態になります。

007

2 規格画像の設定方法

商品管理 > 商品登録(商品規格)の「規格画像」欄にファイル名を入力

「ファイル管理」画面のファイル名(フォルダ名も含む)をコピーして貼り付けます。

008

「規格画像」をクリックすると、「ファイル管理」画面が別ウィンドウで立ち上がるので、両画面を見ながらコピー&ペーストするといいでしょう。
012

3 規格選択レイアウト:基本情報設定 > SHOPマスター

表示レイアウトは、基本情報設定>SHOPマスターで登録します。
SHOPマスターでの設定が商品詳細ページに反映されますが、商品登録画面でレイアウトを設定した場合、商品登録画面での設定が優先されます。
通常価格からお届け可能日までの表示・非表示設定は、すべての規格レイアウトに反映されます。商品ごとに設定することはできません。

001

4 フロントページでの表示

規格が下記のように登録されている場合のレイアウト表示です。

000

(1)通常(プルダウン)

① 規格が選択される前

002

② 規格が選択された後

003

(2)規格ごとにカートボタン

004

(3)縦1列の規格一覧

005

(4)規格マトリクス

006

5 商品登録画面の設定

商品ごとにレイアウトを設定できます。

007

SHOPマスターで、例えば「規格ごとにカートボタン」が設定されている場合、商品登録画面で「通常(プルダウン)」が設定されていると、商品登録画面での設定が優先されて、下図のように表示されます。

003

6 各項目の表示・非表示

(1)基本情報設定>SHOPマスター

007

上図のようにすべて「非表示」に設定した場合、それぞれのレイアウトは以下のように表示されます。

(2)すべての項目を非表示に設定

010

011

012

013

(3)販売価格と規格画像だけを表示

008

009

010

011

012

7 規格を持たない商品でも、「在庫数」等が表示

(1)商品登録と表示の例①

020

021

(2)商品登録と表示の例②

022

023

▼CSV出力項目設定

013

▼商品登録CSVファイルフォーマット

014

 

【ご利用の流れ】
1.空フォルダをダウンロードします。空フォルダは各カスタマイズごとに異なります。対象となる空フォルダをダウンロードしてください。その際、EC-CUBEのバージョンとデータベースの種類をお書き添えください。
2.現行サイトのファイルを空フォルダに入れた後、zip形式等で圧縮し下記送信先にお送りください。
3.こちらでカスタマイズを施し、ファイルと請求書を送信いたします。
4.お客様ご自身でデータベースの追加・ファイルのアップロードを行い、動作確認をしてください。
5.料金は後払いで結構です。動作に問題がなければ、指定の銀行に料金をお振り込みください。

★カスタマイズによっては、データベースへの追加等が必要になる場合があります。
データベース追加用の命令文(SQL)はこちらで用意しますので、作業はお客様でお願いいたします。

現行サイトへ、カスタマイズの実装を希望される方はこちら

EC-CUBE3カスタマイズ:No.004 規格のプルダウン・ラジオボタン・マトリクス・規格ごとカートボタンが選択できる

現行サイトへ、カスタマイズの実装を希望される方はこちら

▽カスタマイズ内容

・規格表示のレイアウトは、基本情報設定 > SHOPマスターで登録します。
「通常(プルダウン)」「規格ごとにカートボタン」「縦1列の規格一覧」「規格マトリクス」
・「商品コード」「在庫数」「販売制限数」「通常価格」「販売価格」「お届け可能日」の表示・非表示も基本情報設定>SHOPマスターで指定します。
・規格を持たない商品でも、「在庫数」等が表示されます。
・商品コードや通常価格などが、すべての規格で共通している場合は表示されません。(商品名の下の表示と2重表示になるため)
・商品登録画面で、商品独自のレイアウトを指定することができます。
★SHOPマスター設定と同じ
★通常(プルダウン)
★規格ごとにカートボタン
★縦1列の規格一覧
★規格マトリクス
・「商品コード」「在庫数」等の変更は、下記ファイルの該当箇所を修正します。
規格ごとにカートボタン:■src/Eccube/Resource/template/default/Product/option_detailclass1.twig
縦1列の規格一覧:■src/Eccube/Resource/template/default/Product/option_detailclass2.twig
規格マトリクス:■src/Eccube/Resource/template/default/Product/option_detailclass3.twig

▽デモサイト
http://kaiplus.com/part/eccube3015-2/products/list?category_id=5

1 基本情報設定 > SHOPマスター

表示レイアウトは、基本情報設定>SHOPマスターで登録します。
SHOPマスターでの設定が商品詳細ページに反映されますが、商品登録画面でレイアウトを設定した場合、商品登録画面での設定が優先されます。
通常価格からお届け可能日までの表示・非表示設定は、すべての規格レイアウトに反映されます。商品ごとに設定することはできません。

001

2 フロントページでの表示

規格が下記のように登録されている場合のレイアウト表示です。

019

(1)通常(プルダウン)

① 規格が選択される前

002

② 規格が選択された後

003

(2)規格ごとにカートボタン

004

(3)縦1列の規格一覧

005

(4)規格マトリクス

006

3 商品登録画面の設定

商品ごとにレイアウトを設定できます。

007

SHOPマスターで、例えば「規格ごとにカートボタン」が設定されている場合、商品登録画面で「通常(プルダウン)」が設定されていると、商品登録画面での設定が優先されて、下図のように表示されます。

008

4 各項目の表示・非表示

(1)基本情報設定>SHOPマスター

009

上図のようにすべて「非表示」に設定した場合、それぞれのレイアウトは以下のように表示されます。

(2)すべての項目を非表示に設定

010

011

012

013

(3)販売価格だけを表示

014

015

016

017

018

5 規格を持たない商品でも、「在庫数」等が表示

(1)商品登録と表示の例①

020

021

(2)商品登録と表示の例②

022

023

▼CSV出力項目設定

024

▼商品登録CSVファイルフォーマット

025

 

【ご利用の流れ】
1.空フォルダをダウンロードします。空フォルダは各カスタマイズごとに異なります。対象となる空フォルダをダウンロードしてください。その際、EC-CUBEのバージョンとデータベースの種類をお書き添えください。
2.現行サイトのファイルを空フォルダに入れた後、zip形式等で圧縮し下記送信先にお送りください。
3.こちらでカスタマイズを施し、ファイルと請求書を送信いたします。
4.お客様ご自身でデータベースの追加・ファイルのアップロードを行い、動作確認をしてください。
5.料金は後払いで結構です。動作に問題がなければ、指定の銀行に料金をお振り込みください。

★カスタマイズによっては、データベースへの追加等が必要になる場合があります。
データベース追加用の命令文(SQL)はこちらで用意しますので、作業はお客様でお願いいたします。

現行サイトへ、カスタマイズの実装を希望される方はこちら

EC-CUBE3カスタマイズ:No.003 規格画像をアップロードする

現行サイトへ、カスタマイズの実装を希望される方はこちら

▽カスタマイズ内容

・画像のアップロードは、コンテンツ管理>ファイル管理で行います。FTPでのアップロードも可能です。
・画像のアップロードフォルダ:html/user_data/classcate_image
・すべての規格に画像を登録する必要はありません。登録しない規格があっても構いません。
・CSVファイルフォーマットに[規格画像]が挿入されます。
・規格画像のサイズ変更・規格画像の表示場所指定は下記のファイルを修正します。 ■src/Eccube/Resource/template/default/Product/detail.twig

▽デモサイト
http://kaiplus.com/part/eccube3015-1/products/detail/1

1 規格画像のアップロード方法

(1)「classcate_image」フォルダの作成

管理画面、コンテンツ管理>ファイル管理
「フォルダ作成」欄に「classcate_image」と入力し、「作成」ボタンをクリックする。

001規格画像はすべて、「classcate_image」フォルダに入れます。
「classcate_image」内にアップロードすると、ファイル一覧で「サムネイル画像」が表示されるようになっています。

(2)商品ごとにフォルダを用意する

ファイルが混乱しないように、「classcate_image」内に商品ごとのフォルダを用意します。

① 「classcate_image」の「表示」をクリック

002

② フォルダ名を入力して「作成」ボタンをクリックします。
フォルダ名は任意です。区別しやすいものにしてください。ここでは、商品IDをフォルダ名にしています。
003パスが「user_data > classcate_image」となっていることを確認してください。

(3)フォルダ(商品ごと)に画像をアップロードする

① 商品のフォルダの「表示」をクリックして、フォルダを開きます。

004

② 「ファイルを選択」をクリックしてPC内の画像を選択し、「アップロード」をクリックします。

005

③ 画像がアップロードされ、サムネイルで表示されます。クリックすると拡大表示します。
ファイル名には「フォルダ名」が付加されます。規格画像を設定する際、このフォルダ名(パス)が重要です。→ フォルダ名/ファイル名

006

④ すべての画像をアップロードします。
規格画像を設定する際、「フォルダ名も含めたファイル名」をコピー&ペーストします。ファイル名をクリックすると同時にファイル名が選択状態になります。

007

2 規格画像の設定方法

商品管理 > 商品登録(商品規格)の「規格画像」欄にファイル名を入力

「ファイル管理」画面のファイル名(フォルダ名も含む)をコピーして貼り付けます。

008

「規格画像」をクリックすると、「ファイル管理」画面が別ウィンドウで立ち上がるので、両画面を見ながらコピー&ペーストするといいでしょう。
012

3 フロントページでの表示

(1)規格が選択される前は、「画像:選択肢を入力」と表示

009(2)規格が選択されると画像が表示

010(3)規格画像をクリックすると拡大(jQuery.colorbox)

011

(4)画像が設定されていない規格が選択されたとき

「画像はありません。」と表示されます。

013

▼規格画像のサイズ変更・規格画像の表示場所指定

■src/Eccube/Resource/template/default/Product/detail.twig

▽規格画像のサイズ指定(30行目付近)
——————————————
#photoInfo img {
max-width:100%;
}
@media only screen and (min-width: 768px) {
#photoInfo img {
max-width:30%;
}
}
——————————————

▽規格画像の表示場所指定(302行目付近)
変更する場合は下記コードを移動する。
——————————————
<div id=”class_photo”></div>
——————————————

014

015

▼CSV出力項目設定

012

▼商品登録CSVファイルフォーマット

013

 

【ご利用の流れ】
1.空フォルダをダウンロードします。空フォルダは各カスタマイズごとに異なります。対象となる空フォルダをダウンロードしてください。その際、EC-CUBEのバージョンとデータベースの種類をお書き添えください。
2.現行サイトのファイルを空フォルダに入れた後、zip形式等で圧縮し下記送信先にお送りください。
3.こちらでカスタマイズを施し、ファイルと請求書を送信いたします。
4.お客様ご自身でデータベースの追加・ファイルのアップロードを行い、動作確認をしてください。
5.料金は後払いで結構です。動作に問題がなければ、指定の銀行に料金をお振り込みください。

★カスタマイズによっては、データベースへの追加等が必要になる場合があります。
データベース追加用の命令文(SQL)はこちらで用意しますので、作業はお客様でお願いいたします。

現行サイトへ、カスタマイズの実装を希望される方はこちら

EC-CUBE3カスタマイズ:No.002 トップページ画像スライド管理画面登録

現行サイトへ、カスタマイズの実装を希望される方はこちら

▽カスタマイズ内容

・管理画面で画像を登録する。
・登録数に制限はありません。
・ブロックを配置して表示する。

▽デモサイト
http://kaiplus.com/part/eccube3-1/

▼コンテンツ管理 > トップページ画像スライド管理で画像を登録

001

・ 「スライド画像を新規入力」または「編集」をクリックすると登録・編集画面を開きます。
・ 「上へ下へ」をクリックして表示の順番を設定できます。

続きを読む EC-CUBE3カスタマイズ:No.002 トップページ画像スライド管理画面登録

EC-CUBE3カスタマイズ:No.1 レイアウト変更・カテゴリブロック追加

現行サイトへ、カスタマイズの実装を希望される方はこちら

▽カスタマイズ内容

 ・トップページのサイドカラム(#side_leftと#side_right)にブロックを配置してもレイアウトは乱れない。
トップページで2カラム、3カラム表示が可能となる。
スライド画像は、contents_topエリアに移動する。(twigファイルをインクルード)
・メインカラムを先に読み込む。
管理画面の「ページ管理」で各カラムにブロックを配置したとき、PC画面では管理画面と同様のカラム配置で表示され、スマホ画面ではメインカラムが一番上に表示される。
(デフォルトのEC-CUBEでは、スマホ画面では左カラムが一番上に表示されます)
順序:メインカラム→左カラム→右カラム
・ブロック:新着情報(news.twig)とフリーエリア(free.twig)の横並びの設定を解除する。
・ヘッダー部に配置されている「カテゴリ」ブロックとは別に、新規で「カテゴリ(サイド)」ブロックを作成しサイドカラムに配置できるようにする。

▽デモサイト
http://kaiplus.com/part/eccube3-4/

▼管理画面で左カラムにブロックを配置

001

続きを読む EC-CUBE3カスタマイズ:No.1 レイアウト変更・カテゴリブロック追加