ショップ構築において、購入フローのカスタマイズに関する質問です。
希望する購入フロー:
具体的な実装要望:
質問者は、これらが標準機能で実装可能か、またShopify Plusなら可能かについて情報を求めています。現時点で回答はまだありません。
ショップの構築を検討しているのですが、
「ログイン → 商品をカートイン → カート画面 → チェックアウト画面」
ではなく、
「商品をカートイン（ゲストとして） → カート画面 → ログイン画面 → チェックアウト画面」
のように、カートインしてからゲストとして購入するか、ログインしてから購入するかを選ばせるフローにしたいという要望があります。
そこで下記が可能かが調べてもわからなかったのでお伺いさせていただきたいです。
標準で可能、Shopify Plusでなら可能といった情報も教えていただけると助かります。
①カート画面のカスタマイズで、購入ボタンを「このまま購入」「ログインして購入」と分けて出すことは可能か、可能な場合はどのように実装できるのか。
②「ログインして購入」を押下した場合、ログイン画面が表示され、ログイン後にそのままチェックアウト画面に遷移するような実装は可能か、可能な場合はどのように実装できるのか。
@store_K 様
①カート画面のカスタマイズで、購入ボタンを「このまま購入」「ログインして購入」と分けて出すことは可能か、可能な場合はどのように実装できるのか。
使用されるテーマにもよりますが、DawnやHorizenを利用されているのであれば可能ですよ。
購入ボタンのLiquidを編集すれば、ボタンを2つにすることが可能ですし、ログイン状態に応じて、「ログインして購入」の表示/非表示を制御したいなら、{%if customer %} で条件分岐されると良いです。
trueならログイン済み、falseなら未ログインですので、それに応じて
②「ログインして購入」を押下した場合、ログイン画面が表示され、ログイン後にそのままチェックアウト画面に遷移するような実装は可能か、可能な場合はどのように実装できるのか。
可能です。
こちらのサイト様で詳しく説明されているので、ご覧いただくと良いです。
ご参考まで。
(キュー田辺)
有難うございます。
カート画面にボタンを表示させ、それをif文でログイン状態を判別して表示を切り替えること、
ログイン後に任意のURLに遷移させることはできました。
有難うございます。
ただ1点確認したいのですが、ログイン後にチェックアウトページに遷移させようと、
任意のページ遷移先として”/checkout”を指定したのですが、こちらの指定方法ではチェックアウト画面には遷移できませんでした。
そこで下記をご存じだったら教えていただけないでしょうか。
・/checkout/cn/~”の形式でCookieの「cart」の値を入れれば商品の入ったチェックアウト画面に行けたのですが、LiquidでCookieの値を取得するにはどうすればよいでしょうか。
@store_K 様
カートに商品が入った状態で、/checkout に遷移すればチェックアウト画面(/checkouts/cn/...)にリダイレクトされるはずですが、されませんか？
もし、されないのであれば、それがなぜなのか調べて、解決した方が良いように思いますが。。。
・/checkout/cn/~”の形式でCookieの「cart」の値を入れれば商品の入ったチェックアウト画面に行けたのですが、LiquidでCookieの値を取得するにはどうすればよいでしょうか。
LiquidではCookieは取れなかったと思いますので、ストアフロントのJavaScriptでCookieを取得するしかないかと思います。
ご参考まで。
(キュー田辺)
@Qcoltd
@qcoltd-tanabe 様
申し訳ございません。単純に指定が間違っていたようで再度「/checkout」を試したところチェックアウト画面に行けました。
また、上記に気が付くまで色々試していたところ、Cookieの取得の方もjavascriptでリンクを作成する形にしたら実現できました。
『main-cart-itams.liquid』に追加
誠にありがとうございました。
『main-cart-itams.liquid』に追加
script
document.addEventListener(‘DOMContentLoaded’, function() {
const cartValue = getCookie(‘cart’);
const linkElement = document.getElementById(‘customlink’);
linkElement.href = /account/login?return_url=${encodeURIComponent('/cart/c/'+cartValue)};
form内
a id=“customlink” href=“/account/login”>Check out</a