Skip to main content

商品オプションApp

商品のオプションを設定するAppsです

商品に設定可能なオプションについて​

商品に設定可能なオプションは選択式と文字入れの2種類存在します。

また1つの商品に設定可能なオプションは6個までとなっています。

文字入れのオプションに対しては最大文字数による制約が設定可能となっており、バリデーションが行われます。

details

オプションの表示のために必要なタグ​

BASEが提供している標準の購入ボタンの実装に準じる必要があります。 購入ボタンの詳細については購入ボタンの制御をご覧ください。

タグ説明
{ItemSelectTag}商品の数量・種類・オプションの選択の表示
{block:PurchaseForm}カートに入れるform。内部に{PurchaseButton}が必要です。
{PurchaseButton}カートに入れるボタンを表示します。 ボタンのテキストや動作が、商品のステータスによって自動的に変わります。

出力されるHTML​

オプションの種類に応じて4種類のHTMLが出力されます（表示に関係のない要素などは省いています） 以下のHTMLに対してスタイルを適用させてください。

選択式オプション（任意）の場合​

<div class="itemOptionElement">
    <label for="x_optionSelect4" class="itemOption__name">選択式オプション</label>
    <input type="hidden" name="options[0][id]" value="4"/>
    <input type="hidden" name="options[0][type]" value="select"/>
    <select
        name="options[0][variation_id]"
        id="x_optionSelect4"
        class="itemOption__select"
    >
        <option value="">選択なし</option>
        <option value="1">オプションA （¥ 500）</option>
        <option value="2">オプションB</option>
    </select>
</div>

選択式オプション（必須）の場合（〜2026年7月20日）​

<div class="itemOptionElement">
    <label for="x_optionSelect4" class="itemOption__name">選択式オプション</label>
    <input type="hidden" name="options[0][id]" value="4" />
    <input type="hidden" name="options[0][type]" value="select"/>
    <select name="options[0][variation_id]" id="x_optionSelect4" class="itemOption__select" required>
        <option value="1">
            オプションA （¥ 500）
        </option>
        <option value="2">
            オプションB
        </option>
    </select>
</div>

選択式オプション（必須）の場合（2026年7月21日〜）​

warning

2026年7月21日に以下の内容に変更予定です。初期値は未選択状態となり、選択をせずカートに追加した場合バリデーションエラーが発火します。

バリデーションエラーがない場合​

<div class="itemOptionElement">
    <label for="x_optionSelect4" class="itemOption__name">
        選択式オプション
    </label>
    <input type="hidden" name="options[0][id]" value="4"/>
    <input type="hidden" name="options[0][type]" value="select"  />
    <select
        name="options[0][variation_id]"
        id="x_optionSelect4"
        class="itemOption__select"
        data-optionid="4"
        data-dirty="true"
        data-has-error="false"
        required
    >
        <option value="" selected disabled hidden>選択する（必須）</option>
        <option value="1">
            オプションA （¥ 500）
        </option>
        <option value="2">
            オプションB
        </option>
    </select>
</div>

バリデーションエラーがある場合​

<div class="itemOptionElement">
    <label for="x_optionSelect4" class="itemOption__name">
        選択式オプション
    </label>
    <input type="hidden" name="options[0][id]" value="4"/>
    <input type="hidden" name="options[0][type]" value="select"  />
    <select
        name="options[0][variation_id]"
        id="x_optionSelect4"
        class="itemOption__select"
        data-optionid="4"
        data-dirty="true"
        data-has-error="true"
        required
    >
        <option value="" selected disabled hidden>選択する（必須）</option>
        <option value="1">
            オプションA （¥ 500）
        </option>
        <option value="2">
            オプションB
        </option>
    </select>
    <div
        class="itemOption__bottomCaptionBlock clearfix"
        id="x_optionSelectErrorArea4"
    >
        <span id="x_optionSelectError4" class="itemOption__caption--error">
            選択してください
        </span>
    </div>
</div>

文字入れオプション（任意）の場合​

バリデーションエラーがない場合​

