Liquidで書いたPaymentButtonを押すと「Checkout unavailable」エラー

[daiki44]

Shopifyのテーマ編集からページテンプレートを新規追加しています。

商品一覧のような画面になる予定で、各商品にPaymentButtonを配置したいのですが、以下のようにLiquidへコードを追加してもPaymentButtonが機能しません。（添付動画参考）

{% for product in collections.all.products %}
  {% if product.id == 'aaa' %}
    {% form 'product', product %}
      {{ form | payment_button }}
    {% endform %}
  {% endif %}
{% endfor %}

前提として該当のストアはまだ未公開です。

テーマ標準の商品詳細ページのPaymentButtonは機能しています。

原因・修正方法をご教示いただけますと幸いです…。

[NIIGAKI_HYUGA]

@daiki44 様

初めまして。新垣です。

全体のコードを見てみないと具体的な解決策をお伝えできないのですが、確認すべき点としては下記になります。

・formタグのproduct変数には、該当商品の情報が渡されているか

・管理画面 > 商品管理 > 該当商品 > プレビューから購入しようとすると同様のエラーが発生します

また、商品一覧画面を作るのであれば、ページテンプレートではなくコレクションテンプレートを利用した方が統一性が持てて良いかと思います。

以上、参考になりましたら幸いです。

解決できないようであれば、お気兼ねなく個別でメッセージを下さい。

[daiki44]

@NIIGAKI_HYUGA 

ご返信ありがとうございます！

>> ・formタグのproduct変数には、該当商品の情報が渡されているか

カスタムページに「Custom content」セクションを追加し、「HTML」ブロックを追加しております。

「HTML」ブロックの中に以下のコードを書いておりまして、「title」は表示されるのですがFormのButtonがエラーの状態となっております…。

1週間ほど触っていなかったのですが、元々スクリーンショットの動画のように押せてエラーが出る状態だったのですが、現状はButtonがdisabledの状態となっています。

<h2>Custom content</h2>
<p>xxx</p>
{% for product in collections.all.products %}
  {% if product.id == xxx %}
    {{ product.title }}
    {% form 'product', product %}
      {{ form | payment_button }}
    {% endform %}
  {% endif %}
{% endfor %}

>> ・管理画面 > 商品管理 > 該当商品 > プレビューから購入しようとすると同様のエラーが発生します

同様の商品かつプレビュー画面で「Buy it now」ボタンを押すと、同様のエラーとなっております。

前提として開発ストアなのですが、パスワード入力後のストア画面ではエラーにならずCheckout画面に遷移します。

>> また、商品一覧画面を作るのであれば、ページテンプレートではなくコレクションテンプレートを利用した方が統一性が持てて良いかと思います。

ありがとうございます。こちらも参考にさせていただきます。

[NIIGAKI_HYUGA · Accepted solution]

@daiki44 様

弊テストストア（開発アウト）の方で検証していましたら、チェックアウト画面に遷移できたりできなかったりを繰り返し、原因を探っていたところ400エラーが起こってしまいました。

御ストアで検証の上、同エラーが起きてしまう場合もしかするとShopifyに問い合わせした方が良いかも知れません。

参考までにチェックアウト画面に遷移したりしなかったりを繰り返した時のコードはこちらです。

ちなみに最初のバリアントを追加するコードになっているので、バリアントを選択したい場合は追加のロジックが必要になります。

{% for product in collections.all.products %}
<p>{{ product.title }}</p>
<p>{{ product.price | money }}</p>
{% form 'product', product, novalidate: 'novalidate' %}
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <button type="submit" name="add" class="button"> // カートに追加するボタン
    Add To Cart
  </button>
{{ form | payment_button }} // ダイナミックチェックアウトボタン
{% endform %}
{% endfor %}

以上、参考になりましたら幸いです。

[daiki44]

@NIIGAKI_HYUGA 

ご丁寧にありがとうございます！

記載いただいたコードを参考にさせていただいたところ、<input type="hidden" name="id" /> が存在していないことが原因のようでした。

<input type="hidden" name="id" value="{{ product.variants.first.id }}" />

 をform内に追記したところ無事に動きました。

ドキュメントに記載がなくだいぶハマっていたので、ご丁寧に教えてくださって本当にありがとうございました🙇‍