2023.01.25[Wed]
[シリーズ連載] Shopify Post-Purchase Checkout Extension

Shopify Post-Purchase Extensionでレジ前販売を実装する コンポーネント紹介編 ② 〜レイアウト〜

  • Shopify

目次

  • - 概要
  • - コンポーネント
  • - Layout
  • - View
  • - Tiles
  • - Bookend
  • - BlockStack
  • - InlineStack
  • - 終わりに

Webエンジニアの茄子です。
前回はPost-Purchaseで利用可能な表示・入力に関するコンポーネントを紹介しました。( https://techlab.q-co.jp/articles/78/ )
今回はレイアウトを組むためのコンポーネントを、コードを交えて紹介します。

この機能は既に実用可能ではありますが、執筆時点の2023年1月現在も「ベータ版」という位置付けであり、今後仕様が変更になる可能性があります。また、公式ドキュメントも随時更新されており、一部の表現やコードの内容が一致しない可能性があります。

概要

前回記事の remote-ui 項も参照 )
前回紹介したコンポーネント同様、レイアウト系コンポーネントもremote-uiによって調整されたものになり、開発者側で細かい調整をすることは基本的にできません。
配置の構造を今回紹介するコンポーネント(ラッパー)群で定義し、後はエレメントの数とその性質によってretome-uiがバランスを整えるという仕組みです。

コンポーネント

コンポーネントを紹介していきます。
公式ドキュメントに記載されているパラメータの一部は現在使用できないようなので、本記事に掲載するコード内では、本記事執筆時点で有効なパラメータを使用しています。
公式ドキュメント: https://shopify.dev/api/checkout-extensions/components

Layout

全体のレイアウトを定義します。
maxInlineSize によって全体の横幅を、sizes によってレイアウトの段数と、それぞれの段内のカラム幅の比率を決められます。

<Layout sizes={[1, 0.2, 0.8, 1]} maxInlineSize={1200} media={[
  {
    viewportSize:"small",
    maxInlineSize: 768,
    sizes: [1,1,1,1],
  }
]}>
  <View blockPadding="base">
    <TextField label="Header" />
  </View>
  <View blockPadding="base" inlinePadding='base'>
    <BlockStack>
      <Heading>Sidebar</Heading>
      <Text>Menu1</Text>
      <Text>Menu2</Text>
      <Text>Menu3</Text>
    </BlockStack>
  </View>
  <View blockPadding="base" inlinePadding='loose'>
    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
  </View>
  <View blockPadding="base">
    <TextField label="Footer" />
  </View>
</Layout>

mediaによってviewportのサイズによって適用する maxInlineSize & sizes のセットを変えられます。上記の例はモバイルサイズでは media の中のものが使われます。

sizesの配列は1に達するごとに縦方向の段(行)が変わります。1未満、あるいは足すと1を超えてしまう場合はそこで1段となり、足りない分は左右に余白として付きます。
上記の例を、sizes={[1, 0.2, 0.9, 1]} とするとこの様になります。

View

囲った子要素を自然な(適当な)サイズに調整してくれます。余白のpropsが付いているので、レイアウトを組む際の一つの塊のラッパーとして使うことが多いです。

<BlockStack>
  <View>
    <Button>Button</Button>
  </View>
</BlockStack>
<BlockStack>
  <Button>Button</Button>
</BlockStack>
<InlineStack>
  <View inlinePadding='loose' blockPadding='loose'>
    <BlockStack>
      <Heading>Heading </Heading>
      <Separator />
      <Text>Short Text. </Text>
      <Text>Said abundantly to from. Given deep. Fish. Under seasons form. Moved tree.  </Text>
      <Button>Button</Button>
    </BlockStack>
  </View>
  <View inlinePadding='loose' blockPadding='loose'>
    <BlockStack>
      <Heading>Heading </Heading>
      <Separator />
      <Text>Short Text. </Text>
      <Text>Said abundantly to from. Given deep. Fish. Under seasons form. Moved tree.  </Text>
      <Button>Button</Button>
    </BlockStack>
  </View>
