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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% set body_class = 'cart_page' %}
  3. {% block main %}
  4.     <script>
  5.         const formatCurrency = (value) => {
  6.             value = value.toLocaleString("en",{
  7.                 minimumFractionDigits: 0,
  8.                 maximumFractionDigits: 0,
  9.             });
  10.             return `¥${value}`
  11.         }
  12.         $(function() {
  13.             $(".ec-cartRow__Action").on("click", function(e) {
  14.                 e.preventDefault();
  15.                 var href = $(this).attr("href");
  16.                 var confirmMessage = $(this).attr("data-message");
  17.                 var action = $(this).attr("data-action");
  18.                 var self = $(this);
  19.                 if(confirmMessage) {
  20.                     if(!confirm(confirmMessage)) {
  21.                         return false;
  22.                     }
  23.                 }
  24.                 $.ajax({
  25.                     url: href,
  26.                     type: "PUT",
  27.                 }).done(function(data) {
  28.                     var $curQuantityEl = $(self).parents(".ec-cartRow__amountColumn").find(".ec-cartRow__amount");
  29.                     var $curQuantitySPEl = $(self).parents(".ec-cartRow__amountColumn").find(".ec-cartRow__amountSP");
  30.                     var stock = $(self).parents(".ec-cartRow").find(".stock").val() * 1;
  31.                     var cartItemPrice = $(self).parents(".ec-cartRow").find(".cart-item__price").val() * 1;
  32.                     var $pinpointSaleQtyEl = $(self).parents(".ec-cartRow").find(".pinpoint_sale_quantity");
  33.                     var $totalEl = $(self).parents(".ec-cartRole__cart").next().next().find(".ec-cartRole__totalAmount");
  34.                     var $cartTable = $(self).parents(".ec-cartTable");
  35.                     var $curRowPriceEl = $(self).parents(".ec-cartRow").find(".ec-cartRow__sutbtotal");
  36.                     var $curRowPriceSPEl = $(self).parents(".ec-cartRow").find(".ec-cartRow__sutbtotalSP");
  37.                     var $table = $(self).parents(".ec-cartRole__cart")
  38.                     var cartKey = $table.data("cart-key");
  39.                     var cartLeastUrl = $table.data("url");
  40.                     // Reload quantity START
  41.                     var curQuantity = $($curQuantityEl).text() * 1;
  42.                     if(action == "down") {
  43.                         curQuantity = curQuantity - 1;
  44.                     } else if(action == "up") {
  45.                         curQuantity = curQuantity + 1;
  46.                     } else if(action == "remove") {
  47.                         $(self).parents("ul.ec-cartRow").remove();
  48.                     }
  49.                     if(curQuantity == 1 || curQuantity == stock) {
  50.                         $(self).prop("disabled", true);
  51.                     } else {
  52.                         $(self).parents(".ec-cartRow__amountColumn").find(".ec-cartRow__Action").prop("disabled", false);
  53.                     }
  54.                     $($curQuantityEl).text(curQuantity);
  55.                     $($curQuantitySPEl).text(`${curQuantity}`);
  56.                     $($pinpointSaleQtyEl).text(curQuantity);
  57.                     
  58.                     // Reload quantity END
  59.                     // Reload total in current row START
  60.                     $($curRowPriceEl).text(formatCurrency(curQuantity * cartItemPrice));
  61.                     $($curRowPriceSPEl).text(`小計:${formatCurrency(curQuantity * cartItemPrice)}`);
  62.                     // Reload total in current row END
  63.                     // Reload total in cart START
  64.                     var totalPrice = 0;
  65.                     $cartRows = $($cartTable).find(".ec-cartRow");
  66.                     $($cartRows).each(function(index, el){
  67.                         var quantity = $(el).find(".ec-cartRow__amount").text() * 1;
  68.                         var price = $(el).find(".cart-item__price").val() * 1;
  69.                         totalPrice += quantity * price;
  70.                     });
  71.                     $($totalEl).text(`${formatCurrency(totalPrice)}`)
  72.                     // Reload total in cart END
  73.                     // Reload total by all cart START
  74.                     var totalByCarts = 0; 
  75.                     $(".ec-cartRole__cart").each(function(index, el) {
  76.                         var $_cartRows = $(el).find(".ec-cartRow");
  77.                         $_cartRows.each(function(indx, rowEl) {
  78.                             var quantity = $(rowEl).find(".ec-cartRow__amount").text() * 1;
  79.                             var price = $(rowEl).find(".cart-item__price").val() * 1;
  80.                             totalByCarts += quantity * price;
  81.                         });
  82.                     });
  83.                     $(".ec-cartRole__totalText strong").text(formatCurrency(totalByCarts));
  84.                     // Reload total by all cart END
  85.                     // Update cart block in header START
  86.                     $.ajax({
  87.                         url: '{{ url('block_cart') }}',
  88.                         type: 'GET',
  89.                         dataType: 'html'
  90.                     }).done(function(html) {
  91.                         $('.ec-headerRole__cart').html(html);
  92.                     });
  93.                     // Update cart block in header END
  94.                      // update free condition START
  95.                     $.ajax({
  96.                         url: cartLeastUrl,
  97.                         type: 'GET',
  98.                         dataType: 'html'
  99.                     }).done(function(html) {
  100.                         $(`#cartRole__progress__${cartKey}`).html(html);
  101.                     });
  102.                     // update free condition END
  103.                 }).fail(function(error) {
  104.                     console.log(error);
  105.                 })
  106.                 return false;
  107.             });
  108.         });
  109.     </script>
  110.     <ul class="breadcrumb w-p">
  111.         <li class="breadcrumb__item">
  112.             <a href="{{ url('homepage') }}" class="breadcrumb__item__link">
  113.                 ホーム
  114.             </a>
  115.         </li>
  116.         <li class="breadcrumb__item">
  117.             <p class="breadcrumb__item__arrow">></p>
  118.         </li>
  119.         <li class="breadcrumb__item">
  120.             <p class="breadcrumb__item__text">カート</p>
  121.         </li>
  122.     </ul>
  123.     <div class="ec-role">
  124.         <div class="ec-pageHeader text-center">
  125.             <h1>{{ 'ショッピングカート'|trans }}</h1>
  126.         </div>
  127.     </div>
  128.     <div class="ec-cartRole">
  129.         <div class="ec-cartRole__progress">
  130.             <ul class="ec-progress">
  131.                 {% set step = 1 %}
  132.                 <li class="ec-progress__item is-complete">
  133.                     <div class="ec-progress__number">0{{ step }}{% set step = step + 1 %}
  134.                     </div>
  135.                     <div class="ec-progress__label">{{ 'カートの商品'|trans }}
  136.                     </div>
  137.                 </li>
  138.                 {% if is_granted('ROLE_USER') == false %}
  139.                     <li class="ec-progress__item">
  140.                         <div class="ec-progress__number">0{{ step }}{% set step = step + 1 %}
  141.                         </div>
  142.                         <div class="ec-progress__label">{{ 'お客様情報'|trans }}
  143.                         </div>
  144.                     </li>
  145.                 {% endif %}
  146.                 <li class="ec-progress__item">
  147.                     <div class="ec-progress__number">0{{ step }}{% set step = step + 1 %}
  148.                     </div>
  149.                     <div class="ec-progress__label">{{ 'ご注文手続き'|trans }}
  150.                     </div>
  151.                 </li>
  152.                 <li class="ec-progress__item">
  153.                     <div class="ec-progress__number">0{{ step }}{% set step = step + 1 %}
  154.                     </div>
  155.                     <div class="ec-progress__label">{{ 'ご注文内容確認'|trans }}
  156.                     </div>
  157.                 </li>
  158.                 <li class="ec-progress__item">
  159.                     <div class="ec-progress__number">0{{ step }}{% set step = step + 1 %}
  160.                     </div>
  161.                     <div class="ec-progress__label">{{ '完了'|trans }}
  162.                     </div>
  163.                 </li>
  164.             </ul>
  165.         </div>
  166.         {% set productStr = app.session.flashbag.get('eccube.front.request.product') %}
  167.         {% for error in app.session.flashbag.get('eccube.front.request.error') %}
  168.             {% set idx = loop.index0 %}
  169.             <div class="ec-cartRole__error">
  170.                 <div class="ec-alert-warning">
  171.                     <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  172.                     <div class="ec-alert-warning__text">
  173.                         {% if productStr[idx] is defined %}
  174.                             {{ error|trans({'%product%':productStr[idx]})|nl2br }}
  175.                         {% else %}
  176.                             {{ error|trans|nl2br }}
  177.                         {% endif %}
  178.                     </div>
  179.                 </div>
  180.             </div>
  181.         {% endfor %}
  182.         {% for error in app.session.flashbag.get('eccube.front.cart.error') %}
  183.             <div class="ec-cartRole__error">
  184.                 <div class="ec-alert-warning">
  185.                     <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  186.                     <div class="ec-alert-warning__text">
  187.                         {{ error|trans|nl2br }}
  188.                     </div>
  189.                 </div>
  190.             </div>
  191.         {% endfor %}
  192.         {% if totalQuantity > 0 %}
  193.             <div class="ec-cartRole__totalText">
  194.                 <p>
  195.                     {{ '商品の合計金額は「<strong>%price%</strong>」です。'|trans({ '%price%': totalPrice|price })|raw }}
  196.                 </p>
  197.             </div>
  198.             {% if Carts|length > 1 %}
  199.                 <div class="ec-cartRole__error">
  200.                     <div class="ec-alert-warning">
  201.                         <div class="ec-alert-warning__text">
  202.                             {{ '同時購入できない商品がカートに含まれています。'|trans|nl2br }}
  203.                         </div>
  204.                     </div>
  205.                 </div>
  206.             {% endif %}
  207.             <form name="form" id="form_cart" class="ec-cartRole__form" method="post" action="{{ url('cart') }}">
  208.                 {% for CartIndex,Cart in Carts %}
  209.                     {% set cartKey = Cart.cart_key %}
  210.                     {% for error in app.session.flashbag.get('eccube.front.cart.' ~ cartKey ~ '.request.error') %}
  211.                         <div class="ec-cartRole__error">
  212.                             <div class="ec-alert-warning">
  213.                                 <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  214.                                 <div class="ec-alert-warning__text">
  215.                                     {{ error|trans|nl2br }}
  216.                                 </div>
  217.                             </div>
  218.                         </div>
  219.                     {% endfor %}
  220.                     <div class="ec-cartRole__cart" data-cart-key="{{cartKey}}" data-url="{{ url('cart_least', {"cart_key": cartKey}) }}">
  221.                         <div class="ec-cartTable">
  222.                             <ol class="ec-cartHeader">
  223.                                 <li class="ec-cartHeader__label">{{ '商品内容'|trans }}</li>
  224.                                 <li class="ec-cartHeader__label">{{ '数量'|trans }}</li>
  225.                                 <li class="ec-cartHeader__label">{{ '小計'|trans }}</li>
  226.                                 <li class="ec-cartHeader__label">{{ '削除'|trans }}</li>
  227.                             </ol>
  228.                             {% for CartItem in Cart.CartItems %}
  229.                                 {% set ProductClass = CartItem.ProductClass %}
  230.                                 {% set Product = ProductClass.Product %}
  231.                                 <ul class="ec-cartRow">
  232.                                     {% set disabled = false %}
  233.                                     {% set default = CartItem.quantity %}
  234.                                     {% if not Product.isStockDiscontinued %}
  235.                                         <input type="hidden" name="stock" class="stock" value="999999999999">
  236.                                     {% else %}
  237.                                         {% if Product.getStockMin <= default %}
  238.                                             {% set disabled = true %}
  239.                                         {% endif %}
  240.                                         <input type="hidden" name="stock" class="stock" value="{{Product.getStockMin}}">
  241.                                     {% endif %}
  242.                                         <input type="hidden" name="cart-item__price" class="cart-item__price" value="{{ CartItem.price }}">
  243.                                     <li class="ec-cartRow__contentColumn">
  244.                                         <div class="ec-cartRow__img">
  245.                                             <a target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}">
  246.                                                 <img src="{{ asset(Product.MainListImage|no_image_product, 'save_image') }}" alt="{{ Product.name }}"/>
  247.                                             </a>
  248.                                         </div>
  249.                                         <div class="ec-cartRow__summary">
  250.                                             <div class="ec-cartRow__name">
  251.                                                 <a target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}">{{ Product.name }}</a>
  252.                                                 {% if ProductClass.ClassCategory1 and ProductClass.ClassCategory1.id %}
  253.                                                     <br>{{ ProductClass.ClassCategory1.ClassName.name }}:{{ ProductClass.ClassCategory1 }}
  254.                                                 {% endif %}
  255.                                                 {% if ProductClass.ClassCategory2 and ProductClass.ClassCategory2.id %}
  256.                                                     <br>{{ ProductClass.ClassCategory2.ClassName.name }}:{{ ProductClass.ClassCategory2 }}
  257.                                                 {% endif %}
  258.                                             </div>
  259.                                             <div class="ec-cartRow__unitPrice">{{ CartItem.price|price }}</div>
  260.                                             <div class="ec-cartRow__sutbtotalSP">{{ '小計:'|trans }}{{ CartItem.total_price|price }}</div>
  261.                                         </div>
  262.                                     </li>
  263.                                     <li class="ec-cartRow__amountColumn">
  264.                                         <div class="ec-cartRow__amountSP">{{ CartItem.quantity|number_format }}</div>
  265.                                         <div class="ec-cartRow__amountUpDown">
  266.                                             <button {% if CartItem.quantity == 1 %}disabled{% endif %} href="{{ url('cart_handle_item', {'operation': 'down', 'productClassId': ProductClass.id}) }}" {{ csrf_token_for_anchor() }} class="ec-cartRow__Action ec-cartRow__amountDownButton" data-action="down" data-confirm="false">
  267.                                                 <span class="ec-cartRow__amountDownButton__icon"></span>
  268.                                             </button>
  269.                                             <div class="ec-cartRow__amount">{{ CartItem.quantity|number_format }}</div>
  270.                                             <button {% if disabled %}disabled{% endif %} href="{{ url('cart_handle_item', {'operation': 'up', 'productClassId': ProductClass.id}) }}" {{ csrf_token_for_anchor() }} class="ec-cartRow__Action ec-cartRow__amountUpButton" data-action="up" data-confirm="false">
  271.                                                 <span class="ec-cartRow__amountUpButton__icon"></span>
  272.                                             </button>
  273.                                         </div>
  274.                                     </li>
  275.                                     <li class="ec-cartRow__subtotalColumn">
  276.                                         <div class="ec-cartRow__sutbtotal">{{ CartItem.total_price|price }}</div>
  277.                                     </li>
  278.                                     <li class="ec-cartRow__delColumn">
  279.                                         <button href="{{ url('cart_handle_item', {'operation': 'remove', 'productClassId': ProductClass.id }) }}" {{ csrf_token_for_anchor() }} class="ec-icon ec-cartRow__Action" data-action="remove" data-message="カートから商品を削除してもよろしいですか?">
  280.                                             <img src="{{ asset('assets/img/cart/close.svg') }}" alt="delete">
  281.                                         </button>
  282.                                     </li>
  283.                                 </ul>
  284.                             {% endfor %}
  285.                         </div>
  286.                     </div>
  287.                     <div class="ec-cartRole__progress" id="cartRole__progress__{{cartKey}}">
  288.                         {% if BaseInfo.delivery_free_amount and BaseInfo.delivery_free_quantity %}
  289.                             <br/>
  290.                             {% if is_delivery_free[cartKey] %}
  291.                                 {{ '現在送料無料です。'|trans }}
  292.                             {% else %}
  293.                                 {{ 'あと「<strong>%price%</strong>」または「<strong>%quantity%個</strong>」のお買い上げで<strong class="ec-color-red">送料無料</strong>になります。'|trans({ '%price%': least[cartKey]|price, '%quantity%': quantity[cartKey]|number_format })|raw }}
  294.                             {% endif %}
  295.                         {% elseif BaseInfo.delivery_free_amount %}
  296.                             <br/>
  297.                             {% if is_delivery_free[cartKey] %}
  298.                                 {{ '現在送料無料です。'|trans }}
  299.                             {% else %}
  300.                                 {{ 'あと「<strong>%price%</strong>」のお買い上げで<strong class="ec-color-red">送料無料</strong>になります。'|trans({ '%price%': least[cartKey]|price })|raw }}
  301.                             {% endif %}
  302.                         {% elseif BaseInfo.delivery_free_quantity %}
  303.                             <br/>
  304.                             {% if is_delivery_free[cartKey] %}
  305.                                 {{ '現在送料無料です。'|trans }}
  306.                             {% else %}
  307.                                 {{ 'あと「<strong>%quantity%個</strong>」のお買い上げで<strong class="ec-color-red">送料無料</strong>になります。'|trans({ '%quantity%': quantity[cartKey]|number_format })|raw }}
  308.                             {% endif %}
  309.                         {% endif %}
  310.                     </div>
  311.                     <div class="ec-cartRole__actions">
  312.                         <div class="ec-cartRole__actions__inner">
  313.                             <div class="ec-cartRole__total"><span>{{ '合計'|trans }}</span><span class="ec-cartRole__totalAmount">{{ Cart.totalPrice|price }}</span></div>
  314.                             <div class="ec-cartRole__actions__flex">
  315.                                 {% if loop.last %}
  316.                                     <a class="ec-blockBtn--back" href="{{ path('homepage') }}">{{ 'お買い物を続ける'|trans }}</a>
  317.                                 {% endif %}
  318.                                 <a class="ec-regular__btn" href="{{ path('cart_buystep', {'cart_key':cartKey}) }}">{{ 'レジに進む'|trans }}</a>
  319.                             </div>
  320.                         </div>
  321.                         
  322.                     </div>
  323.                 {% endfor %}
  324.             </form>
  325.         {% else %}
  326.             {% for CartIndex,Cart in Carts %}
  327.                 {% set cartKey = Cart.cart_key %}
  328.                 {% for error in app.session.flashbag.get('eccube.front.cart.' ~ cartKey ~ '.request.error') %}
  329.                     <div class="ec-cartRole__error">
  330.                         <div class="ec-alert-warning">
  331.                             <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  332.                             <div class="ec-alert-warning__text">
  333.                                 {{ error|trans|nl2br }}
  334.                             </div>
  335.                         </div>
  336.                     </div>
  337.                 {% endfor %}
  338.             {% endfor %}
  339.             <div class="ec-role">
  340.                 <div class="ec-alert-warning cart-warning">
  341.                     <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  342.                     <div class="ec-alert-warning__text">{{ '現在カート内に商品はございません。'|trans }}</div>
  343.                 </div>
  344.             </div>
  345.         {% endif %}
  346.     </div>
  347. {% endblock %}