皆さんこんにちは、ワニエです。
2021年12月7日に実施されたシステムアップデートにて「カートに入れておく機能」が公開されました。この機能は今までに多くのショップ様からご要望頂いていた機能でしたので、サポートスタッフとしても皆さまにようやく機能を公開することができ嬉しい限りでございます。
さて、実際に「カートに入れておく機能」をご利用いただく際に、ショップページをPC用とスマホ用でページを分けてご構築されているショップ様におきましては、管理画面やご利用マニュアル等でご案内している設定の他にお願いしなくてはならない作業がございます。本記事ではその作業についてご案内します。
「カートに入れておく機能」とは？
e-shopsカートSで提供している「ゼロステップカート」や「3ステップカート」は、商品をカートに入れる時に必ず「カート画面」や「カートの中身画面」へと画面遷移する仕様です。そのため、複数商品をご購入される方によっては、その度にカート画面へと遷移しショップページへと戻る動作が必要であったため、なかには『使い勝手が良くないなぁ』と感じる方もいたかもしれません。
この「カートに入れておく機能」を使えば、商品をカートに入れた時にカート画面には遷移せずに商品がカートに入りますので、必要なタイミングまではカート画面に遷移しなくても良くなり、複数商品を購入する場合でもストレスなくお買い物を楽しんでいただくことが出来るようになります。
PC用、スマホ用でページを分けている場合は要注意
近年スマートフォンやタブレットの普及によってホームページのスマホ対応が当たり前となり、ネットショップのホームページをスマホ対応しているショップ様は多いかと思います。
ホームページのスマホ対応の方法は、大きく分けて「レスポンシブデザイン」「PC用、スマホ用などホームページを別に用意して振り分ける」方法がありますが、後者の「PC用、スマホ用などホームページを別に用意」して構築されているショップ様におきましては、「カートに入れておく機能」をご利用の際に商品をカートに入れた際に表示されるモーダル画面が正常に表示されない可能性がございます。
そのため、「カゴに入れる」ボタンを設置しているページ（HTML）の<head>～</head>タグ内にて、下記の記述を行っていただくことでどのデバイス（端末）でご操作された場合でも最適なモーダルが表示されるようになります。
▼「カートに入れておく機能」ご利用時のオススメのviewport指定
<meta name=”viewport” content=”width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1″>
なお、上記viewport指定を行っていただいてもモーダル画面が正常に表示されない場合には、ショップページ側のCSSが干渉してしまっている可能性があります。その場合には、e-shopsカートS管理画面＞デザイン＞拡張機能設定＞利用設定にて「カートに入れておく機能」のCSSを編集できる設定をご用意しておりますので、必要に応じて調整してみてください。
以上、カートに入れておく機能の補足記事でした！
