Cafe24新着情報

お知らせ更新情報

[商品管理] [PC] 商品キュレーションデザイン適用(日本語/固定) - HTML/CSS

2020-04-10

平素よりCafe24をご利用いただき、誠にありがとうございます。


より簡単になった商品キュレーションのデザイン編集方法をご案内いたします。


詳細は以下の内容をご確認ください。


☞ [HTML修正方法へ - 韓国語]

☞ [HTML修正方法へ - 英語]

☞ [HTML修正方法へ - 日本語]

☞ [HTML修正方法へ - ベトナム語]

☞ [HTML修正方法へ - 中国語(簡体字)]

☞ [HTML修正方法へ - 中国語(繫体字)]



1. PCモジュール作成

2020年4月22日以前のバージョンのデザインを使用する場合は、モジュールを新規作成してください。

該当の内容が既にある場合は、モジュールを作成する必要はありません。[HTML/CSS修正方法へ]



2. PC共通デザインソースコードを作成

(※ 該当のファイルが既にある場合は追加する必要はありません。)


- 修正位置 : 共通レイアウト(/layout/basic/layout.html)

             メインレイアウト(/layout/basic/main.html)


▼ 以下のように赤色のソースコードを削除し、青色のソースコードを追加します。

 -->
            <fieldset>
                <legend>検索</legend>
                {$form.keyword}<input type="image" src="//img.echosting.cafe24.com/skin/base/layout/btn_search.gif" alt="検索" onclick="{$action_search_submit}" /></fieldset>
                {$form.keyword}<input type="image" src="//img.echosting.cafe24.com/skin/base/layout/btn_search.gif" alt="検索" onclick="{$action_search_submit}" /><ul class="autoDrop" id="{$search_auto_id}"></ul></fieldset>
        </div>
    </div>
                <h2>商品検索</h2>
                <fieldset>
                    <legend>検索</legend>
                    {$form.keyword}<input type="image" src="//img.echosting.cafe24.com/skin/base/layout/btn_search.gif" alt="検索" onclick="{$action_search_submit}" /></fieldset>
                    {$form.keyword}<input type="image" src="//img.echosting.cafe24.com/skin/base/layout/btn_search.gif" alt="検索" onclick="{$action_search_submit}" /><ul class="autoDrop" id="{$search_auto_id}"></ul></fieldset>
                <div class="bestKeyword {$hot_keyword_display|display}">
                    <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>
                    <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>



- 修正位置 : 商品詳細 (/product/detail.html)


▼ 以下のように青色のソースコードを追加します。

 <div class="color {$colorchip_display|display}">
    ....
</div>
 
<!--@import(/product/shoppQ/hashtag.html)-->
 
<div class="ec-base-button gColumn" module="product_action">
    ....
</div>


3. ショップメイン画面適用
- 修正位置: layout/basic/main.html
▼ 以下のように赤色のソースコードを削除し、青色のソースコードを追加します。




<div module="Layout_BoardInfo">
    ....
</div>
<div module="Layout_SearchSide">
    <!--@css(/css/module/layout/searchSide.css)-->
    <!--
        $search_page = /product/search.html
        $product_page = /product/detail.html
    -->
    <h2>商品検索</h2>
    <fieldset>
        <legend>検索</legend>
        {$form.keyword}<input type="image" src="//img.echosting.cafe24.com/skin/base/layout/btn_search.gif" alt="検索" onclick="{$action_search_submit}" /><ul class="autoDrop" id="{$search_auto_id}"></ul></fieldset>
    <div class="bestKeyword {$hot_keyword_display|display}">
        <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>
        <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>
    </div>
    <p class="button"><a href="/product/search.html" class="btnLink">商品詳細検索</a></p>
</div> 
 
<div module="product_searchdata" id="searchSticky" class="searchData {$filter_class}">
    <!--@css(/css/module/product/searchdata.css)-->
    <form class="searchCondition" id="{$searchdata_form}" name="" method="get">
        <input type="hidden" name="keyword" id="{$searchdata_keyword_hidden}" />
        <div class="searchArea" id="ec-searchdata-area">
            <h2 class="title">SEARCH</h2>
            <div module="product_SearchFilterList" class="selected">
                <h3 class="title ec-searchdata-option-title">{$filter_name}</h3>
                <div class="content {$filter_type}">
                    <ul module="product_filterform">
                        <li class="{$filter_class}">{$filter_value}</li>
                        <li class="{$filter_class}">{$filter_value}</li>
                    </ul>
                    <div class="withinInput {$within_input_display|display}">{$within_input}<button type="button" class="btnResearch">検索</button>{$within_suggest}</div>
                    <div class="priceInput {$price_input_display|display}">{$price_input} <span class="btnPriceSearch"><a href="#none" id="{$searchdata_submit}"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/product/btn_price_search.gif" alt="検索" /></a></span></div>
                    <div class="slider {$price_slider_display|display}">{$price_slider}</div>
                    <p class="value {$price_slider_display|display}">{$price_txt}</p>
                </div>
            </div>
        </div>
    </form>
</div>

<div module="Layout_project">
    ....
</div>		





4. 商品カテゴリ画面適用

- 修正位置: product/list.html

▼ 以下のように赤色のソースコードを削除し、青色のソースコードを追加します。







    <!--@layout(/layout/basic/layout.html)-->
    <!--@layout(/product/shoppQ/layout_sticky.html)-->
    ....
