Cafe24新着情報

[商品管理] [商品キュレーション]商品カテゴリ内ハッシュタグ表示設定ガイド

2019-06-19



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


商品カテゴリ内のハッシュタグ表示設定ガイドです。


詳細は以下をご照ください。





■ PCショップ - スマートデザイン


・位置 : PCデザイン > デザイン編集ウィンドウ > 商品(product) > 商品分類(list.html)

・ハッシュタグ商品陳列をしたい位置に以下のソースを追加してください。




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

<div module="product_listhashtag" class="ec-base-product">
    <!--
        $count = 8
             表示する商品数を数字で設定することができ、設定しない場合は最大200件と自動で制限されます。
               ※ 商品表示数が多いと、ショップに負荷が生じる可能性があります。
        $basket_result = /product/add_basket.html
        $basket_option = /product/basket_option.html
    -->
    <div class="title">
        <h2>
            <span>{$title}</span>
        </h2>
    </div>
    <ul class="prdList grid4">
        <li id="anchorBoxId_{$product_no}">
            <div class="thumbnail">
                <div class="prdImg">
                    <a href="{$link_product_detail}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
                    <span class="wish">{$list_wish_icon}</span>
                </div>
                <div class="icon">
                    <div class="promotion">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</div>
                    <div class="button">
                        <div class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></div>
                        <div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}
                    </div>
                </div>
            </div>
            <div class="description">
                <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
                <ul module="product_ListItem" class="spec">
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                </ul>
            </div>
        </li>
        <li id="anchorBoxId_{$product_no}">
            <div class="thumbnail">
                <div class="prdImg">
                    <a href="{$link_product_detail}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
                    <span class="wish">{$list_wish_icon}</span>
                </div>
                <div class="icon">
                    <div class="promotion">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</div>
                    <div class="button">
                        <div class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></div>
                        <div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}
                    </div>
                </div>
            </div>
            <div class="description">
                <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
                <ul module="product_ListItem" class="spec">
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                </ul>
            </div>
        </li>
    </ul>
</div>



■ モバイルショップ


・位置 : Mobileデザイン > デザイン編集ウィンドウ > 商品(product) > 商品分類(list.html)

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

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

・ハッシュタグ商品表示をしたい位置に以下のソースを追加します。


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

<div module="product_listhashtag" class="ec-base-product">
<!--@css(/css/module/product/listhashtag_swipe.css)-->
    <!--
        $count = 9
             表示する商品数を数字で設定することができ、設定しない場合は最大200件と自動で制限されます。
               ※ 商品表示数が多いと、ショップに負荷が生じる可能性があります。
        $line = 1
 $grid = 3
 $swipe = yes
    -->
    <h2>{$title}</h2>
    <ul class="prdList grid3">
        <li>
            <div class="thumbnail">
                <a href="{$link_product_detail}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
                <span class="wish">{$list_wish_icon}</span>
            </div>
            <div class="description">
                <strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
                <ul class="spec">
                    <li class="icon">{$soldout_icon} {$stock_icon} {$new_icon} {$recommend_icon} {$product_icons} {$pickup_icon}</li>
                    <li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span><span id="span_product_price_text">{$product_tax_type_text}</span></li>
                    <li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
                    <li class="cart">{$basket_icon}</li>
                    <li class="color {$colorchip_display|display}">
                        <div module="product_Colorchip">
                            <span class="chips" style="background-color:{$color};" {$color_image}></span>
                            <span class="chips" style="background-color:{$color};" {$color_image}></span>
                        </div>
                    </li>
                   <li class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></li>
                </ul>
            </div>
        </li>
        <li>
            <div class="thumbnail">
                <a href="{$link_product_detail}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}"><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
                <span class="wish">{$list_wish_icon}</span>
            </div>
            <div class="description">
                <strong class="name {$product_name_display|display}"><a href="{$link_product_detail}">{$product_name}</a></strong>
                <ul class="spec">
                    <li class="icon">{$soldout_icon} {$stock_icon} {$new_icon} {$recommend_icon} {$product_icons} {$pickup_icon}</li>
                    <li class="price {$product_price_display|display} {$product_sale_strike}">{$disp_product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span><span id="span_product_price_text">{$product_tax_type_text}</span></li>
                    <li class="price sale {$product_sale_display|display}">{$product_sale_price}</li>
                    <li class="cart">{$basket_icon}</li>
                    <li class="color {$colorchip_display|display}">
                        <div module="product_Colorchip">
                            <span class="chips" style="background-color:{$color};" {$color_image}></span>
                            <span class="chips" style="background-color:{$color};" {$color_image}></span>
                        </div>
                    </li>
                    <li class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon}<strong>{$disp_likeprd_count}</strong></button></li>
                </ul>
            </div>
        </li>
    </ul>
</div>



・新規作成経路 : /css/module/product/listhashtag_swipe.css


▼ 以下のようにファイルを新規作成します。

 .xans-product-listhashtag.ec-base-product { margin:0; background-color:#ffffff; border-bottom:1px solid #d5d5d5; }
.xans-product-listhashtag:first-child h2 { border-top:0; }
.xans-product-listhashtag.ec-base-product h2 { margin:0; padding:14px 14px 0; font-size:14px; line-height:15px; color:#4a5164; background:none; }
.xans-product-listhashtag.ec-base-product > .prdList { padding-top:14px; }
.xans-product-listhashtag .paginate { margin:0 0 14px; background:#ffffff; }



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

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

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

ご不便・ご不明な点等ございましたら、0120-150-264または「お問い合わせ」まで、お気軽にお問い合わせください。