様々な開発言語や環境、用途に応じた実際に動作するアプリやテーマのサンプルコードを、公式、非公式問わず集める場所です。自分のコードをもとにした質問をしたり、希望を書くだけでも構いません。
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コンポーネントを参照しました。
具体的なコードを記載すべきかと思いますが、整理できていない部分もあるため後に時間を見て記載したいと思います。
YouTubeは世界で2番目にアクセス数の多いウェブサイトであり、80カ国語、100カ国以上からのアクセスがあります。米国では、1日で10億時間以上のコンテンツが視聴されているそう...
By rinaflora Jun 4, 2023ゴムの街とも呼ばれる久留米の老舗工場で作成されたスニーカーを販売しているPERSICAストア。Shopifyを選ぶ理由と商品への思い。
By Mirai May 29, 2023EコマースのEメールマーケティングは適切なタイミングで、適切にパーソナライズされたメッセージを顧客に届ける方法であり、厳しさを増すインターネットの規制を受ける必要もありません。こ...
By Nanami May 21, 2023