様々な開発言語や環境、用途に応じた実際に動作するアプリやテーマのサンプルコードを、公式、非公式問わず集める場所です。自分のコードをもとにした質問をしたり、希望を書くだけでも構いません。
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コンポーネントを参照しました。
具体的なコードを記載すべきかと思いますが、整理できていない部分もあるため後に時間を見て記載したいと思います。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024