Cafe24新着情報
[商品管理] [モバイル] 商品キュレーションデザイン適用(中国語(簡体字)/ポップアップ) - HTML/CSS
2020-04-13
平素よりCafe24をご利用いただき、誠にありがとうございます。
より簡単になった商品キュレーションのデザイン編集方法をご案内いたします。
詳細は以下の内容をご確認ください。
1. モバイルモジュール作成
2020年4月22日以前のバージョンのデザインを使用する場合は、モジュールを新規作成してください。
該当の内容が既にある場合は、モジュールを作成する必要はありません。[HTML/CSS修正方法へ]
2. モバイル共通デザインソースコードを作成
(※ 該当のファイルが既にある場合は追加する必要はありません。)
- 修正位置 : レイアウト(検索) (/layout/basic/search.html)
▼ 以下のように青色のソースコードを追加します。
<div class="searchForm"> {$form.keyword} <button type="button" class="btnDelete">取消</button> <div class="autoList" id="{$searchdata_auto_list_id}"> <ul class="autoDrop" id="{$search_auto_id}"></ul> </div> </div> </fieldset> |
② 修正位置: メインレイアウト(/layout/basic/main.html)
▼ 以下のように青色のソースコードを追加します。
<div module="Layout_SearchHeader"> <!--@css(/css/module/layout/searchHeader.css)--> <div class="searchForm"> {$form.keyword} <button type="button" class="btnDelete"> 删除 </button><div class="autoList" id="{$searchdata_auto_list_id}"> <ul class="autoDrop" id="{$search_auto_id}"></ul> </div> </div> </div> |
③ 修正位置: 商品カテゴリ (/product/list.html)
商品分類(ギャラリー) (/product/list_gallery.html)
商品分類(サムネイル) (/product/list_thumb.html)
▼ 以下のように青色のソースコードを追加します。
<div id="titleArea" module="product_headcategory"> <div class="funcArea"> </div> |
④ 修正位置: 商品検索(/product/search.html)
▼ 以下のように赤色のソースコードを削除し、青色のソースコードを追加します。
<!--@layout(/layout/basic/layout.html)--> <!--@import(/product/shoppQ/searchForm.html)--> |
⑤ 修正位置: 商品詳細(/product/detail.html)
▼ 以下のように青色のソースコードを追加します。
<div class="color {$colorchip_display|display}"> .... </div> <!--@import(/product/shoppQ/hashtag.html)--> <div class="likeButton {$disp_likeprd_class}"> .... </div> |
3. メインページ適用
- 修正位置: ショップメイン(/index.html)
<div moduel="layout_logincheck">
....
</div>
<div class="funcArea">
<button type="button" id="ec-product-searchdata-mobile-button" class="btnSearchdata">详细搜索</button>
</div>
<div class="ec-base-product typeThumb" module="product_listmain_1">
....
</div>
<!--=================================== 最下部に追加 ===================================-->
<!-- 詳細検索ポップアップ型 -->
<!--@import(/product/shoppQ/searchData_typePopup.html)-->
4. 商品カテゴリ適用
- 修正位置: 商品カテゴリ (/product/list.html)
商品分類(ギャラリー) (/product/list_gallery.html)
商品分類(サムネイル) (/product/list_thumb.html)
▼ 以下の内容をファイルの最下部に追加します。
<!--=================================== 最下部に追加 ===================================-->
<!-- 詳細検索ポップアップ型 -->
<!--@import(/product/shoppQ/searchData_typePopup.html)-->
5. 商品検索適用
- 修正位置: 商品検索(/product/search.html)
▼ 以下の内容をファイルの最下部に追加します。
<!--=================================== 最下部に追加 ===================================-->
<!-- 詳細検索ポップアップ型 -->
<!--@import(/product/shoppQ/searchData_typePopup.html)-->
Cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。
今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。
引き続き、ご愛顧のほどよろしくお願い申し上げます。