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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% set body_class = 'cart_page' %}
  3. {% block javascript %}
  4. <script>
  5. function doChange(id){
  6.   var q_num = $("#q_" + id).val();
  7.   var o_num = $("#o_" + id).val();
  8.   var num = q_num - o_num;
  9.   location.href = "{{ url('cart_change_num') }}?class_id=" + id + "&num=" + num;
  10. }
  11. </script>
  12. {% endblock %}
  13. {% block main %}
  14. <form name="form" id="form_cart" class="ec-cartRole" method="post" action="{{ url('cart') }}">
  15.     <div class="ec-cartRole">
  16.         <div class="ec-cartRole__progress">
  17.             <ul class="ec-progress">
  18.                 {% set step = 1 %}
  19.                 {% set kanji_numbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'] %}
  20.                 {# カートページ #}
  21.                 {% if app.request.get('_route') == 'cart' %}
  22.                 <li class="ec-progress__item is-complete">
  23.                     <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  24.                     <div class="ec-progress__label">{{ 'カートの商品'|trans }}</div>
  25.                 </li>
  26.                 {% else %}
  27.                 <li class="ec-progress__item">
  28.                     <a href="{{ url('cart') }}">
  29.                         <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  30.                         <div class="ec-progress__label">{{ 'カートの商品'|trans }}</div>
  31.                     </a>
  32.                 </li>
  33.                 {% endif %}
  34.                 {% set step = step + 1 %}
  35.                 {# お客様情報 #}
  36.                 {% if is_granted('ROLE_USER') == false %}
  37.                 {% if app.request.get('_route') == 'shopping_nonmember' %}
  38.                 <li class="ec-progress__item is-complete">
  39.                     <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  40.                     <div class="ec-progress__label">{{ 'お客様情報'|trans }}</div>
  41.                 </li>
  42.                 {% elseif app.request.get('_route') in ['shopping', 'shopping_confirm', 'shopping_complete'] %}
  43.                 <li class="ec-progress__item">
  44.                     <a href="{{ url('shopping_nonmember') }}">
  45.                         <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  46.                         <div class="ec-progress__label">{{ 'お客様情報'|trans }}</div>
  47.                     </a>
  48.                 </li>
  49.                 {% else %}
  50.                 <li class="ec-progress__item">
  51.                     <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  52.                     <div class="ec-progress__label">{{ 'お客様情報'|trans }}</div>
  53.                 </li>
  54.                 {% endif %}
  55.                 {% set step = step + 1 %}
  56.                 {% endif %}
  57.                 {# ご注文手続き #}
  58.                 {% if app.request.get('_route') == 'shopping' %}
  59.                 <li class="ec-progress__item is-complete">
  60.                     <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  61.                     <div class="ec-progress__label">{{ 'ご注文手続き'|trans }}</div>
  62.                 </li>
  63.                 {% elseif app.request.get('_route') in ['shopping_confirm', 'shopping_complete'] %}
  64.                 <li class="ec-progress__item">
  65.                     <a href="{{ url('shopping') }}">
  66.                         <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  67.                         <div class="ec-progress__label">{{ 'ご注文手続き'|trans }}</div>
  68.                     </a>
  69.                 </li>
  70.                 {% else %}
  71.                 <li class="ec-progress__item">
  72.                     <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  73.                     <div class="ec-progress__label">{{ 'ご注文手続き'|trans }}</div>
  74.                 </li>
  75.                 {% endif %}
  76.                 {% set step = step + 1 %}
  77.                 {# ご注文内容確認 #}
  78.                 {% if app.request.get('_route') == 'shopping_confirm' %}
  79.                 <li class="ec-progress__item is-complete">
  80.                     <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  81.                     <div class="ec-progress__label">{{ 'ご注文内容確認'|trans }}</div>
  82.                 </li>
  83.                 {% elseif app.request.get('_route') == 'shopping_complete' %}
  84.                 <li class="ec-progress__item">
  85.                     <a href="{{ url('shopping_confirm') }}">
  86.                         <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  87.                         <div class="ec-progress__label">{{ 'ご注文内容確認'|trans }}</div>
  88.                     </a>
  89.                 </li>
  90.                 {% else %}
  91.                 <li class="ec-progress__item">
  92.                     <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  93.                     <div class="ec-progress__label">{{ 'ご注文内容確認'|trans }}</div>
  94.                 </li>
  95.                 {% endif %}
  96.                 {% set step = step + 1 %}
  97.                 {# 完了 #}
  98.                 {% if app.request.get('_route') == 'shopping_complete' %}
  99.                 <li class="ec-progress__item is-complete">
  100.                     <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  101.                     <div class="ec-progress__label">{{ '完了'|trans }}</div>
  102.                 </li>
  103.                 {% else %}
  104.                 <li class="ec-progress__item">
  105.                     <div class="ec-progress__number">{{ kanji_numbers[step-1] }}</div>
  106.                     <div class="ec-progress__label">{{ '完了'|trans }}</div>
  107.                 </li>
  108.                 {% endif %}
  109.             </ul>
  110.         </div>
  111.         <div class="ec-role">
  112.             <div class="ec-pageHeader">
  113.                 <h1>{{ 'ショッピングカート'|trans }}</h1>
  114.             </div>
  115.         </div>
  116.         {% set productStr = app.session.flashbag.get('eccube.front.request.product') %}
  117.         {% for error in app.session.flashbag.get('eccube.front.request.error') %}
  118.         {% set idx = loop.index0 %}
  119.         <div class="ec-cartRole__error">
  120.             <div class="ec-alert-warning">
  121.                 {#<div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>#}
  122.                 <div class="ec-alert-warning__text">
  123.                     {% if productStr[idx] is defined %}
  124.                     {{ error|trans({'%product%':productStr[idx]})|nl2br }}
  125.                     {% else %}
  126.                     {{ error|trans|nl2br }}
  127.                     {% endif %}
  128.                 </div>
  129.             </div>
  130.         </div>
  131.         {% endfor %}
  132.         {% for error in app.session.flashbag.get('eccube.front.cart.error') %}
  133.         <div class="ec-cartRole__error">
  134.             <div class="ec-alert-warning">
  135.                 {#
  136.                 <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>#}
  137.                 <div class="ec-alert-warning__text">
  138.                     {{ error|trans|nl2br }}
  139.                 </div>
  140.             </div>
  141.         </div>
  142.         {% endfor %}
  143.         {% if totalQuantity > 0 %}
  144.         <div class="ec-cartRole__totalText">
  145.             ご注文内容
  146.         </div>
  147.         {% if Carts|length > 1 %}
  148.         <div class="ec-cartRole__error">
  149.             <div class="ec-alert-warning">
  150.                 <div class="ec-alert-warning__text">
  151.                     {{ '同時購入できない商品がカートに含まれています。'|trans|nl2br }}
  152.                 </div>
  153.             </div>
  154.         </div>
  155.         {% endif %}
  156.         {% for CartIndex,Cart in Carts %}
  157.         {% set cartKey = Cart.cart_key %}
  158.         {% for error in app.session.flashbag.get('eccube.front.cart.' ~ cartKey ~ '.request.error') %}
  159.         <div class="ec-cartRole__error">
  160.             <div class="ec-alert-warning">
  161.                 {#<div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>#}
  162.                 <div class="ec-alert-warning__text">
  163.                     {{ error|trans|nl2br }}
  164.                 </div>
  165.             </div>
  166.         </div>
  167.         {% endfor %}
  168.         <!-- カートコンテナ開始 -->
  169.         <div class="cart__container">
  170.             <!-- カートヘッダー -->
  171.             <div class="cart__header">
  172.                 <div class="cart__header-item cart__header-image">画像</div>
  173.                 <div class="cart__header-item cart__header-name">商品名</div>
  174.                 <div class="cart__header-item cart__header-price">価格</div>
  175.                 <div class="cart__header-item cart__header-quantity">数量</div>
  176.                 <div class="cart__header-item cart__header-subtotal">小計</div>
  177.                 <div class="cart__header-item cart__header-delete">削除</div>
  178.             </div>
  179.             {% for CartItem in Cart.CartItems %}
  180.             {% set ProductClass = CartItem.ProductClass %}
  181.             {% set Product = ProductClass.Product %}
  182.             <!-- 商品行 -->
  183.             <div class="cart__row">
  184.                 <div class="cart__cell cart__cell-image">
  185.                     <a target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}">
  186.                         <img src="{{ asset(Product.MainListImage|no_image_product, 'save_image') }}" class="product_img" alt="{{ Product.name }}" />
  187.                     </a>
  188.                 </div>
  189.                 <div class="cart__cell cart__cell-name">
  190.                     <a target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}">{{ Product.name }}</a>
  191.                     {% if ProductClass.ClassCategory1 and ProductClass.ClassCategory1.id %}
  192.                     <br>{{ ProductClass.ClassCategory1.ClassName.name }}:{{ ProductClass.ClassCategory1 }}
  193.                     {% endif %}
  194.                     {% if ProductClass.ClassCategory2 and ProductClass.ClassCategory2.id %}
  195.                     <br>{{ ProductClass.ClassCategory2.ClassName.name }}:{{ ProductClass.ClassCategory2 }}
  196.                     {% endif %}
  197.                 </div>
  198.                 <div class="cart__cell cart__cell-price">{{ CartItem.price|number_format }}円</div>
  199.                 <div class="cart__cell cart__cell-quantity">
  200.                     <span class="cart__quantity-value title">数量</span>
  201.                     <span class="cart__quantity-value">
  202.                       <input type="number" value="{{ CartItem.quantity }}" id="q_{{ ProductClass.id }}">
  203.                       <input type="hidden" value="{{ CartItem.quantity }}" id="o_{{ ProductClass.id }}">
  204.                       個<button type="button" class="btn btn-default btn-change" onclick="doChange('{{ ProductClass.id }}');">変更</button>
  205.                 </div>
  206.                 <div class="cart__cell cart__cell-subtotal"><span class="cart__cell-subtotal title">小計</span> <span class="cart__cell-subtotalValue">{{ CartItem.total_price|number_format }}円</span></div>
  207.                 <div class="cart__cell cart__cell-delete">
  208.                     <a href="{{ url('cart_handle_item', {'operation': 'remove', 'productClassId': ProductClass.id }) }}" {{ csrf_token_for_anchor() }} class="cart__delete-button" data-method="put" data-message="カートから商品を削除してもよろしいですか?">削除</a>
  209.                 </div>
  210.             </div>
  211.             {% endfor %}
  212.             <!-- 合計行 -->
  213.             <div class="cart__row cart__row-total">
  214.                 <div class="cart__cell cart__cell-total-label">商品合計</div>
  215.                 <div class="cart__cell cart__cell-total-value">{{ Cart.totalPrice|number_format }}円</div>
  216.             </div>
  217.         </div>
  218.         <!-- カートコンテナ終了 -->
  219.         {% endfor %}
  220.         {% else %}
  221.         {% for CartIndex,Cart in Carts %}
  222.         {% set cartKey = Cart.cart_key %}
  223.         {% for error in app.session.flashbag.get('eccube.front.cart.' ~ cartKey ~ '.request.error') %}
  224.         <div class="ec-cartRole__error">
  225.             <div class="ec-alert-warning">
  226.                 {#<div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>#}
  227.                 <div class="ec-alert-warning__text">
  228.                     {{ error|trans|nl2br }}
  229.                 </div>
  230.             </div>
  231.         </div>
  232.         {% endfor %}
  233.         {% endfor %}
  234.         <div class="ec-role">
  235.             <div class="ec-off3Grid">
  236.                 <div class="ec-off3Grid__cell">
  237.                     <div class="ec-alert-warning">
  238.                         {#<div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>#}
  239.                         <div class="ec-alert-warning__text">{{ '現在カート内に商品はございません。'|trans }}</div>
  240.                     </div>
  241.                 </div>
  242.             </div>
  243.         </div>
  244.         {% endif %}
  245.     </div>
  246.     {% for CartIndex,Cart in Carts %}
  247.     {% set cartKey = Cart.cart_key %}
  248.     <div class="ec-cartRole__progress">
  249.         <span class="ec-cartRole__progress__free">1件あたり5,400円以上送料無料</span>
  250.         {% if BaseInfo.delivery_free_amount and BaseInfo.delivery_free_quantity %}
  251.         {% if is_delivery_free[cartKey] %}
  252.         <p>{{ '現在送料無料です。'|trans }}</p>
  253.         {% else %}
  254.         <p>{{ 'あと「<strong>%price%</strong>円」で送料無料です。'|trans({ '%price%': least[cartKey]|number_format, '%quantity%': quantity[cartKey]|number_format })|raw }}</p>
  255.         {% endif %}
  256.         {% elseif BaseInfo.delivery_free_amount %}
  257.         {% if is_delivery_free[cartKey] %}
  258.         <p>{{ '現在送料無料です。'|trans }}</p>
  259.         {% else %}
  260.         <p>{{ 'あと「<strong>%price%</strong>円」で送料無料です。'|trans({ '%price%': least[cartKey]|number_format })|raw }}</p>
  261.         {% endif %}
  262.         {% elseif BaseInfo.delivery_free_quantity %}
  263.         {% if is_delivery_free[cartKey] %}
  264.         <p>{{ '現在送料無料です。'|trans }}</p>
  265.         {% else %}
  266.         <p>{{ 'あと「<strong>%price%</strong>」送料無料です。'|trans({ '%quantity%': quantity[cartKey]|number_format })|raw }}</p>
  267.         {% endif %}
  268.         {% endif %}
  269.     </div>
  270.     <div id="btn_area">
  271.         <ul>
  272.             <li><a class="ec-blockBtn--cancel" href="{{ path('homepage') }}">{{ '買い物を続ける'|trans }}</a></li>
  273.             <li><a class="ec-blockBtn--action" href="{{ path('cart_buystep', {'cart_key':cartKey}) }}">{{ '購入手続きに進む'|trans }}</a></li>
  274.         </ul>
  275.     </div>
  276.     {% endfor %}
  277. </form>
  278. <div id="cart_log_area">
  279.     <p>※必ずお読みください。</p>
  280. <p>@kakiyama.comからのメール受信ができるよう、あらかじめ設定をお願いいたします。<br>
  281.     お問い合せをする場合がありますので、必ずメールはご確認ください。</p>
  282. <p>1件のご注文につき、お届け先は1ヶ所のみ指定可能です。複数箇所への配送をご希望の場合、1件ずつご注文を確定してください。</p>
  283. <p>領収書につきましては、「発送完了メール記載のURL」または「マイページ(会員のお客様のみ)」よりPDFデータがダウンロード可能です。<br>
  284.     代金引換の領収書につきましては、ヤマト運輸が発行する送り状(伝票)の控えを領収書とさせていただきます。</p>
  285. <p>離島・一部地域への配送、悪天候などの配送状況によって配送が遅れる場合がございます。あらかじめご了承ください。<br>
  286.     詳しくは、<a href="https://www.kuronekoyamato.co.jp/" target="_blank">ヤマト運輸の公式サイト</a>にてご確認ください。</p>
  287. </div>
  288. {% endblock %}