Cafe24新着情報

[商品管理] [モバイル] 商品キュレーションデザイン適用(ベトナム語/スライド) - HTML/CSS

2020-04-13


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


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


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


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

[HTML修正方法へ - 英語]

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

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

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

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





1. モバイルモジュール作成

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

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


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

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


- 修正位置 : レイアウト(検索) (/layout/basic/search.html)


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

  <div class="searchForm">
            {$form.keyword}
            <button type="button" class="btnDelete">Xoá</button>
            <div class="autoList" id="{$searchdata_auto_list_id}">
                <ul class="autoDrop" id="{$search_auto_id}"></ul>
            </div>
        </div>
    </fieldset>
    <div class="ec-base-tab">



② 修正位置: メインレイアウト(/layout/basic/main.html)


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

<div class="searchWrap">
 <p class="category"><a href="#none" class="fold">Danh Mục</a></p>
    <div module="Layout_SearchHeader">
        <!--@css(/css/module/layout/searchHeader.css)-->
        <div class="searchForm">
          {$form.keyword}
          <button type="button" class="btnDelete">Xoá</button>
          <div class="autoList" id="{$searchdata_auto_list_id}">
              <ul class="autoDrop" id="{$search_auto_id}"></ul>
          </div>
        </div>
     </div>
     <p module="Layout_orderBasketcount">



③ 修正位置: 商品カテゴリ (/product/list.html)

                  商品分類(ギャラリー) (/product/list_gallery.html)

                  商品分類(サムネイル) (/product/list_thumb.html)


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

 <div id="titleArea" module="product_headcategory">
    <h2>{$title_text_or_image}</h2>
    <span module="Layout_MobileAction">
       ...
    </span>

    <div class="funcArea">
        <span class="likeButton {$disp_likecate_class}"><button type="button">{$disp_likecate_icon}<strong>{$disp_likecate_count}</strong></button></span>
        <button type="button" id="ec-product-searchdata-mobile-button" class="btnSearchdata">Tìm kiếm nâng cao</button>

    </div>
</div>
<!--@import(/product/shoppQ/searchConditionData.html)-->
<ul class="menuCategory">
    ....
</ul>



④ 修正位置: 商品検索(/product/search.html)


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

 <!--@layout(/layout/basic/layout.html)-->
<div id="titleArea" module="search_form">
    <!--@css(/css/module/search/form.css)-->
    <!--@js(/js/module/search/form.js)-->
    <h2>Kết quả tìm kiếm(<span class="count">{$total_count}</span>)</h2>
    <span module="Layout_MobileAction">
        <a href="#none" onclick="{$go_back}"><img src="http://img.echosting.cafe24.com/skin/mobile_vi_VN/layout/btn_back.gif" width="33" alt="Quay lại"></a>
    </span>

    <div class="searchbox">
        {$form.keyword}
        <p class="button"><button type="submit" class="btnStrong">Tìm kiếm</button></p>
        <button type="button" class="btnDelete">Xóa</button>
    </div>

    <div class="inner">
        {$form.order_by}
    </div>

    <p class="empty {$search_fail_display|display}">Không có kết quả tìm kiếm.</p>
</div>


<!--@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">Tìm kiếm nâng cao</button>    
</div>                                                                                                        
 
<div class="ec-base-product typeThumb" module="product_listmain_1">
    ....
</div>
 
 
<!--=================================== 最下部に追加 ===================================-->
<!-- 詳細検索スライド型 -->
<!--@import(/product/shoppQ/searchData_typeSlide.html)-->



4. 商品カテゴリ適用


- 修正位置: 商品カテゴリ (/product/list.html)

                商品分類(ギャラリー) (/product/list_gallery.html)

                商品分類(サムネイル) (/product/list_thumb.html)


 以下の内容をファイルの最下部に追加します。

<!--=================================== 最下部に追加 ===================================-->
<!-- 詳細検索スライド型 -->
<!--@import(/product/shoppQ/searchData_typeSlide.html)-->



5. 商品検索適用


- 修正位置: 商品検索(/product/search.html)


 以下の内容をファイルの最下部に追加します。

<!--=================================== 最下部に追加 ===================================-->
<!-- 詳細検索スライド型 -->
<!--@import(/product/shoppQ/searchData_typeSlide.html)-->





Cafe24では、より快適なネットショップ運営のため、持続的に機能アップデートを実施しております。

今後ともお客様にご満足いただけるサービスを目指し、最善を尽くしてまいります。

引き続き、ご愛顧のほどよろしくお願い申し上げます。

ご不便・ご不明な点等ございましたら、092-517-9981またはお問い合わせまで、お気軽にお問い合わせください。