업그레이드

[상품관리][리뷰톡톡][PC] 상품형 목록 디자인 추가 (베트남어) - HTML/CSS

안녕하세요. 카페24 운영도우미 입니다.

자세한 내용은 아래를 참조해주세요.

아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가합니다.

review.css 위치 : 게시판리뷰톡톡cssreview.css /board/smartreview/css/review.css
## 중간 생략 ##
   .reviewArea .reviewList .reviewInfo { padding:20px 20px 10px; }
+ ..reviewArea .reviewList .reviewInfo.reviewProductInfo { padding:7px; }
   .reviewArea .reviewList .prdOption { margin:0 0 8px; }
## 중간 생략 ##
   .reviewArea .reviewList .reviewInfo .community .social > button { width:30px; height:30px; font-size:0; line-height:0; outline:0; }
   .reviewArea .reviewList .reviewInfo .community .btnLike { background:url("//img.echosting.cafe24.com/skin/base/board/review/ico_like.png") no-repeat 0 0; }
   .reviewArea .reviewList .reviewInfo .community .btnLike.selected { background-image: url("//img.echosting.cafe24.com/skin/base/board/review/ico_like_on.png"); }
+ .reviewArea .reviewList .reviewInfo.reviewProductInfo .summary .heading img { width: 100%; height: 250px; object-fit: cover; }
+ .reviewArea .reviewList .reviewInfo.reviewProductInfo .noborder { border-top: 1px solid #fff0; }
+ .reviewArea .reviewList .reviewInfo.reviewProductInfo .noborder { border-top: 1px solid #fff0; }
+ .reviewArea .reviewList .reviewInfo.reviewProductInfo .product-card_reviews { border-top: 1px solid #ddd; padding-top: unset }
+ .reviewArea .reviewList .reviewInfo.reviewProductInfo .reviews { display: flex; padding: 10px 0px; align-items: center; }
+ .reviewArea .reviewList .reviewInfo.reviewProductInfo .reviews .reviews_review { height: 75px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-left: 10px; line-height: 1.5em; max-height: 3em; display: -webkit-box; overflow-wrap: break-word; word-break: break-all; }
+ .reviewArea .reviewList .reviewInfo.reviewProductInfo .reviews .reviews_image { height: 33px; width: 33px; min-height: 33px; min-width: 33px; object-fit: cover; border: 1px solid #ddd;}
+ .reviewArea .reviewList .reviewInfo.reviewProductInfo .summary .info { border-bottom: none; margin:0px; padding: 20px 0 10px;}
+ .reviewArea .reviewList .reviewInfo.reviewProductInfo .summary .info .product-name { margin-bottom: 5px; height: 30px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+ .reviewArea .reviewList .reviewInfo.reviewProductInfo .summary .info .price { font-weight: bold; }
+ .reviewArea .reviewList .reviewInfo.reviewProductInfo .summary .info .ec-board-grade { cursor: default; margin-top: 5px; }
+ .reviewArea .reviewList .reviewInfo.reviewProductInfo .summary .info .community { margin-top: 5px; }
## 중간 생략 ##

▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.

item.html 위치 : 게시판리뷰톡톡providerproductitem.html /board/smartreview/provider/product/item.html
                            
<li class="grid ec-board-list-item" style="display:none;">
<div class="reviewInfo reviewProductInfo">
    <a href="/product/detail.html?product_no={$*prd_no}" class="summary ec-board-product-list">
        <strong class="heading">
            {$*display_product_image_tag}
        </strong>
        <span class="info">
            <p class="product-name">{$*product_name}</p>
            <span class="price" style="color: #55a0ff; cursor: pointer; font-weight: bold;">{$*display_product_price} {$*product_tax_type_text}</span>
            <div class="gradeLayer" style="cursor: default;" title="{$*display_product_info_rating_avg}">
                <div class="ec-board-grade ec-board-grade-product-list ec-board-star small" style="position: absolute;">
                    {$*display_bulletin_rating_small_tpl}
                </div><br>
                <div class="community">
                    Điểm đánh giá <strong class="count ec-board-comment-count">{$*display_product_info_rating_avg}</strong>
                    <div class="social">
                        Lượt review <strong>{$*display_product_info_review_count}</strong>
                    </div>
                </div>
                <div class="gradeBg"></div>
            </div>
        </span>
    </a>
    <div class="ec-board-list-item {$*reviews_review_0_display}" data-bulletin-no="{$*bulletin_no_0}">
        <a href="#none" class="summary ec-board-list-review-read">
            <div class="noborder {$*reviews_review_0_empty_display}">
                <div class="reviews">
                    {$*display_review_0_display_bulletin_thumbnail_url}
                    <p class="reviews_review">
                        {$*display_new_icon_review_0}
                        <span class="bulletinHeading">
                            {$*display_review_0_subject_long}
                        </span>
                    </p>
                </div>
            </div>
        </a>
    </div>
    <div class="ec-board-list-item {$*reviews_review_1_display}" data-bulletin-no="{$*bulletin_no_1}">
        <a href="#none" class="summary ec-board-list-review-read">
            <div class="noborder {$*reviews_review_1_empty_display}">
                <div class="reviews">
                    {$*display_review_1_display_bulletin_thumbnail_url}
                    <p class="reviews_review">
                        {$*display_new_icon_review_1}
                        <span class="bulletinHeading">
                            {$*display_review_1_subject_long}
                        </span>
                    </p>
                </div>
            </div>
        </a>
    </div>
    <div class="ec-board-list-item {$*reviews_review_2_display}" data-bulletin-no="{$*bulletin_no_2}">
        <a href="#none" class="summary ec-board-list-review-read">
            <div class="noborder {$*reviews_review_2_empty_display}">
                <div class="reviews">
                    {$*display_review_2_display_bulletin_thumbnail_url}
                    <p class="reviews_review">
                        {$*display_new_icon_review_2}
                        <span class="bulletinHeading">
                            {$*display_review_2_subject_long}
                        </span>
                    </p>
                </div>
            </div>
        </a>
    </div>
    <div class="ec-board-list-item {$*reviews_review_3_display}" data-bulletin-no="{$*bulletin_no_3}">
        <a href="#none" class="summary ec-board-list-review-read">
            <div class="noborder {$*reviews_review_3_empty_display}">
                <div class="reviews">
                    {$*display_review_3_display_bulletin_thumbnail_url}
                    <p class="reviews_review">
                        {$*display_new_icon_review_3}
                        <span class="bulletinHeading">
                            {$*display_review_3_subject_long}
                        </span>
                    </p>
                </div>
            </div>
        </a>
    </div>
    <div class="ec-board-list-item {$*reviews_review_4_display}" data-bulletin-no="{$*bulletin_no_4}">
        <a href="#none" class="summary ec-board-list-review-read">
            <div class="noborder {$*reviews_review_4_empty_display}">
                <div class="reviews">
                    {$*display_review_4_display_bulletin_thumbnail_url}
                    <p class="reviews_review">
                        {$*display_new_icon_review_4}
                        <span class="bulletinHeading">
                            {$*display_review_4_subject_long}
                        </span>
                    </p>
                </div>
            </div>
        </a>
    </div>
</div>
</li>
<li class="grid ec-board-list-item" style="display:none;">
<div class="reviewInfo reviewProductInfo">
    <a href="/product/detail.html?product_no={$*prd_no}" class="summary ec-board-product-list">
        <strong class="heading">
            {$*display_product_image_tag}
        </strong>
        <span class="info">
            <p class="product-name">{$*product_name}</p>
            <span class="price" style="color: #55a0ff; cursor: pointer; font-weight: bold;">{$*display_product_price} {$*product_tax_type_text}</span>
            <div class="gradeLayer" style="cursor: default;" title="{$*display_product_info_rating_avg}">
                <div class="ec-board-grade ec-board-grade-product-list ec-board-star small" style="position: absolute;">
                    {$*display_bulletin_rating_small_tpl}
                </div><br>
                <div class="community">
                    Điểm đánh giá <strong class="count ec-board-comment-count">{$*display_product_info_rating_avg}</strong>
                    <div class="social">
                        Lượt review <strong>{$*display_product_info_review_count}</strong>
                    </div>
                </div>
                <div class="gradeBg"></div>
            </div>
        </span>
    </a>
    <div class="ec-board-list-item {$*reviews_review_0_display}" data-bulletin-no="{$*bulletin_no_0}">
        <a href="#none" class="summary ec-board-list-review-read">
            <div class="noborder {$*reviews_review_0_empty_display}">
                <div class="reviews">
                    {$*display_review_0_display_bulletin_thumbnail_url}
                    <p class="reviews_review">
                        {$*display_new_icon_review_0}
                        <span class="bulletinHeading">
                            {$*display_review_0_subject_long}
                        </span>
                    </p>
                </div>
            </div>
        </a>
    </div>
    <div class="ec-board-list-item {$*reviews_review_1_display}" data-bulletin-no="{$*bulletin_no_1}">
        <a href="#none" class="summary ec-board-list-review-read">
            <div class="noborder {$*reviews_review_1_empty_display}">
                <div class="reviews">
                    {$*display_review_1_display_bulletin_thumbnail_url}
                    <p class="reviews_review">
                        {$*display_new_icon_review_1}
                        <span class="bulletinHeading">
                            {$*display_review_1_subject_long}
                        </span>
                    </p>
                </div>
            </div>
        </a>
    </div>
    <div class="ec-board-list-item {$*reviews_review_2_display}" data-bulletin-no="{$*bulletin_no_2}">
        <a href="#none" class="summary ec-board-list-review-read">
            <div class="noborder {$*reviews_review_2_empty_display}">
                <div class="reviews">
                    {$*display_review_2_display_bulletin_thumbnail_url}
                    <p class="reviews_review">
                        {$*display_new_icon_review_2}
                        <span class="bulletinHeading">
                            {$*display_review_2_subject_long}
                        </span>
                    </p>
                </div>
            </div>
        </a>
    </div>
    <div class="ec-board-list-item {$*reviews_review_3_display}" data-bulletin-no="{$*bulletin_no_3}">
        <a href="#none" class="summary ec-board-list-review-read">
            <div class="noborder {$*reviews_review_3_empty_display}">
                <div class="reviews">
                    {$*display_review_3_display_bulletin_thumbnail_url}
                    <p class="reviews_review">
                        {$*display_new_icon_review_3}
                        <span class="bulletinHeading">
                            {$*display_review_3_subject_long}
                        </span>
                    </p>
                </div>
            </div>
        </a>
    </div>
    <div class="ec-board-list-item {$*reviews_review_4_display}" data-bulletin-no="{$*bulletin_no_4}">
        <a href="#none" class="summary ec-board-list-review-read">
            <div class="noborder {$*reviews_review_4_empty_display}">
                <div class="reviews">
                    {$*display_review_4_display_bulletin_thumbnail_url}
                    <p class="reviews_review">
                        {$*display_new_icon_review_4}
                        <span class="bulletinHeading">
                            {$*display_review_4_subject_long}
                        </span>
                    </p>
                </div>
            </div>
        </a>
    </div>
</div>
</li>
                            
                          

▼ 신규 파일을 생성해서, 아래의 코드를 붙여넣기 합니다.

list.html 위치 : 게시판리뷰톡톡productlist.html /board/smartreview/product/list.html
                            
<!--@layout(/layout/basic/layout.html)-->
<div class="ec-board-list-multiple-list-wrapper">
    <div class="reviewArea" async_module="smartreview_dispProductList">
        <!--
            $product_gallery_type = product_gallery
              ※ 리스트형 목록 사용시에는 필수 값 입니다. 삭제하거나 변경하지 마세요.
            $is_photo_only = F
                ※ T 포토리뷰만 보기 / F 모든리뷰 보기

            $more_view_type = scroll
                ※ scroll : 다음글을 스크롤로 제어
                    button : 다음글을 더보기 버튼으로 제어
                    paginate : 다음글을 페이지네이트로 제어

            $sns_popup_url = /board/smartreview/sns_popup.html

            $sort_order = recent
                ※ recent : 최신순으로 기본정렬
                    rating : 평점순으로 기본정렬
                    like : 좋아요순으로 기본정렬
                    hit : 조회수순으로 기본정렬
        -->
        <!-- 비동기로 처리전 노출되는 섹션 -->
        <div async_section="before">
            <div class="loading">
                <img src="//img.echosting.cafe24.com/skin/base/board/review/ico_loading.gif" alt="Đang tải. Vui lòng đợi trong giây lát." />
            </div>
        </div>
        <!-- 비동기로 처리된 이후 노출되는 섹션 -->
        <div async_section="after" style="display:none;">
            <div class="reviewTitle">
                <div class="path">
                    <span>Vị trí hiện tại</span>
                    <ol>
                        <li><a href="/">Trang chủ</a></li>
                        <li title="Vị trí hiện tại"><strong>Review sản phẩm</strong></li>
                    </ol>
                </div>
                <div class="title">
                    <h2>{$*board_name}</h2>
                </div>
            </div>
            {$*display_write_button_html}
            <div class="reviewSearch">
                <ul class="sorting">
                    <li class="selected"><a href="#none" class="ec-board-list-sorting" data-sort-order="recent" data-sort-order-text="Mới nhất">Mới nhất</a></li>
                    <li class="{$*display_rating_visible_class}"><a href="#none" class="ec-board-list-sorting" data-sort-order="best" data-sort-order-text="Cao nhất">Cao nhất</a></li>
                    <li><a href="#none" class="ec-board-list-sorting" data-sort-order="count" data-sort-order-text="Nhiều nhất">Nhiều nhất</a></li>
                </ul>
                <div class="ctrl">
                    <div class="searchWrap">
                        {$*display_keyword_type_html}
                        <div class="search">
                            <input type="text" class="keyword ec-board-list-keyword" value="{$*keyword}" placeholder="Nhập từ khóa tìm kiếm" /><button type="submit" class="btnSearch ec-board-list-search-keyword">Tìm kiếm</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reviewList ec-board-list-items-data {$*display_list_block_visible_class}">
                <ul async_module="smartreview_dispProductListItems">
                    <!--
                        $is_photo_only = F
                            ※ T 포토리뷰만 보기 / F 모든리뷰 보기

                        $sort_order = recent
                            ※ recent : 최신순으로 기본정렬
                                rating : 평점순으로 기본정렬
                                like : 좋아요순으로 기본정렬
                                hit : 조회수순으로 기본정렬
                    -->
                    <!--@import(/board/smartreview/provider/product/item.html)-->
                </ul>
            </div>
            <div class="reviewListEmpty ec-board-list-items-empty {$*display_list_empty_block_visible_class}">Không có review.</div>
            <button type="button" class="btnMore ec-board-list-more-button {$*display_list_more_button_visible_class}"><span>Xem thêm review</span></button>
        </div>
        <!-- 비동기 실패시 노출되는 섹션 -->
        <div async_section="error" style="display:none;">
            <div class="reviewListEmpty">Không có review.</div>
        </div>
    </div>
    <!-- 비동기로 전달할 템플릿 영역(반드시 포함이 되어있어야함) -->
    <div class="ec-board-list-items-template" async_module="smartreview_dispProductListItems" async_type="template" style="display:none;">
        <ul async_section="after" style="display:none;">
            <!--@import(/board/smartreview/provider/product/item.html)-->
        </ul>
    </div>
</div>
                            
                          

카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1 게시판으로 문의해주세요. [문의하기]

Top