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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. カスタマイズTwig
  4. #}
  5. {% block javascript %}
  6.     <script>
  7.         $(function() {
  9.             {% if favorites_product_id is not empty %}
  10.                 alert("お気に入りに追加しました。");
  11.             {% endif %}
  13.             {% set current_domain = app.request.getHost() %}
  15.             {% set is_prod = 'web-order.shikomel.com' in current_domain %}
  16.             {% set is_stg = 'web-order-stg.shikomel.com' in current_domain %}
  17.             {% set custom_customer_id = is_granted('ROLE_USER') ? app.user.id:'' %}
  19.             // カート表示イベントの送付
  20.             {% if is_prod %}
  22.                 let cartData = [];
  23.                 let totalPrice = 0;
  25.                 {% for Cart in Carts %}
  26.                     {% for CartItem in Cart.CartItems %}
  27.                         {% set ProductClass = CartItem.ProductClass %}
  28.                         {% set Product = ProductClass.Product %}
  30.                         cartData.push({
  31.                             id: "{{ Product.id }}",
  32.                             name: "{{ Product.name }}",
  33.                             price: "{{ CartItem.total_price }}",
  34.                             quantity: {{ CartItem.quantity|number_format }},
  35.                         });
  36.                     {% endfor %}
  37.                     totalPrice = {{ Cart.totalPrice }};
  38.                 {% endfor %}
  40.                 if (cartData.length > 0) {
  41.                     fbq('track', 'InitiateCheckout', {
  42.                         content_type: "CartInfo",
  43.                         content_ids: cartData.map(item => item.id),
  44.                         content_name: cartData.map(item => item.name).join(", "),
  45.                         contents: cartData.map(item => ({
  46.                             id: item.id,
  47.                             name: item.name,
  48.                             quantity: item.quantity,
  49.                             price: item.price
  50.                         })),
  51.                         currency: "JPY",
  52.                         num_items: cartData.reduce((total, item) => total + item.quantity, 0),
  53.                         value: 55
  54.                     });
  56.                     // Metaへイベント送付
  57.                     fbq('trackCustom', 'ce_show_cart', {
  58.                         content_type: "CartInfo",
  59.                         content_ids: cartData.map(item => item.id),
  60.                         content_name: cartData.map(item => item.name).join(", "),
  61.                         contents: cartData.map(item => ({
  62.                             id: item.id,
  63.                             name: item.name,
  64.                             quantity: item.quantity,
  65.                             price: item.price
  66.                         })),
  67.                         currency: "JPY",
  68.                         num_items: cartData.reduce((total, item) => total + item.quantity, 0),
  69.                         value: 55
  70.                     });
  72.                     // GAへイベント送付
  73.                     window.dataLayer.push({
  74.                         event: 'ce_show_cart',
  75.                         custom_event_name: 'ce_show_cart',
  76.                         custom_contents: cartData.map(item => ({
  77.                             id: item.id,
  78.                             name: item.name,
  79.                             quantity: item.quantity,
  80.                             price: item.price
  81.                         })),
  82.                         custom_content_ids: cartData.map(item => item.id),
  83.                         custom_content_names: cartData.map(item => item.name).join(", "),
  84.                         custom_num_item: cartData.reduce((total, item) => total + item.quantity, 0),
  85.                         custom_total_price: totalPrice,
  86.                         custom_customer_id: '{{ custom_customer_id }}',
  87.                         custom_user_agent: $("#user_agent").val(),
  88.                         custom_is_ig: $("#is_ig").val(),
  89.                         custom_is_line: $("#is_line").val(),
  90.                         custom_referer: $("#referer").val(),
  91.                         custom_real_ip: $("#real_ip").val(),
  92.                     });
  94.                     // Lineへイベント送付
  95.                     _lt('send', 'cv', {
  96.                         type: 'ce_show_cart'
  97.                     },['d6fb195c-aa19-4109-8ea0-7b1d883fb349']);
  98.                 }
  99.             {% endif %}
  100.         });
  101.     </script>
  102. {% endblock %}
  104. {% extends 'default_frame.twig' %}
  106. {% set body_class = 'cart_page' %}
  108. {% block stylesheet %}
  109.     <style>
  111.     .non_product {
  112.         margin-top: 24px;
  113.         text-align: center;
  114.         font-size: 14px;
  115.         margin-bottom: 24px;
  116.     }
  118.     .non_product_continue {
  119.         margin-bottom: 0px;
  120.         border-radius: 6px;
  121.         border: solid 1px #CCCCCC;
  122.         background-color: unset;
  123.         color: #525263;
  124.         font-weight: 600;
  125.         text-align: center;
  126.         cursor: pointer;
  127.         font-size: 14px;
  128.         padding: 10px 16px;
  129.         text-decoration: none;
  130.         display: block;
  131.         height: 56px;
  132.         line-height: 56px;
  133.         padding-top: 0;
  134.         padding-bottom: 0;
  135.     }
  137.     .ec-cartRole img.minus_btn_img {
  138.         width: 32px;
  139.         height: 32px;
  140.     }
  142.     .ec-cartRole img.plus_btn_img {
  143.         width: 32px;
  144.         height: 32px;
  145.     }
  147.     .ec-cartRole .quantity {
  148.         font-size: 18px;
  149.         border-bottom: solid 2px;
  150.         width: 58px;
  151.         text-align: center;
  152.         font-weight: bold;
  153.         margin-left: 8px;
  154.         margin-right: 8px;
  155.    }
  157.     .ec-cartRow__container {
  158.         display: flex;
  159.         align-items: flex-start;
  160.     }
  162.     .ec-cart-img {
  163.         margin-right: 10px;
  164.         height: 60px;
  165.     }
  167.     .ec-cartRow__unitPrice {
  168.         font-size: 14px;
  169.     }
  171.     .ec-cart-pro-info a {
  172.         font-size: 14px;
  173.         color: #1F9FCB;
  174.         font-weight: bold;
  175.     }
  177.     .separater {
  178.         background-color: #F5F5F5;
  179.         width: 100%;
  180.     }
  182.     .ec-alert-warning .ec-alert-warning__icon img {
  183.         display: inline-block;
  184.         width: 16px;
  185.         height: 16px;
  186.     }
  188.     .ec-cartRole .ec-cartRole__error .ec-alert-warning {
  189.         max-width: 100%;
  190.         display: flex;
  191.     }
  193.     .ec-alert-warning .ec-alert-warning__text {
  194.         color: #DE5D50;
  195.         font-size: 13px;
  196.         text-align: left;
  197.         font-weight: normal;
  198.         margin-top: 4px;
  199.         width: 100%;
  200.     }
  202.     .ec-alert-warning {
  203.         margin-bottom: 24px;
  204.         background: #FFF;
  205.         border-radius: 6px;
  206.         border: solid 1px #DE5D50;
  207.         text-align: left;
  208.         display: flex;
  209.         margin-right: 20px;
  210.         margin-left: 20px;
  211.         width: auto;
  212.     }
  214.     {# PC用スタイル #}
  215.     @media screen and (min-width: 1025px) {
  217.         .ec-cartRole__error {
  218.             margin: 0 auto;
  219.             padding-left: 20px;
  220.             padding-right: 20px;
  221.             max-width: 1130px;
  222.         }
  224.         hr:not([size]) {
  225.             height: 1px;
  226.             background-color: #ddd;
  227.             opacity: 1;
  228.         }
  230.         .separater {
  231.             background-color: #DDDDDD;
  232.         }
  234.         .ec-cartRow__amountUpDown {
  235.             padding-left: 145px;
  236.         }
  238.         .ec-cart-pro-info a {
  239.             font-size: 16px;
  240.             color: #1F9FCB;
  241.         }
  243.         .ec-cart-img img {
  244.             width: 130px;
  245.             height: 105px;
  246.             max-width: 130px;
  247.             margin-right: 15px;
  248.             border-radius: 4px;
  249.         }
  251.         #form_cart_frame {
  252.             display: flex;
  253.             justify-content: space-around;
  254.         }
  256.         .ec-cartRole .ec-cartRole__cart {
  257.             padding: 0px; width: 50%; margin-left: 0px; margin-right: 100px;
  258.         }
  260.         .is_pc {
  261.             display: block;
  262.         }
  263.         .is_sp {
  264.             display: none;
  265.         }
  266.     }
  268.     {# スマホ＆タブレット用スタイル #}
  269.     @media screen and (max-width: 1024px) {
  271.         hr:not([size]) {
  272.             height: 8px;
  273.             background-color: #f5f5f5;
  274.             opacity: 1;
  275.         }
  277.         .separater {
  278.             background-color: #DDDDDD;
  279.         }
  281.         .ec-cart-img {
  282.             margin-right: 10px; min-width: 74px;
  283.         }
  285.         .ec-cart-img img {
  286.             width: 74px;
  287.             height: 60px;
  288.             border-radius: 4px;
  289.         }
  291.         .is_pc {
  292.             display: none;
  293.         }
  294.         .is_sp {
  295.             display: block;
  296.         }
  297.     }
  298.     </style>
  299. {% endblock %}
  301. {% block main %}
  303.     <div class="ec-role">
  304.         <div class="ec-pageHeader">
  305.             <h1 style="border-top: none; padding: 12px 0 12px; margin-bottom: 8px;">{{ 'カート'|trans }}</h1>
  306.         </div>
  307.     </div>
  309.     {% set productStr = app.session.flashbag.get('eccube.front.request.product') %}
  311.     {% for error in app.session.flashbag.get('eccube.front.request.error') %}
  312.         {% set idx = loop.index0 %}
  313.         <div class="ec-cartRole__error">
  314.             <div class="ec-alert-warning">
  315.                 <div class="ec-alert-warning__icon"><img src="{{ asset('assets/img/common/alert_icon.png', 'user_data') }}"></div>
  316.                 <div class="ec-alert-warning__text">
  317.                     {% if productStr[idx] is defined %}
  318.                         {{ error|trans({'%product%':productStr[idx]})|nl2br }}
  319.                     {% else %}
  320.                         {{ error|trans|nl2br }}
  321.                     {% endif %}
  322.                 </div>
  323.             </div>
  324.         </div>
  325.     {% endfor %}
  326.     {% for error in app.session.flashbag.get('eccube.front.cart.error') %}
  327.         <div class="ec-cartRole__error">
  328.             <div class="ec-alert-warning">
  329.                 <div class="ec-alert-warning__icon"><img src="{{ asset('assets/img/common/alert_icon.png', 'user_data') }}"></div>
  330.                 <div class="ec-alert-warning__text">
  331.                     {{ error|trans|nl2br }}
  332.                 </div>
  333.             </div>
  334.         </div>
  335.     {% endfor %}
  337.     <div class="ec-cartRole" style="padding: 0px; display: block;">
  339.         {% if totalQuantity > 0 %}
  340.             {% if Carts|length > 1 %}
  341.                 <div class="ec-cartRole__error">
  342.                     <div class="ec-alert-warning">
  343.                         <div class="ec-alert-warning__text">
  344.                             {{ '同時購入できない商品がカートに含まれています。'|trans|nl2br }}
  345.                         </div>
  346.                     </div>
  347.                 </div>
  348.             {% endif %}
  350.             <form name="form" id="form_cart" method="post" action="{{ url('cart') }}">
  351.                 {% for CartIndex,Cart in Carts %}
  352.                     {% set cartKey = Cart.cart_key %}
  353.                     {% for error in app.session.flashbag.get('eccube.front.cart.' ~ cartKey ~ '.request.error') %}
  354.                     <div class="ec-cartRole__error">
  355.                         <div class="ec-alert-warning">
  356.                             <div class="ec-alert-warning__icon"><img src="{{ asset('assets/img/common/alert_icon.png', 'user_data') }}"></div>
  357.                             <div class="ec-alert-warning__text">
  358.                                 {{ error|trans|nl2br }}
  359.                             </div>
  360.                         </div>
  361.                     </div>
  362.                     {% endfor %}
  364.                 <div id="form_cart_frame">
  365.                     <div class="ec-cartRole__cart" style="">
  366.                         <div class="">
  367.                             {% for CartItem in Cart.CartItems %}
  368.                                 {% set ProductClass = CartItem.ProductClass %}
  369.                                 {% set Product = ProductClass.Product %}
  370.                                 <div style="padding-right: 16px; padding-left: 16px;">
  371.                                     <div style="margin-top: 20px;">
  372.                                         <div class="ec-cartRow__container" style="display: flex; align-items: flex-start;">
  373.                                             <div class="ec-cart-img" style="">
  374.                                                 <a target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}">
  375.                                                     <img src="{{ asset(Product.MainListImage|no_image_product, 'save_image') }}" alt="{{ Product.name }}"/>
  376.                                                 </a>
  377.                                             </div>
  378.                                             <div class="ec-cart-pro-info">
  379.                                                 <div class="ec-cartRow__name" style="line-height: 1.2;  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
  380.                                                     <a target="_blank" style="" href="{{ url('product_detail', {id : Product.id} ) }}">
  381.                                                         {{ Product.name }}
  382.                                                     </a>
  383.                                                 </div>
  384.                                                 <div class="ec-cartRow__unitPrice" style="margin-top: 5px;">{{ CartItem.price|number_format }}円
  385.                                                 {% if Product.standard_text %}（{{ Product.standard_text }}）{% endif %}
  386.                                                 </div>
  387.                                             </div>
  388.                                         </div>
  389.                                     </div>
  391.                                     <div style="display: flex; margin-top: 8px; 
  392.                                     {% if not CartItem.ProductClass.Product.is_recipe_book %} 
  393.                                         justify-content: space-between; 
  394.                                     {% else %}
  395.                                         justify-content: end; 
  396.                                     {% endif %}
  397.                                     align-items: flex-end;">
  398.                                         {# レシピ帖の場合には数量のアップダウンは非表示 #}
  399.                                         {% if not CartItem.ProductClass.Product.is_recipe_book %}
  400.                                         <div class="ec-cartRow__amountUpDown" style="display: flex;">
  401.                                             {% if CartItem.quantity > 1 %}
  402.                                                 <a class="plus_btn" href="{{ url('cart_handle_item', {'operation': 'down', 'productClassId': ProductClass.id}) }}" {{ csrf_token_for_anchor() }} class="ec-cartRow__amountDownButton load-overlay" data-method="put" data-confirm="false">
  403.                                                     <span class="ec-cartRow__amountDownButton__icon">
  404.                                                         <img src="{{ asset('assets/img/common/minus_btn.png', 'user_data') }}" alt="reduce" class="minus_btn_img">
  405.                                                     </span>
  406.                                                 </a>
  407.                                             {% else %}
  408.                                                 <div class="ec-cartRow__amountDownButtonDisabled">
  409.                                                     <span class="ec-cartRow__amountDownButton__icon">
  410.                                                         <img src="{{ asset('assets/img/common/minus_btn_disabled.png', 'user_data') }}" alt="reduce" class="minus_btn_img">
  411.                                                     </span>
  412.                                                 </div>
  413.                                             {% endif %}
  414.                                             <div class="quantity">{{ CartItem.quantity|number_format }}</div>
  416.                                             <a href="{{ url('cart_handle_item', {'operation': 'up', 'productClassId': ProductClass.id}) }}" {{ csrf_token_for_anchor() }} class="ec-cartRow__amountUpButton load-overlay" data-method="put" data-confirm="false">
  417.                                                 <span class="ec-cartRow__amountUpButton__icon">
  418.                                                     <img src="{{ asset('assets/img/common/plus_btn.png', 'user_data') }}" alt="increase" class="plus_btn_img">
  419.                                                 </span>
  420.                                             </a>
  421.                                         </div>
  422.                                         {% endif %}
  423.                                         <div class="ec-cartRow__sutbtotalSP">
  424.                                             <span style="font-size: 14px;">小計</span>
  425.                                             <span style="font-size: 20px; font-weight: bold;">{{ CartItem.total_price|number_format }}</span>
  426.                                             <span style="font-size: 14px;">円</span>
  427.                                             <span style="font-size: 14px;">(税込)</span>
  428.                                         </div>
  429.                                     </div>
  430.                                     <div style="text-align: right; margin-top: 14px;">
  431.                                         {% if is_granted('ROLE_USER') %}
  432.                                             <a href="{{ url('product_add_favorite', {id:Product.id}) }}" class="ec-icon" data-method="post">
  433.                                                 <span style="font-size: 14px; text-decoration: underline; color: #525263; margin-right: 20px;">お気に入りに追加</span>
  434.                                             </a>
  435.                                         {% endif %}
  436.                                         <a href="{{ url('cart_handle_item', {'operation': 'remove', 'productClassId': ProductClass.id }) }}" {{ csrf_token_for_anchor() }} class="ec-icon" data-method="put" data-message="カートから商品を削除してもよろしいですか?">
  437.                                             <span style="font-size: 14px; text-decoration: underline; color: #525263;">削除</span>
  438.                                         </a>
  439.                                     </div>
  440.                                 </div>
  441.                                 <hr class="separater" style="">
  442.                             {% endfor %}
  443.                         </div>
  444.                     </div>
  445.                     <div class="ec-cartRole__actions" style="padding-right: 16px; padding-left: 16px; margin-right: 0px; width: 375px;">
  446.                         <div style="position: sticky; top: 50px;">
  447.                             <div class="ec-cartRole__total" style="display: flex; justify-content: space-between; align-items: center; height: 36px; margin: 16px 0px; padding: 0px;">
  448.                                 <span style="font-size: 18px; font-weight: bold;">
  449.                                     合計金額<span style="font-size: 14px; font-weight: normal;">（{{ Cart.CartItems|length }}商品）</span>
  450.                                 </span>
  451.                                 <span class="ec-cartRole__totalAmount" style="font-size: 24px; font-weight: bold;">
  452.                                     {{ Cart.totalPrice|number_format }}
  453.                                     <span style="font-size: 14px; font-weight: bold;">円（税込）</span>
  454.                                 </span>
  455.                             </div>
  457.                             {# PCもSPもクーポンあればバナー表示するように修正 #}
  458.                             {% if isShowCouponCode is defined and isShowCouponCode %}
  459.                                 <div class="" style="margin: auto;">
  460.                                     <img src="{{ asset('assets/img/common/has_3000_coupon_cart.png', 'user_data') }}" style="padding: 0px 10px;">
  461.                                 </div>
  462.                             {% endif %}
  464.                             <a class="ec-blockBtn--action" style="max-width: 343px; margin: auto; background-color: #DE5D50; border-color: #DE5D50;" href="{{ url('shopping_nonmember') }}">{{ 'ご注文手続きへ'|trans }}</a>
  465.                             {% if loop.last %}
  466.                                 <div style="text-align: center; margin-bottom: 16px; margin-top: 16px; line-height: 39px;">
  467.                                     <a style="color: #1F9FCB;" href="{{ path('homepage') }}">{{ 'お買い物を続ける'|trans }}</a>
  468.                                 </div>
  469.                             {% endif %}
  470.                         </div>
  471.                     </div>
  472.                 {% endfor %}
  473.                 </div>
  474.             </form>
  475.         {% else %}
  476.             {% for CartIndex,Cart in Carts %}
  477.                 {% set cartKey = Cart.cart_key %}
  478.                 {% for error in app.session.flashbag.get('eccube.front.cart.' ~ cartKey ~ '.request.error') %}
  479.                     <div class="ec-cartRole__error">
  480.                         <div class="ec-alert-warning">
  481.                             <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
  482.                             <div class="ec-alert-warning__text">
  483.                                 {{ error|trans|nl2br }}
  484.                             </div>
  485.                         </div>
  486.                     </div>
  487.                 {% endfor %}
  488.             {% endfor %}
  489.             <div class="ec-role">
  490.                 <div class="ec-off3Grid">
  491.                     <div class="ec-off3Grid__cell">
  492.                         <div class="non_product">{{ 'カートに商品がありません。'|trans }}</div>
  493.                         <div style="margin-bottom: 24px;">
  494.                             <a class="non_product_continue" href="{{ path('homepage') }}">{{ 'お買い物を続ける'|trans }}</a>
  495.                         </div>
  496.                     </div>
  497.                 </div>
  498.             </div>
  499.         {% endif %}
  500.     </div>
  502. {% endblock %}