チェックアウトページのサムネイル画像を非表示または任意の画像に変更したい

解決済
Shimo
遊覧客
17 0 2

スクリーンショット 2021-01-31 16.26.20.jpg

添付画像はGraphQL Admin API(draftOrderCreate)を使って下書き注文を作成し、請求書URLにアクセスしたチェックアウトの画面です。

3つの注文がありますが、全てLineItemで作成したものなのでサムネイル画像がありません。

見た目が悪いのでこのサムネイル画像を非表示または任意の画像に変更したいと考えていますが、何か手段はあるのでしょうか?

チェックアウトページは「Shopifyプラス」プランのみカスタマイズが許可されていて、通常のプランではカスタマイズできないことは知っていますが、開発アプリでスクリプトを仕込む等、何かできることがあれば教えていただきたいです。

0 件の「いいね!」
fullbalance
先駆者
242 54 267

アプローチとして、該当商品にダミーでもfeatured_imageの画像を設定で解決できないでしょうか?

Shopify Expertのフルバランスです。Shopify,Shopify Plusの制作・運営サポートをしております。

国内初のShopify書籍「商品売るならShopify」発売中です。

また6月に技術書を発売予定ですので、こちらもよろしければ手に取ってみてください

ご参考になりましたら、解決&ベストソリューション設定をいただけると嬉しいです
0 件の「いいね!」
Shimo
遊覧客
17 0 2

kakuma-fbl さん

ご回答いただきありがとうございます。

前提として作成するdraftOrderはLineItemのみで構成します。

以下のURLがLineItemに設定できる項目を示していますが、画像のパスを設定することはできないようです。

https://shopify-dev.shopifycloud.com/docs/admin-api/graphql/reference/orders/draftorderlineiteminput

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1100 250 446

line itemは、Order作成時に商品も入れてしまう方法と、あらかじめ登録している商品をIDを指定して作る方法があるかと思います。

1泊目などの商品マスターに登録できれば(値段が違う場合はバリエーションにするなど)、後者のアプローチも可能かと思いますが、いかがでしょうか?

Technical Partner Manager, Japan
0 件の「いいね!」
Shimo
遊覧客
17 0 2

junichiokamura さん

 

ご回答いただきありがとうございます。

ご提案をいただきました内容について、私が前提の話を十分に記載していなかったために質問の意図がお伝えできておらず、期待している回答をいただくことができませんでした。以下に今回の質問の前提を記載させていただきますのでご確認いただき再度ご回答いただけますようお願いいたします。

 

▼ 前提

・チェックアウトの作成にカートは用いません。

・チェックアウトの作成は自社開発したカスタムアプリからGraphQL Admin APIのdraftOrderCreateを用いておこない、返却されたInvoiceURLにリダイレクトさせることで作成します。

・下書き注文に登録する商品情報は全てCustomLineItem(カスタム商品)として登録します。(Shopifyに登録できるproductは使わない)

※ Shopifyのバリエーションを使えない理由は、今回取り扱う商材が宿泊商材であり、宿泊する日付や人数によって多くのバリエーションが必要なこともあり、Shopifyのバリエーションの最大値(100)をオーバーしてしまうためです。そのため価格情報なども外部システムから取得してきたデータをCustomLineItemを使って作成する想定としています。

 

▼ チェックアウトまでの流れ

スクリーンショット 2021-02-04 13.40.26.jpg

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1100 250 446

こちらに同様の回答をしましたので、ご確認よろしくお願い致します。

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAQ-A/%E3%83%81%E3%82%A7%E3%83%83%...

上記に書いていますように、カスタムストアフロントにDraftOrderを使うのはマーチャント向けのAdmin APIをストアフロントに使っていますので、そもそもの利用想定から外れています。

カスタムストアフロントは、まずStorefront APIを使っていただき、その中で実現できる設計にしていただければと思います。

 

Technical Partner Manager, Japan
0 件の「いいね!」
Shimo
遊覧客
17 0 2

ご回答いただきありがとうございます。

DraftOrderを使った今回のフローがそもそもShopifyの利用想定から外れているということですが、仮にStorefrontAPIを使ってcheckoutCreateをおこなう場合、lineItemsのvariantIdが必須になっているので必ずShopifyに登録されているproductの中から選ばなければならず、draftOrderCreateのcustomLineItemのように任意の価格を設定したりすることはできないということでしょうか?

https://shopify-dev.shopifycloud.com/docs/storefront-api/reference/checkouts/checkoutlineiteminput

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1100 250 446

はい、そうなります。以下のSDKのページでUse Caseが確認できるかと思います。

https://shopify.github.io/js-buy-sdk/

こちらで回答したのですが、

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAQ-A/%E3%83%81%E3%82%A7%E3%83%83%...

商品マスターを使わず、全部カスタム商品で都度登録して、かつ在庫と価格は常に0というのがShopifyの発想からかけ離れてるので、例えば運用が始まった後の売上分析や、他の広告出稿連携など、リリース後の運用に破綻をもたらすのではと懸念しております。

オンラインスクールなどの無形商材の予約販売は、事例としていくつもありアプリもたくさんあるので、まずはノーマルなアプローチをご検討されるのが良いかと思います。

 

Technical Partner Manager, Japan
0 件の「いいね!」
Shimo
遊覧客
17 0 2

ご回答および参考URLをご共有いただきありがとうございます。

元々の質問から少し内容がそれてしまいましたが、開発を進めていく上で大変参考になりました。

 

最初の質問に対するご回答をいただきたいのですが、今回のようにProductのデータを使わずにLineItemsを用いてチェックアウトの項目を作成した場合、サムネイル画像を非表示にしたり任意の画像に変更することはできないということでしょうか?

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1100 250 446

成功

ご提示いただいている、チェックアウトの画面は変更できないので、できません。

初めの方が答えられているように、Plusプランを契約すれば、HTMLを直接いじって隠せる可能性はあります。

Technical Partner Manager, Japan