GoodsOtherFormWeb.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : GoodsOtherFormWeb.html
  7. * @desc : 상품 안내
  8. *============================================================================
  9. * STYLE24
  10. * Copyright(C) 2020 TSIT, All rights reserved.
  11. *============================================================================
  12. * VER DATE AUTHOR DESCRIPTION
  13. * === =========== ========== =============================================
  14. * 1.0 2021.03.09 eskim 최초 작성
  15. *******************************************************************************
  16. -->
  17. <th:block th:if="${goodsList != null and !goodsList.empty}">
  18. <div class="cont_head">
  19. <h3 class="subH1 t_c mb40">
  20. <th:block th:if="${params.goodsOtherGb =='together'}" th:text="${'이 상품과 함께 본 상품'}"></th:block>
  21. <th:block th:if="${params.goodsOtherGb =='recommend'}" th:text="${params.brandGroupNm +' 추천상품'}"></th:block>
  22. <th:block th:if="${params.goodsOtherGb =='like'}" th:text="${'이 상품과 비슷한 상품'}"></th:block>
  23. </h3>
  24. </div>
  25. <div class="cont_body" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
  26. <!-- CONT-BODY -->
  27. <div class="area_slider">
  28. <div class="swiper-container">
  29. <div class="swiper-wrapper">
  30. <div class="swiper-slide" th:each="result, status : ${goodsList}">
  31. <div class="item_prod">
  32. <div class="item_state">
  33. <button type="button" class="itemLike" th:classappend="${result.product.itemId == 'Y'}? 'active' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${result.product.itemId}, ithrCd='IN15_03', contentsLoc='', planDtlSq=''">관심상품 추가</button>
  34. <a href="javascript:void(0);" th:onclick="cfnGoToGoodsDetail([[${result.product.itemId}]], '','IN15_03','','','pc_detail');" class="itemLink" >
  35. <div class="itemPic">
  36. <img alt="" class="vLHTC pd_img" th:src="${result.product.itemImage +'?RS=300'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
  37. </div>
  38. <p class="itemBrand" th:text="${result.product.brandName}">BRAND NAME1</p>
  39. <div class="itemName" th:text="${result.product.itemName}">남성 로고 자카드 방풍 패딩</div>
  40. <p class="itemPrice">
  41. <th:block th:text="${#numbers.formatInteger(result.product.salePrice, 0,'COMMA')}"></th:block>
  42. <th:block th:if="${result.product.originalPrice != result.product.salePrice}">
  43. <span class="itemPrice_original" th:text="${#numbers.formatInteger(result.product.originalPrice, 0,'COMMA')}">1,000,000</span>
  44. <span class="itemPercent" th:text="${(result.product.originalPrice == 0 ? 0 : #numbers.formatDecimal((result.product.originalPrice - result.product.salePrice) / (result.product.originalPrice * 1.0) * 100, 1, 0)) + '%'}">0%</span>
  45. </th:block>
  46. </p>
  47. </a>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. <th:block th:if="${params.goodsOtherGb == 'tmtb'}">
  53. <!-- Add Scrollbar -->
  54. <div class="swiper-scrollbar"></div>
  55. </th:block>
  56. </div>
  57. <th:block th:if="${params.goodsOtherGb != 'tmtb'}">
  58. <!-- Add Pagination 1111111-->
  59. <div class="swiper-pagination"></div>
  60. <!-- Add Arrows -->
  61. <div class="swiper-button-next"></div>
  62. <div class="swiper-button-prev"></div>
  63. </th:block>
  64. </div>
  65. <!-- // CONT-BODY -->
  66. </div>
  67. <script th:inline="javascript">
  68. /*<![CDATA[*/
  69. if ('together' == [[${params.goodsOtherGb}]]){
  70. var otherItemSwiper = new Swiper('.pd .pd_clickother .area_slider .swiper-container', {
  71. slidesPerView: 5,
  72. slidesToScroll: 5,
  73. slidesPerGroup: 5,
  74. spaceBetween: 20,
  75. navigation: {
  76. nextEl: '.pd_clickother .swiper-button-next',
  77. prevEl: '.pd_clickother .swiper-button-prev',
  78. },
  79. pagination: {
  80. el: '.pd_clickother .swiper-pagination',
  81. clickable: true,
  82. },
  83. });
  84. }
  85. //슬라이드 - 브랜드 추천상품
  86. if ('recommend' == [[${params.goodsOtherGb}]]){
  87. var relateItemSwiper = new Swiper('.pd .pd_brand .area_slider .swiper-container', {
  88. slidesPerView: 5,
  89. spaceBetween: 20,
  90. navigation: {
  91. nextEl: '.pd_brand .swiper-button-next',
  92. prevEl: '.pd_brand .swiper-button-prev',
  93. },
  94. pagination: {
  95. el: '.pd_brand .swiper-pagination',
  96. clickable: true,
  97. },
  98. });
  99. }
  100. if ('like' == [[${params.goodsOtherGb}]]){
  101. //슬라이드 - 이 상품과 비슷한 상품
  102. var relateItemSwiper = new Swiper('.pd .pd_relate .area_slider .swiper-container', {
  103. slidesPerView: 5,
  104. spaceBetween: 20,
  105. navigation: {
  106. nextEl: '.pd_relate .swiper-button-next',
  107. prevEl: '.pd_relate .swiper-button-prev',
  108. },
  109. pagination: {
  110. el: '.pd_relate .swiper-pagination',
  111. clickable: true,
  112. },
  113. });
  114. }
  115. /*]]>*/
  116. </script>
  117. </th:block>
  118. </html>