カスタムコードブロック

Custom codeブロックは、独自のHTMLまたはReactをカートに追加します。ドロワーの任意のセクションに配置するか、Cart items内にサブブロックとしてネストして、各ラインごとに繰り返し表示させることができます。他のブロックとは異なり、Content設定もDesignセクションもありません。ブロック自体がコード_そのもの_なので、作業はすべてCodeタブで行います。

Aftersell CartエディターでCustom codeブロックを追加して有効にするアニメーションプレビュー

カスタムコードブロックを追加して有効にする

Custom codeブロックを任意のセクションに、またはCart itemsの下のサブブロックとして追加します。
ブロックを選択してCodeタブを開きます。
HTMLまたはReact componentを選択します。新しいブロックのデフォルトはHTMLです。
コードを書きます。
Reactを選択した場合は、Compileをクリックします。
**「Use custom template」**をオンにします。このブロックでは、このスイッチは「カスタムコードを表示する」を意味し、デフォルトはオフなので、有効にするまで何もレンダリングされません。
ブロックが購入者に表示され続けるよう、サイドバーの目のトグルをオンのままにしてください。

ブロックを表示するには、目のトグルと**「Use custom template」**の両方がオンになっている必要があります。

動作

カートの読み込みが完了するまで、このブロックは何もレンダリングしません。
また、サイドバーの目のアイコンがオフの場合、**「Use custom template」**がオフの場合、コードが空の場合、またはReactのコンパイルやレンダリングが失敗した場合も何もレンダリングされません。失敗は静かに起こるため、公開前にプレビューでブロックを確認してください。

HTMLモード

HTMLモードでは、少数のトークンがマークアップに置き換えられます。静的またはトークン駆動のコンテンツ向けであり、ロジックの実行には向いていません。

インラインの<script>タグは実行されず、HTMLモードはSDKやwindowにアクセスできません。
ロジックが必要な場合は、Reactモード、またはCart SDKと組み合わせたカスタムスクリプトを使用してください。

トークン

トークンの値は、そのままマークアップに使えるフォーマット済みの文字列（ショップの通貨形式、%付きのパーセンテージ、または数量）です。

トークン	表示内容
`{{pre_cart_total}}`	ディスカウント適用前のカート合計。
`{{post_cart_total}}`	ディスカウント適用後のカート合計。
`{{savings_amount}}`	節約額（ディスカウント前の合計からディスカウント後の合計を引いた額）。
`{{savings_percentage}}`	パーセンテージとしての節約分。`%`記号を含みます（例：`15%`）。
`{{cart_quantity}}`	カート内の表示されている商品数。

例

<div class="cart-external-custom-code_html">
  You saved {{savings_amount}} ({{savings_percentage}})
</div>

Reactモード

Reactモードはコンポーネントをコンパイルし、カートデータとadd-to-cartアクションを渡します。

エディターはラッパーをfunction CustomCode(props: CustomCodeProps) { … }に固定しており、それらの行の間の本体のみを編集します。
ブロックが表示される前に、Compileをクリックしてから、**「Use custom template」**をオンにする必要があります。
コンポーネントではuseState、useEffect、useMemo、useRef、useCallbackを使用できます。
HTMLモードと異なり、Reactはページコンテキストで実行されるため、利用可能であればwindowやCart SDKを呼び出せます。
コンポーネントが実行時にエラーをスローした場合、ブロックは何もレンダリングせず、カートの他の部分は動作し続けます。

Props

合計や節約額は、その通貨の補助単位（USDならセント）での整数値です。つまり$12.50は1250であり、12.50ではありません。HTMLトークンのようなフォーマット済み金額文字列ではありません。

Prop	型	説明
`cart`	`AftersellCart`	現在のカート。カートオブジェクトリファレンスを参照してください。
`line`	`AftersellCartLine \| null`	ブロックがCart itemsのサブブロックの場合のみ設定されます（ラインごとに1回レンダリング）。セクション内では`null`です。
`preCartTotal`	`number`	ディスカウント適用前のカート合計（Shopifyの`original_total_price`）。通貨の補助単位（例：セント）です。
`postCartTotal`	`number`	ディスカウント適用後のカート合計。通貨の補助単位です。
`savings`	`{ amount, percentage }`	節約額とパーセンテージ。
`addProduct(variantId, quantity?, properties?)`	`function`	商品をカートに追加します。このブロックのアトリビューションが付与されるため、分析で貢献として計上されます。

