{#
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 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()
});
</script>
{% endblock %}
{# カテゴリページ #}
{% set category_id = app.request.query.get('category_id') %}
{# カテゴリまたは検索クエリ #}
{% set page_type_name = category_id ? repository('Eccube\\Entity\\Category').find(category_id) : app.request.query.get('name') %}
{% block breadcrumb %}
<div class="breadcrumb-root">
<div class="breadcrumb-wrapper container">
<ul>
<li>
<a href="{{ url('homepage') }}">
トップ
</a>
<svg width="5" height="8" viewbox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.90918 1L3.63645 4L0.90918 7" stroke="#1A1A1A" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>
{{ page_type_name }}
</span>
</li>
</ul>
</div>
</div>
{% endblock %}
{% block main %}
<div class="xs-gutter">
<h2 class="product-list-page-title">
{{ page_type_name }}
</h2>
{% if category_id %}
<p class="product-list-page-description">
{{ page_type_name.description|raw }}
</p>
{% endif %}
</div>
{# SP用バナー #}
<div class="d-lg-none mt-6">
<img src="{{ asset('assets/img/sm-toujitu-banner2.png','user_data') }}" alt="12時までのご注文で当日発送" width="390" height="auto" class="w-100"/>
</div>
{# コンテンツ #}
<div
class="page-content-root mt-9 mt-md-15">
{# カテゴリページなら子カテゴリ用のテンプレートを読み込む - カテゴリページならばcategory_idがURLに含まれている #}
{% if category_id is not empty %}
{{ include('Block/category_list_child.twig', {
category: Category}) }}
{% else %}
{# 検索結果ページの場合はデフォルトのカテゴリリストを表示 #}
{{ include('Block/category_list.twig', {label: 'カテゴリーから探す', href_label: 'すべてのカテゴリーを見る'}) }}
{% endif %}
<div>
{% if search_form.category_id.vars.errors|length > 0 %}
<div class="ec-searchnavRole xs-gutter">
<p class="errormsg text-danger">{{ 'ご指定のカテゴリは存在しません'|trans }}</p>
</div>
{% else %}
<div>
<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>
{# 商品一覧のタイトルと件数とSelect #}
<div>
<h2 class="section-heading mb-4 xs-gutter">{{ page_type_name }}商品一覧</h2>
<div class="product-list-page-list-header">
<div>
検索結果
{% if search_form.category_id.vars.errors|length > 0 %}
<span class="product-list-page-list-header-label">0</span>
{% else %}
<span class="product-list-page-list-header-label">{{ pagination.totalItemCount }}</span>
{% endif %}
件
</div>
{% if pagination.totalItemCount > 0 %}
<div class="ec-select-custom">
{{ form_widget(search_form.disp_number, {'id': '', 'attr': {'class': 'disp-number'}}) }}
{{ form_widget(search_form.orderby, {'id': '', 'attr': {'class': 'order-by'}}) }}
</div>
{% endif %}
</div>
</div>
</div>
{% if pagination.totalItemCount > 0 %}
<div class="product-list-page-products-container">
{% for Product in pagination %}
<a href="{{ url('product_detail', {'id': Product.id}) }}" class="product-list-page-products-item">
<div class="product-list-page-products-item__image">
<img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy" {% endif %}>
</div>
<div class="flex-1">
<p class="product-list-page-products-item__name">{{ Product.name|striptags }}</p>
{% if Product.description_list %}
<p class="product-list-page-products-item__description_list">{{ Product.description_list|striptags }}</p>
{% endif %}
<div class="product-list-page-products-item-price">
<p class="product-list-page-products-item-price__number ">
{% if Product.hasProductClass %}
{% if Product.getPrice02Min == Product.getPrice02Max %}
{{ Product.getPrice02IncTaxMin|number_format }}
{% else %}
{{ Product.getPrice02IncTaxMin|price }}
~
{{ Product.getPrice02IncTaxMax|number_format }}
{% endif %}
{% else %}
{{ Product.getPrice02IncTaxMin|number_format }}
{% endif %}
</p>
<p class="product-list-page-products-item-price__yen">
円
</p>
{# 送料無料条件よりも商品価格が上だったら表示 9,800 #}
{% if Product.getPrice02IncTaxMin > BaseInfo.delivery_free_amount %}
<p class="product-list-page-products-item-price__freeship">
送料無料
</p>
{% endif %}
</div>
</div>
</a>
{% endfor %}
</div>
<div class="ec-pagerRole mt-7 mt-lg-10">
{% include "Block/pager.twig" with {'pages': pagination.paginationData} %}
</div>
{% else %}
<div class="ec-searchnavRole xs-gutter">
<p class="errormsg text-danger mt-4">{{ '検索条件に該当する商品はありませんでした。'|trans }}</p>
</div>
{% endif %}
{% endif %}
</div>
{# 当日発送・送料無料 PC only #}
<div class="d-none d-md-block">
{{ include('Block/large-banners.twig') }}
</div>
{# おすすめ当店在庫品 #}
{{ include('Block/recommend_list.twig', {label: 'おすすめ当店在庫品', category_id: 32}) }}
{# 取り扱いメーカー #}
<div class="d-none d-md-block">
{{ include('Block/makers.twig') }}
</div>
<div class="d-md-none">
{{ include('Block/large-banners.twig') }}
</div>
</div>
{% endblock %}