MENU

シュゼット様 特集ページ仕様 全モール

目次

基本情報

・基本的にはbscstmを使用しての構築
・sassを用いてのcss構築
・sassには_end.scssとitem.scssを毎回使用
・本店を構築し、先方からOKが出てから楽天→Yahoo店の順に構築していく。(OKが出ていないうちに他モールを構築してしまうと、修正が入った際に工数が増えすぎてしまうため)
・本店でレフトナビがある特集の場合、コンテンツ幅は本店:800px 楽天店:680px Yahoo店:800pxとなるため、cssの調整が必要となる。(Yahoo店はPaypayに移行したタイミングで特集ページからレフトナビはなくなっている。)
・楽天店とYahoo店の特集ページのディレクトリは過去作成したページを使いまわす(例:/christmas/,/keirou/,/fathersday/,etc..)。新規作成の場合は先方にディレクトリ名を要相談。
・他モール移行する際は、index.html内の商品URLと画像URLを差し替えるだけでなく、css内の画像URL等のパスも差し替えることを忘れないようにする

商品の掲載

2つ以上の商品が規則的に並ぶデザインの場合、data_valを使用して読み込むようにしています。
イレギュラーなパターンや1商品しか掲載しないセクションはベタ書きにしています。
全モール対応の特集の場合、一つのスプレッドシートでシートを分けて管理する。

例:2021年母の日特集
https://docs.google.com/spreadsheets/d/1ixkTlFf50ptDUf3UtoEMZsDI2p7kwtomqQ6LLtl-pnM/edit#gid=1159418435

本店と楽天の商品データ(商品コード&画像)はなるべく最新のものをcsvで取得し、使用する。Yahoo店は動的に紐づくためcsvは不要

soldout対応

下記構造とクラス名(太字)を継承していれば、class=”item … “の中にsoldoutを追記することによって、下記cssによりsoldout対応が可能になるように組んであります。
data_valで読み込んでいる商品についてもスプレッドシート内にsoldoutを記入する欄があるので、そちらに追記してjsをアップすることで対応可となっている。

<link rel=”stylesheet” href=”/contents/common/css/hc_sold_out.css”>

下記キノステストサーバにて、開発者ツールで試しにsoldoutを入れてみる
http://suzette-ec.cynosura.jp/contents/autumn_fes2021/index.php

<ul class=”list“>
 <li class=”item col-24 col-md-24 mb-md-0px mb-15px px-md-60px px-20px py-md-40px py-30px mx-auto bg-white rounded-md-50px rounded-30px mb-md-40px mb-20px”>
  <div class=”row no-gutters list”>
   <div class=”img-box col-md-12 col-24 px-md-0px px-0px mb-md-0px mb-10px”>
    <a class=”img d-block mx-0px position-relative pt-md-25px pt-0px” href=”商品URL”>
     <img src=”画像URL” alt=”商品名” width=”100%” class=”w-md-506px w-100p” style=”opacity: 1;”>
    </a>
   </div>
   <div class=”product-item__right col-md-12 col-24 pl-md-70px pl-0px pr-md-0px pr-0px”>
    <div class=”row no-gutters w-md-460px”>
     <div class=”col-md-24 col-24 mb-md-20px mb-10px”>
      <p class=”item__name text-left pt-md-18px pt-0px mb-md-5px mb-10px fz-md-26px fz-18px lh-13 h-md-auto h-auto fw-bold ff-mincho lh-15″>商品名</p>
      <p class=”price fz-md-15px fz-12px text-left lh-13 mb-md-20px mb-10px”><span class=”fz-md-25px fz-20px font-weight-bold ls-md-10 txt_spink ff-gothic”>¥4,220</span>(税込)</p>
      <p class=”item__dtl text-left mt-md-30px mt-5px mb-md-20px mb-10px fz-md-20px fz-16px lh-15 h-md-auto h-auto ff-mincho”>商品紹介文</p>
     </div>
     <div class=”col-md-24 col-24 text-left”>
      <a href=”商品URL” class=”btn dtl fw-normal text-center text-decoration-none fz-md-15px fz-15px w-md-100% w-100p mb-md-10px mb-10px py-5px bg-white mx-0px ff-mincho”>詳細はこちら</a>
     </div>
     <div class=”col-md-24 col-24 text-left”>
      <a href=”カートURL” class=”btn cart fw-normal text-center text-decoration-none fz-md-15px fz-15px w-md-100% w-100p mb-md-10px mb-0px py-5px bg-white mx-0px ff-gothic text-white”>カートに入れる</a>
     </div>
    </div>
    <a href=”javascript:void(0)” class=”btn soldout ff-gothic text-center text-decoration-none w-100p mb-md-10px mb-10px py-6px rounded-25px”>Sold out</a>
   </div>
  </div>
 </li>
</ul>

特集ダウン

特集ページをダウンする際は下記画像の様に、テキストと、メインバナーを残し、他はコメントアウトする。
sassで読み込んだ_end.scssにcssの記述があるのでデザインが変更になる場合は_end.scssを編集

この記事を書いた人

目次