様々な開発言語や環境、用途に応じた実際に動作するアプリやテーマのサンプルコードを、公式、非公式問わず集める場所です。自分のコードをもとにした質問をしたり、希望を書くだけでも構いません。
React を用いた SPA で画面遷移を行う場合、React Router を利用する事が多いかと思いますが、Shopify アプリ上で行う場合、Shopify App Bridge の History API を併せて利用する必要があります。
Shopify アプリを作成する毎にそれらを実装することもできますが、React Hook にした @huckleberry-inc/shopify-app-history npm を作成しました。
以下の様に利用できます。
import React from "react"; import { Button } from "@shopify/polaris"; import createApp from '@shopify/app-bridge'; import { useShopifyHistory } from '@huckleberry-inc/shopify-app-history'; export const Component = () => { const app = createApp({ apiKey: 'API key from Shopify Partner Dashboard', shopOrigin, }); const to = useShopifyHistory(app); return ( <Button onClick={ () => { to("/another_page") }} /> ); };
公式ドキュメントの更新があり、AppProvier の linkComponent 属性を使えばできるとのこと。(試していません)
https://polaris.shopify.com/components/structure/app-provider#using-linkcomponent
linkComponent を設定し Polaris の Link component を利用すると、iframe 内で画面遷移を実現することが出来た (React Router が有効に機能した) が、App Bridge の History API は自動で呼ばれなかった。
ブラウザの URL も連動して遷移させたい場合は、linkComponent だけでは現状実現できない。
Next.jsベースの場合ですが、こちらのリポジトリを参照しブラウザの URLと連動してのページ遷移ができました。
https://github.com/Shopify/product-reviews-sample-app
Next.js付属の"next/router"の利用と、このリポジトリ内のRoutePropagatorコンポーネントを参照しました。
具体的なコードを記載すべきかと思いますが、整理できていない部分もあるため後に時間を見て記載したいと思います。
山田繊維株式会社(むす美)は京都の地で風呂敷製造卸売業:山田貫七商店として昭和12年に創業。メイン商材は1000年以上前から使われているという記録がある風呂敷で、その他ハンカチや袱...
By Nanami Jan 12, 2023過去に失われた売り上げを回復するには?Shopifyの新しい自動化機能を活用し、失われた売り上げを簡単に回復する方法を学びましょう!
By Mirai Jan 10, 2023オンラインストアの構築が完了しましたら、一般公開をする前にいくつかのテスト注文を行い、チェックアウトプロセスを確認することが大事です。Shopifyペイメントをご利用いただいている...
By rinaflora Dec 4, 2022