先日、GMOが提供してるMakeShopというレンタルカートシステムでショップを開店するにあたってのカスタムの仕事を依頼されました。
まぁぶっちゃけカスタムしていく中で、GMOぶっ殺すぞっていうか、MakeShopのカスタム性の低さよ・・！と何回なったか分かりませんが、その中で表題のカスタム法を考案したので公開したいと思います。
クロスセルってなんだ？
ECに限らず、物販全般で大事な「合わせ売り」のことです。誰でも分かるように言えば「ご一緒にポテトはいかがですか？」ですね。
この工程を販売工程に差し込むことで、客単価の向上が見込めます。
実際にやったカスタム内容
買い物かご画面に、特定の売れ筋商品がカートに入っていなかった場合に、「売れ筋商品はこちら！（カートに入れる）」というボタンを配置しました。
めっちゃ簡単なカスタム内容だと思うんですが、MakeShopには「特定の商品をカートに追加する」というリンクを作る機能がないため、面倒なカスタムを入れることになったのでした。
実際のカスタム手順
まず肝心の「特定商品をカートに入れる機能」ですが、プレミアムショッププラン以上で使える、「カゴだけmakeshop」という機能を使います。
ただ、こいつのマニュアルの通りにフォームタグを買い物かごページに追加しても動きません。勝手にMakeShopがフォームタグの中身を書き換えてしまうからです。
そこでどうするかというと、結論から言うと下のようなコードを書きます。
<script>
var recommend_item_id = "000000000001"; //おすすめ商品のID
$(function(){
$("#recommendButton").on("click", function(){
$.post('/api/basket/add.html', {brand_info: "1," + recommend_item_id + ",1"}, function(data){
$(".js-result-secret-block").html(data);
}, 'html');
});
var item_ids = [];
$(".cartItem .cartImg a").each(function(i,elm){
var href_str = $(elm).attr("href");
item_ids.push(href_str.split("?id=")[1])
});
if (item_ids.indexOf("000000000001") > -1) {
$("#recommendButton").hide();
}
});
</script>
<div class="js-result-secret-block" style="display:none"></div>
<a href="javascript:void(0)" id="recommendButton">おすすめ商品を買う</a>
前述の通りフォームタグを書き込んだところで、タグの中身を勝手に書き換えられてしまうため、JavaScriptで必要なデータをPOSTしています。
するとMakeshopのサーバから、ワンタイムセッションキーを含んだページリダイレクトのJavaScriptが返ってくるため、隠しブロック(.js-result-secret-block)に読み込むことによって、そのスクリプトを実行しています。
なお、Makeshopの独自デザインで、ベーシックモードを使っている場合のカスタムになります。クリエイターモードの場合はカスタムの方法が違うはずです。
クリエイターモード、早く独自ページに対応してほしいですね。コンテンツページ作れないとか、使い物にならねーよって思っています。
また、ベーシックモードのスマホデザインは標準でjQueryを読み込んでいるため、上記のプログラムを張り付けるだけで動きますが、PCの場合はまずjQueryを読み込む必要があるので、head管理のところで、共通headか買い物かごページのheadにjQueryを読み込むタグを追加してください。
jQueryのバージョン系統は1/2/3のどれでも動くはずです。
カスタムの仕方がわからない場合は
コメントで聞いてもらえば（たぶん）適当に返事します。もしくはお問い合わせから連絡もらえれば、カスタムの仕事はお受けします。値段と納期・内容に拠りますが。
コメント