OrderNoMemberWeb.html 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org"
  4. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  5. layout:decorator="web/common/layout/DefaultLayoutWeb">
  6. <!--
  7. *******************************************************************************
  8. * @source : OrderNoMemberWeb.html
  9. * @desc : 비회원 주문/결제 Page
  10. *============================================================================
  11. * STYLE24
  12. * Copyright(C) 2020 TSIT, All rights reserved.
  13. *============================================================================
  14. * VER DATE AUTHOR DESCRIPTION
  15. * === =========== ========== =============================================
  16. * 1.0 2021.02.01 jsh77b 최초 작성
  17. *******************************************************************************
  18. -->
  19. <body>
  20. <th:block layout:fragment="content">
  21. <div class="wrap">
  22. <div class="content nonMBorder">
  23. <!-- 페이지특정 클래스 = nonMBorder -->
  24. <div class="cont_head">
  25. <h2 class="t_c mb60">비회원 주문하기</h2>
  26. </div>
  27. <div class="cont_body">
  28. <form id="orderForm" name="orderForm" class="form_wrap form_col_c form_full" action="#" th:action="@{'/order/form'}" th:method="post">
  29. <input type="hidden" name="shotDelvYn" th:value="${order.shotDelvYn}" /><!-- 장바구니화면 총알배송여부 -->
  30. <!-- 장바구니화면 시퀀스 배열 등록 -->
  31. <th:block th:each="cartSq , index : ${order.cartSqArr}">
  32. <input type="hidden" name="cartSqArr" th:value="${cartSq}" />
  33. </th:block>
  34. <div class="form_head">
  35. <p>
  36. 비회원 주문을 위한 주문자 정보 입력 및 개인정보 수집/이용 동의에<br>체크하신 후 주문을 완료하실 수
  37. 있습니다.
  38. </p>
  39. </div>
  40. <div class="form_field">
  41. <label class="input_label sr-only">이름(주문자명)</label>
  42. <div class="ui_col_12">
  43. <div class="input_wrap">
  44. <input type="text" name="custNm" id="custNm" placeholder="이름(주문자명)">
  45. </div>
  46. </div>
  47. </div>
  48. <div class="form_field">
  49. <label class="input_label sr-only">휴대폰 번호</label>
  50. <div class="ui_col_12">
  51. <div class="input_wrap">
  52. <input type="text" name="cellPhnno" id="cellPhnno" placeholder="휴대폰 번호">
  53. </div>
  54. </div>
  55. </div>
  56. <div class="form_field">
  57. <label class="input_label sr-only">이메일주소</label>
  58. <div class="ui_col_12">
  59. <div class="input_wrap">
  60. <input type="text" name="email" id="email" placeholder="이메일주소">
  61. </div>
  62. </div>
  63. </div>
  64. <div class="form_field">
  65. <label class="input_label sr-only">배송주소 우편번호</label>
  66. <div class="ui_col_12">
  67. <div class="input_wrap" style="display: flex;">
  68. <input type="text" name="recipZipcode" id="recipZipcode" placeholder="우편번호">
  69. <button type="submit" class="btn btn_default">우편번호 찾기</button>
  70. </div>
  71. </div>
  72. </div>
  73. <br>
  74. <div class="form_field">
  75. <label class="input_label sr-only">배송주소 기본주소</label>
  76. <div class="ui_col_12">
  77. <input type="text" name="recipBaseAddr" id="recipBaseAddr" placeholder="기본주소">
  78. </div>
  79. </div>
  80. <div class="form_field">
  81. <label class="input_label sr-only">배송주소 상세주소</label>
  82. <div class="ui_col_12">
  83. <input type="text" name="recipDtlAddr" id="recipDtlAddr" placeholder="상세주소">
  84. </div>
  85. </div>
  86. <!-- 주소 출력
  87. <div class="help_block">
  88. <p><span>도로명</span>서울특별시 서초구 서운로 57번길</p>
  89. <p><span>지번</span>서울특별시 서초구 서포동 60-28</p>
  90. </div>
  91. -->
  92. <!-- //주소 출력 -->
  93. <div class="form_field">
  94. <div>
  95. <input id="chk-2" type="checkbox"><label for="chk-2">
  96. <p>
  97. 비회원 개인정보 수집&#47;이용 동의 <span>(필수)</span>
  98. </p>
  99. </label>
  100. </div>
  101. </div>
  102. <div class="form_field txt_area">
  103. <div
  104. style="overflow: auto; max-height: 176px; border: 1px solid #ddd;">
  105. <strong>제1조(목적)</strong>
  106. <p>이 약관은 (유)내고향시푸드(전자거래 사업자)이 운영하는 홈페이지(이하 "쇼핑몰"이라 한다)에서
  107. 제공하는 인터넷 관련 서비스(이하 "서비스"라 한다)를 이용함에 있어 (유)내고향시푸드와 이용자의 권리·의무 및
  108. 책임사항을 규정함을 목적으로 합니다. ※ 「PC통신 등을 이용하는 전자거래에 대해서도 그 성질에 반하지 않는 한
  109. 이 약관을 준용합니다」 제2조(정의) ① "쇼핑몰" 이란 사업자가 재화 또는 용역을 이용자에게 제공하기 위하여
  110. 컴퓨터 등 정보통신설비를 이용하여 재화 또는 용역을 거래할 수 있도록 설정한 가상의 영업장을 말하며, 아울러
  111. 쇼핑몰을 운영하는 사업자의 의미로도 사용합니다. ② "이용자"란 "쇼핑몰"에 접속하여 이 약관에 따라 "쇼핑몰"이
  112. 제공하는 서비스를 받는 회원 및 비회원을 말합니다. ③ "회원"이라 함은 "쇼핑몰"에 개인정보를 제공하여
  113. 회원등록을 한 자로서, "쇼핑몰"의 정보를 지속적으로 제공받으며, "쇼핑몰"이 제공하는 서비스를 계속적으로 이용할
  114. 수 있는 자를 말합니다. ④ "비회원"이라 함은 회원에 가입하지 않고 "쇼핑몰"이 제공하는 서비스를 이용하는 자를
  115. 말합니다. 제3조 (약관의 명시와 개정) ① "쇼핑몰"은 이 약관의 내용과 상호, 영업소 소재지, 대표자의 성명,
  116. 사업자등록번호, 연락처(전화, 팩스, 전자우편 주소 등) 등을 이용자가 알 수 있도록 사이트의 초기
  117. 서비스화면(전면)에 게시합니다. ② "쇼핑몰"은 약관의 규제 등에 관한 법률, 전자거래기본법, 전자서명법,
  118. 정보통신망 이용촉진 등에 관한 법률, 방문판매 등에 관한법률, 소비자보호법 등 관련법을 위배하지 않는 범위에서 이
  119. 약관을 개정할 수 있습니다. ③ "쇼핑몰"이 약관을 개정할 경우에는 적용일자 및 개정사유를 명시하여 현행약관과
  120. 함께 홈페이지의 초기화면에 그 적용일자 7일 이전부터 적용일자 전일까지 공지합니다. ④ "쇼핑몰"이 약관을 개정할
  121. 경우에는 그 개정약관은 그 적용일자 이후에 체결되는 계약에만 적용되고 그 이전에 이미 체결된 계약에 대해서는 개정
  122. 전의 약관조항이 그대로 적용됩니다. 다만 이미 계약을 체결한 이용자가 개정약관 조항의 적용을 받기를 원하는 뜻을
  123. 제3항에 의한 개정약관의 공지기간 내에 "쇼핑몰"에 송신하여 "쇼핑몰"의 동의를 받은 경우에는 개정약관 조항이
  124. 적용됩니다. ⑤ 이 약관에서 정하지 아니한 사항과 이 약관의 해석에 관하여는 정부가 제정한 전자거래소비자보호지침
  125. 및 관계법령 또는 상관례에 따릅니다. 제4조(서비스의 제공 및 변경) ① "쇼핑몰"은 다음과 같은 업무를
  126. 수행합니다. 1. 재화 또는 용역에 대한 정보 제공 및 구매계약의 체결 2. 구매계약이 체결된 재화 또는 용역의
  127. 배송 3. 기타 "쇼핑몰"이 정하는 업무 ② "쇼핑몰"은 재화의 품절 또는 기술적 사양의 변경 등의 경우에는 장차
  128. 체결되는 계약에 의해 제공할 재화·용역의 내용을 변경할 수 있습니다. 이 경우에는 변경된 재화·용역의 내용 및
  129. 제공일자를 명시하여 현재의 재화·용역의 내용을 게시한 곳에 그 제공일자 이전 7일부터 공지합니다. ③ "쇼핑몰"이
  130. 제공하기로 이용자와 계약을 체결한 서비스의 내용을 재화의 품절 또는 기술적 사양의 변경 등의 사유로 변경할
  131. 경우에는 "쇼핑몰"은 이로 인하여 이용자가 입은 손해를 배상합니다. 단, "쇼핑몰"에 고의 또는 과실이 없는
  132. 경우에는 그러하지 아니합니다.</p>
  133. </div>
  134. </div>
  135. <div class="form_field">
  136. <div class="ui_row btn_group_md">
  137. <div class="ui_col_6">
  138. <button class="btn btn_default btn_block" id="btn_cancel">
  139. <span>취소</span>
  140. </button>
  141. </div>
  142. <div class="ui_col_6">
  143. <button class="btn btn_dark btn_block" id="btn_order">
  144. <span>주문하기</span>
  145. </button>
  146. </div>
  147. </div>
  148. </div>
  149. <div class="form_info">
  150. <p>STYLE24에 회원가입을 하시면 더 많은 혜택을 받으실 수 있습니다!</p>
  151. <a href="#none" id="btn_join">회원가입</a>
  152. </div>
  153. </form>
  154. </div>
  155. </div>
  156. </div>
  157. <script th:inline="javascript">
  158. </script>
  159. <script type="text/javascript">
  160. // 컨텐츠 호출
  161. $(document).ready( function() {
  162. });
  163. // 취소버튼
  164. $("btn_cancel").on("click", function() {
  165. });
  166. // 주문하기버튼
  167. $("btn_order").on("click", function() {
  168. // TODO 유효성 체크 추가
  169. $("#orderForm").submit();
  170. });
  171. // 회원가입버튼
  172. $("btn_join_member").on("click", function() {
  173. });
  174. </script>
  175. </th:block>
  176. </body>
  177. </html>