{% extends 'default_frame.twig' %}
{% set sale_type = app.request.attributes.get('product_list_sale_type', 1) %}
{% if sale_type == 2 %}
{% set body_class = 'product_page plaza-products' %}
{% else %}
{% set body_class = 'product_page normal-products' %}
{% endif %}
{% 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 () {
// 表示件数を変更
$('.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');
// 個数フォームのチェック
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);
});
});
});
$('.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()
});
$(function () {
$("input[type='checkbox']").each(function () {
$(this).click(function () {
$("#fm1").submit();
return false;
});
});
});
$(function(){
$("select.select_area").each(function(){
$(this).on("change", function () {
$("#fm1").submit();
return false;
});
});
});
// 商品一覧の高さを揃える
$(function () {
var h = 0;
$("#ichiran_coinlist ul li").each(function () {
if ($(this).height() > h) {
h = $(this).height();
}
});
$("#ichiran_coinlist ul li").css("height", h + "px");
});
// 並び順を変更
function fmSubmit() {
$("#fm1").submit();
}
// 表示件数を変更
function fnChangeDispNumber() {
$("#fm1").submit();
}
</script>
{% endblock %}
{% block main %}
<form name="form1" id="form1" method="get" action="?">
{% for item in search_form %}
<input type="hidden" id="{{ item.vars.id }}"
name="{{ item.vars.full_name }}"
{% if item.vars.value is not empty %}value="{{ item.vars.value }}" {% endif %}/>
{% endfor %}
</form>
<div id="wraps">
<div id="ichiran_wrap">
<form name="fm1" id="fm1" method="get" action="?">
<input type="hidden" id="category_id" name="category_id" value="{{ category_id }}" />
<dl>
<dt id="ichiran_left">
<div class="ichiran_left_wrap">
<p class="left_title0">条件で絞り込む</p>
<p class="left_title">価格帯</p>
<select id="search_price" name="search_price[]" class="select_area">
<option value="">選択してください</option>
{% for k,v in htPrice %}
{% set sel = (params["search_price"][k] is defined) ? "selected" : "" %}
<option value="{{ k }}" {{ sel }}>{{ v }}</option>
{% endfor %}
</select>
<p class="left_title">素材</p>
<select id="search_material" name="search_material[]" class="select_area">
<option value="">選択してください</option>
{% for k,v in htMaterial %}
{% set sel = (params["search_material"][k] is defined) ? "selected" : "" %}
<option value="{{ k }}" {{ sel }}>{{ v }}</option>
{% endfor %}
</select>
<p class="left_title">国</p>
<select id="search_country" name="search_country[]" class="select_area">
<option value="">選択してください</option>
{% for k,v in htCountry %}
{% set sel = (params["search_country"][k] is defined) ? "selected" : "" %}
<option value="{{ k }}" {{ sel }}>{{ v }}</option>
{% endfor %}
</select>
<p class="left_title">年代</p>
<select id="search_year" name="search_year[]" class="select_area">
<option value="">選択してください</option>
{% for k,v in htYear %}
{% set sel = (params["search_year"][k] is defined) ? "selected" : "" %}
<option value="{{ k }}" {{ sel }}>{{ v }}</option>
{% endfor %}
</select>
<p class="left_title">重量</p>
<select id="search_weight" name="search_weight[]" class="select_area">
<option value="">選択してください</option>
{% for k,v in htWeight %}
{% set sel = (params["search_weight"][k] is defined) ? "selected" : "" %}
<option value="{{ k }}" {{ sel }}>{{ v }}</option>
{% endfor %}
</select>
<p class="left_title">グレード数</p>
<select id="search_grade" name="search_grade[]" class="select_area">
<option value="">選択してください</option>
{% for k,v in htGrade %}
{% set sel = (params["search_grade"][k] is defined) ? "selected" : "" %}
<option value="{{ k }}" {{ sel }}>{{ v }}</option>
{% endfor %}
</select>
<p class="left_title">カテゴリー</p>
<select id="search_category" name="search_category[]" class="select_area">
<option value="">選択してください</option>
{% for k,v in htCategory %}
{% set sel = (params["search_category"][k] is defined) ? "selected" : "" %}
<option value="{{ k }}" {{ sel }}>{{ v }}</option>
{% endfor %}
</select>
<p class="left_title">レアリティ</p>
<select id="search_rare" name="search_rare[]" class="select_area">
<option value="">選択してください</option>
{% for k,v in htRare %}
{% set sel = (params["search_rare"][k] is defined) ? "selected" : "" %}
<option value="{{ k }}" {{ sel }}>{{ v }}</option>
{% endfor %}
</select>
<p class="left_title">発行枚数</p>
<select id="search_num" name="search_num[]" class="select_area">
<option value="">選択してください</option>
{% for k,v in htNum %}
{% set sel = (params["search_num"][k] is defined) ? "selected" : "" %}
<option value="{{ k }}" {{ sel }}>{{ v }}</option>
{% endfor %}
</select>
</div>
</dt><!-- ichiran_left -->
<dd id="ichiran_right">
{% if Category.name is defined %}
<h1>{{ Category.name }}</h1>
{% else %}
<h1>全商品</h1>
{% endif %}
<div id="narabikae">
<p>並び替え:</p>
<select id="" name="disp_number" onchange="javascript:fmSubmit();" class="select_area">
{% for k,v in htPageNum %}
{% set sel = (k == params["disp_number"]) ? "selected" : "" %}
<option value="{{ k }}" {{ sel }}>{{ v }}</option>
{% endfor %}
</select>
<select id="" name="orderby" onchange="javascript:fmSubmit();" class="select_area">
{% for k,v in htOrderBy %}
{% set sel = (k == params["orderby"]) ? "selected" : "" %}
<option value="{{ k }}" {{ sel }}>{{ v }}</option>
{% endfor %}
</select>
<label><input type="checkbox" id="stock_flg_chk" name="stock_flg_chk" value="1" {% if params.stock_flg_chk %}checked{% endif %}> 販売中のみ表示する</label>
</div><!--//narabikae-->
<hr>
{% include "pager.twig" with {'pages': pagination.paginationData} %}
{% include "page_num.twig" with {'pages': pagination.paginationData} %}
<div id="ichiran_coinlist">
<ul>
{% for Product in pagination %}
{% set p_id = Product.id %}
<li>
<a href="{{ url('product_detail', {'id': p_id}) }}">
<img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
{% if htStatus[p_id] is defined and htStatus[p_id] == "8" %}
<b class="tab_yoyaku">ご予約可</b>
{% else %}
{% if Product.stock_find %}
<b class="tab_zaiko">在庫有り</b>
{% if htJigane[p_id] is defined %}
<span class="stock_num">残り {{ Product.stock_min }}点</span>
{% endif %}
{% else %}
<em class="stock_ng">現在取扱いが御座いません。</em>
{% endif %}
{% endif %}
<h2>{{ Product.name }}</h2>
{% if htStatus[p_id] is defined and htStatus[p_id] == "8" %}
{# 予約品の場合 #}
{% if htMeyasu[p_id] is defined and htMeyasu[p_id] > 0 %}
<p class="meyasu_price">目安価格:{{ htMeyasu[p_id]|number_format }}円(税込)</p>
{% endif %}
{% elseif Product.getPrice02IncTaxMin == 0 %}
{# 価格0円の場合 #}
{% if htMeyasu[p_id] is defined and htMeyasu[p_id] > 0 %}
<p class="meyasu_price">目安価格:{{ htMeyasu[p_id]|number_format }}円(税込)</p>
{% else %}
<p class="coin_contact">
<a href="/product_contact?id={{ p_id }}">
誠にお手数ですが、お問合せお願い申し上げます。<br>新商品は現在価格が確定しておりませんので、確定次第ご案内申し上げます。
</a>
</p>
{% endif %}
{% else %}
{# 通常の価格表示 #}
<p>
{% if htCPrice[p_id] is defined and htCPrice[p_id] > 0 %}
<s>一般価格:{{ Product.getPrice02IncTaxMin|number_format }}円(税込)</s><br>
<strong>会員価格:{{ htCPrice[p_id]|number_format }}円(税込)</strong>
{% else %}
一般価格:{{ Product.getPrice02IncTaxMin|number_format }}円(税込)
{% endif %}
</p>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div><!-- ichiran_coinlist -->
{% include "pager.twig" with {'pages': pagination.paginationData} %}
{% include "page_num.twig" with {'pages': pagination.paginationData} %}
</dd><!-- ichiran_right -->
</dl>
</form>
</div><!-- ▲ichiran_wrap -->
</div>
{% endblock %}