本日はイージーマイショップと言うショッピングカートシステムの機能に関して記載していきたいと思います。
具体的に言うと、JSカート機能とネーム入れ(名入れ)機能に関してのカスタマイズの紹介です。
詳しく調べればもっとよいやり方があるのかもしれませんが、困っている方に少しでも参考になれば嬉しいです。
１．JSカート機能の設定
イージーマイショップでは、イージーマイショップのクラウド内でショップを構築するだけではなく、自社のサイトにカートだけ埋め込むコトが出来ます。
その為に使うのがJSカート機能です。
設定の手順
- 管理画面
↓
拡張機能
↓
アドイン
- JSカート機能
↓
設定
これでJSカート機能が使えるようになりました。
商品一覧の画面に移動して、自社サイトに貼り付けるコードを取得します。
その他をクリック後、カートボタン貼り付け用コードを選択します。
上記の画像だと既にJavascript形式に設定されていますが、初期状態ではHTML形式になっているので、設定ボタンをクリックしJavascript形式に変更してください。
設定ボタンをクリックした際に、HTML or Javascript形式の選択の他に、下記画像に掲載されているようなJSカートに表示させる項目を選択出来ます。
「種類なし」「種類あり」は商品登録の画面で選択した方です。
後ほど、オーダーメード･セット商品(ネーム入れ機能)の項でも後述いたしますが、商品登録の際に種類を「オーダーメイド･セット商品」にしている場合は、種類なしの設定が反映されます。
設定完了後、貼付け用コードのカートボタンの部分に記載されているコードを自社サイトのページ内に貼り付けるコトが出来れば、自社サイト内に商品のカートが反映されます。
これが1番シンプルな形の設定になると思います。
２．オーダーメイド･セット商品の設定とカスタマイズについて
オーダーメイド･セット商品の設定とカスタマイズと題しましたが、主にネーム入れ(名入れ)機能とちょっとしたオプション設定について記載していきます。
イージーマイショップではネーム入れ機能と言う、お客さまに商品を購入していただく際に商品の色やサイズなどを選択するだけでなく、入力フォームに文字を入力してお店に情報を送信出来る機能があり、外部サイトに設置したカートでもその機能を使用するコトが出来ます。
アクセサリー系のお店であれば、指輪に入れる文字をお客さまに入力して頂いたり、お花屋さんであれば名札に入れる文字を注文時に入力して頂くコトが出来ます。
システム自体はメールや普通のお問い合せ機能の一部みたいなモノですので、特別凄いシステムではないのですが、意外と外部に設置出来るカートでネーム入れ機能があるモノは少ないです。
ショッピングサイト構築ASPで有名なカラーミーは、名入れ機能自体はレギューラープラン以上で使用出来るのですが、外部サイト設置の為のどこでもカラーミーと言う機能では色やサイズなどの選択は出来るのですが、名入機能は使えず、カート内ページに移動してからの名入れ作業となる為、自社サイトの中で完結するコトが出来ません。
これはユーザービリティの観点から言うと、良いコトではありません。
上記で述べたようにイージーマイショップの外部サイト設置用のJSカートは外部サイトでも名入れ機能が使え、大変素晴らしいのですが、カート部分は直接カスタマイズが出来る仕様ではないので、カスタマイズには制限があります。
と言っても、ボタンのデザインを変えたりデザイン系の変更はテンプレートのCSSファイルを通じて簡単に出来ます。
ここでは、jQueryを使用した動的に行うカスタマイズに関して、オーダーメイド･セット商品機能(名入れ機能など)の設定の仕方から順を追って、記載していきたいと思います。
３．オーダーメイド･セット商品の設定
設定の手順
- 管理画面
↓
拡張機能
↓
アドイン
JSカート機能の設定の仕方と同じで、アドインの中にあります。
- 設定ボタンを押すと、下記の細かい内容を決めるページに移動しますので、ご自身のショップにあった設定にします。
ショッピングカート内表記は、特にこだわりがなければ緑枠部分の方の設定にしておいたほうが、わかりやすいかもしれません。
- 商品管理
↓
商品一覧
新規で商品を登録するか、編集するボタンを押して、登録画面に移動します。
すると、下記画像のように販売方法や、種類の部分にオーダーメイドの項目が増えています。
基本的には販売方法は通常で、種類をオーダーメイド･セット商品にする形にします。
- オプション設定
販売方法、種類の部分の他、ページ下部に実際にカート内に反映させる項目の設定場所が下記画像のように出来ています。
色やサイズを選択させる項目を作りたい場合は、上記画像のような形で入力します。
表示条件と言うのは、いくつか項目を作った場合に意味を成すモノで、例えばカラーの他にサイズと言う項目を作った場合、カラーの選択項目はサイズの項目に選択があった場合に表示させる。サイズの項目をお客さまが選択しない限りはカラーの項目は画面上に表示しないというようなコトです。
- ネーム入れ(名入れ)機能設定
上記４のオプション設定と同じ部分で設定します。
選択方法をテキスト入力にすると、ネーム入れ機能が使えるようになります。
- 設定が完了したら、商品一覧の画面に戻り、JSカート設置部分で行ったやり方でJSカートのコードを取得します。
取得する画面でプレビューも見れますが、実際に自社サイトに貼り付けると、下記画像のような形で反映されます。
４．カート内の動的カスタマイズ
例えば前の項の最後の画像に表示されている紫色で「カラー」「ネーム入れ」と表示されている部分の色を変えたいと思ったら、テンプレートのCSSを変更、または追加すれば色などのデザインは簡単に変えるコトが出来ます。
参考までに掲載いたしますが、どのCSS ファイルの、どの部分を書き換えれば良いのかよくわからないという場合は、変更したい部分のidまたはclass名を各ブラウザの開発ツールを使用して探し、スタイルシート(css_url)と言うファイルに追加していけば良いです。
本題の動的カスタマイズについてですが、例えばデザインの変更だけではなく、セレクトボックスの「選択してください」の文字を「違う文章に変えたい」名入れ入力部分のフォームに「プレースホルダ(入力フォーム内に薄っすらグレーで記入例が入ってたりするやつです)を設定したい」などと言った想いがあった場合、イージーマイショップ内では用意されていないので、独自に設定するしかありません。(設定する部分が実は存在していたらすいません＞＜)
当然、自社サイト側からはクロスドメインになるので動的にもカート内の設定は変更出来ないので、イージーマイショップの管理画面内で設定します。
jQueryにて設定
商品の登録編集画面に行きます。
オーダーメイド設定の部分に、説明文と言う項目があります。
この部分の鉛筆アイコンをクリックすると、説明文が入力出来るフォームがオーバーレイされるので、入力モードをHTMLモードに変更。
scriptもここに書き込むコトが出来ます。
JSカートの構築にはjQueryを使用しているので、jQueryを当然使えます。
例えば、上記で触れたセレクトボックスのデフォルトテキストを変更したり、入力フォームにプレースホルダーを設定したい場合は、
<script>
$(window).on('load',function(){
$("#ordermadeSelect_ems_om1 > option[data-sqn='-1']").text("色を選択して下さい");
$("#textems_om3").attr("placeholder","刻印する文字を教えてください");
});
</script>と言うような形で指定してあげれば、
このように変更するコトが可能になります。
ただし、商品毎に設定をしないといけないので、基本的にはコピペで良いと思うのですが、商品数が多いと少々大変かもしれません。
些細なコトかもしれませんが、例えばオプション設定の項目は入力必須項目に設定するコトが多いと思います。
イージーマイショップではカートを外部サイト設置の場合、必須項目を選択･入力しないままカートに入れるを押すと、エラーページに移動してから「◯◯は入力必須項目です」と注意が出ます。
エラーページの戻るボタンを押すと、自社ページの上部に戻ってしまうため、カートの設置場所がページ中段や下部だとLP(ランディングページ)のような縦長のページだった場合、離脱に繋がる可能性もありますので、プレースホルダーのような気遣いは大事だったりします。
カート内に動的に変更を加えたい場合は、商品編集画面内の商品説明の部分を使用しましょう。