app/template/million01/Shopping/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% extends 'default_frame.twig' %}
  9. {% form_theme form 'Form/form_div_layout.twig' %}
  10. {% block javascript %}
  11.     <script>
  12.         $(function() {
  13.             var $redirectCallback = function() {
  14.                 loadingOverlay();
  15.                 $('#shopping_order_redirect_to').val($(this).attr('data-path'));
  16.                 $('#shopping-form').attr('action', '{{ url("shopping_redirect_to") }}').submit();
  17.                 setTimeout(function () {
  18.                     loadingOverlay("hide");
  19.                 }, 2000);
  20.             };
  21.             $('[data-trigger]').each(function() {
  22.                 $(this).on($(this).attr('data-trigger'), $redirectCallback);
  23.             });
  24.             {% if is_granted('ROLE_USER') == false %}
  25.             var edit = $('.customer-edit');
  26.             var hidden = $('.customer-in');
  27.             var form = $('.customer-form');
  28.             $('#customer').click(function() {
  29.                 $(edit).each(function(index) {
  30.                     var name = $(this).text();
  31.                     var input = $('<input id="edit' + index + '" type="text" />').val(name);
  32.                     $(form[index]).empty().append(input);
  33.                 });
  34.                 $('.non-customer-display').hide();
  35.                 $('.non-customer-edit').show();
  36.                 $('.mod-button').show();
  37.             });
  38.             $('#customer-ok').click(function() {
  39.                 $(form).each(function(index) {
  40.                     $(hidden[index]).val($(form[index]).children('input').val());
  41.                 });
  42.                 var postData = {};
  43.                 $(hidden).each(function() {
  44.                     postData[$(this).attr('name')] = $(this).val();
  45.                 });
  46.                 loadingOverlay();
  47.                 $.ajax({
  48.                     url: "{{ url('shopping_customer') }}",
  49.                     type: 'POST',
  50.                     data: postData,
  51.                     dataType: 'json'
  52.                 }).done(function(data) {
  53.                     if (data.status == 'OK') {
  54.                         $(form).each(function(index) {
  55.                             $(edit[index]).empty().text($(form[index]).children('input').val());
  56.                             $(form[index]).empty();
  57.                         });
  58.                         // kana field
  59.                         $(edit[2]).empty().text(data.kana01);
  60.                         $(edit[3]).empty().text(data.kana02);
  61.                         $('#customer-kana01').val(data.kana01);
  62.                         $('#customer-kana02').val(data.kana02);
  63.                     }
  64.                 }).fail(function() {
  65.                     alert('更新に失敗しました。入力内容を確認してください。');
  66.                 }).always(function(data) {
  67.                     // overlayを無効
  68.                     loadingOverlay('hide');
  69.                 });
  70.                 $('.non-customer-display').show();
  71.                 $('.non-customer-edit').hide();
  72.                 $('.mod-button').hide();
  73.             });
  74.             $('#customer-cancel').click(function() {
  75.                 $('.non-customer-display').show();
  76.                 $('.non-customer-edit').hide();
  77.                 $('.mod-button').hide();
  78.             });
  79.             {% endif %}
  80.             // 「のしのお名前」のオートコンプリートを無効
  81.             $('#shopping_order_plg_custom_field_3').on('mousedown', function(){
  82.               setTimeout(function(){
  83.                 $('#shopping_order_plg_custom_field_3').focus();
  84.               }, 1);
  85.               return false;
  86.             });
  87.         });
  88.     </script>
  89. {% endblock javascript %}
  90. {% block main %}
  91.     <div class="ec-role">
  92.         <div class="ec-pageHeader">
  93.             <h1>{{ 'ご注文手続き'|trans }}</h1>
  94.         </div>
  95.     </div>
  96.     <div class="ec-cartRole">
  97.         <div class="ec-cartRole__progress">
  98.             <ul class="ec-progress">
  99.                 {% set step = 1 %}
  100.                 <li class="ec-progress__item">
  101.                     <div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
  102.                     </div>
  103.                     <div class="ec-progress__label">{{ 'カートの商品'|trans }}
  104.                     </div>
  105.                 </li>
  106.                 {% if is_granted('ROLE_USER') == false %}
  107.                     <li class="ec-progress__item">
  108.                         <div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
  109.                         </div>
  110.                         <div class="ec-progress__label">{{ 'お客様情報'|trans }}
  111.                         </div>
  112.                     </li>
  113.                 {% endif %}
  114.                 <li class="ec-progress__item is-complete">
  115.                     <div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
  116.                     </div>
  117.                     <div class="ec-progress__label">{{ 'ご注文手続き'|trans }}
  118.                     </div>
  119.                 </li>
  120.                 <li class="ec-progress__item">
  121.                     <div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
  122.                     </div>
  123.                     <div class="ec-progress__label">{{ 'ご注文内容確認'|trans }}
  124.                     </div>
  125.                 </li>
  126.                 <li class="ec-progress__item">
  127.                     <div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
  128.                     </div>
  129.                     <div class="ec-progress__label">{{ '完了'|trans }}
  130.                     </div>
  131.                 </li>
  132.             </ul>
  133.         </div>
  134.         <!-- アラートメッセージ -->
  135.         {{ include('Shopping/alert.twig') }}
  136.     </div>
  137.     <form id="shopping-form" method="post" action="{{ url('shopping_confirm') }}">
  138.         {{ form_widget(form._token) }}
  139.         {{ form_widget(form.redirect_to) }}
  140.         <div class="ec-orderRole">
  141.             <div class="ec-orderRole__detail">
  142.                 <div class="ec-orderAccount">
  143.                     <div class="ec-rectHeading">
  144.                         <h2>{{ 'お客様情報'|trans }}</h2>
  145.                     </div>
  146.                     {% if is_granted('ROLE_USER') == false %}
  147.                         <div class="ec-orderAccount__change non-customer-display">
  148.                             <button id="customer" class="ec-inlineBtn" type="button">{{ '変更'|trans }}</button>
  149.                         </div>
  150.                     {% endif %}
  151.                     <div class="ec-orderAccount__account non-customer-display">
  152.                         <p class="ec-halfInput">{{ ''|trans }}<span class="customer-edit customer-name01">{{ Order.name01 }}</span> <span class="customer-edit customer-name02">{{ Order.name02 }}</span>{{ ' 様'|trans }}</p>
  153.                         <p class="ec-halfInput"><span class="customer-edit customer-kana01">{{ Order.kana01 }}</span> <span class="customer-edit customer-kana02">{{ Order.kana02 }}</span></p>
  154.                         <p class="ec-input"><span class="customer-edit customer-company_name">{{ Order.companyName }}</span></p>
  155.                         <p class="ec-zipInput">〒<span class="customer-edit customer-postal_code">{{ Order.postal_code }}</span></p>
  156.                         <p class="ec-input"><span class="customer-edit customer-pref">{{ Order.pref }}</span><span class="customer-edit customer-addr01">{{ Order.addr01 }}</span><span class="customer-edit customer-addr02">{{ Order.addr02 }}</span></p>
  157.                         <p class="ec-telInput"><span class="customer-edit customer-phone_number">{{ Order.phone_number }}</span></p>
  158.                         <p class="ec-input"><span class="customer-edit customer-email">{{ Order.email }}</span></p>
  159.                     </div>
  160.                     {% if is_granted('ROLE_USER') == false %}
  161.                         <div class="ec-borderedDefs  non-customer-edit" style="display:none;">
  162.                             <dl>
  163.                                 <dt>
  164.                                     <label class="ec-label required">{{ 'お名前'|trans }}</label>
  165.                                     <span class="ec-required">{{ '必須'|trans }}</span>
  166.                                 </dt>
  167.                                 <dd>
  168.                                     <div class="ec-halfInput">
  169.                                         <span class="customer-form customer-name01"></span>
  170.                                         <span class="customer-form customer-name02"></span>
  171.                                     </div>
  172.                                 </dd>
  173.                             </dl>
  174.                             <dl>
  175.                                 <dt>
  176.                                     <label class="ec-label required">{{ 'お名前(カナ)'|trans }}</label>
  177.                                     <span class="ec-required">{{ '必須'|trans }}</span>
  178.                                 </dt>
  179.                                 <dd>
  180.                                     <div class="ec-halfInput">
  181.                                         <span class="customer-form customer-kana01"></span>
  182.                                         <span class="customer-form customer-kana02"></span>
  183.                                     </div>
  184.                                 </dd>
  185.                             </dl>
  186.                             <dl>
  187.                                 <dt>
  188.                                     <label class="ec-label" for="nonmember_company_name">{{ '会社名'|trans }}</label>
  189.                                 </dt>
  190.                                 <dd>
  191.                                     <div class="ec-halfInput">
  192.                                         <span class="customer-form customer-company_name"></span>
  193.                                     </div>
  194.                                 </dd>
  195.                             </dl>
  196.                             <dl>
  197.                                 <dt>
  198.                                     <label class="ec-label required">{{ '住所'|trans }}</label>
  199.                                     <span class="ec-required">{{ '必須'|trans }}</span>
  200.                                 </dt>
  201.                                 <dd>
  202.                                     <div class="ec-zipInput">
  203.                                         <span>{{ '〒'|trans }}</span>
  204.                                         <span class="customer-form customer-postal_code"></span>
  205.                                         <div class="ec-zipInputHelp">
  206.                                             <div class="ec-zipInputHelp__icon">
  207.                                                 <div class="ec-icon">
  208.                                                     <img src="{{ asset('assets/icon/question-white.svg') }}" alt="">
  209.                                                 </div>
  210.                                             </div>
  211.                                             <a href="https://www.post.japanpost.jp/zipcode/" target="_blank">
  212.                                                 <span>{{ '郵便番号検索'|trans }}</span>
  213.                                             </a>
  214.                                         </div>
  215.                                     </div>
  216.                                     <div class="ec-select">
  217.                                         <span class="customer-form customer-address_pref"></span>
  218.                                     </div>
  219.                                     <div class="ec-input">
  220.                                         <span class="customer-form customer-address_addr01"></span>
  221.                                     </div>
  222.                                     <div class="ec-input">
  223.                                         <span class="customer-form customer-address_addr02"></span>
  224.                                     </div>
  225.                                 </dd>
  226.                             </dl>
  227.                             <dl>
  228.                                 <dt>
  229.                                     <label class="ec-label required" for="nonmember_phone_number">{{ '電話番号'|trans }}</label>
  230.                                     <span class="ec-required">{{ '必須'|trans }}</span>
  231.                                 </dt>
  232.                                 <dd>
  233.                                     <div class="ec-telInput">
  234.                                         <span class="customer-form customer-phone_number"></span>
  235.                                     </div>
  236.                                 </dd>
  237.                             </dl>
  238.                             <dl>
  239.                                 <dt>
  240.                                     <label class="ec-label required">{{ 'メールアドレス'|trans }}</label>
  241.                                     <span class="ec-required">{{ '必須'|trans }}</span>
  242.                                 </dt>
  243.                                 <dd>
  244.                                     <div class="ec-input">
  245.                                         <span class="customer-form customer-email"></span>
  246.                                     </div>
  247.                                 </dd>
  248.                             </dl>
  249.                         </div>
  250.                         <div class="mod-button" style="display:none;">
  251.                             <span id="customer-ok"><button type="button" class="ec-inlineBtn">{{ 'OK'|trans }}</button></span>
  252.                             <span id="customer-cancel"><button type="button" class="ec-inlineBtn">{{ 'キャンセル'|trans }}</button></span>
  253.                         </div>
  254.                         <input type="hidden" id="customer-name01" class="customer-in" name="customer_name01" value="{{ Order.name01 }}">
  255.                         <input type="hidden" id="customer-name02" class="customer-in" name="customer_name02" value="{{ Order.name02 }}">
  256.                         <input type="hidden" id="customer-kana01" class="customer-in" name="customer_kana01" value="{{ Order.kana01 }}">
  257.                         <input type="hidden" id="customer-kana02" class="customer-in" name="customer_kana02" value="{{ Order.kana02 }}">
  258.                         <input type="hidden" id="customer-company-name" class="customer-in" name="customer_company_name" value="{{ Order.companyName }}">
  259.                         <input type="hidden" id="customer-postal_code" class="customer-in" name="customer_postal_code" value="{{ Order.postal_code }}">
  260.                         <input type="hidden" id="customer-pref" class="customer-in" name="customer_pref" value="{{ Order.pref }}">
  261.                         <input type="hidden" id="customer-addr01" class="customer-in" name="customer_addr01" value="{{ Order.addr01 }}">
  262.                         <input type="hidden" id="customer-addr02" class="customer-in" name="customer_addr02" value="{{ Order.addr02 }}">
  263.                         <input type="hidden" id="customer-phone_number" class="customer-in" name="customer_phone_number" value="{{ Order.phone_number }}">
  264.                         <input type="hidden" id="customer-email" class="customer-in" name="customer_email" value="{{ Order.email }}">
  265.                     {% endif %}
  266.                 </div>
  267.                 <div class="ec-orderDelivery">
  268.                     <div class="ec-rectHeading">
  269.                         <h2>{{ '配送情報'|trans }}</h2>
  270.                     </div>
  271.                     {% for shipping in Order.shippings %}
  272.                         {% set idx = loop.index0 %}
  273.                         {% set isShowReducedTaxMess = false %}
  274.                         <div class="ec-orderDelivery__title">{{ 'お届け先'|trans }}{% if Order.multiple %}({{ loop.index }}){% endif %}
  275.                             <div class="ec-orderDelivery__change">
  276.                                 {% if is_granted('ROLE_USER') %}
  277.                                     <button class="ec-inlineBtn" data-id="{{ shipping.id }}" data-trigger="click" data-path="{{ path('shopping_shipping', {'id': shipping.id}) }}">{{ '変更'|trans }}</button>
  278.                                 {% else %}
  279.                                     <button class="ec-inlineBtn" data-id="{{ shipping.id }}" data-trigger="click" data-path="{{ path('shopping_shipping_edit', {'id': shipping.id}) }}">{{ '変更'|trans }}</button>
  280.                                 {% endif %}
  281.                             </div>
  282.                         </div>
  283.                         <div class="ec-orderDelivery__item">
  284.                             <ul class="ec-borderedList">
  285.                                 {% for orderItem in shipping.productOrderItems %}
  286.                                     <li>
  287.                                         <div class="ec-imageGrid">
  288.                                             <div class="ec-imageGrid__img"><img src="{{ asset((orderItem.product is null ? null : orderItem.product.MainListImage)|no_image_product, 'save_image') }}" alt="{{ orderItem.productName }}"></div>
  289.                                             <div class="ec-imageGrid__content">
  290.                                                 <p>{{ orderItem.productName }}{% if is_reduced_tax_rate(orderItem) %}{{ '※'|trans }}{% set isShowReducedTaxMess = true %}{% endif %}</p>
  291.                                                 {% if orderItem.productClass is not null and orderItem.productClass.classCategory1 %}
  292.                                                     <p>{{ orderItem.productClass.classCategory1.className.name }}:{{ orderItem.productClass.classCategory1 }}</p>
  293.                                                 {% endif %}
  294.                                                 {% if orderItem.productClass is not null and orderItem.productClass.classCategory2 %}
  295.                                                     <p>{{ orderItem.productClass.classCategory2.className.name }}:{{ orderItem.productClass.classCategory2 }}</p>
  296.                                                 {% endif %}
  297.                                                 <p>{{ orderItem.priceIncTax|price }} × {{ orderItem.quantity|number_format }}<span>{{ '小計:'|trans }}{{ orderItem.totalPrice|price }}</span></p>
  298.                                             </div>
  299.                                         </div>
  300.                                     </li>
  301.                                 {% endfor %}
  302.                             </ul>
  303.                             <p>{{ isShowReducedTaxMess ? '※ は軽減税率対象商品です。'|trans }}</p>
  304.                         </div>
  305.                         <div class="ec-orderDelivery__address">
  306.                             <p>{{ ''|trans }}{{ shipping.name01 }} {{ shipping.name02 }} ({{ shipping.kana01 }} {{ shipping.kana02 }}){{ ' 様'|trans }}</p>
  307.                             <p>{{ '〒'|trans }}{{ shipping.postal_code }} {{ shipping.pref }}{{ shipping.addr01 }}{{ shipping.addr02 }}</p>
  308.                             <p>{{ shipping.phone_number }}</p>
  309.                         </div>
  310.                         <div class="ec-orderDelivery__actions">
  311.                             <div class="ec-selects">
  312.                                 <div class="ec-select">
  313.                                     <label>{{ '配送方法'|trans }}</label>
  314.                                     {{ form_widget(form.Shippings[idx].Delivery, { 'attr': { 'class': 'form-control', 'data-trigger': 'change' }}) }}
  315.                                     {{ form_errors(form.Shippings[idx].Delivery) }}
  316.                                 </div>
  317.                                 <div class="ec-select ec-select__delivery">
  318.                                     <label>{{ 'お届け日'|trans }}</label>
  319.                                     {{ form_widget(form.Shippings[idx].shipping_delivery_date, {'attr': {'class': 'form-control'}}) }}
  320.                                     {{ form_errors(form.Shippings[idx].shipping_delivery_date) }}
  321.                                 </div>
  322.                                 <div class="ec-select ec-select__time">
  323.                                     <label>{{ 'お届け時間'|trans }}</label>
  324.                                     {{ form_widget(form.Shippings[idx].DeliveryTime, {'attr': {'class': 'form-control'}}) }}
  325.                                     {{ form_errors(form.Shippings[idx].DeliveryTime) }}
  326.                                 </div>
  327.                             </div>
  328.                         </div>
  329.                     {% endfor %}
  330.                 </div>
  331.                 <div class="ec-orderPayment">
  332.                     <div class="ec-rectHeading">
  333.                         <h2>{{ 'お支払方法'|trans }}</h2>
  334.                     </div>
  335.                     <div class="ec-radio">
  336.                         {% for key, child in form.Payment %}
  337.                             <div style="display: block;">
  338.                                 {% set Payment = form.Payment.vars.choices[key].data %}
  339.                                 {{ form_widget(child, { 'attr': { 'data-trigger': 'change' }}) }}
  340.                                 {% if Payment.payment_image is not null %}
  341.                                     <p><img src="{{ asset(Payment.payment_image, 'save_image') }}"></p>
  342.                                 {% endif %}
  343.                             </div>
  344.                         {% endfor %}
  345.                     </div>
  346.                     <div class="ec-input {{ has_errors(form.Payment) ? ' error' }}">{{ form_errors(form.Payment) }}</div>
  347.                 </div>
  348.                 {% if BaseInfo.isOptionPoint and Order.Customer is not null %}
  349.                     <div class="ec-orderPayment">
  350.                         <div class="ec-rectHeading">
  351.                             <h2>{{ '利用ポイント'|trans }}</h2>
  352.                         </div>
  353.                         <div class="ec-input {{ has_errors(form.use_point) ? ' error' }}">
  354.                             <p>{{ '%point% pt が利用可能です。'|trans({ '%point%': Order.Customer.Point|number_format }) }}</p>
  355.                             {{ form_widget(form.use_point, { 'attr': { 'type': 'text', 'class': 'form-control', 'data-trigger': 'change' }}) }}
  356.                             {{ form_errors(form.use_point) }}
  357.                         </div>
  358.                     </div>
  359.                 {% endif %}
  360.                 <div class="ec-orderConfirm">
  361.                     <div class="ec-rectHeading">
  362.                         <h2>{{ '備考欄'|trans }}</h2>
  363.                     </div>
  364.                     <div class="ec-input">
  365.                         {{ form_widget(form.message, {'attr': {'class': 'form-control', 'placeholder': '何かございましたらご記入ください。定期ご契約の方は、ポイントの「都度利用」または「貯めておく」のいずれかをご記入ください。(3000文字まで)'|trans, 'rows': '6'}}) }}
  366.                         {{ form_errors(form.message) }}
  367.                     </div>
  368.                 </div>
  369.                 {% for activeTradeLaw in activeTradeLaws|filter(t => t.name and t.description) %}
  370.                     <div class="ec-orderConfirm">
  371.                         <div class="ec-rectHeading">
  372.                             <h2>{{ activeTradeLaw.name }}</h2>
  373.                         </div>
  374.                         <div class="ec-input">
  375.                             {{ activeTradeLaw.description|raw }}
  376.                         </div>
  377.                     </div>
  378.                 {% endfor %}
  379.             </div>
  380.             <div class="ec-orderRole__summary">
  381.                 <div class="ec-totalBox">
  382.                     <dl class="ec-totalBox__spec">
  383.                         <dt>{{ '小計'|trans }}</dt>
  384.                         <dd class="ec-totalBox__specTotal">{{ Order.subtotal|price }}</dd>
  385.                     </dl>
  386.                     <dl class="ec-totalBox__spec">
  387.                         <dt>{{ '手数料'|trans }}</dt>
  388.                         <dd>{{ Order.charge|price }}</dd>
  389.                     </dl>
  390.                     <dl class="ec-totalBox__spec">
  391.                         <dt>{{ '送料'|trans }}</dt>
  392.                         <dd>{{ Order.deliveryFeeTotal|price }}</dd>
  393.                     </dl>
  394.                     {% if Order.taxable_discount < 0 %}
  395.                     <dl class="ec-totalBox__spec">
  396.                         <dt>{{ '値引き'|trans }}</dt>
  397.                         <dd>{{ Order.taxable_discount|price }}</dd>
  398.                     </dl>
  399.                     {% endif %}
  400.                     <div class="ec-totalBox__total">{{ '合計'|trans }}<span class="ec-totalBox__price">{{ Order.taxable_total|price }}</span><span class="ec-totalBox__taxLabel">{{ '税込'|trans }}</span></div>
  401.                     {% for item in Order.tax_free_discount_items %}
  402.                         <dl class="ec-totalBox__spec">
  403.                             <dt>{{ item.product_name }}</dt>
  404.                             <dd>{{ item.total_price|price }}</dd>
  405.                         </dl>
  406.                     {% endfor %}
  407.                     <div class="ec-totalBox__paymentTotal">{{ 'お支払い合計'|trans }}<span class="ec-totalBox__price">{{ Order.payment_total|price }}</span><span class="ec-totalBox__taxLabel">{{ '税込'|trans }}</span></div>
  408.                     {% for rate, total in Order.total_by_tax_rate %}
  409.                     <dl class="ec-totalBox__taxRate">
  410.                         <dt>{{ '税率 %rate% %対象'|trans({ '%rate%': rate }) }}</dt>
  411.                         <dd>{{ total|price }} ({{ '内消費税'|trans }} {{ Order.tax_by_tax_rate[rate]|price }})</dd>
  412.                     </dl>
  413.                     {% endfor %}
  414.                     {% if BaseInfo.isOptionPoint and Order.Customer is not null %}
  415.                     <div class="ec-totalBox__pointBlock">
  416.                         <dl class="ec-totalBox__spec">
  417.                             <dt>{{ 'ご利用ポイント'|trans }}</dt>
  418.                             <dd>{{ Order.UsePoint|number_format }} pt</dd>
  419.                         </dl>
  420.                         <dl class="ec-totalBox__spec">
  421.                             <dt><span class="ec-font-bold">{{ '加算ポイント'|trans }}</span></dt>
  422.                             <dd><span class="ec-font-bold">{{ Order.AddPoint|number_format }} pt</span></dd>
  423.                         </dl>
  424.                     </div>
  425.                     {% endif %}
  426.                     <div class="ec-totalBox__btn">
  427.                         <button type="submit" class="ec-blockBtn--action">{{ '確認する'|trans }}</button>
  428.                         <a href="{{ url("cart") }}" class="ec-blockBtn--cancel">{{ 'カートに戻る'|trans }}</a>
  429.                     </div>
  430.                 </div>
  431.             </div>
  432.         </div>
  433.     </form>
  434. {% endblock %}