Review+Product

샘플 페이지

관련 모듈

• 상품

Title

Title

HTML

<section
  class="v-tmpl v-tmpl--review-product"
  style="margin-bottom: 48px"
>
  <h2 class="v-truncate v-title">Title</h2>
  <script type="module">
    if (!window.customElements.get("swiper-container")) {
      import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
    }
  </script>

  <swiper-container
    space-between="24"
    slides-per-view="3"
    slides-per-group="3"
    navigation="true"
    pagination="true"
    class="v-carousel">
    <swiper-slide data-highlight-img-index>
      <div class="v-review-product">
        <div class="v-review-product__visual">
          <div class="v-review-visual-grid">
            <div class="v-media-embed v-review-visual__media">
              <img
                src="/dummy/images/box.svg"
                alt="스탭리뷰첨부파일이미지2"
                class="v-media-embed__element" />
            </div>
            <div class="v-review-visual__top-right">
              <div class="v-review-visual__tags">
                <span class="v-tag__type"> 포토리뷰 </span>
              </div>
            </div>
          </div>
          <button
            data-id="photo-review-detail"
            data-goods-no
            data-goods-eval-no
            data-type
            type="button"
            class="v-button v-review-visual-button">
            리뷰 상세보기
          </button>
        </div>
        <div class="v-review-product__content">
          <div class="v-review-content__user-infos">
            <div class="v-star-rating v-user-info__star" style="--v-rating-value: 5">
              <div class="v-star-icons">
                <svg viewBox="0 0 68 12">
                  <title>별점</title>
                  <path
                    fill="currentColor"
                    fill-rule="evenodd"
                    d="m6 9-3.527 1.854.674-3.927L.294 4.146l3.943-.573L6 0l1.763 3.573 3.943.573-2.853 2.781.674 3.927ZM20 9l-3.527 1.854.674-3.927-2.853-2.781 3.943-.573L20 0l1.763 3.573 3.943.573-2.853 2.781.674 3.927zM34 9l-3.527 1.854.674-3.927-2.853-2.781 3.943-.573L34 0l1.763 3.573 3.943.573-2.853 2.781.674 3.927zM48 9l-3.527 1.854.674-3.927-2.853-2.781 3.943-.573L48 0l1.763 3.573 3.943.573-2.853 2.781.674 3.927zM62 9l-3.527 1.854.674-3.927-2.853-2.781 3.943-.573L62 0l1.763 3.573 3.943.573-2.853 2.781.674 3.927z"
                    clip-rule="evenodd"></path>
                </svg>
              </div>
              <div class="v-star-meta">
                <span class="v-star-score">5.0</span>
              </div>
            </div>
            <span class="v-user-info__id">DOO******</span>
            <span class="v-user-info__order-info">화이트</span>
          </div>
          <div class="v-review-content__comment">
            <div class="v-review-content__comment-input">
              시원한 여름 니트입니다. 디테일이 예뻐요.<br />
              66사이즈도 넉넉해요.<br />
              배송 빠르고 색감도 이쁘고 재질도 좋아요.<br />
              예쁘고 좋아요. 입었을때 편하고, 시원해서 여름에 잘 입어질것 같아요~ 최대 5줄, 높이값 고정
            </div>
          </div>
        </div>
        <div class="v-review-product__product">
          <!-- 상품 유닛 -->
          <div class="v-product-unit v-review-product-unit" options="XS,S,M,L,XL">
            <!-- … -->
          </div>
          <!-- /상품 유닛 -->
        </div>
        <div class="v-review-product__thumbnails">
          <button aria-selected="true" type="button" class="v-button v-media-embed v-review-thumbnail__media">
            <img
              src="/dummy/images/box.svg"
              alt="스탭리뷰첨부파일이미지2"
              class="v-media-embed__element" /></button
          ><button aria-selected="false" type="button" class="v-button v-media-embed v-review-thumbnail__media">
            <img
              src="/dummy/images/box.svg"
              alt="스탭리뷰첨부파일이미지3"
              class="v-media-embed__element" /></button
          ><button aria-selected="false" type="button" class="v-button v-media-embed v-review-thumbnail__media">
            <img
              src="/dummy/images/box.svg"
              alt="스탭리뷰첨부파일이미지1"
              class="v-media-embed__element" />
          </button>
        </div>
      </div>
    <swiper-slide>
    <!-- … -->
  </swiper-container>
</section>