チェックアウトの追加スクリプトについて

[haruk1]

チェックアウトの追加スクリプトについて、思ったような動作が得られないので
ご助言を頂けないでしょうか。

customerオブジェクトによってログイン判別ができると思っているのですが上手くいきません.


やりたいこと

・会員登録しログインしているかどうかの判別

・初回購入か否か

下記の通り記載中です。
（一部省略）

{% if customer.orders_count == 1 %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>ログイン後初回:</h2>',
'<p><p>'
)
</script>
{% endif %}
{% if customer.orders_count > 1 %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>ログイン後2回目以降:</h2>',
'<p><p>'
)
</script>
{% else %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>ログインしていない:</h2>',
'<p><p>'
)
</script>
{% endif %}



宜しくお願い致します。

[株式会社フルバランス]

Haruk1 様

はじめまして。

株式会社フルバランスのドウケと申します。

やりたいこと

・会員登録しログインしているかどうかの判別

→こちらがうまくいってないでしょうか。

・初回購入か否か

→{% if customer.orders_count == 1 %}でOKだと思います。

if文を2つに分けてしまっているのが原因かもしれません。

以下のないようで一度お試しいただけないでしょうか。

{% if customer.orders_count == 1 %}

 //初回購入時

{% elsif customer.orders_count > 1 %}

//2回目以降購入時

{% else %}

//ログインしていないとき

{% endif %}

また、お困りごとがありましたら、ご質問ください。

[haruk1]

まずはお返事ありがとうございます。

ご教授頂いた通り書き換えて実行してみました。

シチュエーション
未ログイン　ゲスト購入　初回購入時
＝ //初回購入時　の判別に


ログイン済で　テスト注文で５～６回注文後の再度注文
＝//ログインしていないとき
という判別になってしまいました。

デバッグの為customer.orders_countの中身を読んでみたりしてるのですが、中身が入っていないようです。
ログイン後のfirst.name等は読めていました。

プログラム自体ではなく、チェックアウトの追加スクリプトはＰＣのキャッシュなどを参照しているのでしょうか・・・。

また何かご存じでしたら教えていただけると助かります。
お手数をおかけして申し訳ありませんが宜しくお願い致します。

[株式会社フルバランス]

Haruk1　様

ご確認いただきありがとうございます。

確認不足があり、申し訳ありませんでした。

customer.orders_countについては、私の方で検証しましたが、ログインユーザーで連続購入しても「0」のままでした。

https://help.shopify.com/ja/manual/orders/conversion-summary#no-conversion-summary-available

推測ですが、上記記載のとおり反映まで時間がかかっている可能性があります。

代替案として、以下の記述により、customerの注文総数が取得できるかと思います。

<script>
　const count = "{{customer.orders.size}} ";

   console.log({count}); //実際にコンソールから取得状況を確認いただければと思います。
</script>

こちらのcountを利用していただき、注文数により条件分岐を行っていただければ、ご要望の件、実現できるかもしれません。

ご確認いただけますと幸いです。

[haruk1]

お返事ありがとうございます。
実装してみましたが、やはり希望の動きになりません。

<script>
　const count = "{{customer.orders.size}} ";
console.log({count});
　const count2 = "{{customer.orders_count}} ";
console.log({count2});
</script>

{% if count == 1 %}
<script>
{{ customer.first_name }}
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>初回購入:</h2>',
'<p><img src="https://worldimport.itembox.design/product/253/000000025375/000000025375-01-l.jpg?t=20220721165010"><p>'
)
</script>
{% elsif count > 1 %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>2回目以降購入:</h2>',
'<p><img src="https://worldimport.itembox.design/product/253/000000025375/000000025375-01-l.jpg?t=20220721165010"><p>'
)
</script>
{% else %}
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>ログインしていない:</h2>',
'<p><img src="https://worldimport.itembox.design/product/253/000000025375/000000025375-01-l.jpg?t=20220721165010"><p>'
)
{% endif %}
</script>

ログイン後、6回目以降の購入でのコンソール出力です。
{count: '0 '}
{count2: ' '}

