app/template/default/Cart/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'cart_page' %}
  15. {% block stylesheet %}
  16.     <link rel="stylesheet" href="{{ asset('assets/css/cart.css') }}">
  17. {% endblock %}
  19. {% block javascript %}
  20.     <script>
  21.         loadingOverlay('show');
  23.         $(function() {
  24.             // Khôi phục vị trí scroll sau khi reload
  25.             var scrollPosition = sessionStorage.getItem('cartScrollPosition');
  26.             if (scrollPosition) {
  27.                 // Sử dụng setTimeout để đảm bảo DOM đã load xong
  28.                 setTimeout(function() {
  29.                     $(window).scrollTop(parseInt(scrollPosition), 'fast');
  30.                     sessionStorage.removeItem('cartScrollPosition');
  31.                 }, 100);
  32.             }
  34.             // Lưu vị trí scroll trước khi submit form cho nút tăng/giảm số lượng
  35.             $(document).on('click', '.cart-item__quantity-btn--plus, .cart-item__quantity-btn--minus', function(e) {
  36.                 // Chỉ xử lý nếu là link (có href), không phải span disabled
  37.                 if ($(this).is('a')) {
  38.                     // Lưu vị trí scroll hiện tại vào sessionStorage
  39.                     sessionStorage.setItem('cartScrollPosition', $(window).scrollTop());
  40.                 }
  41.             });
  42.         });
  43.     </script>
  44. {% endblock %}
  46. {% block main %}
  48.     <!-- breadcrumb section -->
  49.     <div class="breadcrumb-section">
  50.         <div class="container-1360 border-box px-40">
  51.             <nav class="breadcrumb" aria-label="パンくずリスト">
  52.                 <a href="{{ url('homepage') }}" class="breadcrumb__item">ホーム</a>
  53.                 <img class="breadcrumb__separator" src="{{ asset('assets/img/default/icons/icon-breadcrumb-separator.svg') }}" alt="" width="12" height="12" />
  54.                 <span class="breadcrumb__item breadcrumb__item--current">カート</span>
  55.             </nav>
  56.         </div>
  57.     </div>
  59.     <div class="container-1200-fix">
  60.         <!-- title -->
  61.         <div class="base-title">
  62.             <img class="base-title__icon" src="{{ asset('assets/img/default/icons/icon-title.png') }}" alt="" width="48" height="48" />
  63.             <h1 class="base-title__text">カート</h1>
  64.         </div>
  66.         {% set productStr = app.session.flashbag.get('eccube.front.request.product') %}
  67.         {% for error in app.session.flashbag.get('eccube.front.request.error') %}
  68.             {% set idx = loop.index0 %}
  69.             <div class="ec-cartRole__error">
  70.                 <div class="ec-alert-warning">
  71.                     <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  72.                     <div class="ec-alert-warning__text">
  73.                         {% if productStr[idx] is defined %}
  74.                             {{ error|trans({'%product%':productStr[idx]})|nl2br }}
  75.                         {% else %}
  76.                             {{ error|trans|nl2br }}
  77.                         {% endif %}
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.         {% endfor %}
  82.         {% for error in app.session.flashbag.get('eccube.front.cart.error') %}
  83.             <div class="ec-cartRole__error">
  84.                 <div class="ec-alert-warning">
  85.                     <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  86.                     <div class="ec-alert-warning__text">
  87.                         {{ error|trans|nl2br }}
  88.                     </div>
  89.                 </div>
  90.             </div>
  91.         {% endfor %}
  93.         {% if totalQuantity > 0 %}
  94.             {% if Carts|length > 1 %}
  95.                 <div class="ec-cartRole__error">
  96.                     <div class="ec-alert-warning">
  97.                         <div class="ec-alert-warning__text">
  98.                             {{ 'front.cart.divide_cart'|trans|nl2br }}
  99.                         </div>
  100.                     </div>
  101.                 </div>
  102.             {% endif %}
  104.             <form name="form" id="form_cart" method="post" action="{{ url('cart') }}">
  105.                 {% for CartIndex,Cart in Carts %}
  106.                     {% set cartKey = Cart.cart_key %}
  107.                     {% for error in app.session.flashbag.get('eccube.front.cart.' ~ cartKey ~ '.request.error') %}
  108.                         <div class="ec-cartRole__error">
  109.                             <div class="ec-alert-warning">
  110.                                 <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  111.                                 <div class="ec-alert-warning__text">
  112.                                     {{ error|trans|nl2br }}
  113.                                 </div>
  114.                             </div>
  115.                         </div>
  116.                     {% endfor %}
  118.                     <!-- content -->
  119.                     <div class="cart-wrapper">
  120.                         <div class="cart-items">
  121.                             {% for CartItem in Cart.CartItems %}
  122.                                 {% set ProductClass = CartItem.ProductClass %}
  123.                                 {% set Product = ProductClass.Product %}
  124.                                 <div class="cart-item">
  125.                                     <a href="{{ url('cart_handle_item', {'operation': 'remove', 'productClassId': ProductClass.id }) }}" {{ csrf_token_for_anchor() }} class="cart-item__delete" data-method="put" data-message="カートから商品を削除してもよろしいですか?">
  126.                                         <img class="cart-item__delete-icon" src="{{ asset('assets/img/default/icons/icon-trash.svg') }}" alt="" />
  127.                                         <span>削除</span>
  128.                                     </a>
  129.                                     <a class="cart-item__image" target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}">
  130.                                         <img class="cart-item__image" src="{{ asset(Product.MainListImage|no_image_product, 'save_image') }}" alt="{{ Product.name }}" width="211" height="158" />
  131.                                     </a>
  132.                                     <div class="cart-item__info">
  133.                                         <div class="cart-item__details">
  134.                                             <div class="cart-item__label">商品名</div>
  135.                                             <div class="cart-item__name">
  136.                                                 <a target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}" class="text-black">{{ Product.name }}</a>
  137.                                                 {% if ProductClass.ClassCategory1 and ProductClass.ClassCategory1.id %}
  138.                                                     <div>{{ ProductClass.ClassCategory1.ClassName.name }}：{{ ProductClass.ClassCategory1 }}</div>
  139.                                                 {% endif %}
  140.                                                 {% if ProductClass.ClassCategory2 and ProductClass.ClassCategory2.id %}
  141.                                                     <div>{{ ProductClass.ClassCategory2.ClassName.name }}：{{ ProductClass.ClassCategory2 }}</div>
  142.                                                 {% endif %}
  143.                                             </div>
  144.                                             <div class="cart-item__price">
  145.                                                 {{ CartItem.price|price }}
  146.                                                 {% if ProductClass.getPrice02 %}
  147.                                                     <span class="cart-item__price-tax">（税抜 {{ ProductClass.getPrice02|price }}）</span>
  148.                                                 {% endif %}
  149.                                             </div>
  150.                                         </div>
  151.                                         <div class="cart-item__info-wrapper">
  152.                                             <div class="cart-item__quantity-section">
  153.                                                 <div class="cart-item__label">数量</div>
  154.                                                 <div class="cart-item__quantity">
  155.                                                     {% if CartItem.quantity > 1 %}
  156.                                                         <a href="{{ url('cart_handle_item', {'operation': 'down', 'productClassId': ProductClass.id}) }}" {{ csrf_token_for_anchor() }} class="cart-item__quantity-btn cart-item__quantity-btn--minus load-overlay" data-method="put" data-confirm="false">−</a>
  157.                                                     {% else %}
  158.                                                         <span class="cart-item__quantity-btn cart-item__quantity-btn--minus" style="opacity: 0.5; cursor: not-allowed;">−</span>
  159.                                                     {% endif %}
  160.                                                     <span class="cart-item__quantity-value">{{ CartItem.quantity|number_format }}</span>
  161.                                                     <a href="{{ url('cart_handle_item', {'operation': 'up', 'productClassId': ProductClass.id}) }}" {{ csrf_token_for_anchor() }} class="cart-item__quantity-btn cart-item__quantity-btn--plus load-overlay" data-method="put" data-confirm="false">+</a>
  162.                                                 </div>
  163.                                             </div>
  164.                                             <div class="cart-item__subtotal-section">
  165.                                                 <div class="cart-item__label">小計</div>
  166.                                                 <div class="cart-item__subtotal">
  167.                                                     <span>{{ CartItem.total_price|price }}</span>
  168.                                                     <span class="cart-item__subtotal-tax">（税込）</span>
  169.                                                 </div>
  170.                                             </div>
  171.                                         </div>
  172.                                     </div>
  173.                                 </div>
  174.                             {% endfor %}
  175.                         </div>
  177.                         <div class="cart-summary">
  178.                             <div class="cart-summary__inner_1">
  179.                                 <div class="cart-summary__row">
  180.                                     <div class="cart-summary__label">数量</div>
  181.                                     <div class="cart-summary__value">{{ Cart.totalQuantity|number_format }}</div>
  182.                                 </div>
  183.                                 <div class="cart-summary__row">
  184.                                     <div class="cart-summary__label">商品合計（税込）</div>
  185.                                     <div class="cart-summary__value">{{ Cart.totalPrice|price }}</div>
  186.                                 </div>
  187.                             </div>
  189.                             <div class="cart-summary__inner_2">
  190.                                 <div class="cart-summary__note">
  191.                                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  192.                                         <path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM9.03516 11.7783L6.20703 8.9502L4.79297 10.3643L9.03516 14.6064L15.3994 8.24219L13.9854 6.82812L9.03516 11.7783Z" fill="#353535"/>
  193.                                     </svg>
  194.                                     <span>ご注文手続きに進みます</span>
  195.                                 </div>
  196.                                 <a href="{{ path('cart_buystep', {'cart_key':cartKey}) }}" class="cart-summary__checkout">
  197.                                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  198.                                         <path d="M6 18C5.46957 18 4.96086 18.2107 4.58579 18.5858C4.21071 18.9609 4 19.4696 4 20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22C6.53043 22 7.03914 21.7893 7.41421 21.4142C7.78929 21.0391 8 20.5304 8 20C8 18.89 7.11 18 6 18ZM22 2H18.73L17.79 4H3C2.73478 4 2.48043 4.10536 2.29289 4.29289C2.10536 4.48043 2 4.73478 2 5C2 5.17 2.05 5.34 2.12 5.5L5.7 11.97C6.04 12.58 6.7 13 7.45 13H14.9L15.8 14.63L15.83 14.75C15.83 14.8163 15.8037 14.8799 15.7568 14.9268C15.7099 14.9737 15.6463 15 15.58 15H4V17H16C16.5304 17 17.0391 16.7893 17.4142 16.4142C17.7893 16.0391 18 15.5304 18 15C18 14.65 17.91 14.32 17.76 14.04L16.4 11.59L20 4H22V2ZM16 18C15.4696 18 14.9609 18.2107 14.5858 18.5858C14.2107 18.9609 14 19.4696 14 20C14 20.5304 14.2107 21.0391 14.5858 21.4142C14.9609 21.7893 15.4696 22 16 22C16.5304 22 17.0391 21.7893 17.4142 21.4142C17.7893 21.0391 18 20.5304 18 20C18 18.89 17.11 18 16 18ZM7 11L4.22 6H16.86L14.5 11H7Z" fill="#F5F5F5"/>
  199.                                     </svg>
  200.                                     <span>お会計に進む</span>
  201.                                     <svg class="cart-summary__checkout-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  202.                                         <rect width="24" height="24" rx="8" fill="#F5F5F5"/>
  203.                                         <path d="M10.112 6.99379L13.1667 10.0485C14.2914 11.1732 14.2914 12.9967 13.1667 14.1214L10.112 17.1761" stroke="#353535" stroke-width="1.35"/>
  204.                                     </svg>
  205.                                 </a>
  206.                             </div>
  207.                         </div>
  208.                     </div>
  210.                     {% if BaseInfo.delivery_free_amount and BaseInfo.delivery_free_quantity %}
  211.                         <div class="ec-cartRole__progress">
  212.                             {% if is_delivery_free[cartKey] %}
  213.                                 {{ 'front.cart.delivery_fee_free__now'|trans }}
  214.                             {% else %}
  215.                                 {{ 'front.cart.delivery_fee_free__price_and_quantity'|trans({ '%price%': least[cartKey]|price, '%quantity%': quantity[cartKey]|number_format })|raw }}
  216.                             {% endif %}
  217.                         </div>
  218.                     {% elseif BaseInfo.delivery_free_amount %}
  219.                         <div class="ec-cartRole__progress">
  220.                             {% if is_delivery_free[cartKey] %}
  221.                                 {{ 'front.cart.delivery_fee_free__now'|trans }}
  222.                             {% else %}
  223.                                 {{ 'front.cart.delivery_fee_free__price'|trans({ '%price%': least[cartKey]|price })|raw }}
  224.                             {% endif %}
  225.                         </div>
  226.                     {% elseif BaseInfo.delivery_free_quantity %}
  227.                         <div class="ec-cartRole__progress">
  228.                             {% if is_delivery_free[cartKey] %}
  229.                                 {{ 'front.cart.delivery_fee_free__now'|trans }}
  230.                             {% else %}
  231.                                 {{ 'front.cart.delivery_fee_free__quantity'|trans({ '%quantity%': quantity[cartKey]|number_format })|raw }}
  232.                             {% endif %}
  233.                         </div>
  234.                     {% endif %}
  235.                 {% endfor %}
  236.                 {# {{ form_rest(form) }} #}
  237.             </form>
  238.         {% else %}
  239.             {% for CartIndex,Cart in Carts %}
  240.                 {% set cartKey = Cart.cart_key %}
  241.                 {% for error in app.session.flashbag.get('eccube.front.cart.' ~ cartKey ~ '.request.error') %}
  242.                     <div class="ec-cartRole__error">
  243.                         <div class="ec-alert-warning">
  244.                             <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  245.                             <div class="ec-alert-warning__text">
  246.                                 {{ error|trans|nl2br }}
  247.                             </div>
  248.                         </div>
  249.                     </div>
  250.                 {% endfor %}
  251.             {% endfor %}
  252.             <div class="ec-role">
  253.                 <div class="ec-off3Grid">
  254.                     <div class="ec-off3Grid__cell">
  255.                         <div class="ec-alert-warning">
  256.                             <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  257.                             <div class="ec-alert-warning__text">{{ 'front.cart.no_items'|trans }}</div>
  258.                         </div>
  259.                     </div>
  260.                 </div>
  261.             </div>
  262.         {% endif %}
  263.     </div>
  265. {% endblock %}