# お試しボタンの設置

> STEP 2-5

Shopifyの商品ページに、お試しボタンを設置します。

1. [アプリブロックで設置する方法](#1-アプリブロックで設置する方法)
2. [フロントエンドに直接コードを書いて設置する方法](#2-フロントエンドに直接コードを書いて設置する方法)

## 1. アプリブロックで設置する方法

下記の動画を参考に、テーマエディタでお試しボタンのアプリブロックを追加してください。

[動画: tbyb-app-block-install.mp4]

※テーマの作りによっては、アプリブロックではお試しボタンを追加できない場合があります。その場合は担当者までお問い合わせください。

### うまく表示されない場合の対処

1. Shopify管理画面にて、対象商品の詳細ページに **購入オプション** が追加されているかを確認します

    ![Shopifyの商品詳細ページ。右下の「購入オプション」欄にお試し購入の購入オプションが追加されています](images/02f_purchase-options.png)

    ※Recustomerは、[お試し購入の利用を開始](./activation.html)したときにストアのすべての商品を購入オプションに追加し、そのあとに作った商品も約12時間おきに追加します。購入オプションから外した商品は追加し直しません（→ [2-6 お試し対象商品の設定](./trial-products.html#2-shopifyの購入オプション)）。作成から12時間経っても追加されない商品があれば、ご連絡ください

2. 商品詳細ページのFormと「カートに追加」ボタンの要素が取得できているかを確認します

    1. テーマエディタでお試しブロックの設定を開き、「セレクタ指定（既存テーマ連携）」の「form セレクタ」「追加ボタンセレクタ」に現在設定されている値を確認します

        ![お試しブロック（Trial Button）の設定の「セレクタ指定（既存テーマ連携）」欄。「form セレクタ」と「追加ボタンセレクタ」に設定されている値を確認します](images/02f_selector-settings.png)

    2. Shopify管理画面にて、対象のテーマのプレビューを開きます（オンラインストアのページが開きます）
    3. オンラインストアの商品詳細ページで右クリック →「検証」をクリックします（開発者ツールが開きます）
    4. 開発者ツールの console タブにて下記を実行します

        ```
        form = document.querySelector("手順1で確認した「form セレクタ」の値")
        addCartButton = form.querySelector("手順1で確認した「追加ボタンセレクタ」の値")
        ```

        ![開発者ツールのConsoleタブでの実行例。formとaddCartButtonをそれぞれ実行し、form要素とカートに追加ボタンの要素が返ってくれば取得できています](images/02f_console-check.png)

    5. 実行結果が `null` になる（要素が返ってこない）場合は、セレクタの指定がテーマと合っていません。お試しブロック設定の「form セレクタ」「追加ボタンセレクタ」を実際のテーマに合わせて修正し、再度確認してください

> **注意: 注意**
>
> それでも表示されない場合は、弊社へお問い合わせください。その際、コラボレーターリクエストコード（Shopify管理画面の 設定 > ユーザーと権限 で確認できます）をお知らせください。

## 2. フロントエンドに直接コードを書いて設置する方法

### 前提

お試しとしてカートに追加するには、商品に紐づいている Selling Plan ID を取得し、カート追加（`/cart/add`）のフォームに `selling_plan` パラメータとして含めて送信します（Shopifyの購入オプションの標準的な仕組みです）。AJAXカート（`/cart/add.js`）のテーマの場合は、リクエストパラメータに `selling_plan` を含めてください。
商品への Selling Plan の紐づけは、弊社のシステムが自動で行います。

### 実装方法

下記は実装方法のサンプルです。細かな表示条件などにつきましては、個別のご用件に合わせて実装をお願いいたします。

1. 商品に紐づいている Selling Plan ID を取得します

    下記のLiquidコードを、商品ページのテンプレート（商品フォームを出力しているファイル）に追加します。このコードが商品のレンダリング時に現行プランのIDを `selling_plan_id` 変数へ取得します（この変数を手順2のコードで使用します）。

    - 購入オプションのグループは `selling_plan_group.app_id` で特定します。お試し購入の app_id は `recustomer_tbyb` です
    - グループ内に、過去に作成された古い Selling Plan が残っていることがあります。古いプランは名前の末尾に `-deprecated-` とUUIDが付いています（例：`お試し購入-deprecated-123e4567-e89b-12d3-a456-426614174000`）。古いプランのIDで注文すると意図しない条件で決済されるため、下記のコードは `-deprecated-` 付きのプランを自動で除外しています
    - コードの後半で、お試しボタンを表示するかどうかを商品タグまたはコレクションで判定し、`show_trial_button` に取得しています。`selling_plan_id` が null の場合（商品にお試しのプランが紐づいていない場合など）も false になります。**`show_trial_button` が true のときだけ、お試しボタン（手順2の input を含むフォーム）を出力してください**

    ```liquid
    {%- assign selling_plan_id = null -%}

    {%- comment -%} app_id で購入オプションのグループを特定し、過去のプラン以外を選ぶ {%- endcomment -%}
    {%- for group in product.selling_plan_groups -%}
      {%- if group.app_id == "recustomer_tbyb" -%}
        {%- assign active_plan_count = 0 -%}
        {%- assign active_plan_id = null -%}
        {%- for plan in group.selling_plans -%}
          {%- comment -%}
            過去のプランの名前は「元の表示名 + "-deprecated-" + UUID」。末尾 48 文字目から 12 文字が
            "-deprecated-" であること、かつ末尾 36 文字が UUID のハイフン位置 (8-4-4-4-12) を持つことを
            条件にしています。contains による部分一致にしないのは、"-deprecated-" を含む表示名を
            付けたときに現行のプランを過去のもの扱いしてしまうためです。
          {%- endcomment -%}
          {%- assign deprecated_marker = plan.name | slice: -48, 12 -%}
          {%- assign uuid_part = plan.name | slice: -36, 36 -%}
          {%- assign hyphen_1 = uuid_part | slice: 8, 1 -%}
          {%- assign hyphen_2 = uuid_part | slice: 13, 1 -%}
          {%- assign hyphen_3 = uuid_part | slice: 18, 1 -%}
          {%- assign hyphen_4 = uuid_part | slice: 23, 1 -%}
          {%- assign is_deprecated = false -%}
          {%- if deprecated_marker == "-deprecated-" and hyphen_1 == "-" and hyphen_2 == "-" and hyphen_3 == "-" and hyphen_4 == "-" -%}
            {%- assign is_deprecated = true -%}
          {%- endif -%}
          {%- unless is_deprecated -%}
            {%- assign active_plan_count = active_plan_count | plus: 1 -%}
            {%- assign active_plan_id = plan.id -%}
          {%- endunless -%}
        {%- endfor -%}
        {%- comment -%}
          過去のプラン以外が 1 件に絞れない場合は確定させず、selling_plan_id は null のままにします。
          過去のプランは変更前の条件で作成されているため、誤って選ぶと意図しない条件で決済されます。
        {%- endcomment -%}
        {%- if active_plan_count == 1 -%}
          {%- assign selling_plan_id = active_plan_id -%}
        {%- endif -%}
      {%- endif -%}
      {%- if selling_plan_id != null -%}
        {%- break -%}
      {%- endif -%}
    {%- endfor -%}

    {%- comment -%}
      お試しボタンの表示制御。タグ名（Trial）・コレクションのハンドル（trial）は、
      2-7 お試し対象商品の設定で決めたものに合わせて変更してください。
    {%- endcomment -%}
    {%- assign show_trial_button = false -%}
    {%- if selling_plan_id != null -%}

      {%- comment -%} A. 商品タグで制御する場合（例：タグ「Trial」を付けた商品に表示） {%- endcomment -%}
      {%- if product.tags contains "Trial" -%}
        {%- assign show_trial_button = true -%}
      {%- endif -%}

      {%- comment -%}
        B. コレクションで制御する場合（例：ハンドルが「trial」のコレクションに含まれる商品に表示）。
        AとBはどちらか一方を使用し、使わない方は削除してください。
        対象外の商品にタグを付ける運用の場合は、条件を反転してください（例：unless product.tags contains "NoTrial"）。
      {%- endcomment -%}
      {%- assign collection_handles = product.collections | map: "handle" -%}
      {%- if collection_handles contains "trial" -%}
        {%- assign show_trial_button = true -%}
      {%- endif -%}

    {%- endif -%}

    {%- if show_trial_button -%}
      {%- comment -%} ここにお試しボタン（手順2の input を含むフォーム）を出力します {%- endcomment -%}
    {%- endif -%}
    ```

2. 1で取得した `selling_plan_id` を value に保持する input を form 内に追加します

    ```liquid
    <input type="hidden" name="selling_plan" value="{{ selling_plan_id }}">
    ```

    ※この input を既存の「カートに追加」フォームにそのまま追加すると、通常購入もすべてお試し購入になります。お試し用のフォーム（ボタン）を通常購入とは別に用意するか、お試しボタンが押されたときだけ input を追加する実装にしてください

3. 2の状態でカートに追加をすると、購入オプションが付与された状態でカートに追加されます

> **注意: 注意**
>
> 実装にあたりご不明な点がある場合は、担当者までお問い合わせください。