countは0から動いておらず、count2は空白のままです。

未ログイン、ゲスト購入時も
countは0、count2は空白でした。

[株式会社フルバランス]

Haruk1　様

お世話になっております。

以下のコードで試してみてください。

ログイン・ゲストの判別・・・customer.has_account

注文回数・・・customer.order.size

上記いずれの値もstringとなるので、number型に直したり、'false'といった文字列でif文を書いております。

ご参考になれば幸いです。

<script>
  const stringCount = '{{customer.orders.size}} ';
  const count = Number(stringCount);
  console.log(count);
  const hasAccount = '{{customer.has_account}}';
  console.log(hasAccount);

  let contents;
  if (hasAccount === 'false') {
    contents = 'ログインしていない';
  } else {
    if (count === 1) {
      contents = '初回購入';
    } else if (count > 1) {
      contents = '2回目以降の購入';
    }
  }

  Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>追加項目</h2>',
    `<p>${contents}</p>`
  );
</script>

[haruk1]

お世話になっております。

ご丁寧にお返事ありがとうございます。
未ログインで早速試してみましたが、今度は

追加項目
undefined

となってしまいました。
やはり変数に中身が入っていないように思えます。
ストアが公開されている、されていない等により変数が入らないことはありますのでしょうか？

テスト環境に問題があるのかもしれません…

[haruk1]

フルバランス様の方でどういった検証をしているのか
環境を教えていただけないでしょうか？

私の検証環境は
設定
注文状況ページ

詳しくはこちら
追加スクリプトに上記のプログラムを記載し、保存

実際に注文してみるという流れです。
現在ストアの本公開はしておらず、パスワード保護されております。

[Jizo_Inagaki]

横から失礼します。

試されている環境の詳細が不明なのであっているかわかりませんが、orders_count に関してはおそらく以下を確認された方が良いかなと思います。

https://community.shopify.com/c/shopify-apis-and-sdks/customer-order-count-says-0-but-customer-has-o...

https://community.shopify.com/c/shopify-apis-and-sdks/customer-order-count-is-zero-in-dev-store/td-p...

上記関係ない場合は申し訳ありません。

[haruk1]

jizo様

ご教授頂きありがとうございます。
URL確認させていただき、Bogus Gatewayの注文やテスト注文だと動作しないような旨と理解しました。

現在の環境はBogus Gateway決済？やテスト注文ではなく、本番環境（ストアにパスワードはかかっている）での注文です。
銀行振込にて決済し、検証が終わったらキャンセルというのを繰り返しております…

[Jizo_Inagaki]

※解決済みでしたら申し訳ありません

開発ストアで試したところフルバランスさんの記載されたコードで以下のように表示されました。

この点からテスト手法が原因の可能性も疑えるように思いましたので、以下のようにカードのテスト注文など銀行振り込み以外を試されると良いかもしれません。

https://help.shopify.com/ja/manual/payments/shopify-payments/testing-shopify-payments

少なくとも私の開発ストアであれば、カードのテスト注文で添付画像のようにはなりました。

※パスワードがかかっている前提で記載しています。

他方、フルバランスさんのコードにはコンソールへの値の出力指示が書かれていますので、そこを確認して判断材料にすることも必要かなと思います。

コンソールの見方がわからない場合は方法を検索いただくか、「追加スクリプト」に以下のように記載すれば一応ページ上で値が確認できるはずです。

customer.has_account / {{ customer.has_account }}<br>
customer.orders.size  / {{ customer.orders.size }}<br>
checkout.customer.has_account / {{ checkout.customer.has_account }}<br>
checkout.customer.orders.size / {{ customer.orders.size }}<br>

※パスワードがかかっている前提で記載しています。

※checkoutオブジェクトから辿る方法も記載しています。

https://shopify.dev/api/liquid/objects#customer

以上ですが現状を鑑みますと、個人的にはエキスパートやパートナーに依頼された方が良いように思います。

または他の方の回答を待たれることもお勧めします。

お役に立てず申し訳ありません。