様々な開発言語や環境、用途に応じた実際に動作するアプリやテーマのサンプルコードを、公式、非公式問わず集める場所です。自分のコードをもとにした質問をしたり、希望を書くだけでも構いません。
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コンポーネントを参照しました。
具体的なコードを記載すべきかと思いますが、整理できていない部分もあるため後に時間を見て記載したいと思います。
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024