{#
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' %}
{% set body_class = 'cart_page' %}
{% block javascript %}
<script>
$(function() {
var cnt = $('.ec-cartRow').length;
for (let i = 0; i < cnt; i++){
// Get the data-prototype explained earlier
var prototype = $('.cartitems').data('prototype');
// get the new index
var index = $('.cartitems').data('index');
// Replace '__name__' in the prototype's HTML to
// instead be a number based on how many items we have
var newForm = '<div class="mt-3 pb-0 d-flex flex-wrap justify-content-between"><span>オプションを選択してください。</span><span>オプション小計:<span><span class="item_option_price_' + index + '">¥0</span></span><small>(税込)</small></span></div>';
newForm += '<div class="mt-2 mb-3 p-3 bg-white cart_option" id="cart_option_' + index + '">';
newForm += prototype.replace(/__name__/g, index);
newForm += '<div class="d-flex flex-column flex-md-row"><span class="w_120"></span><span>インサイド石は、刻印がある場合は刻印の直後にセッティングさせていただきます。<br>';
newForm += '石の位置の変更をご希望の場合は購入手続き画面のお問い合わせ欄にご記入ください。</span></p>';
newForm += '</div>';
// increase the index with one for the next item
$('.cartitems').data('index', index + 1);
// Display the form in the page before the "new" link
//$(this).before(newForm);
var add = ".add_option_" + i;
// ID119の商品はオプションを表示しない
// 結婚指輪でも婚約指輪でもない場合はオプションを表示しない
if ($(add).hasClass('itemid_119') || $(add).hasClass('itemcat_0')) {
newForm = '<hr><div class="d-none">' + newForm + '</div>';
}
$(add).before(newForm);
}
// 刻印文字数の注意書き追加
$('input[id$="engraving_text"]').each(function () {
$(this).parent().addClass('flex-wrap');
$(this).after('<p class="w-100 engraving_text_notice">刻印できる文字数は最大19文字です。</p>')
});
// 読み込み時 すでに値があったら表示する
{% for CartIndex,Cart in Carts %}
{% for CartItem in Cart.CartItems %}
{% if CartItem.engraving == "あり" %}
$('input[name="form[data][' + {{ loop.index0 }} + '][engraving]"]').val(["あり"]);
$('#form_data_' + {{ loop.index0 }} + ' > div').css('display','flex');
$('#form_data_' + {{ loop.index0 }} + ' fieldset:nth-child(2)').css('display','flex');
{% endif %}
{% if CartItem.engraving_font is not null %}
$('input[name="form[data][' + {{ loop.index0 }} + '][engraving_font]"]').val(["{{ CartItem.engraving_font }}"]);
{% endif %}
{% if CartItem.engraving_text is not null %}
$('input[name="form[data][' + {{ loop.index0 }} + '][engraving_text]"]').val("{{ CartItem.engraving_text }}");
{% endif %}
{% if CartItem.stone != "なし" and CartItem.stone is not null %}
$('input[name="form[data][' + {{ loop.index0 }} + '][stone]"]').val(["{{ CartItem.stone }}"]);
{% endif %}
{% endfor %}
{% endfor %}
var cnt = $('.ec-cartRow').length;
for (let i = 0; i < cnt; i++) {
var cart_option = document.getElementById("cart_option_" + i);
if (cart_option === null) {
} else {
if ($('input[name="form[data][' + i + '][engraving]"]:checked').val() == "あり") { // 刻印あり
$('#form_data_' + i + ' > div').css('display','flex');
$('#form_data_' + i + ' fieldset:nth-child(2)').css('display','flex');
if ($('input[name="form[data][' + i + '][engraving_font]"]:checked').val() == null) {
$('.action_btn_wrapper').addClass('not_available');
go = false;
} else if (!$('input[name="form[data][' + i + '][engraving_text]"]').val()) {
$('.action_btn_wrapper').addClass('not_available');
go = false;
}
} else if ($('input[name="form[data][' + i + '][engraving]"]:checked').val() == "なし") {
$('input[name="form[data][' + i + '][engraving_font]"]:checked').prop('checked', false);
$('#form_data_' + i + ' > div').css('display','none');
$('#form_data_' + i + ' fieldset:nth-child(2)').css('display','none');
}
}
}
checkEngraving();
calcTotal();
// cart_key と cart_id をセット
var cnt = $('.ec-cartRow').length;
for (let i = 0; i < cnt; i++) {
$('input[name="form[data][' + i + '][cart_key]"]').val($('#ck_0').text()); // cartkey は同じカートなら同じ
$('input[name="form[data][' + i + '][cart_item_id]"]').val($('#ciid_' + i).text());
}
$('.form-check-input').on('change', function(event) {
checkEngraving();
calcTotal();
});
$('input[id$="engraving_text"]').on('keyup', function(event) {
let count = $(this).val().length;
if (count > 19){
if (!$(this).parent().prev().hasClass('text_count_message')) {
$(this).parent().before('<p class="mb-2 text_count_message text-danger">※刻印は19文字までです</p>');
$('.action_btn_wrapper').addClass('not_available');
}
} else {
if ($(this).parent().prev().hasClass('text_count_message')) {
$(this).parent().prev('.text_count_message').remove();
}
}
});
$('.form-control').on('change', function(event) {
checkEngraving();
});
function checkEngraving() {
var cnt = $('.ec-cartRow').length;
var go = true;
for (let i = 0; i < cnt; i++) {
var cart_option = document.getElementById("cart_option_" + i);
if (cart_option === null) {
} else {
if ($('input[name="form[data][' + i + '][engraving]"]:checked').val() == "あり") { // 刻印あり
$('#form_data_' + i + ' > div').css('display','flex');
$('#form_data_' + i + ' fieldset:nth-child(2)').css('display','flex');
if ($('input[name="form[data][' + i + '][engraving_font]"]:checked').val() == null) {
$('.action_btn_wrapper').addClass('not_available');
go = false;
} else if (!$('input[name="form[data][' + i + '][engraving_text]"]').val()) {
$('.action_btn_wrapper').addClass('not_available');
go = false;
}
} else if ($('input[name="form[data][' + i + '][engraving]"]:checked').val() == "なし") {
$('input[name="form[data][' + i + '][engraving_font]"]:checked').prop('checked', false);
$('#form_data_' + i + ' > div').css('display','none');
$('#form_data_' + i + ' fieldset:nth-child(2)').css('display','none');
}
}
}
if (go) {
$('.action_btn_wrapper').removeClass('not_available');
}
}
function calcTotal() {
var cnt = $('.ec-cartRow').length;
var option_total = 0;
for (let i = 0; i < cnt; i++) {
var item_option_price = 0;
var cart_option = document.getElementById("cart_option_" + i);
if (cart_option === null) {
} else {
if ($('input[name="form[data][' + i + '][engraving]"]:checked').val() == "あり") {
//item_option_price += 5500;
}
switch ($('input[name="form[data][' + i + '][engraving_font]"]:checked').val()) {
case "有料書体1":
case "有料書体2":
case "有料書体3":
case "有料書体4":
case "有料書体5":
case "有料書体6":
case "有料書体7":
case "有料書体8":
case "有料書体9":
case "有料書体10":
item_option_price += 5500;
break;
default:
}
switch ($('input[name="form[data][' + i + '][stone]"]:checked').val()) {
case "なし":
break;
default:
// 一律料金?
item_option_price += 5500;
}
}
var item_option_total_price = String(item_option_price).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
$('.item_option_price_' + i).text("¥" + item_option_total_price);
$('input[name="form[data][' + i + '][option_total_price]"]').val(item_option_price);
option_total += item_option_price;
}
var option_total_price = String(option_total).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
$('#option_total').text("¥" + option_total_price);
// 総合計更新
var total_price = $('#price_total_tmp').text();
total_price = total_price * 1; //number
total_price += option_total;
var cart_total_price = String(total_price).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
$('#cart_total').text("¥" + cart_total_price);
}
$('.ec-blockBtn--action').on('click', function(event) {
calcTotal();
});
});
</script>
{% endblock %}
{% block main %}
<div class="ec-role">
<div class="ec-pageHeader">
<h1>{{ 'ショッピングカート'|trans }}</h1>
</div>
</div>
<div class="ec-cartRole">
<div class="ec-cartRole__progress">
<ul class="ec-progress">
{% set step = 1 %}
<li class="ec-progress__item is-complete">
<div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
</div>
<div class="ec-progress__label">{{ 'カートの商品'|trans }}
</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">{{ 'お客様情報'|trans }}
</div>
</li>
{% endif %}
<li class="ec-progress__item">
<div class="ec-progress__number">{{ step }}{% set step = step + 1 %}
</div>
<div class="ec-progress__label">{{ 'ご注文手続き'|trans }}
</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>
<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>
</div>
{% set productStr = app.session.flashbag.get('eccube.front.request.product') %}
{% for error in app.session.flashbag.get('eccube.front.request.error') %}
{% set idx = loop.index0 %}
<div class="ec-cartRole__error">
<div class="ec-alert-warning">
<div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
<div class="ec-alert-warning__text">
{% if productStr[idx] is defined %}
{{ error|trans({'%product%':productStr[idx]})|nl2br }}
{% else %}
{{ error|trans|nl2br }}
{% endif %}
</div>
</div>
</div>
{% endfor %}
{% for error in app.session.flashbag.get('eccube.front.cart.error') %}
<div class="ec-cartRole__error">
<div class="ec-alert-warning">
<div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
<div class="ec-alert-warning__text">
{{ error|trans|nl2br }}
</div>
</div>
</div>
{% endfor %}
{% if totalQuantity > 0 %}
<!--<div class="ec-cartRole__totalText">
<p>
{{ '商品の合計金額は「<strong>%price%</strong>」です。'|trans({ '%price%': totalPrice|price })|raw }}
</p>
</div>-->
{% if Carts|length > 1 %}
<div class="ec-cartRole__error">
<div class="ec-alert-warning">
<div class="ec-alert-warning__text">
{{ '同時購入できない商品がカートに含まれています。'|trans|nl2br }}
</div>
</div>
</div>
{% endif %}
{#<form name="form" id="form_cart" class="ec-cartRole" method="post" action="{{ url('cart') }}">#}
<form name="form" id="form_cart" class="ec-cartRole" method="post" action="{{ url('cart_add_option') }}">
<div class="cartitems" data-prototype="{{ form_widget(form.data.vars.prototype)|e('html_attr') }}" data-index=0></div>
{% for CartIndex,Cart in Carts %}
{% set cartKey = Cart.cart_key %}
<span id="ck_{{ loop.index0 }}" class="d-none">{{ cartKey }}</span>
{% for error in app.session.flashbag.get('eccube.front.cart.' ~ cartKey ~ '.request.error') %}
<div class="ec-cartRole__error">
<div class="ec-alert-warning">
<div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
<div class="ec-alert-warning__text">
{{ error|trans|nl2br }}
</div>
</div>
</div>
{% endfor %}
<div class="ec-cartRole__cart">
<!--<div class="ec-cartTable">
<ol class="ec-cartHeader">
<li class="ec-cartHeader__label">{{ '削除'|trans }}</li>
<li class="ec-cartHeader__label">{{ '商品内容'|trans }}</li>
<li class="ec-cartHeader__label">{{ '数量'|trans }}</li>
<li class="ec-cartHeader__label">{{ '小計'|trans }}</li>
</ol>-->
{% set item_cnt = 0 %}
{% for CartItem in Cart.CartItems %}
<span id="ciid_{{ loop.index0 }}" class="d-none">{{ CartItem.id }}</span>
{% set ProductClass = CartItem.ProductClass %}
{% set Product = ProductClass.Product %}
<div class="ec-cartTable">
{% if loop.index == 1 %}
<ol class="ec-cartHeader">
<li class="ec-cartHeader__label">{{ '削除'|trans }}</li>
<li class="ec-cartHeader__label">{{ '商品内容'|trans }}</li>
<li class="ec-cartHeader__label">{{ '数量'|trans }}</li>
<li class="ec-cartHeader__label">{{ '小計'|trans }}</li>
</ol>
{% endif %}
<ul class="ec-cartRow cartitem cartitem_{{ item_cnt }}">
<li class="ec-cartRow__delColumn">
{#<a href="{{ url('cart_handle_item', {'operation': 'remove', 'productClassId': ProductClass.id }) }}" {{ csrf_token_for_anchor() }} class="ec-icon" data-method="put" data-message="カートから商品を削除してもよろしいですか?">#}
<a href="{{ url('cart_handle_item', {'operation': 'remove', 'productClassId': CartItem.id }) }}" {{ csrf_token_for_anchor() }} class="ec-icon" data-method="put" data-message="カートから商品を削除してもよろしいですか?">
<img src="{{ asset('assets/icon/cross.svg') }}" alt="delete">
</a>
</li>
<li class="ec-cartRow__contentColumn">
<div class="ec-cartRow__img">
<a target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}">
<img src="{{ asset(Product.MainListImage|no_image_product, 'save_image') }}" alt="{{ Product.name }}"/>
</a>
</div>
<div class="ec-cartRow__summary">
<div class="ec-cartRow__name">
<a target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}">{{ Product.name }}</a>
{% if ProductClass.ClassCategory1 and ProductClass.ClassCategory1.id %}
{% if Product.id != 119 %}
<br>{{ ProductClass.ClassCategory1.ClassName.name }}:{{ ProductClass.ClassCategory1 }}
{% endif %}
{% endif %}
{% if ProductClass.ClassCategory2 and ProductClass.ClassCategory2.id %}
<br>{{ ProductClass.ClassCategory2.ClassName.name }}:{{ ProductClass.ClassCategory2 }}
{% endif %}
{% if Product.id != 119 %}
{% if CartItem.size %} サイズ:{{ CartItem.size }}号{% endif %}
{% endif %}
</div>
<!--<div class="ec-cartRow__unitPrice">{{ CartItem.price|price }}</div>-->
{% set sum = CartItem.total_price + CartItem.size_price %}
<div class="ec-cartRow__sutbtotalSP">{{ '小計:'|trans }}{{ sum|price }}</div>
</div>
</li>
<li class="ec-cartRow__amountColumn">
<div class="ec-cartRow__amount">{{ CartItem.quantity|number_format }}</div>
<div class="ec-cartRow__amountSP">{{ '数量:'|trans }}{{ CartItem.quantity|number_format }}</div>
<div class="ec-cartRow__amountUpDown">
{#{% if CartItem.quantity > 1 %}
<a 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">
<span class="ec-cartRow__amountDownButton__icon"><img src="{{ asset('assets/icon/minus-dark.svg') }}" alt="reduce"></span>
</a>
{% else %}
<div class="ec-cartRow__amountDownButtonDisabled">
<span class="ec-cartRow__amountDownButton__icon"><img src="{{ asset('assets/icon/minus.svg') }}" alt="reduce"></span>
</div>
{% endif %}
<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">
<span class="ec-cartRow__amountUpButton__icon"><img src="{{ asset('assets/icon/plus-dark.svg') }}" alt="increase"></span>
</a>#}
</div>
</li>
<li class="ec-cartRow__subtotalColumn">
<div class="ec-cartRow__sutbtotal">{{ sum|price }}<small>(税込)</small></div>
</li>
</ul>
</div>
{% set category = 0 %}
{% for ProductCategory in Product.ProductCategories %}
{% if ProductCategory.Category.id == 1 %}
{# 結婚指輪 #}
{% set category = 1 %}
{% elseif ProductCategory.Category.id == 2 %}
{# 婚約指輪 #}
{% set category = 2 %}
{% endif %}
{% endfor %}
<a href="#" class="add_option add_option_{{ item_cnt }} itemid_{{ Product.id }} itemcat_{{ category }} d-none"></a>
{% set item_cnt = item_cnt + 1 %}
{% endfor %}
</div>
<div class="ec-cartRole__progress">
{% if BaseInfo.delivery_free_amount and BaseInfo.delivery_free_quantity %}
<br/>
{% if is_delivery_free[cartKey] %}
{{ '現在日本国内は送料無料です。'|trans }}
{% else %}
{{ 'あと「<strong>%price%</strong>」または「<strong>%quantity%個</strong>」のお買い上げで<strong class="ec-color-red">送料無料</strong>になります。'|trans({ '%price%': least[cartKey]|price, '%quantity%': quantity[cartKey]|number_format })|raw }}
{% endif %}
{% elseif BaseInfo.delivery_free_amount %}
<br/>
{% if is_delivery_free[cartKey] %}
{{ '現在日本国内は送料無料です。'|trans }}
{% else %}
{{ 'あと「<strong>%price%</strong>」のお買い上げで<strong class="ec-color-red">送料無料</strong>になります。'|trans({ '%price%': least[cartKey]|price })|raw }}
{% endif %}
{% elseif BaseInfo.delivery_free_quantity %}
<br/>
{% if is_delivery_free[cartKey] %}
{{ '現在日本国内は送料無料です。'|trans }}
{% else %}
{{ 'あと「<strong>%quantity%個</strong>」のお買い上げで<strong class="ec-color-red">送料無料</strong>になります。'|trans({ '%quantity%': quantity[cartKey]|number_format })|raw }}
{% endif %}
{% endif %}
</div>
{# カート合計金額にサイズ割増料金を加算 #}
{% set size_price_total = 0 %}
{% for CartItem in Cart.CartItems %}
{% set size_price_total = size_price_total + CartItem.size_price %}
{% endfor %}
{% set price_total = Cart.totalPrice + size_price_total %}
<span id="price_total_tmp" class="d-none">{{ price_total }}</span>
<div class="ec-cartRole__actions">
<div>{{ 'オプション計:'|trans }}<span id="option_total">{{ 0|price }}</span><small>(税込)</small></div>
<div class="ec-cartRole__total">{{ '合計:'|trans }}<span id="cart_total" class="ec-cartRole__totalAmount">{{ price_total|price }}</span><small>(税込)</small>
</div>
{#<span class="action_btn_wrapper"><a class="ec-blockBtn--action text-white" href="{{ path('cart_buystep', {'cart_key':cartKey}) }}">{{ 'レジに進む'|trans }}</a></span>#}
<span class="action_btn_wrapper"><button class="ec-blockBtn--action text-white">{{ 'レジに進む'|trans }}</button></span>
{% if loop.last %}
<a class="ec-blockBtn--cancel" href="{{ path('homepage') }}">{{ 'お買い物を続ける'|trans }}</a>
{% endif %}
</div>
{% endfor %}
</form>
{% else %}
{% for CartIndex,Cart in Carts %}
{% set cartKey = Cart.cart_key %}
{% for error in app.session.flashbag.get('eccube.front.cart.' ~ cartKey ~ '.request.error') %}
<div class="ec-cartRole__error">
<div class="ec-alert-warning">
<div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
<div class="ec-alert-warning__text">
{{ error|trans|nl2br }}
</div>
</div>
</div>
{% endfor %}
{% endfor %}
<div class="ec-role">
<div class="ec-off3Grid">
<div class="ec-off3Grid__cell">
<div class="ec-alert-warning">
<div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div>
<div class="ec-alert-warning__text">{{ '現在カート内に商品はございません。'|trans }}</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
{% endblock %}