<div class="itemOptionElement">
    <label for="x_optionTextSelect2" class="itemOption__name">任意文字入れ</label>
    <select id="x_optionTextSelect2" class="itemOption__select" data-optionid="2">
        <option value="">なし</option>
        <option value="true">あり</option>
    </select>
    <div id="x_optionInputArea2">
        <div class="itemOption__caption">入力ガイドテキスト</div>
        <input type="text" class="itemOption__input" name="options[1][free_text]" data-optionid="2" data-maxlength="10"
            id="x_optionInput2" placeholder="入力してください">
        <div class="itemOption__bottomCaptionBlock clearfix">
            <span id="x_optionInputError2" class="itemOption__caption--error" style="display: none;"></span>
            <div id="x_optionCount2" class="itemOption__count">
                <span id="x_optionInputCount2">0</span>
                /
                <span>10</span>
            </div>
        </div>
    </div>
</div>

バリデーションエラーが有る場合​

<div class="itemOptionElement">
    <label for="x_optionTextSelect2" class="itemOption__name">任意文字入れ</label>
    <select id="x_optionTextSelect2" class="itemOption__select" data-optionid="2">
        <option value="">なし</option>
        <option value="true">あり
        </option>
    </select>
    <div id="x_optionInputArea2" style="">
        <div class="itemOption__caption">入力ガイドテキスト</div>
        <input type="text" class="itemOption__input" name="options[1][free_text]" data-optionid="2" data-maxlength="10" id="x_optionInput2" placeholder="入力してください" data-has-error="true" data-dirty="true" />
        <div class="itemOption__bottomCaptionBlock clearfix">
            <span id="x_optionInputError2" class="itemOption__caption--error" style="">文字数上限を超えました</span>
            <div id="x_optionCount2" class="itemOption__count itemOption__count--error">
                <span id="x_optionInputCount2">11</span>
                /
                <span>10</span>
            </div>
        </div>
    </div>
</div>

文字入れオプション（必須）の場合​

バリデーションエラーがない場合​

<div class="itemOptionElement">
    <label for="x_optionInput3" class="itemOption__name">必須テキスト
    </label>
    <div>
        <div class="itemOption__caption">入力ガイドテキスト</div>
        <input type="text" id="x_optionInput3" class="itemOption__input" name="options[2][free_text]" data-optionid="3" data-maxlength="15" placeholder="入力してください" data-dirty="true" data-has-error="" />
        <div class="itemOption__bottomCaptionBlock clearfix">
            <span id="x_optionInputError3" class="itemOption__caption--error" style="display: none;"></span>
            <div id="x_optionCount3" class="itemOption__count">
                <span id="x_optionInputCount3">2</span>
                /
                <span>15</span>
            </div>
        </div>
    </div>
</div>

バリデーションエラーが有る場合​

<div class="itemOptionElement">
    <label for="x_optionInput3" class="itemOption__name">必須文字入れ</label>
    <div>
        <div class="itemOption__caption">入力ガイドテキスト</div>
        <input type="text" id="x_optionInput3" class="itemOption__input" name="options[2][free_text]" data-optionid="3"
            data-maxlength="15" placeholder="入力してください" data-dirty="true" data-has-error="true">
        <div class="itemOption__bottomCaptionBlock clearfix">
            <span id="x_optionInputError3" class="itemOption__caption--error" style="">文字を入力してください</span>
            <div id="x_optionCount3" class="itemOption__count itemOption__count--error">
                <span id="x_optionInputCount3">0</span>
                /
                <span>15</span>
            </div>
        </div>
    </div>
</div>

動作のチェック​

動作確認するには下記項目を参考にしてください。

商品詳細ページ​

共通​

  • オプションが複数表示されている場合でも、レイアウトやスタイルが崩れないこと
  • バリデーションエラーが1つでもある場合、「カートに入れる」ボタンが disabled になっていることを視覚的に認識できること
  • オプション名が上限(30文字)の場合でも、レイアウトやスタイルが崩れないこと

必須項目のエラーメッセージ​

  • 必須項目が未選択または未入力の状態で「カートに入れる」ボタンを押下した場合に、対象の商品オプションの直下にエラーメッセージが表示されること
  • エラーメッセージ表示時に、レイアウトやスタイルが崩れないこと

選択式商品オプション​

  • 選択式商品オプションが表示されていること
  • 項目名が上限(32文字)の場合でも、レイアウトやスタイルが崩れないこと

文字入れ商品オプション​

  • 文字入れ商品オプションが表示されていること
  • 任意設定の場合、「あり」を選択すると入力フィールドが表示されること
  • ガイドテキストが上限（200文字）の場合でも、レイアウトやスタイルが崩れないこと

文字入れ商品オプションの入力エラー​

  • 文字数上限を超えた場合に、エラーメッセージが表示されること
  • エラーメッセージ表示時に、レイアウトやスタイルが崩れないこと