{#
This file is part of EC-CUBE
Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.
http://www.lockon.co.jp/
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
#}
{% extends 'default_frame.twig' %}
{% set body_class = 'product_page' %}
{% block javascript %}
<script>
$('#brother').on('change', function(){
$cartbtn = $('.add-cart');
if ($cartbtn.text() != 'ただいま品切れ中です') {
if (!$(this).val()) {
$cartbtn.prop('disabled', true);
$cartbtn.addClass('zero');
} else {
$cartbtn.prop('disabled', false);
$cartbtn.removeClass('zero');
}
}
});
eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
// 規格2に選択肢を割り当てる。
function fnSetClassCategories(form, classcat_id2_selected) {
var $form = $(form);
var product_id = $form.find('input[name=product_id]').val();
var $sele1 = $form.find('select[name=classcategory_id1]');
var $sele2 = $form.find('select[name=classcategory_id2]');
eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
}
{% if form.classcategory_id2 is defined %}
fnSetClassCategories(
$('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
);
{% elseif form.classcategory_id1 is defined %}
eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
{% endif %}
{% if Product.product_type =='set' %}
setSetClassCategories = function($form, product_id, $sele1, $sele2, selected_id2) {
if ($sele1 && $sele1.length) {
var classcat_id1 = $sele1.val() ? $sele1.val() : '';
if ($sele2 && $sele2.length) {
// 規格2の選択肢をクリア
$sele2.children().remove();
var classcat2;
// 商品一覧時
if (eccube.hasOwnProperty('productsClassCategories')) {
classcat2 = eccube.productsClassCategories[product_id][classcat_id1];
}
// 詳細表示時
else {
classcat2 = setClassCategories[product_id][classcat_id1];
}
// 規格2の要素を設定
for (var key in classcat2) {
if (classcat2.hasOwnProperty(key)) {
var id = classcat2[key].classcategory_id2;
var name = classcat2[key].name;
var option = $('<option />').val(id ? id : '').text(name);
if (id === selected_id2) {
option.attr('selected', true);
}
$sele2.append(option);
}
}
setCheckStock($form, product_id, $sele1.val() ? $sele1.val() : '__unselected2',
$sele2.val() ? $sele2.val() : '');
}
}
};
setCheckStock = function($form, product_id, classcat_id1, classcat_id2) {
classcat_id2 = classcat_id2 ? classcat_id2 : '';
var classcat2;
// 商品一覧時
if (eccube.hasOwnProperty('productsClassCategories')) {
classcat2 = eccube.productsClassCategories[product_id][classcat_id1]['#' + classcat_id2];
}
// 詳細表示時
else {
classcat2 = setClassCategories[product_id][classcat_id1]['#' + classcat_id2];
}
// 商品コード
var $product_code = $('#item_code_default');
if (typeof this.product_code_origin === 'undefined') {
// 初期値を保持しておく
this.product_code_origin = $product_code.text();
}
if (classcat2 && typeof classcat2.product_code !== 'undefined') {
$product_code.text(classcat2.product_code);
} else {
$product_code.text(this.product_code_origin);
}
// 在庫(品切れ)
var $cartbtn = $('#add-cart');
if (classcat2 && classcat2.stock_find === false) {
$cartbtn.prop('disabled', true);
$cartbtn.text('ただいま品切れ中です');
} else {
$cartbtn.prop('disabled', false);
$cartbtn.text('カートに入れる');
}
// 通常価格
var $price01 = $('#detail_description_box__class_normal_range_price')
.find('.price01_default')
.first();
if (typeof this.proce01_origin === 'undefined') {
// 初期値を保持しておく
this.proce01_origin = $price01.text();
}
if (classcat2 && typeof classcat2.price01 !== 'undefined' && String(classcat2.price01).length >= 1) {
$price01.text('\ ' + classcat2.price01);
} else {
$price01.text(this.proce01_origin);
}
// 販売価格
var $price02 = $('#detail_description_box__class_range_sale_price')
.find('.price02_default')
.first();
if (typeof this.proce02_origin === 'undefined') {
// 初期値を保持しておく
this.proce02_origin = $price02.text();
}
if (classcat2 && typeof classcat2.price02 !== 'undefined' && String(classcat2.price02).length >= 1) {
$price02.text('\ ' + classcat2.price02);
} else {
$price02.text(this.proce02_origin);
}
// ポイント
var $point_default = $form.find('[id^=point_default]');
var $point_dynamic = $form.find('[id^=point_dynamic]');
if (classcat2 && typeof classcat2.point !== 'undefined' && String(classcat2.point).length >= 1) {
$point_dynamic.text(classcat2.point).show();
$point_default.hide();
} else {
$point_dynamic.hide();
$point_default.show();
}
// 商品規格
var $product_class_id_dynamic = $form.find('.setproduct_item[data-product-id='+product_id+']').find('.set_product_class');
if (classcat2 && typeof classcat2.product_class_id !== 'undefined' && String(classcat2.product_class_id).length >= 1) {
$product_class_id_dynamic.val(classcat2.product_class_id);
} else {
$product_class_id_dynamic.val('');
}
};
$('select.setproduct_size1')
.change(function() {
var $form = $(this).parents('form');
var product_id = $(this).closest('.setproduct_item').data('product-id');
var $sele1 = $(this);
var $sele2 = $(this).closest('.setproduct_item').find('select.setproduct_size2');
var product_class_label = $('option:selected', $sele1).text();
if (product_class_label.includes("入荷予定")) {
const str_idx = product_class_label.indexOf("入荷予定");
const result = product_class_label.slice(str_idx);
$sele1.closest('.setproduct_item').append('<p class="stock_date_desc red">'+result+'</p>');
} else {
$('.stock_date_desc', $sele1.closest('.setproduct_item')).remove();
}
// 規格1のみの場合
if (!$sele2.length) {
setCheckStock($form, product_id, $sele1.val(), null);
// 規格2ありの場合
} else {
setSetClassCategories($form, product_id, $sele1, $sele2);
}
});
// 規格2選択時
$('select.setproduct_size2')
.change(function() {
var $form = $(this).parents('form');
var product_id = $(this).closest('.setproduct_item').data('product-id');
var $sele1 = $(this).closest('.setproduct_item').find('select.setproduct_size1');
var $sele2 = $(this);
var product_class_label = $('option:selected', $sele2).text();
if (product_class_label.includes("入荷予定")) {
const str_idx = product_class_label.indexOf("入荷予定");
const result = product_class_label.slice(str_idx);
$sele2.closest('.setproduct_item').append('<p class="stock_date_desc red">'+result+'</p>');
} else {
$('.stock_date_desc', $sele2.closest('.setproduct_item')).remove();
}
setCheckStock($form, product_id, $sele1.val(), $sele2.val());
});
setClassCategories = [];
{% for pis in ProductInSet %}
setClassCategories[{{pis.id}}] = {{ class_categories_as_json(pis)|raw }};
{% endfor %}
{% endif %}
</script>
<script>
$(function(){
$('.carousel').slick({
infinite: false,
speed: 300,
prevArrow:'<button type="button" class="slick-prev"><span class="angle-circle"><svg class="cb cb-angle-right"><use xlink:href="#cb-angle-right" /></svg></span></button>',
nextArrow:'<button type="button" class="slick-next"><span class="angle-circle"><svg class="cb cb-angle-right"><use xlink:href="#cb-angle-right" /></svg></span></button>',
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
}
]
});
$('.slides').slick({
dots: true,
arrows: false,
speed: 300,
customPaging: function(slider, i) {
return '<button class="thumbnail">' + $(slider.$slides[i]).find('img').prop('outerHTML') + '</button>';
}
});
$('#favorite').click(function() {
$('#mode').val('add_favorite');
});
// bfcache無効化
$(window).bind('pageshow', function(event) {
if (event.originalEvent.persisted) {
location.reload(true);
}
});
});
</script>
<script>
$(function() {
$('.add-cart').on('click', function(event) {
{% if form.classcategory_id1 is defined %}
// 規格1フォームの必須チェック
if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
$('#classcategory_id1')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
return true;
} else {
$('#classcategory_id1')[0].setCustomValidity('');
}
{% endif %}
{% if form.classcategory_id2 is defined %}
// 規格2フォームの必須チェック
if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
$('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
return true;
} else {
$('#classcategory_id2')[0].setCustomValidity('');
}
{% endif %}
var isAllCategorySelected = true;
$('.setproduct_item select').each(function(idx){
if($(this).val() == '__unselected' || $(this).val() == ''){
this.setCustomValidity('{{ '項目が選択されていません'|trans }}');
isAllCategorySelected = false;
return true;
}
else
this.setCustomValidity('');
});
if(!isAllCategorySelected)
return true;
// 個数フォームのチェック
if ($('#quantity').val() < 1) {
$('#classcategory_id2')[0].setCustomValidity('{{ 'front.product.product_class_unselected'|trans }}');
return true;
} else {
$('#quantity')[0].setCustomValidity('');
}
event.preventDefault();
$form = $('#form1');
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize(),
dataType: 'json',
beforeSend: function(xhr, settings) {
// Buttonを無効にする
$('.add-cart').prop('disabled', true);
}
}).done(function(data) {
// レスポンス内のメッセージをalertで表示
$.each(data.messages, function() {
$('#ec-modal-header').text(this);
});
$('.ec-modal').show()
// カートブロックを更新する
$.ajax({
url: "{{ url('block_cart') }}",
type: 'GET',
dataType: 'html'
}).done(function(html) {
$('.ec-headerRole__cart').html(html);
});
}).fail(function(data) {
alert('{{ 'front.product.add_cart_error'|trans }}');
}).always(function(data) {
// Buttonを有効にする
$('.add-cart').prop('disabled', false);
});
});
});
$('.ec-modal-wrap').on('click', function(e) {
// モーダル内の処理は外側にバブリングさせない
e.stopPropagation();
});
$('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
$('.ec-modal').hide()
});
$('#add_favorite').click(function(){
$('#add_favorite_form').submit();
});
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "{{ Product.name }}",
"image": [
{% for img in Product.ProductImage %}
"{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
{% else %}
"{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
{% endfor %}
],
"description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
{% if Product.code_min %}
"sku": "{{ Product.code_min }}",
{% endif %}
"offers": {
"@type": "Offer",
"url": "{{ url('product_detail', {'id': Product.id}) }}",
"priceCurrency": "{{ eccube_config.currency }}",
"price": {{ Product.getPrice02IncTaxMin }},
"availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
}
}
{% endblock %}
{% block stylesheet %}
<style>
.setproduct_size select{
margin-bottom: 15px;
}
.discount_price
{
font-size: 25px;
font-weight: bold;
}
.discount_period {
font-size: 18px;
margin-top: 10px !important;
font-weight: bold;
}
</style>
{% endblock %}
{% block main %}
{% include 'rireki_hikaku.twig' %}
<!-- ▼item_detail▼ -->
<div id="item_detail">
<div id="detail_wrap" class="row">
{% if is_granted('ROLE_USER') %}
<!--★画像★-->
<div id="item_photo_area" class="col-sm-6">
<div id="detail_image_box__slides" class="slides">
{% if Product.ProductImage|length > 0 %}
{% for ProductImage in Product.ProductImage %}
<div id="detail_image_box__item--{{ loop.index }}">
<img src="{{ asset(ProductImage|no_image_product , 'save_image') }}"/>
</div>
{% endfor %}
{% else %}
<div id="detail_image_box__item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
{% endif %}
</div>
</div>
<section id="item_detail_area" class="col-sm-6">
{% if Product.ProductTag is not empty %}
<!--▼商品タグ-->
<div id="product_tag_box" class="product_tag">
{% include 'Block/product_sex_tag.twig' %}
{% if Product.hasTag('購入必需品') %}
<div class="cateicon2">入学時の必要品</div>
{% elseif Product.hasTag('購入必需品(選択可)') %}
<div class="cateicon2">入学時の必要品(選択可)</div>
{% elseif Product.hasTag('希望購入品') %}
<div class="cateicon3">希望購入品</div>
{% elseif Product.hasTag('購入必需品(女子も購入可)') %}
<div class="cateicon2">入学時の必要品(女子も購入可)</div>
{% endif %}
</div>
{% endif %}
<!--★商品名★-->
<h3 id="detail_description_box__name" class="item_name">{{ Product.name }}</h3>
<div id="detail_description_box__body" class="item_detail">
<!--★通常価格★-->
{% if Product.hasProductClass -%}
{% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
<p id="detail_description_box__class_normal_price" class="normal_price">
<span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
<span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
</p>
{% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
<p id="detail_description_box__class_normal_price" class="normal_price">
<span class="ec-productRole__priceRegularPrice">{{ 'front.product.normal_price'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
<span class="ec-productRole__priceRegularTax">{{ 'common.tax_include'|trans }}</span>
</p>
{% endif %}
{% else -%}
{% if Product.getPrice01Max is not null %}
<p id="detail_description_box__normal_price" class="normal_price"> 通常価格:<span class="price01_default">{{ Product.getPrice01IncTaxMin|price }}</span> <span class="small">税込</span></p>
{% endif %}
{% endif -%}
<!--★販売価格★-->
{% if Product.hasProductClass -%}
{% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
<p id="detail_description_box__class_sale_price" class="sale_price text-primary">
<span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
<span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
</p>
{% else %}
<p id="detail_description_box__class_range_sale_price" class="sale_price text-primary">
<span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span>
<span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
</p>
{% endif %}
{% else -%}
<p id="detail_description_box__sale_price" class="sale_price text-primary">
<span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
<span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span>
</p>
{% endif -%}
<!--★割引価格★-->
{% if app.user.school.sale_start_date<date() and app.user.school.sale_end_date>date() and Product.getPrice03IncTaxMin%}
{% if Product.hasProductClass -%}
{% if Product.getPrice03IncTaxMin == Product.getPrice03IncTaxMax %}
<p id="detail_description_box__class_discount_price" class="discount_price text-primary">
<span>割引価格:</span><span class="price03_default">{{ Product.getPrice03IncTaxMin|price }}</span> <span class="small">税込</span>
</p>
{% else %}
<p id="detail_description_box__class_range_discount_price" class="discount_price text-primary"><span class="price03_default">{{ Product.getPrice03IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span> <span class="small">税込</span></p>
{% endif %}
{% else -%}
<p id="detail_description_box__discount_price" class="sale_price text-primary discount_price"><span class="price03_default">{{ Product.getPrice03IncTaxMin|price }}</span> <span class="small">税込</span></p>
{% endif -%}
<p class="discount_period text-primary">割引期間:{{ app.user.school.sale_start_date|date('Y年m月d日') }} ~ {{ app.user.school.sale_end_date|date('Y年m月d日') }}</p>
{% endif %}
<form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
<!--▼買い物かご-->
<div id="detail_cart_box" class="cart_area">
{% if Product.stock_find %}
{# 規格 #}
{% if form.classcategory_id1 is defined or Product.product_type=='set'%}
<ul id="detail_cart_box__cart_class_category_id" class="classcategory_list">
{% if Product.product_type != 'set' %}
{% if app.user.school.size_recommend_flag %}
{% if RecommendSize is defined and RecommendSize %}
<li class="rec_size">
<p>自分のサイズ:{{ Place[RecommendSize.RecommendX.recommend_xplace] }}…{{ x }}/{{ Place[RecommendSize.RecommendY.recommend_yplace] }}…{{ y }}</p>
<p class="result">貴方へのオススメサイズは<br><span>{{ RecommendSize.recommend_notation }}</span>です</p>
<p class="kome">こちらはサイズをオススメさせて頂く機能となります。<br>サイズ、数量のご入力はお客様ご自身で行ってください。</p>
</li>
{% elseif Product.Recommend is not null %}
<li>「採寸データが正しく登録されていないため、サイズのオススメができません。<br/>
<span><a href="{{ url('mypage_change_saisun') }}" target="_blank">オススメサイズが知りたい</a></span>
</li>
{% endif %}
{% endif %}
{% endif %}
{# 規格1 #}
{% if Product.product_type != 'set' %}
<li>
{% set break = false %}
{% if form.classcategory_id1 is defined %}
{{ form_widget(form.classcategory_id1) }}
{{ form_errors(form.classcategory_id1) }}
{% endif %}
</li>
{# 規格2 #}
{% if form.classcategory_id2 is defined %}
<li>
{{ form_widget(form.classcategory_id2) }}
{{ form_errors(form.classcategory_id2) }}
</li>
{% endif %}
{% else %}
<li class="setproduct_size">
{% for pis in ProductInSet %}
<div class="setproduct_item" data-product-id="{{ pis.id }}">
<p>{{ pis.name }}</p>
{% set category2_count = 0 %}
{% set class_category1 = [] %}
{% if pis.getProductClasses|length > 1 %}
<select class="form-control setproduct_size1" required>
<option value="__unselected">{{'common.select'|trans}}</option>
{% for ps in pis.getProductClasses %}
{% if ps.ClassCategory1 is not null and ps.visible and ps.ClassCategory1.id not in class_category1 %}
<option value="{{ps.ClassCategory1.id}}">{{ps.ClassCategory1.name}}</option>
{% set class_category1 = class_category1|merge({ (loop.index0): ps.ClassCategory1.id }) %}
{% endif %}
{% if ps.ClassCategory2 is not null%}
{% set category2_count = category2_count + 1 %}
{% endif %}
{% endfor %}
</select>
{% endif %}
{% if category2_count != 0 %}
{# 規格2 #}
<select class="form-control setproduct_size2" required>
<option value="__unselected">{{'common.select'|trans}}</option>
</select>
{% endif %}
<input type="hidden" name="SetProductClass[]" class="set_product_class {{ pis.getProductClasses|length == 1 ? 'no_product_class' : ''}}" value="{{ pis.getProductClasses|length == 1 ? pis.getProductClasses[0].id : ''}}">
</div>
{% endfor %}
</li>
{% endif %}
</ul>
{% endif %}
{# 数量 #}
<dl id="detail_cart_box__cart_quantity" class="quantity">
<dt>数量</dt>
<dd>
{{ form_widget(form.quantity) }}
{{ form_errors(form.quantity) }}
{% if app.user.school.isBrotherEnabled %}
{{ form_widget(form.brother) }}
{{ form_errors(form.brother) }}
{% endif %}
</dd>
</dl>
<div class="extra-form">
{% for f in form.getIterator %}
{% if f.vars.name matches '[^plg*]' %}
{{ form_row(f) }}
{% endif %}
{% endfor %}
</div>
{# カートボタン #}
<div id="detail_cart_box__button_area" class="btn_area">
<ul id="detail_cart_box__insert_button" class="row">
<li class="col-xs-12 col-sm-8">
<button type="submit" class="ec-blockBtn--action def_button4 add-cart{% if app.user.school.isBrotherEnabled %} zero{% endif %}"{% if app.user.school.isBrotherEnabled %} disabled="disabled"{% endif %}>{{ 'front.product.add_cart'|trans }}</button>
</li>
</ul>
</div> {# End div#detail_cart_box__button_area #}
{% else %}
{# 在庫がない場合は品切れボタンを表示 #}
<div id="detail_cart_box__button_area" class="btn_area">
<ul class="row">
<li class="col-xs-12 col-sm-8">
<button type="button" class="ec-blockBtn--action def_button4 zero" disabled="disabled">{{ 'front.product.out_of_stock'|trans }}</button>
{% if Product.product_classes[0].stock_date %}
<p>{{ Product.product_classes[0].stock_date|date('Y年m月d日') }}入荷予定</p>
{% endif %}
</li>
</ul>
</div> {# End div#detail_cart_box__button_area #}
{% endif %} {# End stock find #}
</div>
<!--▲買い物かご-->
{{ form_rest(form) }}
</form>
{% if BaseInfo.option_favorite_product %}
<form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post" id="add_favorite_form">
<div class="btn_area">
<ul id="detail_cart_box__favorite_button" class="row">
{% if is_favorite == false %}
<li class="col-xs-12 col-sm-8">
<button type="submit" id="favorite" class="ec-blockBtn--cancel def_button5">{{ 'front.product.add_favorite'|trans }}</button>
</li>
{% else %}
<li class="col-xs-12 col-sm-8">
<button type="submit" id="favorite" class="ec-blockBtn--cancel def_button5 ck" disabled="disabled">{{ 'front.product.add_favorite_alrady'|trans }}</button>
</li>
{% endif %}
</ul>
</div>
</form>
{% endif %}
</div>
<!-- /.item_detail -->
</section>
<!--詳細ここまで-->
{% endif %}
</div>
{# フリーエリア #}
{% if Product.freearea %}
<div id="sub_area" class="row">
<div class="col-sm-10 col-sm-offset-1">
<div id="detail_free_box__freearea" class="freearea">{{ include(template_from_string(Product.freearea)) }}</div>
</div>
</div>
{% endif %}
</div>
<!-- ▲item_detail▲ -->
{% endblock %}