Skip to main content

商品オプションApp

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

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

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

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

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

details

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

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

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

出力されるHTML​

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

選択式オプションの場合​

<div class="itemOptionElement">
    <label for="x_optionSelect4" class="itemOption__name">選択式オプション</label>
    <input type="hidden" name="options[0][id]" value="4" />
    <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>

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

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

<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>

テストパターン​

テーマ申請の際に下記のテストパターンを確認してください。

  • 商品詳細ページ
    • オプション名が上限（30文字）の場合でもスタイルが崩れないこと
    • 選択式商品オプションが表示されていること
      • オプションの項目名が上限（32文字）の場合でもスタイルが崩れないこと
    • 文字入れ商品オプションが表示されていること
      • 設定が任意の場合はありを選ぶと入力フィールドが表示されること
      • ガイドテキストが上限（200文字）の場合でもスタイルが崩れないこと
    • 文字入れ商品オプションのバリデーションエラーが表示されること
      • 文字数上限を超えた場合にエラーが表示されること
      • 入力欄が空欄の場合にエラーが表示されること
      • バリデーションエラーでスタイルが崩れないこと
    • オプションが複数表示されている場合にスタイルが崩れないこと
    • バリデーションエラーが1つでもある場合には、「カートに入れる」ボタンがdisabledになっていることが視覚上で認識が可能であること