<div class="title" module="product_headcategory">
    ....
</div>
<!--@import(/product/shoppQ/searchConditionData.html)-->
<ul class="menuCategory">
    ...
</ul>


5. 商品検索画面適用

- 修正位置: product/search.html

▼ 以下のように赤色のソースコードを削除し、青色のソースコードを追加します。







<!--@layout(/layout/basic/layout.html)-->
<!--@layout(/product/shoppQ/layout_sticky.html)-->
<div class="titleArea">
    <h2>商品検索</h2>
</div>

<div module="search_form">
    <!--@css(/css/module/product/search_form.css)-->
    <div class="ec-base-box searchbox">
        <fieldset>
            <legend>商品検索</legend>
            <div class="item"><strong>Category</strong> {$form.category_no}</div>
            <div class="item">
                <strong>検索条件</strong>
                {$form.search_type}
                {$form.keyword}
            </div>
            <div class="popular" id="{$except_keyword_wrap_id}" style="display:none">
                <strong>除外キーワード</strong>
                {$form.exceptkeyword}
            </div>
            <div class="popular" module="search_hotkeyword">
                <strong>人気キーワード</strong>
                <p>
                    <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>
                    <a href="{$hot_keyword_url}">{$hot_keyword_name}</a>
                </p>
            </div>
            <div class="item"><strong>販売価格</strong> {$form.product_price1} ~ {$form.product_price2}</div>
            <div class="item"><strong>並べ替え</strong> {$form.order_by}</div>
            <p class="button"><input type="image" src="//img.echosting.cafe24.com/skin/base_ja_JP/product/btn_search2.gif" alt="検索" /></p>
        </fieldset>
    </div>

    <div class="searchResult">
        <p class="record">総<strong>{$total_count}</strong>件の商品が検索されました。</p>
        <ul class="listType" module="search_Orderby">
            <li class="btn_order" rel='{$rel}' style='{$style}' >{$sort_name}</li>
            <li class="btn_order" rel='{$rel}' style='{$style}' >{$sort_name}</li>
        </ul>
    </div>

    <div class="noData {$search_fail_display|display}">
        <strong class="warning">検索結果が見つかりません。</strong>
        <strong>検索キーワードが正確に入力されているかご確認のうえ、再度検索してみてください。</strong>
        <ul>
            <li>検索キーワード／除外キーワードが正確に入力されているか確認してみてください。</li>
            <li>検索オプションを再度確認してみてください。</li>
        </ul>
    </div>
</div>


<!--@import(/product/shoppQ/searchForm.html)-->

<div module="Search_Result" class="ec-base-product">


6. CSSファイル追加

- 新規作成位置: /layout/basic/css/ec-base-layer.css
(※ 該当のファイルが既にある場合は追加する必要はありません。)

▼ 以下の内容でファイルを新規作成します。







 /* reset */
li { list-style:none; }
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
caption { display:none; }
h1, h3 { margin:0; }
  
/* common */
.ec-base-layer { position:absolute; z-index:100; border:1px solid #757575; background:#fff; }
.ec-base-layer .header { padding:7px 35px 7px 19px; color:#fff; background:#495164; }
.ec-base-layer .header > h1,
.ec-base-layer .header > h3 { font-size:14px; line-height:1.5; }
.ec-base-layer .content { padding:20px; font-size:12px; }
.ec-base-layer div.ec-base-help { margin-top:0; }
.ec-base-layer .ec-base-button { padding:9px; border-top:1px solid #d7d5d5; text-align:center; background:#fbfafa; }
.ec-base-layer .close { position:absolute; right:0; top:0; padding:11px 20px; cursor:pointer; }
  
/* popup */
#popup .ec-base-layer { position:relative; border:0; }
#popup .ec-base-layer .header { padding:12px 35px 12px 19px; }
#popup .ec-base-layer .close { top:5px; }
  
/* ec-base-table */
.ec-base-layer .content > .ec-base-table table:first-child { margin-top:0; }
.ec-base-layer .ec-base-table table { line-height:1.4; }
.ec-base-layer .ec-base-table thead th { padding:9px 0 8px; }
.ec-base-layer .ec-base-table tbody th { padding:9px 0 8px 10px; }
.ec-base-layer .ec-base-table td { padding:9px 10px 8px; }
  /* 横 - 入力タイプ */
    .ec-base-layer .ec-base-table.typeWrite td { padding:5px 10px 4px; }
  /* 縦 - 一覧タイプ */
    .ec-base-layer .ec-base-table.typeList tfoot td { padding:10px 10px 12px; }
  /* 枠タイプ */
    .ec-base-layer .ec-base-table.typeBorder tfoot td { padding:10px 10px 12px; }


■ デザイン適用後、[商品管理 > 商品キュレーション > 商品検索条件設定]で[保存]ボタンを必ずクリックしてください。
- 属性値が表示されない場合があります。



Cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。
今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。
引き続き、ご愛顧のほどよろしくお願い申し上げます。
ご不便・ご不明な点等ございましたら、092-517-9981または「お問い合わせ」まで、お気軽にお問い合わせください。
																																																																																																																																																																																																			
前の記事
[商品管理] [商品キュレーション] メインページに商品キュレーションを適用できるように機能改善
2020-04-15
次の記事
[注文管理] 非会員が注文確認する際の注文番号入力方法改善のご案内
2020-05-13