{#
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 = 'product_page' %}
{% block stylesheet %}
{% endblock %}
{% block javascript %}
<script>
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 %}
</script>
<script>
$('.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');
});
$('#add-cart').click(function() {
$('#mode').val('add_cart');
});
// bfcache無効化
$(window).bind('pageshow', function(event) {
if (event.originalEvent.persisted) {
location.reload(true);
}
});
</script>
{% endblock %}
{% block main %}
<!-- ▼item_detail▼ -->
<div id="item_detail">
<div id="detail_wrap" class="row">
<!--★画像★-->
<div id="item_photo_area" class="col-sm-6">
<div id="detail_image_box__slides" class="slides">
{% for ProductImage in Product.ProductImage %}
<div id="detail_image_box__item--{{ loop.index }}">
<img class="zoom" src="{{ asset(ProductImage, 'save_image') }}" data-zoom-image="{{ asset(ProductImage, 'save_image') }}"/>
</div>
{% else %}
<div id="detail_image_box__item">
<img class="zoom" src="{{ asset(''|no_image_product, 'save_image') }}" data-zoom-image="{{ asset(''|no_image_product, 'save_image') }}"/>
</div>
{% endfor %}
</div>
</div>
<section id="item_detail_area" class="col-sm-6">
<!--★商品名★-->
<h3 id="detail_description_box__name" class="item_name">{{ Product.name }}</h3>
<!-- ▼関連カテゴリ▼ -->
<div id="relative_category_box" class="relative_cat">
<!--<p>関連カテゴリ</p>-->
{% for ProductCategory in Product.ProductCategories %}
<ol id="relative_category_box__relative_category--{{ ProductCategory.product_id }}_{{ loop.index }}">
{% for Category in ProductCategory.Category.path %}
<li><a id="relative_category_box__relative_category--{{ ProductCategory.product_id }}_{{ loop.parent.loop.index }}_{{ Category.id }}" href="{{ url('product_list') }}?category_id={{ Category.id }}" class="btn btn-info-border">{{ Category.name }}</a></li>
{% endfor %}
</ol>
{% endfor %}
</div>
<!-- ▲関連カテゴリ▲ -->
<div id="detail_description_box__body" class="item_detail">
{% if Product.Tags is not empty %}
<!--▼商品タグ-->
<div id="product_tag_box" class="product_tag">
{% for Tag in Product.Tags %}
<span id="product_tag_box__product_tag--{{ Tag.id }}" class="product_tag_list">{{ Tag }}</span>
{% endfor %}
</div>
<hr>
<!--▲商品タグ-->
{% endif %}
<!--★通常価格★-->
{% 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="price01_default">{{ Product.getPrice01IncTaxMin|price }}</span><span class="small"><small>(税込)</small></span><span class="small hide">税込</span></p>
{% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
<p id="detail_description_box__class_normal_range_price" class="normal_price"> 通常価格:<span class="price01_default">{{ Product.getPrice01IncTaxMin|price }}~ {{ Product.getPrice01IncTaxMax|price }}</span><span class="small"><small>(税込)</small></span><span class="small hide">税込</span></p>
{% endif %}
{% else -%}
{% if Product.getPrice01Max is not null and Product.getPrice01Max > 0 %}
<span class="tax_management-list_price"></span>
{#
<p id="detail_description_box__normal_price" class="normal_price"> 通常価格:<span class="price01_default">{{ Product.getPrice01IncTaxMin|price }}</span><span class="small"><small>(税込)</small></span><span class="small hide">税込</span></p>
#}
{% endif %}
{% endif -%}
<!--★販売価格★-->
{% set flag = false %}
{% if Product.ProductCategories is not empty %}
{% for category in Product.ProductCategories %}
{% if category.Category.id == 148 or category.Category.id == 133 or category.Category.id == 144 or category.Category.id == 116 %}
{% set flag = true %}
{% endif %}
{% endfor %}
{% endif %}
{% if flag != true and discount_flag %}
{% if is_granted('ROLE_USER') %}
<span style="color:red;">[{{ discount_ratio }}%割引対象商品です]</span>
{% elseif nonmember_flag %}
<span style="color:red;">[{{ nonmember_ratio }}%割引対象商品です]</span>
{% endif %}
{% endif %}
{# % set flag = false %}
{% if Product.ProductTag is not empty %}
{% for ProductTag in Product.ProductTag %}
{% if ProductTag.Tag.id == 1 or ProductTag.Tag.id == 3 or ProductTag.Tag.id == 5 or ProductTag.Tag.id == 6 %}
{% set flag = true %}
{% endif %}
{% endfor %}
{% endif %}
{% if flag != true %}
<span style="color:red;">[5%割引対象商品です]</span><br>
{% endif % #}
{% if Product.hasProductClass -%}
{% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
<p id="detail_description_box__class_sale_price" class="sale_price text-primary"> <span class="price02_default">{{ Product.getPrice02IncTaxMin|price }}</span><span class="small"><small>(税込)</small></span><span class="small hide">税込</span></p>
{% else %}
<p id="detail_description_box__class_range_sale_price" class="sale_price text-primary"> <span class="price02_default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span><span class="small"><small>(税込)</small></span><span class="small hide">税込</span></p>
{% endif %}
{% else -%}
<span class="tax_management-sale_price"></span>
<small>
{% if Product.stock_min >= 5 %}
在庫あり
{% elseif Product.stock_min == null %}
在庫あり
{% else %}
在庫:{{ Product.stock_min }}
{% endif %}
</small>
{#
<p id="detail_description_box__sale_price" class="sale_price text-primary"> <span class="price02_default">{{ Product.getPrice02IncTaxMin|price }}</span><span class="small"><small>(税込) 在庫:{{ Product.stock_min }}</small></span><span class="small hide">税込</span></p>
#}
{% endif -%}
{# タグID7「取扱商品」の判定とテキスト表示 #}
{% set hasHandlingTag = false %}
{% for tag in Product.Tags %}
{% if tag.id == 7 %}
{% set hasHandlingTag = true %}
{% endif %}
{% endfor %}
{% if hasHandlingTag and Product.tag7DisplayText is not empty %}
<div class="handling-product-notice mt-3 p-3 border rounded bg-light">
<p class="mb-0">{{ Product.tag7DisplayText|nl2br }}</p>
</div>
{% endif %}
<div id="detail_cart_box" class="cart_area">
<form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
{% if Product.stock_find %}
{# 規格 #}
{% if form.classcategory_id1 is defined %}
<ul id="detail_cart_box__cart_class_category_id" class="classcategory_list">
{# 規格1 #}
<li>
{{ form_widget(form.classcategory_id1) }}
{{ form_errors(form.classcategory_id1) }}
</li>
{# 規格2 #}
{% if form.classcategory_id2 is defined %}
<li>
{{ form_widget(form.classcategory_id2) }}
{{ form_errors(form.classcategory_id2) }}
</li>
{% endif %}
</ul>
{% endif %}
{# 数量 #}
<dl id="detail_cart_box__cart_quantity" class="quantity">
<dt>数量</dt>
<dd>
{{ form_widget(form.quantity) }}
{{ form_errors(form.quantity) }}
</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" id="add-cart" class="btn btn-primary btn-block prevention-btn prevention-mask add-cart">カートに入れる</button></li>
</ul>
<style type="text/css">
.reservation4-add-cart-disabled, .reservation4-add-cart { background-color: #30AADD !important; border-color: #30AADD !important;}
</style>
</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="btn btn-default btn-block" disabled="disabled">ただいま品切れ中です</button>
</li>
</ul>
<div class="link-line">再入荷のお知らせはLINE@(<a href="https://line.me/R/ti/p/%40fal2540t" target="_blank">お友だち登録後</a>)より、ご希望の商品名をトークよりいただけるとうれしいです。</div>
</div> {#End div#detail_cart_box__button_area #}
{% endif %} {#End stock find#}
{{ form_rest(form) }}
</form>
<form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
<div class="btn_area">
{#Favorite product button#}
{% if BaseInfo.option_favorite_product %}
<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="btn btn-info-border btn-block prevention-btn prevention-mask"><svg class="cb cb-heart-circle"><use xlink:href="#cb-heart-circle"></use></svg>お気に入りに追加</button></li>
{% else %}
<li class="col-xs-12 col-sm-8"><button type="submit" id="favorite" class="btn btn-info-border btn-block" disabled="disabled"><svg class="cb cb-heart-circle"><use xlink:href="#cb-heart-circle"></use></svg>お気に入りに追加済みです</button></li>
{% endif %}
</ul>
{% endif %}
</div>
</form>
</div>
<!--▲買い物かご-->
<!--★商品説明★-->
<p id="detail_not_stock_box__description_detail" class="item_comment ec-productRole__tags">{{ Product.description_detail|raw|nl2br }}</p>
<!--▼商品コード-->
<p id="detail_description_box__item_range_code" class="item_code" style="padding-bottom:0;">商品コード: <span id="item_code_default">
{{ Product.code_min }}
{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}
</span> </p>
<!--▲商品コード-->
<!--▼重さ・サイズ係数-->
<div id="product_weight_size" class="product_weight_size">
<!-- product_weight_size -->
{{ include('Product/weight_size.twig') }}
</div>
<!--▲重さ・サイズ係数▲-->
</div>
<!-- /.item_detail -->
</section>
<!--詳細ここまで-->
</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 %}