🦁

Shopifyアプリ内にリンクメニューを配置する

2022/10/27に公開約2,100字

アプリのトップページ(web/frontend/pages/index.jsx)に、メニューを配置しようと思いましたが、アプリ画面はiframeによって表示が行われているため、そのままURLでリンクを貼ってもうまくいきません。

「AppProvider linkComponent」を使うことで、できそうな雰囲気はあるのですが、イマイチ理解できず・・・

https://stackoverflow-com.translate.goog/questions/66996055/how-do-i-route-between-pages-in-embedded-react-app?_x_tr_sl=en&_x_tr_tl=ja&_x_tr_hl=ja&_x_tr_pto=sc

そこで、強引な方法ではありますが、全フレームを解除&ジャンプするプロパティ「top.location.href」を使用しました。

js
import React from 'react';
import {BrowserRouter, Link as ReactRouterLink} from 'react-router-dom';
import {
  Card,
  Page,
  Layout,
  Link,
} from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";

// ストアのホームURLを現在のURLから取得
const shopUrl = getParam('shop');
function getParam(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}
console.log(getParam('shop'));

export default function HomePage() {
  return (
    <Page>
      <TitleBar title="Shopifyアプリ" primaryAction={null} />
      <Layout>

        <Layout.Section oneHalf>
          <Card sectioned data-primary-link><Link onClick={() => top.location.href = 'https://' + getParam('shop') + '/admin/apps/アプリURL'}>ツール1/Link></Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール2</Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール3</Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール4</Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール5</Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール6</Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール7</Card>
        </Layout.Section>

        <Layout.Section oneHalf>
          <Card sectioned>ツール8</Card>
        </Layout.Section>

      </Layout>
    </Page>
  );
}

Discussion

ログインするとコメントできます