[盛田屋様]よりどりキャンペーン、コーディングツール

概要

TOF様にて、よりどりキャンペーン、
対象商品一覧セクションのコーディングを簡略化するツールについて解説します。
（エクセルを使用します。）

前提

使用する際は、Eドライブからエクセルファイルをダウンロードしてご使用ください。
Eドライブのエクセルファイルの上書きは原則禁止です。
※マスターファイルの更新が必要な場合（マクロの恒久的な調整など）のみ、
　上書きをしても大丈夫です。

使い方

エクセルファイルのダウンロード

https://drive.google.com/drive/folders/1fEZKG2jvPvI0Oh2pSZ7NOvRhHxVYi9Wi
よりどり.xlsm

上記Eドライブにアクセスしていただき、
エクセルファイルをダウンロードしてください。

エクセルファイルの使い方

①「HTMLテンプレート」シートに、ループさせたいhtmlフォーマットを入力してください。
②「商品データ」シートに、各項目を入力してください。
　（各項目の見出しは、先方から共有いただく「コード申請表」を元にしています。）
③「HTML生成実行」ボタンをクリックしてください。
④「出力結果」シートに、①のフォーマットと②の項目を組み合わせたhtmlが生成されます。

エクセルファイル、各シートの解説

「HTMLテンプレート」シート

商品一覧に出力するhtmlフォーマットを入力するシートです。
最終的に出力したいhtmlフォーマットをB3に入力してください。
※次項で説明する各項目の記述を埋め込むことで、動的に要素を出力することが可能です。

フォーマット例：

<div class="item-list">
    <div class="item-list__product-img">
        <img src="{ドメイン}/Contents/ProductImages/0/{発番コード}/{発番コード}_LL.jpg" alt="">
    </div>
    <div class="item-list__product-spRight">
        <div class="item-list__product-name">
            <img src="<%= Constants.PATH_ROOT %>ext/campaign/{キャンペーン名}/common/img/item_{通常ID}_pc.jpg" class="pc" alt="{商品名}">
            <img src="<%= Constants.PATH_ROOT %>ext/campaign/{キャンペーン名}/common/img/item_{通常ID}_sp.jpg" class="sp" alt="{商品名}">
        </div>
        <div class="item-list__product-price">
            単品価格:{商品表示価格}円(税込)
            <span class="item-list__product-price-discounted">{販売価格}<span>円(税込)</span></span>
        </div>
        <div class="sold-out__message"></div>
        <div class="item-list__product-select-wrap">
            <div class="item-list__product-select">
                <div class="productbox product_area">
                    <input type="hidden" name="pid" value="{発番コード}">
                    <input type="hidden" name="vid" value="{発番コード}">
                    <input type="hidden" name="pname" value="{商品名}">
                    <input type="hidden" name="ptype" value="">
                    <input type="hidden" name="pprice" value="{販売価格※カンマなし}">
                    <input type="hidden" name="maxcnt" value="{購入数}">
                    <div class="bg_line">
                        <div class="selectColor">
                            <div class="">
                                <input type="hidden" name="ckbn" value="1">
                                <div class="selectorWrap">
                                    <select name="prdcnt">
{購入数選択肢}
                                    </select>
                                    <span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item-list__product-select-btn button">
                        <button type="button" class="add">商品を選択する</button>
                    </div>
                </div>
            </div>
        </div>
        <span href="#item{連番}" class="inline item-list__product-detail">
            商品詳細はこちら
        </span>
        <div class="modal-contents">
            <div id="item{連番}" class="bscstm">
                <div>
                    <img src="<%= Constants.PATH_ROOT %>ext/campaign/{キャンペーン名}/common/img/modal_{発番コード}_pc.jpg" class="pc" style="max-width:100%;" alt="{商品名}">
                    <img src="<%= Constants.PATH_ROOT %>ext/campaign/{キャンペーン名}/common/img/modal_{発番コード}_sp.jpg" class="sp" style="max-width:100%;" alt="{商品名}">
                </div>
            </div>
        </div>
    </div>
</div>

「商品データ」シート

商品一覧に掲出する商品のデータを入力するシートです。
先方から共有いただく「コード申請表」を元に、
見出しを照らし合わせて項目を埋めてください。

各項目の説明

■セル番号 呼び出しタグ
　説明

■H3 {キャンペーン名}
　キャンペーン名が入ります。

■I3 {ドメイン}
　クライアント名が入ります。

■B6 {通常ID}
　通常IDが入ります。

■C6 {発番コード}
　発番コードが入ります。

■D6 {商品名}
　商品名が入ります。

■E6 {商品表示価格}
　商品表示価格が入ります。

■F6 {販売価格}
　販売価格が入ります。（カンマあり）

■G6 {購入数}
　購入数が入ります。

呼び出しタグ一覧

{キャンペーン名}
主にimgタグのsrcで使用する想定です。

{ドメイン}
主にimgタグのsrcで使用する想定です。

{通常ID}
主にimgタグのsrcで使用する想定です。

{発番コード}
主にinputタグのvalueで使用する想定です。

{商品名}
主にinputタグのvalueやimgタグのalt使用する想定です。

{商品表示価格}
価格表示箇所に使用する想定です。

{販売価格}
価格表示箇所に使用する想定です。

{販売価格※カンマなし}
主にinputタグのvalueで使用する想定です。
※販売価格を参照して出力されます。

{連番}
主にmodal用のid付与で使用する想定です。
※6行目のセルを「01」として、連番を生成しています。

{購入数}
購入制限に使用する想定です。

{購入数選択肢}
購入数を元に、selectboxの生成に使用する想定です。

「出力結果」シート

「HTMLテンプレート」シートに入力した、htmlフォーマットと、
「商品データ」シートに入力した、各項目を組み合わせたhtmlが出力されるシートです。
「商品データ」シートの「HTML生成実行」ボタンをクリックすると、出力されます。