FROM CACHE - jp_header

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

haruk1
新規メンバー
6 0 0

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

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 %}



宜しくお願い致します。

10件の返信10

株式会社フルバランス
Shopify Partner
1441 504 644

Haruk1 様

 

はじめまして。

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

 

やりたいこと

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

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

・初回購入か否か

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

 

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

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

{% if customer.orders_count == 1 %}

 //初回購入時

{% elsif customer.orders_count > 1 %}

//2回目以降購入時

{% else %}

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

{% endif %}

 

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

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
haruk1
新規メンバー
6 0 0

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

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

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


ログイン済で テスト注文で5~6回注文後の再度注文
=//ログインしていないとき
という判別になってしまいました。

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

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

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

株式会社フルバランス
Shopify Partner
1441 504 644

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を利用していただき、注文数により条件分岐を行っていただければ、ご要望の件、実現できるかもしれません。

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

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
haruk1
新規メンバー
6 0 0

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

<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は空白でした。


株式会社フルバランス
Shopify Partner
1441 504 644

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>

 

 

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
haruk1
新規メンバー
6 0 0

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

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

追加項目
undefined

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

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

haruk1
新規メンバー
6 0 0

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

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

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

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

Jizo_Inagaki
Shopify Partner
990 373 690

横から失礼します。

試されている環境の詳細が不明なのであっているかわかりませんが、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...

 

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
haruk1
新規メンバー
6 0 0

jizo様

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

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

Jizo_Inagaki
Shopify Partner
990 373 690

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

 

 

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

スクリーンショット 2022-08-03 17.09.08.png

 

 

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

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

 

 

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

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

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。