ネットショップ通販

ASP買い物カゴのショップメーカーがスマホ対応に、レスポンシブデザインなのでPCでも使えるがソースを貼り替える必要がある

2015.01.21
この記事は約5分で読めます。

shopmakerスマホ対応ASP買い物カゴのショップメーカーがスマートフォン対応になった。プロフェッショナル版以上を契約しているユーザーなら無料でこの機能が使える。買い物カゴの画面がスマホ対応でレスポンシブデザイン（可変幅）になるので、パソコン版利用の場合でもスマホ版に変更したほうがよさそうだ。
マニュアルを見るとスマホ版は簡単に設定ができるという表現になっているが、やってみるとそうでもない。調べてみると、PC版のソースとスマホ版のソースが違うことがわかった。

つまり、これまでショップメーカーを使っていたネットショップが、スマホ対応にするためには買い物カゴのソースをすべて貼り替える必要がある。

▼ショップメーカーのスマホ対応カートの説明
http://www.shopmaker.jp/function/particulars11.html

▼ショップメーカーのスマホ対応カートでも画面
https://www.shopmaker.jp/p_pro/demo0004/demo0004/cart

▼ショップメーカーのサンプルソース
shopmakerスマホ対応のコード

ショップメーカーの管理画面の「オプション」にサンプルソースが表示されており、その内容に「PC版カート」と「スマホ版カート」の二種類がある。よく見ると「店のID」や「商品番号」などは共通だが、ソースが違う。この件に関してはマニュアルがないようなので、以下に設定方法とサンプルソース例を記述しておく。

実際にショップメーカーを使っている「おいしい店ドットコム」の例で設定してみた。（ISICOお店ばたけ出店者の中で、ショップメーカーの買い物かごを利用している代表として設定させていただいた）

おいしい店ドットコム
http://www.oishi-mise.com/

▼買い物カゴを設定した商品
のどぐろ一夜干・中型
http://www.oishi-mise.com/nodoguro2.htm

▼スマホ用カート（これから使いたいソース）

数量

このボタンのソースは以下のとおり
<form action=”https://www.shopmaker.jp/pro/cp018521/cart/add”>
<input type=”hidden” name=”number” value=”k-023“>
数量<select name=”count”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
<option value=”7″>7</option>
<option value=”8″>8</option>
<option value=”9″>9</option>
</select>
<input type=”submit” value=”買い物かごに入れる”>
</form>

▼PC用カート（これまでのソース）

数量

このボタンのソースは以下のとおり
<form action=”https://www.shopmaker.jp/pro/order.cgi”>
<input type=”hidden” name=”user” value=”cp018521“>
<input type=”hidden” name=”number” value=”k-023“>
数量<select name=”kosuu”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”6″>6</option>
<option value=”7″>7</option>
<option value=”8″>8</option>
<option value=”9″>9</option>
</select>
<input type=”submit” value=”買い物かごに入れる”>
</form>

この２つのソースには共通点が多い。違うのは上部のところだけである。違うところだけ差し替えてやれば良い。

つまり、これまで使っていたPC版カートのソースをの上から２行分

<form action=”https://www.shopmaker.jp/pro/order.cgi”>
<input type=”hidden” name=”user” value=”cp018521“>

を削除し、代わりに

<form action=”https://www.shopmaker.jp/pro/cp018521/cart/add”>

という一行に変更するということである。

※なお太字の部分は店固有の「ショップID」と「商品番号」である。もしもこのソースをサンプルとして利用する場合は必ず変更すること。

このように、すべての商品のソースを張り替える必要があるため、商品点数の多いネットショップはかなり手間がかかる作業になる。また、間違いが起きるとユーザーが買い物できなくなったり、間違って違う商品を決済したりなど、トラブルになる恐れがあるので、慎重に作業をしなければならない。

また、スマホ版とPC版では動作が違うこともわかった。現在わかっているだけでも以下の問題点がある。

・スマホ版だとIE8以下では動作しないので、IE8で買い物できない
・スマホ版にはギフトの相手先を複数選択することができない
・スマホ版ではGoogle Analyticsのｅコマース設定ができない

PC版でできることが、スマホ版でできないということが問題である。いったんスマホ版に切り替えてしまうと、スマホだけでなくPCで閲覧してもスマホ版のカゴしか使えないことを考慮すると、PC版からスマホ版に切り替えするのは躊躇する。