【クリエイターモード】バリエーションごとの在庫を「○」「×」や在庫数の表にする方法を教えてください。

バリエーションごとの在庫状況は、商品詳細ページのHTML・CSSに記述を追記することで、「○」「×」の表として表示できます。在庫数を数字で表示することもできます。

項目数が多い場合に便利です。

バリエーションの表示形式（プルダウン形式を含む）にかかわらず、同じコードで表示できます。

表示例）

表示のルール

在庫の状態に応じて、表の各セルに次のように表示されます。

※バリエーションが設定されている商品のみ表示されます。オプショングループ・カスタムセレクトのみが設定されている商品では表示されません。

※バリエーションを設定していない商品の在庫数を表示する場合は、【クリエイターモード】商品詳細ページに在庫数を表示する方法を教えて下さい。をご確認ください。

※「商品管理 / 商品一覧 / 商品登録・編集」の「表示情報」で、在庫数の「ショップに表示する」にチェックを入れていない商品では、表は表示されません。

※バリエーション2が設定されていない商品は、1列の表で表示されます。

※バリエーションの数が多く、表が欄の幅に収まらない商品では、表の中だけが横にスクロールします。

作業前のご確認

※作業前に必ずデザインセットのバックアップを取ってから実施してください。保存した内容は上書きされるため、バックアップがない場合は元の状態に戻せないことがあります。

【クリエイターモード】デザインセット（ソースコード）をバックアップする方法を教えてください。

※以下のコードは、一例です。デザインをカスタマイズされている場合は、表示する位置やCSSの調整が必要になることがあります。

手順1)　商品詳細の「HTML」欄にコードを追記する

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

「HTML」欄の、「数量」欄（タグ: <{$item.quantity_id}>）のソースが書かれている行の前方など、在庫を表示したい位置に、下記のどちらか一方のコードを追記してください。

※2つのコードを両方追記すると、表が2つ表示されます。表示したい内容に合わせて、どちらか一方だけをご利用ください。

【○×で表示する場合】のHTML

<{if $item.has_option_variation && $item.is_stock_display}>
<details class="stock-check-details" open>
<summary>在庫確認</summary>
<table class="stock-matrix">
<tr>
    <th></th>
    <{if $item.option_sku.has_option2}>
    <{section name=j loop=$item.option_sku.list}>
        <{if $item.option_sku.list[j].name1 == $item.option_sku.list[0].name1}>
        <th><{$item.option_sku.list[j].name2}></th>
        <{/if}>
    <{/section}>
    <{else}>
    <th><{$item.option_sku.option1_label}></th>
    <{/if}>
</tr>

<{if $item.option_sku.has_option2}>
<{section name=i loop=$item.option_sku.list}>
    <{if $item.option_sku.list[i.index_prev].name1 != $item.option_sku.list[i].name1}>
    <tr>
        <th><{$item.option_sku.list[i].name1}></th>
        <{section name=j loop=$item.option_sku.list}>
            <{if $item.option_sku.list[j].name1 == $item.option_sku.list[i].name1}>
            <td class="stock-mark">
                <{if $item.option_sku.list[j].is_stock_unlimited}>
                    ○
                <{elseif $item.option_sku.list[j].stock_quantity > 0}>
                    ○
                <{else}>
                    ×
                <{/if}>
            </td>
            <{/if}>
        <{/section}>
    </tr>
    <{/if}>
<{/section}>
<{else}>
<{section name=i loop=$item.option_sku.list}>
    <tr>
        <th><{$item.option_sku.list[i].name1}></th>
        <td class="stock-mark">
            <{if $item.option_sku.list[i].is_stock_unlimited}>
                ○
            <{elseif $item.option_sku.list[i].stock_quantity > 0}>
                ○
            <{else}>
                ×
            <{/if}>
        </td>
    </tr>
<{/section}>
<{/if}>
</table>
</details>
<{/if}>

【在庫数で表示する場合】のHTML

<{if $item.has_option_variation && $item.is_stock_display}>
<details class="stock-check-details" open>
<summary>在庫確認</summary>
<table class="stock-matrix">
<tr>
    <th></th>
    <{if $item.option_sku.has_option2}>
    <{section name=j loop=$item.option_sku.list}>
        <{if $item.option_sku.list[j].name1 == $item.option_sku.list[0].name1}>
        <th><{$item.option_sku.list[j].name2}></th>
        <{/if}>
    <{/section}>
    <{else}>
    <th><{$item.option_sku.option1_label}></th>
    <{/if}>
</tr>

<{if $item.option_sku.has_option2}>
<{section name=i loop=$item.option_sku.list}>
    <{if $item.option_sku.list[i.index_prev].name1 != $item.option_sku.list[i].name1}>
    <tr>
        <th><{$item.option_sku.list[i].name1}></th>
        <{section name=j loop=$item.option_sku.list}>
            <{if $item.option_sku.list[j].name1 == $item.option_sku.list[i].name1}>
            <td class="stock-mark">
                <{if $item.option_sku.list[j].is_stock_unlimited}>
                    ○
                <{elseif $item.option_sku.list[j].stock_quantity > 0}>
                    <{$item.option_sku.list[j].stock_quantity}>
                <{else}>
                    ×
                <{/if}>
            </td>
            <{/if}>
        <{/section}>
    </tr>
    <{/if}>
<{/section}>
<{else}>
<{section name=i loop=$item.option_sku.list}>
    <tr>
        <th><{$item.option_sku.list[i].name1}></th>
        <td class="stock-mark">
            <{if $item.option_sku.list[i].is_stock_unlimited}>
                ○
            <{elseif $item.option_sku.list[i].stock_quantity > 0}>
                <{$item.option_sku.list[i].stock_quantity}>
            <{else}>
                ×
            <{/if}>
        </td>
    </tr>
<{/section}>
<{/if}>
</table>
</details>
<{/if}>

手順2)　商品詳細の「CSS」欄にコードを追記する

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

「CSS」欄の末尾に下記を追記し、保存してください。手順1)でどちらのコードを選んだ場合も、同じCSSをご利用いただけます。

table.stock-matrix {
    border-collapse: collapse;
    margin: 12px 0;
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
table.stock-matrix th,
table.stock-matrix td {
    border: 1px solid #ddd;
    padding: 6px 10px;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
}
table.stock-matrix th {
    background: #f5f5f5;
    font-weight: bold;
}
table.stock-matrix th:first-child {
    position: sticky;
    left: 0;
}
table.stock-matrix td.stock-mark {
    font-weight: bold;
}

関連記事

■マニュアル
商品登録・編集：詳細
クリエイターモード各ページ

■タグリファレンス
クリエイターモードタグリファレンス（商品詳細）
$item.has_option_variation

■makeshopサポート記事
【クリエイターモード】デザインセット（ソースコード）をバックアップする方法を教えてください。
【クリエイターモード】商品詳細ページに在庫数を表示する方法を教えて下さい。
【クリエイターモード】「ショップに表示する」にチェックを入れていないのに在庫数が表示されてしまいます。非表示にする方法を教えてください。