app/template/user_data/cart_index.twig line 1

Open in your IDE?
  1. {% extends '@user_data/layout/default_frame.twig' %}
  2. {% block title %}
  3. カート | オリジナル缶バッジ/カンバッチ製作【個人小ロットから業務用OEMまで激安印刷】ZEAMI Goods
  4. {% endblock %}
  5. {% block css %}
  6. <link href="{{ asset('assets/custom_css/amazon_payment.css') }}" rel="stylesheet" type="text/css" media="screen, projection">
  7. {% endblock %}
  9. {% block js %}
  10. <script>
  11. function removeCartItem(button, id) {
  12. if (window.confirm('本当に削除しますか？')) {
  13. const token = $(button).attr('token-for-anchor');
  14. $.ajax({
  15. url: `/cart_index/${id}/delete`,
  16. method: 'DELETE',
  17. data: {
  18. _token: token
  19. },
  20. success: function (result) {
  21. let parent = button.parentNode;
  22. parent.parentNode.remove();
  23. window.location.reload();
  24. },
  25. error: function (xhr, status, error) {
  26. console.log(error)
  27. }
  28. });
  29. }
  30. }
  32. const WORKING_TIME = {{ working_time|json_encode|raw }};
  33. </script>
  34. <script src="{{ asset('assets/js/holiday_calender.js') }}" type="text/javascript"></script>
  35. <script src="{{ asset('assets/js/home/order_options_cart_index.js') }}" type="text/javascript"></script>
  36. {% endblock %}
  37. {% block content %}
  38. <!-- // ++ パンクズ ++ //////////////////////////////////////////////////////////// // -->
  39. <div id="bread_crumbBloc" class="fades">
  40. <ul id="breadCrumb" class="fades">
  41. <li class="up">
  42. <a href="/"><img src="{{ asset('assets/img/icon_home.png') }}" alt="ホーム"></a>
  43. </li>
  44. <li class="up">カートの中身</li>
  45. </ul>
  46. <!-- ///// #breadCrumb +++++ ///// -->
  47. <!-- ///// +++++ #bread_crumbBloc +++++ ///// -->
  48. </div>
  51. <!-- ▼▼ MAIN CONTENTS __________________________________________________________________________________________________ ▼▼ -->
  52. <main
  53. id="mainContents">
  56. <!-- // == MAIN ================================================================================ // -->
  57. <section
  58. id="Cart" class="section_basic full">
  60. <!-- // ++ ページタイトル ++ /////////////////////////////////////////////////////////////// -->
  61. <div id="section_titleBloc" class="fades">
  62. <h3 class="section_title up">カートの商品</h3>
  63. <!-- ///// #section_titleBloc +++++ ///// -->
  64. </div>
  66. <!-- // ++ カートフロー画像 ++ /////////////////////////////////////////////////////////////// -->
  67. <figure id="cart_flowImage" class="fades"><img src="{{ asset('assets/img/cart/cart-flow01.png') }}"></figure>
  69. <!-- // ++ 納期に関するご注意 ++ /////////////////////////////////////////////////////////////// -->
  70. <aside class="caution_box fades">
  71. <div class="caution_inner">
  72. <h4 class="caution_title up">納期に関するご注意</h4>
  73. <p class="indent up">◯ 納期は全てのデータをアップロードし、データに不備がない時点で確定します。</p>
  74. <!-- ///// .caution_box ***** ///// -->
  75. </div>
  76. </aside>
  77. {% set productStr = app.session.flashbag.get('eccube.front.request.product') %}
  78. {% for error in app.session.flashbag.get('eccube.front.request.error') %}
  79. {% set idx = loop.index0 %}
  80. <div class="ec-cartRole__error">
  81. <div class="ec-alert-warning">
  82. <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  83. <div class="ec-alert-warning__text">
  84. {% if productStr[idx] is defined %}
  85. {{ error|trans({'%product%':productStr[idx]})|nl2br }}
  86. {% else %}
  87. {{ error|trans|nl2br }}
  88. {% endif %}
  89. </div>
  90. </div>
  91. </div>
  92. {% endfor %}
  93. {% for error in app.session.flashbag.get('eccube.front.cart.error') %}
  94. <div class="ec-cartRole__error">
  95. <div class="ec-alert-warning">
  96. <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  97. <div class="ec-alert-warning__text">
  98. {{ error|trans|nl2br }}
  99. </div>
  100. </div>
  101. </div>
  102. {% endfor %}
  103. {% for CartIndex,Cart in Carts %}
  104. <!-- // ++ 購入内容 ++ /////////////////////////////////////////////////////////////// -->
  105. <form name="form" id="form_cart" class="ec-cartRole" method="post" action="{{ url('cart') }}">
  106. <div id="cart_tableBox" class="fades">
  107. <table id="cart_indexTable" cellpadding="0" cellspacing="0">
  108. <tbody>
  109. <tr>
  110. <th class="delete">削除</th>
  111. <th class="detail" colspan="3">商品内容</th>
  112. <th class="subtotal">小計</th>
  113. </tr>
  114. <!-- // *** 商品情報 ****************************************************** // -->
  115. {% for CartItem in Cart.CartItems %}
  116. {% set ProductClass = CartItem.ProductClass %}
  117. {% set Product = ProductClass.Product %}
  118. <tr
  119. class="cart_detail">
  121. <!-- ■■ ++ 削除ボタン ++ ■■ -->
  122. <td class="cart_delete">
  123. <button class="btn_delete" onclick="removeCartItem(this, {{ CartItem.id }})" {{ csrf_token_for_anchor() }} type="button"><img src="{{ asset('assets/img/btn_delete.png') }}"></button>
  124. </td>
  125. <!-- /// *** .cart_delete *** /// -->
  127. <!-- ■■ ++ サムネイル ++ ■■ -->
  128. <td class="cart_thumb">
  129. <figure class="item_thumb"><img src="{{ asset(Product.MainListImage|no_image_product, 'save_image') }}"></figure>
  130. </td>
  131. <!-- /// *** .cart_thumb *** /// -->
  133. <!-- ■■ ++ 商品詳細 ++ ■■ -->
  134. <td class="cart_itemdata">
  135. <h5 class="item_name">{{ Product.name }}</h5>
  136. <p>総発注数量<span>{{ CartItem.quantity|number_format }}枚</span>
  137. </p>
  138. {% set n = CartItem.total_day_delivery ?? 0 %}
  139. <p>弊社発送日<span id="delivery_date_{{ CartItem.id }}"></span></p>
  140. <script>
  141. document.addEventListener("DOMContentLoaded", function () {
  142. const deliveryDays = {{ n }};
  143. const formattedDate = formatTimeDelivery(deliveryDays);
  144. document.getElementById("delivery_date_{{ CartItem.id }}").textContent = formattedDate + " 予定";
  145. });
  146. </script>
  147. </td>
  148. <!-- /// *** .cart_itemdata *** /// -->
  150. <!-- ■■ ++ 詳細を見るボタン ++ ■■ -->
  151. <td class="cart_item_detail">
  152. {% if Product.is_sample == false %}
  153. <p class="btn_itemdetail">
  154. <a href="/detail/{{ CartItem.id }}/cart"><img src="{{ asset('assets/img/btn_detail.png') }}" alt="商品詳細を見る"></a>
  155. </p>
  156. {% endif %}
  157. </td>
  158. <!-- /// *** .cart_item_detail *** /// -->
  160. <!-- ■■ ++ 商品価格 ++ ■■ -->
  161. <td class="cart_price">
  162. <p>{{ CartItem.total_price_with_send_data|price }}
  163. <span>(税込)</span>
  164. </p>
  165. </td>
  166. <!-- /// *** .cart_price *** /// -->
  168. <!-- //// .cart_delete **** //// -->
  169. </tr>
  170. {% endfor %}
  172. </tbody>
  173. </table>
  174. <!-- //// ++++ #cart_indexTable ++++ //// -->
  175. <!-- ///// #cart_tableBox +++++ ///// -->
  176. </div>
  179. <!-- // ++ 合計金額 ＆　購入ボタン ++ /////////////////////////////////////////////////////////////// -->
  180. <div id="index_cart_totalBox">
  181. <p id="totalPrice" class="fades">
  182. <span>合計</span>
  183. {{ Cart.totalPrice|price }}<font>(税込)</font>
  184. </p>
  186. <ul id="cart_btnList" class="fades">
  188. <li class="fades">
  189. <div id="cartBack" class="btn_basic">
  190. <a href="/">お買い物を続ける</a>
  191. </div>
  192. </li>
  194. <li class="fades">
  195. <div id="Checkout" class="btn_basic cart">
  196. <a href="/cart_input">
  197. <span>レジに進む</span>
  198. </a>
  199. </div>
  200. </li>
  201. {% if app.user %}
  202. <li class="fades">
  203. <div class="btn_basic" style="padding-top: 20px;">
  204. <p style="height: 62px;" id="AmazonPayButton{{ Cart.cartKey }}"></p>
  205. </div>
  206. </li>
  207. {% else %}
  208. <li class="fades fadeIn">
  209. <a href="{{ url('cart_login_amazon') }}" class="btn_basic" style="padding-top: 20px;" id="redirect-login-amazon">
  210. <div style="height: 62px; position: relative;" role="button" aria-label="Amazon Pay - Amazon Payテストアカウントをお使いください" title="Amazonアカウントに登録されている情報を利用してお支払い">
  211. <div class="amazonpay-button-container amazonpay-button-enabled amazonpay-button-container-rows">
  212. <div class="amazonpay-button-view1 amazonpay-button-view1-gold" tabindex="0">
  213. <picture class="amazonpay-button-logo"><img src="https://m.media-amazon.com/images/G/09/AmazonPay/Maxo/logo._CB452516594_.svg"></picture>
  214. <picture class="amazonpay-button-sandbox-logo"><img src="https://m.media-amazon.com/images/G/09/AmazonPay/Maxo/sandbox_icon._CB452516595_.svg"></picture>
  215. <picture class="amazonpay-button-chevrons"><img src="https://m.media-amazon.com/images/G/09/AmazonPay/Maxo/AmazonPay_button_chevron._CB1558391205_.svg"></picture>
  216. </div>
  217. <div class="amazonpay-button-view2"></div>
  218. <div class="amazonpay-button-view3">
  219. <picture class="amazonpay-button-microtext"><img src="https://m.media-amazon.com/images/G/09/AmazonPay/Maxo/mt-ja_jp._CB1568869902_.svg"></picture>
  220. </div>
  221. </div>
  222. </div>
  223. </a>
  224. </li>
  225. {% endif %}
  226. </ul>
  227. <!-- //// ++++ #cart_btnList ++++ //// -->
  228. <!-- ///// #index_cart_totalBox +++++ ///// -->
  230. </div>
  231. </form>
  232. {% endfor %}
  233. {% set totalQuantity = get_carts_total_quantity() %}
  234. {% if totalQuantity == 0 %}
  235. <div style="width: 100%;
  236. padding: 10px;
  237. text-align: center;
  238. font-weigth: bold;
  239. color: white;
  240. background: #ff7900;
  241. margin-bottom: 20px;">
  242. <div>
  243. <p>{{ 'front.block.cart.no_item'|trans }}</p>
  244. </div>
  245. </div>
  246. {% endif %}
  248. </section>
  249. <!-- ///// +++++ #Cart +++++ ///// -->
  250. <!-- ///// +++++ #mainContents +++++ ///// -->
  251. </main>
  254. <!-- // ++ パンクズ ++ //////////////////////////////////////////////////////////// // -->
  255. <div id="bread_crumbBloc" class="fades">
  256. <ul id="breadCrumb" class="fades">
  257. <li class="up">
  258. <a href="/"><img src="{{ asset('assets/img/icon_home.png') }}" alt="ホーム"></a>
  259. </li>
  260. <li class="up">カートの中身</li>
  261. </ul>
  262. <!-- ///// #breadCrumb +++++ ///// -->
  263. <!-- ///// +++++ #bread_crumbBloc +++++ ///// -->
  264. </div>
  265. {% endblock %}