{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}
{% form_theme form 'Form/form_div_layout.twig' %}
{% block javascript %}
<script>
$(function() {
var $redirectCallback = function() {
loadingOverlay();
$('#shopping_order_redirect_to').val($(this).attr('data-path'));
$('#shopping-form').attr('action', '{{ url("shopping_redirect_to") }}').submit();
setTimeout(function () {
loadingOverlay("hide");
}, 2000);
};
$('[data-trigger]').each(function() {
$(this).on($(this).attr('data-trigger'), $redirectCallback);
});
$('#btn_shopping_shipping_multiple').on('click', function() {
if(!$('input[name="_shopping_order[Payment]"]:checked').val()) {
alert('先にお支払方法を選択してください');
return;
}
loadingOverlay();
$('#shopping_order_redirect_to').val('{{ path('shopping_shipping_multiple') }}');
$('#shopping-form').attr('action', '{{ url("shopping_redirect_to") }}').submit();
setTimeout(function () {
loadingOverlay("hide");
}, 2000);
});
{% if is_granted('ROLE_USER') == false %}
var edit = $('.customer-edit');
var hidden = $('.customer-in');
var form = $('.customer-form');
$('#customer').click(function() {
$(edit).each(function(index) {
var name = $(this).text();
var input = $('<input id="edit' + index + '" type="text" />').val(name);
$(form[index]).empty().append(input);
});
$('.non-customer-display').hide();
$('.non-customer-edit').show();
$('.mod-button').show();
});
$('#customer-ok').click(function() {
$(form).each(function(index) {
$(hidden[index]).val($(form[index]).children('input').val());
});
var postData = {};
$(hidden).each(function() {
postData[$(this).attr('name')] = $(this).val();
});
loadingOverlay();
$.ajax({
url: "{{ url('shopping_customer') }}",
type: 'POST',
data: postData,
dataType: 'json'
}).done(function(data) {
if (data.status == 'OK') {
$(form).each(function(index) {
$(edit[index]).empty().text($(form[index]).children('input').val());
$(form[index]).empty();
});
// kana field
$(edit[2]).empty().text(data.kana01);
$(edit[3]).empty().text(data.kana02);
$('#customer-kana01').val(data.kana01);
$('#customer-kana02').val(data.kana02);
}
}).fail(function() {
alert('更新に失敗しました。入力内容を確認してください。');
}).always(function(data) {
// overlayを無効
loadingOverlay('hide');
});
$('.non-customer-display').show();
$('.non-customer-edit').hide();
$('.mod-button').hide();
});
$('#customer-cancel').click(function() {
$('.non-customer-display').show();
$('.non-customer-edit').hide();
$('.mod-button').hide();
});
{% endif %}
});
</script>
{% endblock javascript %}
{% block main %}
<section class="p-lower-mv">
<div class="inner">
<h2 class="p-lower-mv-title">
<span>ご注文手続き</span>
</h2>
<div class="under bread_wrap">
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="{{ url('homepage') }}">
<span class="freight-neo-pro" itemprop="name">TOP</span>
</a>
<meta itemprop="position" content="1"/>
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="{{ url('shopping') }}">
<span class="freight-neo-pro" itemprop="name">ご注文手続き</span>
</a>
<meta itemprop="position" content="2"/>
</li>
</ol>
</div>
<!-- /.bread_wrap -->
</div>
</section>
<section class="shopping">
<div class="inner">
<ul class="p-progress ec-progress">
{% set step = 1 %}
<li class="ec-progress__item">
<div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
</div>
<div class="ec-progress__label">{{ 'カートの<br>商品'|trans|raw }}
</div>
</li>
{% if is_granted('ROLE_USER') == false %}
<li class="ec-progress__item">
<div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
</div>
<div class="ec-progress__label">{{ 'お客様<br>情報'|trans|raw }}
</div>
</li>
{% endif %}
<li class="ec-progress__item is-complete">
<div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
</div>
<div class="ec-progress__label">{{ 'ご注文<br>手続き'|trans|raw }}
</div>
</li>
<li class="ec-progress__item">
<div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
</div>
<div class="ec-progress__label">{{ 'ご注文<br>内容確認'|trans|raw }}
</div>
</li>
<li class="ec-progress__item">
<div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
</div>
<div class="ec-progress__label">{{ '完了'|trans }}
</div>
</li>
</ul>
<!-- アラートメッセージ -->
{{ include('Shopping/alert.twig') }}
<div class="shopping-container">
<form id="shopping-form" method="post" action="{{ url('shopping_confirm') }}">
{{ form_widget(form._token) }}
{{ form_widget(form.redirect_to) }}
<div class="shopping-wrap">
<div class="shopping-detail">
<div class="shopping-account">
<h3 class="p-shopping-head">お客様情報</h3>
<div class="shopping-account-body">
{% if is_granted('ROLE_USER') == false %}
<div class="shopping-account-change-button">
<button id="customer" type="button">{{ '変更'|trans }}</button>
</div>
{% endif %}
<div class="shopping-account-detail non-customer-display">
<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>
<p class="ec-halfInput">
<span class="customer-edit customer-kana01">{{ Order.kana01 }}</span>
<span class="customer-edit customer-kana02">{{ Order.kana02 }}</span>
</p>
<p class="ec-zipInput">〒<span class="customer-edit customer-postal_code">{{ Order.postal_code }}</span>
</p>
<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>
<p class="ec-telInput">
<span class="customer-edit customer-phone_number">{{ Order.phone_number }}</span>
</p>
<p class="ec-input">
<span class="customer-edit customer-email">{{ Order.email }}</span>
</p>
</div>
{% if is_granted('ROLE_USER') == false %}
<div class="ec-borderedDefs non-customer-edit" style="display:none;">
<dl class="p-form-list">
<dt>
<label class="ec-label required">{{ 'お名前'|trans }}</label>
<span class="ec-required">{{ '※'|trans }}</span>
</dt>
<dd>
<div class="form-half-wrap">
<span class="customer-form customer-name01"></span>
<span class="customer-form customer-name02"></span>
</div>
</dd>
</dl>
<dl class="p-form-list">
<dt>
<label class="ec-label required">{{ 'お名前(カナ)'|trans }}</label>
<span class="ec-required">{{ '※'|trans }}</span>
</dt>
<dd>
<div class="form-half-wrap">
<span class="customer-form customer-kana01"></span>
<span class="customer-form customer-kana02"></span>
</div>
</dd>
</dl>
<dl class="p-form-list">
<dt>
<label class="ec-label required">{{ '住所'|trans }}</label>
<span class="ec-required">{{ '※'|trans }}</span>
</dt>
<dd>
<div class="ec-zipInput">
<span>{{ '〒'|trans }}</span>
<span class="customer-form customer-postal_code"></span>
<!-- <div class="ec-zipInputHelp">
<div class="ec-zipInputHelp__icon">
<div class="ec-icon">
<img src="{{ asset('assets/icon/question-white.svg') }}" alt="">
</div>
</div>
<a href="https://www.post.japanpost.jp/zipcode/" target="_blank">
<span>{{ '郵便番号検索'|trans }}</span>
</a>
</div> -->
</div>
<div class="ec-input form-address-input -first">
<span class="customer-form customer-address_pref"></span>
</div>
<div class="ec-input form-address-input -first">
<span class="customer-form customer-address_addr01"></span>
</div>
<div class="ec-input form-address-input -second">
<span class="customer-form customer-address_addr02"></span>
</div>
</dd>
</dl>
<dl class="p-form-list">
<dt>
<label class="ec-label required" for="nonmember_phone_number">{{ '電話番号'|trans }}</label>
<span class="ec-required">{{ '※'|trans }}</span>
</dt>
<dd>
<div class="ec-telInput">
<span class="customer-form customer-phone_number"></span>
</div>
</dd>
</dl>
<dl class="p-form-list">
<dt>
<label class="ec-label required">{{ 'メールアドレス'|trans }}</label>
<span class="ec-required">{{ '※'|trans }}</span>
</dt>
<dd>
<div class="ec-input">
<span class="customer-form customer-email"></span>
</div>
</dd>
</dl>
</div>
<div class="mod-button shopping-account-button-wrap" style="display:none;">
<div class="p-button form orange shopping-account-button" id="customer-ok">
<button type="button">{{ 'OK'|trans }}</button>
</div>
<div class="p-button form gray shopping-account-button" id="customer-cancel">
<button type="button">{{ 'キャンセル'|trans }}</button>
</div>
</div>
<input type="hidden" id="customer-name01" class="customer-in" name="customer_name01" value="{{ Order.name01 }}">
<input type="hidden" id="customer-name02" class="customer-in" name="customer_name02" value="{{ Order.name02 }}">
<input type="hidden" id="customer-kana01" class="customer-in" name="customer_kana01" value="{{ Order.kana01 }}">
<input type="hidden" id="customer-kana02" class="customer-in" name="customer_kana02" value="{{ Order.kana02 }}">
<input type="hidden" id="customer-postal_code" class="customer-in" name="customer_postal_code" value="{{ Order.postal_code }}">
<input type="hidden" id="customer-pref" class="customer-in" name="customer_pref" value="{{ Order.pref }}">
<input type="hidden" id="customer-addr01" class="customer-in" name="customer_addr01" value="{{ Order.addr01 }}">
<input type="hidden" id="customer-addr02" class="customer-in" name="customer_addr02" value="{{ Order.addr02 }}">
<input type="hidden" id="customer-phone_number" class="customer-in" name="customer_phone_number" value="{{ Order.phone_number }}">
<input type="hidden" id="customer-email" class="customer-in" name="customer_email" value="{{ Order.email }}">
{% endif %}
</div>
</div>
<div class="shopping-delivery">
<h3 class="p-shopping-head">配送情報</h3>
<div class="shopping-delivery-body">
{% for shipping in Order.shippings %}
{% set idx = loop.index0 %}
{% set isShowReducedTaxMess = false %}
<div class="shopping-delivery-title">{{ 'お届け先'|trans }}
{% if Order.multiple %}({{ loop.index }})
{% endif %}
<div class="shopping-delivery-button">
{% if is_granted('ROLE_USER') %}
<button data-id="{{ shipping.id }}" data-trigger="click" data-path="{{ path('shopping_shipping', {'id': shipping.id}) }}">{{ '変更'|trans }}</button>
{% else %}
<button data-id="{{ shipping.id }}" data-trigger="click" data-path="{{ path('shopping_shipping_edit', {'id': shipping.id}) }}">{{ '変更'|trans }}</button>
{% endif %}
</div>
</div>
<ul class="shopping-delivery-list">
{% for orderItem in shipping.productOrderItems %}
<li class="shopping-delivery-item">
<div class="shopping-delivery-image"><img src="{{ asset((orderItem.product is null ? null : orderItem.product.MainListImage)|no_image_product, 'save_image') }}" alt="{{ orderItem.productName }}"></div>
<div class="shopping-delivery-info">
<p class="shopping-delivery-name">{{ orderItem.productName }}
{% if is_reduced_tax_rate(orderItem) %}
{{ '※'|trans }}{% set isShowReducedTaxMess = true %}
{% endif %}
</p>
<p class="shopping-delivery-schedule">出荷より3~7日以内に到着予定</p>
{% if orderItem.productClass is not null and orderItem.productClass.classCategory1 %}
<p>{{ orderItem.productClass.classCategory1.className.name }}:{{ orderItem.productClass.classCategory1 }}</p>
{% endif %}
{% if orderItem.productClass is not null and orderItem.productClass.classCategory2 %}
<p>{{ orderItem.productClass.classCategory2.className.name }}:{{ orderItem.productClass.classCategory2 }}</p>
{% endif %}
<p class="shopping-delivery-price">{{ orderItem.priceIncTax|price }}
×
{{ orderItem.quantity|number_format }}<span>{{ '小計:'|trans }}{{ orderItem.totalPrice|price }}</span>
</p>
</div>
</li>
{% endfor %}
</ul>
<p>{{ isShowReducedTaxMess ? '※ は軽減税率対象商品です。'|trans }}</p>
<div class="shopping-delivery-address">
<p>{{ ''|trans }}{{ shipping.name01 }}
{{ shipping.name02 }}
({{ shipping.kana01 }}
{{ shipping.kana02 }}){{ ' 様'|trans }}</p>
<p>{{ '〒'|trans }}{{ shipping.postal_code }}
{{ shipping.pref }}{{ shipping.addr01 }}{{ shipping.addr02 }}</p>
<p>{{ shipping.phone_number }}</p>
</div>
<div class="shopping-delivery-wrap">
<div class="shopping-delivery-select shopping-delivery-select__how">
<label>{{ '配送方法'|trans }}</label>
{{ form_widget(form.Shippings[idx].Delivery, { 'attr': { 'class': 'form-control', 'data-trigger': 'change' }}) }}
{{ form_errors(form.Shippings[idx].Delivery) }}
</div>
<div class="shopping-delivery-select shopping-delivery-select__delivery">
<label>{{ 'お届け日'|trans }}</label>
{{ form_widget(form.Shippings[idx].shipping_delivery_date, {'attr': {'class': 'form-control'}}) }}
{{ form_errors(form.Shippings[idx].shipping_delivery_date) }}
</div>
<div class="shopping-delivery-select shopping-delivery-select__time">
<label>{{ 'お届け時間'|trans }}</label>
{{ form_widget(form.Shippings[idx].DeliveryTime, {'attr': {'class': 'form-control'}}) }}
{{ form_errors(form.Shippings[idx].DeliveryTime) }}
</div>
</div>
{% endfor %}
<div class="shopping-deliver-edit">
<p class="shopping-deliver-edit-text">
お届け先の複数指定をご希望の場合、下部の「お届け先を追加」ボタンをクリックし、<span class="ib">商品毎のお届け先をご指定ください。</span>
</p>
<div class="shopping-deliver-edit-button">
{# <button type="button" data-trigger="click" data-path="{{ path('shopping_shipping_multiple') }}">{{ 'お届け先を追加'|trans }}</button> #}
<button id="btn_shopping_shipping_multiple" type="button">{{ 'お届け先を追加'|trans }}</button>
</div>
</div>
</div>
</div>
<!-- /. delivery -->
<!-- payment -->
<div class="shopping-payment">
<h3 class="p-shopping-head">お支払方法</h3>
<div class="shopping-payment-body">
<div class="shopping-payment-radio-wrap">
{% for key, child in form.Payment %}
<div class="shopping-payment-radio" style="display: block;">
{% set Payment = form.Payment.vars.choices[key].data %}
{{ form_widget(child, { 'attr': { 'data-trigger': 'change' }}) }}
<ul class="payment-text-list -bank">
<li class="payment-text-item">・振込手数料はお客様負担となります。</li>
<li class="payment-text-item">・入金確認後の配送の為、他の支払方法よりもお届けまでお日にちを頂いております。</li>
<li class="payment-text-item">・お振込はご注文日より7日以内にお願い致します。<br>この期限を超えますと、ご注文は一旦キャンセルとさせて頂きます。</li>
</ul>
<ul class="payment-text-list -post">
<li class="payment-text-item">・郵便局にてお振込をお願い致します。</li>
<li class="payment-text-item">・振込手数料はお客様負担でお願い致します。</li>
<li class="payment-text-item">・お振込はご注文日より7日以内にお願い致します。<br>この期限を超えますと、ご注文は一旦キャンセルとさせて頂きます。</li>
</ul>
<ul class="payment-text-list -cash">
<li class="payment-text-item">・代金引換手数料(代引手数料)330円(税込)は配送地域にかかわらず全国共通です。</li>
<li class="payment-text-item -caution">【注意】ただし、一部の地域(各地離島・沖縄県)につきましては、<br>代金引換をお選びいただけません。あらかじめご了承頂けますようお願い致します。</li>
</ul>
{% if Payment.payment_image is not null %}
<p><img src="{{ asset(Payment.payment_image, 'save_image') }}"></p>
{% endif %}
</div>
{% endfor %}
</div>
<div class="ec-input {{ has_errors(form.Payment) ? ' error' }}">{{ form_errors(form.Payment) }}</div>
</div>
</div>
<!-- /. payment -->
<!-- point -->
{% if BaseInfo.isOptionPoint and Order.Customer is not null %}
<div class="shopping-point">
<h3 class="p-shopping-head">利用ポイント</h3>
<div class="shopping-point-body">
<div class="ec-orderPayment">
<div class="ec-input {{ has_errors(form.use_point) ? ' error' }}">
<p class="shopping-point-text">{{ '%point% pt が利用可能です。'|trans({ '%point%': Order.Customer.Point|number_format }) }}</p>
{{ form_widget(form.use_point, { 'attr': { 'type': 'text', 'class': 'form-control', 'data-trigger': 'change' }}) }}
{{ form_errors(form.use_point) }}
</div>
</div>
</div>
</div>
{% endif %}
<!-- /.point -->
<!-- contact -->
<div class="shopping-contact">
<h3 class="p-shopping-head">お問い合わせ</h3>
<div class="shopping-contact-body">
<div class="ec-input">
{{ form_widget(form.message, {'attr': {'class': 'form-control', 'placeholder': 'お問い合わせ事項がございましたら、こちらにご入力ください。(3000文字まで)'|trans, 'rows': '6'}}) }}
{{ form_errors(form.message) }}
</div>
{% for activeTradeLaw in activeTradeLaws|filter(t => t.name and t.description) %}
<div class="ec-orderConfirm">
<div class="ec-rectHeading">
<h2>{{ activeTradeLaw.name }}</h2>
</div>
<div class="ec-input">
{{ activeTradeLaw.description|raw }}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="shopping-summary">
<dl class="shopping-summary-list">
<dt class="shopping-summary-title">小計</dt>
<dd class="shopping-summary-desc">{{ Order.subtotal|price }}</dd>
</dl>
<dl class="shopping-summary-list">
<dt class="shopping-summary-title">手数料</dt>
<dd class="shopping-summary-desc">{{ Order.charge|price }}</dd>
</dl>
<dl class="shopping-summary-list">
<dt class="shopping-summary-title">送料</dt>
<dd class="shopping-summary-desc">{{ Order.deliveryFeeTotal|price }}</dd>
</dl>
{% if Order.taxable_discount < 0 %}
<dl class="shopping-summary-list">
<dt class="shopping-summary-title">値引き</dt>
<dd class="shopping-summary-desc">{{ Order.taxable_discount|price }}</dd>
</dl>
{% endif %}
<!-- <div class="ec-totalBox__total">{{ '合計'|trans }}<span class="ec-totalBox__price">{{ Order.taxable_total|price }}</span><span class="ec-totalBox__taxLabel">{{ '税込'|trans }}</span></div> -->
{% for item in Order.tax_free_discount_items %}
<dl class="ec-totalBox__spec">
<dt>{{ item.product_name }}</dt>
<dd>{{ item.total_price|price }}</dd>
</dl>
{% endfor %}
<div class="shopping-summary-total">
{{ 'お支払い合計'|trans }}<span class="total-price">{{ Order.payment_total|price }}</span>
<span class="total-tax-label">{{ '税込'|trans }}</span>
</div>
{% for rate, total in Order.total_by_tax_rate %}
<p class="shopping-summary-rate">
<span>{{ '[ 税率 %rate% %対象'|trans({ '%rate%': rate }) }}</span>
<span>{{ total|price }}
({{ '内消費税'|trans }}
{{ Order.tax_by_tax_rate[rate]|price }}) ]</span>
</p>
{% endfor %}
{% if BaseInfo.isOptionPoint and Order.Customer is not null %}
<!-- <div class="ec-totalBox__pointBlock">
<dl class="ec-totalBox__spec">
<dt>{{ 'ご利用ポイント'|trans }}</dt>
<dd>{{ Order.UsePoint|number_format }} pt</dd>
</dl>
<dl class="ec-totalBox__spec">
<dt><span class="ec-font-bold">{{ '加算ポイント'|trans }}</span></dt>
<dd><span class="ec-font-bold">{{ Order.AddPoint|number_format }} pt</span></dd>
</dl>
</div> -->
{% endif %}
<div class="shopping-summary-button-wrap">
<div class="p-button form orange">
<button type="submit">{{ '確認する'|trans }}</button>
</div>
<div class="p-button form gray -return">
<a href="{{ url("cart") }}">{{ 'カートに戻る'|trans }}</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- /.shopping -->
{% endblock %}