カートとラインの構造

cartとlineは、SDKが他のあらゆる場所で公開しているのと同じオブジェクトです。そのため、**カートオブジェクトリファレンス**にまとめてドキュメント化されています。カート、ライン、バンドルのすべてのフィールドが記載されています。最もよく使うのは、cart.items、cart.itemCount、cart.totalPrice、line.title、line.quantity、line.finalLinePriceです。このブロックに固有の3つのポイント：

lineはCart itemsのサブブロックでのみ設定され、コンポーネントはラインごとに1回レンダリングされます。セクションとして配置した場合、lineはnullになるため、代わりにcart.itemsを読み取ります。
バンドルの子はcart.itemsに含まれません。 ラインがバンドルにグループ化されている場合、アンカーラインのみが表示され、子はline.bundle.childrenに含まれます。
ライントランスフォームによって非表示にされたラインも含まれませんが、それらは引き続きcart.totalPriceにカウントされます。

例

商品数を表示する：

function CustomCode(props) {
  return (
    <div className="cart-external-custom-code_jsx">
      {props.cart.itemCount} items
    </div>
  );
}

Cart itemsのサブブロックとしては、props.lineを使って商品ごとのコンテンツを表示します。ブロックはラインごとに1回レンダリングされ、そのラインの商品とバリエーションがタグ付けされます。

function CustomCode(props) {
  if (!props.line) return null;
  return (
    <div className="cart-external-custom-code_jsx">
      {props.line.productTitle}
      {props.line.variantTitle ? ` · ${props.line.variantTitle}` : ''}
    </div>
  );
}

エンリッチメントメタデータの読み取り

cart.itemsの各アイテムにはmetadataフィールドがあります。カートエンリッチャーがデータを設定するまでは空のオブジェクト{}です。設定されると、エンリッチャーのidをキーとして、そのラインの商品またはバリエーションのStorefrontデータが含まれます。

function CustomCode(props) {
  return (
    <ul>
      {(props.cart.items ?? []).map((item) => {
        const note = item.metadata?.shipping?.shippingNote;
        return (
          <li key={item.key}>
            {item.title}
            {note ? ` · ${note.value}` : ''}
          </li>
        );
      })}
    </ul>
  );
}

metadataは常に存在し、エンリッチャーの非同期フェッチが完了するまでは空のオブジェクト{}がデフォルトです（「まだエンリッチされていない」かどうかのテストはObject.keys(item.metadata).length === 0です）。特定のエンリッチャーのキーを読み取る際は、エンリッチメントが完了するまでそのキーが存在しないため、オプショナルチェーン（item.metadata?.enricherId）を使用してください。

ディスカウントコードとラインディスカウントの読み取り

cart.discountCodesにはカートに適用されているディスカウントコードが一覧され、各ラインのdiscountAllocationsにはそのラインに適用されているディスカウントが一覧されます。

function CustomCode(props) {
  const codes = props.cart.discountCodes;
  return (
    <div>
      {codes.length > 0 && (
        <p>Active discounts: {codes.join(', ')}</p>
      )}
      <ul>
        {(props.cart.items ?? []).map((item) => {
          return (
            <li key={item.key}>
              {item.title}
              {item.discountAllocations.map(
                (discount) => ` · ${discount.title} (-${(discount.amount / 100).toFixed(2)})`
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

配置と制限

領域： 任意（上部、本体、下部）。Cart itemsのサブブロックとしても利用可能です。
最大数： 無制限。
状態： 商品が入ったカートと空のカート（セクションブロックとして）。Cart itemsのサブブロックとしては、カートにラインがある場合のみ、ラインごとに1インスタンスがレンダリングされます。
ロックされていないため、削除や非表示が可能です。
ブロック単位のDesignセクションはありません。独自のマークアップ、カスタムCSS、およびグローバルのデザイン設定でスタイルを設定してください。