shopify app checkout ui extension

開発準備

開発

checkout uiを選ぶ

ファイルがセットアップされる

ディレクトリでいくと、extensions -> {my-extension-name} -> src -> Checkout.tsx となる

targetの選定

In your Checkout.jsx file, set the entrypoints for the checkout extension, and then export them so they can be referenced in your configuration.

For each target that you want to use, create a reactExtension function that references your target, and export it using a named export.

で、

const {orderConfirmation} = useApi();const {id} =useSubscription(orderConfirmation);

export default reactExtensino('purchase.checkout.block.render', ()=><Extensin />,); function Extension(){return..

security できる・できないこと

開発例

thank you, order status の２つのページについて、ui extensionでカスタムコンテントを追加できる。

例として

thank you pageに survey

order status page

ask product review or upsell

both

social sharing

download link

gettting started

resources

api

targetがあり、checkout location, thank you, order status, static extension , block extension

targetは、configuration fileで設定する。設定したlocation で javascript functionが実行可能

order statusにblockを入れたい場合は、２箇所ある？

疑問としては、

order status locationのtargetにあるblockと block extension targetsでの役割分担の違い

その他