特集ページの更新ガイド

最後に 3026 を追加する例です。隣の番号との間に、半角のカンマを入れます。

{% set codes = ['3842', '726031', '8706', '3026'] %}

商品枠を自分で何個もコピーするのではなく、この一覧に番号を追加します。ただし、終売などの条件によって表示されない商品もあります。

8706 を先頭にする例です。番号を書いた順番が、商品枠を作る順番になります。表示条件に合わない商品は出ない場合があります。

{% set codes = ['8706', '3842', '726031'] %}

726031 を一覧から外す例です。番号と、その前後どちらかのカンマを一緒に消し、残った番号の間にカンマが1つある形にします。

{% set codes = ['3842', '8706'] %}

これは特集の掲載対象から外す操作です。商品自体を削除したり、終売に設定したりする指示ではありません。

商品番号を一覧にせず、商品枠へ直接書いている例もあります。その場合は、始まりと終わりの2か所を同じ番号に変更します。

<div class="pickupProduct" id="product_8400">
    <!-- この間に元の商品表示コードがあります -->
</div><!-- product_8400 -->

例えば 8400 を 3181 に替える場合、両方の product_8400 を product_3181 に変更します。中の商品表示コードは残します。

商品番号だけでなく、横の設定まで1行まとめて扱います。追加する場合は1商品の行をコピーし、番号と設定値を変更します。

{% set codes = {
    '726029': {'new': 1, 'flg': true},
    '726031': {'new': 1, 'flg': true},
    '8706': {'new': 0, 'flg': false}
} %}

各商品の行と行の間にはカンマが必要です。削除するときも、カンマが重なったり、なくなったりしないよう確認します。並び替えるときは、その商品の設定を一緒に移動します。

元コードには 726029_a や product_726029_detail のように、商品番号へ追加の文字を付けた例があります。通常の品番だけの記述と同じように、末尾を削除しないでください。

開始の id と終了コメントは、追加の文字も含めて一致させます。移動先として使われている場合は、リンク側の指定も合わせて確認します。

商品番号を替えるときは、これらを実際の番号へ一括置換するのではなく、02・03の一覧を変更します。番号が商品枠へ直接書かれている方式は、02の補足に従います。

例えば <p>[=name=]</p> は「ここに商品名を表示する」という意味です。商品名を替えるために、この文字列を手入力の商品名へ置き換えないようにします。

まず、いまの画像がどの書き方かを確認します。

path は「画像を探すフォルダ」の指定

添付コードのBパターンでは、次の組み合わせになっています。

[=path('newproduct/2610/')=]
<img src="[=image=]" alt="商品画像" />

newproduct/2610/ は、/material/feature/ の下にある保存場所です。フォルダ名を替えるだけで画像が作られるわけではありません。その場所に必要な画像があるか確認します。

メイン画像は、幅によって使う画像が違う

添付コードの <picture> は、幅964px以上では slider.jpg、それ未満では thumbnails.jpg を使う指定です。紹介文にも pc_only と sp_only の別記述があります。片方だけ更新して終わらせず、両方を確認します。

画像の切り替え条件は添付コードで確認できます。各クラスの実際の見え方は、別ファイルのCSSにも依存します。

添付コードでは、価格をログインしている人にだけ表示するように書かれています。未ログインで金額が出ないだけなら、コードの誤りとは限りません。

[=if is_login=]
    [=cart_nf=]
[=else=]
    [=login=]
[=endif=]

上の例は「ログイン済みならカート、そうでなければログインボタンを表示する」という意味です。if は「もし〜なら」、else は「そうでなければ」、endif は「ここまで」と読みます。

価格や注文ボタンの外側にある [=if is_login=] を外す変更は、表示の小修正として扱わず、担当者へ確認します。

終売と欠品は別の項目です。また、is_sale は「SALE表示」ではなく「販売中」です。添付コードのAなどは、is_sold_out を見て商品を隠すように書かれています。

{% for code, data in tab_codes|filter(v => v.tab1) %}
    <!-- この間に元の商品枠があります -->
{% endfor %}

filter(...tab1) は「タブ1に載せる設定の商品だけ選ぶ」という部分です。この行や中の商品枠は残して、通常は上の tab_codes の設定を変更します。

それぞれの tab1・tab2 は対応しています。ボタンの名前だけでなく、こうした目印もあるため、タブ追加は設定一覧の変更だけでは完了しません。

例えば href="#product_726029_detail" は、その名前が付いた場所への移動先です。商品を入れ替えたときは、移動先の枠もページ内にあるかを確認します。

原因を断定する表ではありません。添付コードの構造から、最初に確認しやすい場所をまとめたものです。

これらは、添付コード内の商品表示パターンの名前です。下の表は書かれているコードの違いをまとめたもので、実画面の動作確認結果ではありません。

参照：添付コード：A 24–135行、A_a 139–263行、B 266–369行、C 372–617行、D 620–660行、タブ 663–884行

次は、仕様.xlsxの「特集ページ用 サンプル1」にある例です。始まりと終わりの目印、自動で入る商品名、ログイン時のボタンを、実際の見た目と見比べられます。

原資料のサンプル・使用するページへそのまま追加するための例ではない

<li class="premiumProductBox" id="product_724029">
    [=path('premium_index')=]
    <div class="premiumProductImg">
        <a href="/feature/premium_brownebifurai"><img src="[=images('thumbnail_brown_ebifurai.jpg')=]"></a>
    </div>
    <div class="premiumProductCopy">
        <p>濃厚でまろやかな味わい<br class="pc_only">天然ブラウン海老フライ。</p>
    </div>
    <a href="/feature/premium_brownebifurai">
        <dl class="productCodeBoxNmaeBox">
            <dt class="productCodeBox">
            [=if is_original=]
                <p class="productStatus">オリジナル</p>
            [=endif=]
                <p class="productCode">[=code=]</p>
            </dt>
            <dd class="productName">[=name=]</dd>
        </dl>
    </a>
    [=if is_login=]
        [=cart_nf=]
    [=endif=]
</li><!-- product_724029 -->

参照：仕様.xlsx「特集ページ用 サンプル1」A1–E23・J2・添付画像

CSSは見た目、JavaScriptはクリックなどの動きに関係するファイルです。添付コードには、次の読み込みがあります。実ファイルの中身は添付されていないため、担当者向けの確認先として記載しています。

alwaysAccordion・productSpecToggle・reverseLayout などのクラスも使われています。商品番号の更新ではこれらを変更せず、折りたたみ方や並び方の調整はCSS・JavaScriptと合わせて確認します。

参照：添付コード 1–6行・234–254行・499行・905–906行

一般用語の網羅的な定義ではなく、添付コードを読むための言い換えです。

参照：添付コード 145–160行・255行・499–614行・665–688行・775–789行・876行

上記の記述は、原文を勝手に正しい形へ書き換えず残しています。確認前の例を、そのまま本番ページへ追加しないでください。