</InlineStack>

Tiles

子要素のスペースを均等に分けます。maxPerLineで一行の要素数を指定します。必要があればテキストは折り返されます。TilesやBlockStackを入れ子にすることでグリッド的なセクションを構成することができます。

<Tiles maxPerLine={4}>
  <Heading>Heading</Heading>
  <Text>Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 Tile 2 </Text>
  <BlockStack>
    <Text>Tile 3.1 </Text>
    <Text>Tile 3.2 </Text>
    <Button>Button</Button>
  </BlockStack>
  <Tiles>
    <Text>Tile 4-1</Text>
    <Text>Tile 4-2</Text>
  </Tiles>
  <Image source="https://www.pakutaso.com/shared/img/thumb/KP_03_TP_V.jpg" />
  <Text>Tile 6</Text>
</Tiles>

breakAtを指定すると、Tiles全体の幅が指定された値を下回っている場合(モバイルやウィンドウリサイズ)に縦並びになります。

Bookend

最初または最後の子要素を自然な大きさで表示し、残りの子要素で余ったスペースを埋めます。一つの要素に余白を取るだけなら、<BlockStack alignment='trailing'> でも同じことが可能です。

<Bookend trailing spacing='loose'>
  <TextField label="trailing" />
  <Button >Next</Button>
</Bookend>
<Separator width="thick" />
<Bookend leading spacing='tight'>
  <TextField label="leading" />
  <Text>Some Text</Text>
  <Button plain>Agree</Button>
  <Button plain >Decline</Button>
</Bookend>
<BlockStack alignment='trailing'>
  <Button>Button3</Button>
</BlockStack>

BlockStack

子要素を縦に重ねるラッパーです。

<BlockStack>
  <Separator />
  <Heading>Heading </Heading>
  <Text>Short Text. </Text>
  <Text>Said abundantly to from. Given deep. Fish. Under seasons form. Moved tree.  </Text>
  <Button>Button</Button>
</BlockStack>

上記コードのBlockStackを外すとこうなります↓。SeparatorやHeadingはブロック要素という扱いで横並びになりません。

中央揃え、右揃えのサンプルです。

<BlockStack alignment='center' spacing='loose'>
  <Separator />
  <Heading>Heading </Heading>
  <Text>Short Text. </Text>
  <Text>Short Text 2. </Text>
</BlockStack>
<BlockStack alignment='trailing' spacing='tight'>
  <Button>Button</Button>
  <Text>Short Text 3. </Text>
  <Text>Said abundantly to from. Given deep. Fish. Under seasons form. Moved tree.  </Text>
  <Text>Short Text 4. </Text>
</BlockStack>

InlineStack

子要素を横に並べるラッパーです。
上記BlockStackと同じ中身をInlineStackで囲うとこのようになります。この中ではHeadingも横並びになります。

<InlineStack>
  <Separator />
  <Heading>Heading</Heading>
  <Text>Short Text. </Text>
  <Text>Said abundantly to from. Given deep. Fish. Under seasons form. Moved tree.  </Text>
  <Button>Button</Button>
</InlineStack>

alignmentはこちらだとvertical-alignになります。

終わりに

次回からは、チュートリアル編の機能を拡張したアプリを1から作っていきます。

Share

  1. 01 Shopify Post-Purchase Extensionでレジ前販売を実装する 概要編 >
  2. 02 Shopify Post-Purchase Extensionでレジ前販売を実装する チュートリアル編 ① >
  3. 03 Shopify Post-Purchase Extensionでレジ前販売を実装する チュートリアル編 ② >
  4. 04 Shopify Post-Purchase Extensionでレジ前販売を実装する コンポーネント紹介編 ① 〜見た目・入力〜 >
  5. 05 Shopify Post-Purchase Extensionでレジ前販売を実装する コンポーネント紹介編 ② 〜レイアウト〜
Webフロントエンドのパフォーマンス基礎 まとめShopify Post-Purchase Extensionでレジ前販売を実装する コンポーネント紹介編 ① 〜見た目・入力〜