FROM CACHE - jp_header
解決済

Shopify Polarisでタイトルバーにボタンを2個以上配置する方法

daikussi
Shopify Partner
28 1 3

数日前からShopifyのアプリ開発を始めたのですが、Polarisの情報が全くなく、困っていたので質問させていただきます。

内容としましては、このような形でボタンを4つ配置したいと考えています。

daikussi_0-1667353827135.png

Titlebarの中にボタンを4つ配置する方法がわからず、試しにButtonGroupを

使用しても実装が出来なかったので、どなたかお力を貸していただけないでしょうか。

よろしくお願いいたします。

 

1 件の受理された解決策
daikussi
Shopify Partner
28 1 3

成功

お世話になっております。

 

下記に記載のコードで解決することが出来ましたので、共有させていただきます。

 

<Page>
      <TitleBar
        title="タイトル"
        primaryAction={{
          content: "1番目",
          onAction: () => console.log("Primary action"),
        }}
        secondaryActions={[
          {
            content: "2番目",
            onAction: () => console.log("Secondary action"),
          },
          {
            content: "3番目",
            onAction: () => console.log("Secondary action"),
          },
          {
            content: "4番目",
            onAction: () => console.log("Secondary action"),
          }
        ]}
      />
<Page>

 

この度はボタンについて回答いただきありがとうございました。

今後もアプリについて質問をすることがあると思いますが、

その際は何卒よろしくお願いいたします。

元の投稿で解決策を見る

5件の返信5

株式会社フルバランス
Shopify Partner
1508 542 677

Daikussi 

 

はじめまして、フルバランスの道家です。

 

ご質問を確認いたしました。

 

Polarisの実例が少なく、困るときありますよね。

 

以下のコードでできませんでしょうか。

 

import { Page, ButtonGroup } from '@shopify/polaris';
import { ButtonA ,ButtonB, ButtonC }from'@/components/buttons'

const ToolButtons = () => {
  return (
    <ButtonGroup>
      <ButtonA />
      <ButtonB />
      <ButtonC />
    </ButtonGroup>
  );
};

const TopPage = () => {
  <Page
    title="トップページ"
    primaryAction={ <ToolButtons />}
  ></Page>;
};

export default TopPage;

 

ButtonA, B, Cは適当なコードですので、置き換えて試していただけると幸いです。

なにかヒントになりましたら、嬉しいです。

 

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

 

分からない点があれば、またいつでもご連絡ください。

 

フルバランス 道家

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
daikussi
Shopify Partner
28 1 3

株式会社フルバランス 道家様

 

初めまして。Daikussiと申します。

 

ご回答いただきありがとうございます。

せっかくコードまで書いていただいて申し訳ないのですが、

@/components/buttons'のところで

「Failed to resolve import "@/components/buttons" from "pages\settings.jsx". Does the file exist?」

このようなエラーが出てしまい、試すことが出来ませんでした。

 

差し支えなければこちらについても教えて頂くことは可能でしょうか。

何卒宜しくお願いいたします。

 

Daikussi

 

株式会社フルバランス
Shopify Partner
1508 542 677

お世話になっております。

早速にご確認いただきありがとうございます。

 

ButtonA,B,Cはダミーとして記述しておりましたので、以下で試していただけますでしょうか。

どうぞよろしくお願いいたします。

import { Page, ButtonGroup, Button } from '@shopify/polaris';

const ToolButtons = () => {
  return (
    <ButtonGroup>
      <Button>ButtonA</Button>
      <Button>ButtonB</Button>
      <Button>ButtonC</Button>
    </ButtonGroup>
  );
};

const TopPage = () => {
  <Page
    title="トップページ"
    primaryAction={<ToolButtons />}
  ></Page>;
};

export default TopPage;

 

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
daikussi
Shopify Partner
28 1 3

株式会社フルバランス様

お世話になっております。

 

ご回答いただきありがとうございます。

またコードを書いていただきありがとうございます。

 

申し訳ないのですが、こちらのコードを使っても実装することが出来ませんでした・・。

教えて頂いたこのコードを応用して実装させるところまでやりたいと思います。

 

出来ましたらサンプルコード集のところにコードを書こうと思います。

また、質問することがあるかと思いますが、その時は何卒、よろしくお願いいたします。

 

daikussi
Shopify Partner
28 1 3

成功

お世話になっております。

 

下記に記載のコードで解決することが出来ましたので、共有させていただきます。

 

<Page>
      <TitleBar
        title="タイトル"
        primaryAction={{
          content: "1番目",
          onAction: () => console.log("Primary action"),
        }}
        secondaryActions={[
          {
            content: "2番目",
            onAction: () => console.log("Secondary action"),
          },
          {
            content: "3番目",
            onAction: () => console.log("Secondary action"),
          },
          {
            content: "4番目",
            onAction: () => console.log("Secondary action"),
          }
        ]}
      />
<Page>

 

この度はボタンについて回答いただきありがとうございました。

今後もアプリについて質問をすることがあると思いますが、

その際は何卒よろしくお願いいたします。