{% extends 'default_frame.twig' %}
{% set body_class = 'product_page' %}
{% block javascript %}
<script>
eccube.productsClassCategories = {
{% for Product in pagination %}
"{{ Product.id|escape('js') }}": {{ class_categories_as_json(Product)|raw }}{% if loop.last == false %}, {% endif %}
{% endfor %}
};
$(function() {
// 検索条件を追加
$('.btn-condition').click(function() {
$('#active_idx').val($(this).index());
});
$('.form-check-input').change(function() {
$("#form1").submit();
});
// 表示件数を変更
$('.disp-number').change(function() {
var dispNumber = $(this).val();
$('#disp_number').val(dispNumber);
$('#pageno').val(1);
$("#form1").submit();
});
// 並び順を変更
$('.order-by').change(function() {
var orderBy = $(this).val();
$('#orderby').val(orderBy);
$('#pageno').val(1);
$("#form1").submit();
});
$('.add-cart').on('click', function(e) {
var $form = $(this).parents('li').find('form');
// TODO: test 修正要
// 規格1フォームの必須チェック
var $form_select = $form.parent().find('.form-select');
if ($form_select.val() == '__unselected' || $form_select.val() == '') {
$form_select[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
setTimeout(function() {
loadingOverlay('hide');
}, 100);
return true;
} else {
$form_select[0].setCustomValidity('');
}
// 個数フォームのチェック
var $quantity = $form.parent().find('.quantity');
if ($quantity.val() < 1) {
$quantity[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
setTimeout(function() {
loadingOverlay('hide');
}, 100);
return true;
} else {
$quantity[0].setCustomValidity('');
}
e.preventDefault();
$.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('{{ 'カートへの追加に失敗しました。'|trans }}');
}).always(function(data) {
// Buttonを有効にする
$('.add-cart').prop('disabled', false);
});
});
$('.favorite').click(function(event) {
if ($(this).attr('disabled') != 'disabled') {
$(this).closest('li.product').find('.list-add-favorite').submit();
}
});
});
$('.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()
});
</script>
<script>
$(document).ready(function(){
//チェックボックス処理
$(".left .list-btn .btn-condition").eq($('#active_idx').val()).addClass('active');
$(".right .item").eq($('#active_idx').val()).addClass('active');
$(".right .item").each(function(index, el) {
var chk_cnt = $(this).find("input[type='checkbox']:checked").length;
$('.btn-condition').eq(index).find('.chk-cnt').text(chk_cnt);
if (chk_cnt > 0) {
$('.btn-condition').eq(index).find('.chk-cnt').show();
}
else {
$('.btn-condition').eq(index).find('.chk-cnt').hide();
}
});
$(".left .list-btn .btn-condition").click(function(e){
if (!$(this).hasClass("active")) {
var tabNum = $(this).index();
var nthChild = tabNum+1;
$(".left .list-btn .btn-condition.active").removeClass("active");
$(this).addClass("active");
$(".right .item.active").removeClass("active");
$(".right .item:nth-child("+nthChild+")").addClass("active");
}
});
$(".reset").click(function(e){
$(".item input[type='checkbox']:checked").prop('checked', false);
$("#form1").submit();
});
});
</script>
{% endblock %}
{% block main %}
<div class="ec-product-page v2">
<div class="ec-banner" {% if Category.id == 118 %} style="background-color: #fff;" {% endif %}>
<div class="ec-banner__inner">
<div class="inner">
{% if Category is not null %}
{% if Category.id == 115 %}
<h2>{{ Category.name }}</h2>
{% elseif Category.id == 118 %}
<h2>自社ローン対象商品<br />(分割24回のみ)</h2>
{% else %}
<h2>{{ Category.name }}商品一覧</h2>
{% endif %}
{% else %}
<h2>商品一覧</h2>
{% endif %}
</div>
</div>
<div class="ec-breadcrumb" {% if Category is not null and Category.id == 115 %}style="margin-bottom: 2rem"{% endif %} {% if Category.id == 118 %} style="margin-bottom: 2rem;" {% endif %}>
<ul class="ec-breadcrumb__menu">
<li class="ec-breadcrumb__item"><a href="{{ url('homepage') }}">TOP</a></li>
<li class="ec-breadcrumb__item"><span>></span></li>
<li class="ec-breadcrumb__item">
{% if Category is not null %}
{% if Category.id == 115 %}
<p>{{ Category.name }}</p>
{% elseif Category.id == 118 %}
<p>自社ローン対象商品(分割24回のみ)</p>
{% else %}
<p>{{ Category.name }}商品一覧</p>
{% endif %}
{% else %}
<p>商品一覧</p>
{% endif %}
</li>
</ul>
</div>
</div>
<div class="ec-product-main">
{% if Category is null or Category.id != 115 %}
{% if Category.id != 118 %}
<div class="ec-product__inner v2">
<div class="inner">
<div class="ec-product__group">
<form name="form1" id="form1" method="get" action="?">
{% for item in search_form %}
{% if item.vars.value is not iterable %}
<input type="hidden" id="{{ item.vars.id }}"
name="{{ item.vars.full_name }}"
{% if item.vars.value is not empty %}value="{{ item.vars.value }}" {% endif %}/>
{% endif %}
{% endfor %}
<div class="conditions">
<div class="left">
<div class="list-btn">
{% if Category is not null and Category.id == 7 %}
<a class="btn-condition"><span>業種</span><span class="chk-cnt">1</span></a>
<a class="btn-condition"><span>形</span><span class="chk-cnt">1</span></a>
<a class="btn-condition"><span>馬力</span><span class="chk-cnt">1</span></a>
{% else %}
<a class="btn-condition"><span>機能</span><span class="chk-cnt">1</span></a>
<a class="btn-condition"><span>お部屋の広さ</span><span class="chk-cnt">1</span></a>
<a class="btn-condition"><span>メーカー</span><span class="chk-cnt">1</span></a>
{% endif %}
<a class="btn-condition"><span>価格</span><span class="chk-cnt">1</span></a>
</div>
<a class="reset">
<span>条件をリセット</span>
<img src="{{ asset('assets/img/common/ic-reset.png') }}" alt="">
</a>
<div class="count">
<p><span>検索結果</span>{{ pagination.totalItemCount }}件</p>
</div>
</div>
<div style="flex: 1;">
<div class="right">
{% if Category is not null and Category.id == 7 %}
{{ form_widget(search_form.kind, {'id': '', 'attr': {'class': 'item'}}) }}
{{ form_widget(search_form.shape, {'id': '', 'attr': {'class': 'item'}}) }}
{{ form_widget(search_form.power, {'id': '', 'attr': {'class': 'item'}}) }}
{{ form_widget(search_form.search_price_workplace, {'id': '', 'attr': {'class': 'item'}}) }}
{% else %}
{{ form_widget(search_form.feature, {'id': '', 'attr': {'class': 'item'}}) }}
{{ form_widget(search_form.room, {'id': '', 'attr': {'class': 'item'}}) }}
{{ form_widget(search_form.maker, {'id': '', 'attr': {'class': 'item'}}) }}
{{ form_widget(search_form.search_price_room, {'id': '', 'attr': {'class': 'item'}}) }}
{% endif %}
</div>
{% if Category is not null and Category.id == 8 %}
<div class="conditions__0yen">
{{ form_widget(search_form.search_0_yen, {'id': '', 'attr': {'class': 'item'}}) }}
</div>
{% endif %}
</div>
</div>
</form>
</div>
</div>
</div>
{% endif %}
{% else %}
<form name="form1" id="form1" method="get" action="?">
{% for item in search_form %}
{% if item.vars.value is not iterable %}
<input type="hidden" id="{{ item.vars.id }}"
name="{{ item.vars.full_name }}"
{% if item.vars.value is not empty %}value="{{ item.vars.value }}" {% endif %}/>
{% endif %}
{% endfor %}
</form>
{% endif %}
<div class="ec-product__inner">
<div class="inner">
<div class="ec-product__group">
{% if Category.id == 118 %}
<div class="title-add">
<p>他で購入できなかった方も安心<i>!</i><br />
高性能自社ローン限定商品<span>( 分割24回のみ) </span></p>
</div>
{% endif %}
<div class="arrange">
{{ form_widget(search_form.orderby, {'id': '', 'attr': {'class': 'order-by'}}) }}
</div>
{% if pagination.totalItemCount > 0 %}
<ul class="list-product" style="padding-left: 2px;">
{% for Product in pagination %}
{% set isTelProduct = false %}
{% set isLoanProduct = false %}
{% if Product.ProductCategories is not empty %}
{% for ProductCategory in Product.ProductCategories %}
{% if ProductCategory.Category.id == 117 %}
{% set isTelProduct = true %}
{% endif %}
{% if ProductCategory.Category.id == 118 %}
{% set isLoanProduct = true %}
{% endif %}
{% endfor %}
{% endif %}
<li class="product" style="margin: -1px 0 0 -1px;">
<a href="{{ url('product_detail', {'id': Product.id}) }}">
<img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
<div class="text">
<p style="font-weight: bold;">{{ Product.name }}</p>
{% if Product.description_list %}
<p>{{ Product.description_list|raw|nl2br }}</p>
{% endif %}
</div>
</a>
<div class="product__price">
<div class="group">
<div class="price">
{% if Product.hasProductClass %}
{% if Product.getPrice02Min == Product.getPrice02Max %}
<p>{{ Product.getPrice02IncTaxMin|price }}<small>(税込)</small></p>
{% else %}
<p>{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}<small>(税込)</small></p>
{% endif %}
{% else %}
<p {% if isLoanProduct == true %} class="text-b" {% endif %}>
{{ Product.getPrice02IncTaxMin|price }}<small>(税込)</small>
</p>
{% endif %}
</div>
<div class="list-cate">
{% if Product.ProductCategories is not empty %}
{% for ProductCategory in Product.ProductCategories %}
{% if ProductCategory.Category.Parent is not empty %}
{% set parentCat = ProductCategory.Category.Parent %}
{% if parentCat.id == 20 %}
<p>{{ ProductCategory.Category.name }}</p>
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
</div>
<div class="num-product">
{% if Category is not null and Category.id == 7 %}
{% if Product.ProductCategories is not empty %}
{% for ProductCategory in Product.ProductCategories %}
{% if ProductCategory.Category.Parent is not empty %}
{% set parentCat = ProductCategory.Category.Parent %}
{% if parentCat.id == 51 %}
<p>{{ ProductCategory.Category.name }}</p>
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% else %}
{% if Product.code_min is not empty %}
<p>品番 {{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</p>
{% endif %}
{% endif %}
</div>
</div>
{% if Product.stock_find %}
{% set form = forms[Product.id] %}
<form name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post">
{{ form_widget(form._token) }}
{{ form_widget(form.product_id) }}
{{ form_widget(form.ProductClass) }}
<div class="ec-productRole__actions" style="margin-top: 1rem;">
{% if form.classcategory_id1 is defined %}
<div class="ec-select">
<label class="form-label required" style="min-width: 3rem;">カラー</label>
{{ form_widget(form.classcategory_id1) }}
{{ form_errors(form.classcategory_id1) }}
</div>
{% if form.classcategory_id2 is defined %}
<div class="ec-select">
{{ form_widget(form.classcategory_id2) }}
{{ form_errors(form.classcategory_id2) }}
</div>
{% endif %}
{% endif %}
{% if isTelProduct != true %}
<div class="ec-numberInput">
<span style="min-width: 5rem">{{ '数量'|trans }}</span>
{{ form_widget(form.quantity, {'attr': {'class': 'quantity'}}) }}
{{ form_errors(form.quantity) }}
</div>
{% endif %}
</div>
{# {{ form_rest(form) }} #}
</form>
<div class="group">
<div class="list-btn ec-productRole__btn">
{% if isTelProduct == true %}
<a href="tel:080-0222-4466" class="cart cart-tel" style="border: none;">
<img src="{{ asset('assets/img/common/ic-tel2-white.png') }}" width="15" alt="">
<span>{{ '080-0222-4466'|trans }}</span>
</a>
{% elseif isLoanProduct == true %}
<a href="{{ url('loan_examination') }}?id={{ Product.id }}" class="cart cart-loan" style="border: none;">
<span>{{ '審査のお申込み'|trans }}</span>
</a>
{% else %}
<button type="submit" class="add-cart cart" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}" style="border: none;">
<img src="{{ asset('assets/img/common/ic-cart-v2.png') }}" alt="">
<span>カートに入れる</span>
</button>
{% endif %}
{% if BaseInfo.option_favorite_product %}
{% set is_favorite = false %}
{% if is_granted('ROLE_USER') %}
{% set is_favorite = repository('\\Eccube\\Entity\\CustomerFavoriteProduct').isFavorite(Customer, Product) %}
{% endif %}
{% if is_favorite == false %}
<a href="javascript:void(0);" class="favorite">
<span></span>
</a>
{% else %}
<a href="javascript:void(0);" class="favorite active" disabled="disabled">
<span></span>
</a>
{% endif %}
{% endif %}
</div>
</div>
{% if BaseInfo.option_favorite_product %}
<div style="display: none;">
<form class="list-add-favorite" action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
<div class="ec-productRole__btn">
<button type="submit" id="favorite" class="ec-blockBtn--cancel">
{{ 'お気に入りに追加'|trans }}
</button>
</div>
</form>
</div>
{% endif %}
{% else %}
<div class="group">
<div class="list-btn ec-productRole__btn">
<button type="button" class="cart" disabled="disabled">
<img src="{{ asset('assets/img/common/ic-cart-v2.png') }}" alt="">
<span>ただいま品切れ中です。</span>
</button>
</div>
</div>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
<div class="pagenation">
{% include "pager.twig" with {'pages': pagination.paginationData} %}
</div>
{% endif %}
<div class="list-btn">
{{ include('Block/list-btn.twig') }}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}