{#
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' %}
{% set NowId = app.request.get('category_id') %}{# get から現在のカテゴリを取得#}
{% set NowPage = app.request.get('pageno') %}
{% if NowPage == null %}
{% set NowPage = 1 %}
{% 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').html(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-overlay, .ec-modal .ec-inlineBtn--cancel').on('click', function() {
$('.ec-modal').hide()
});
</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 %}
{% if Params.multi_category is defined %}
{% for cate in Params.multi_category %}
<input type="hidden" name="multi_category[{{ cate }}]" value="{{ cate }}">
{% endfor %}
{% endif %}
{% if Params.pricerange is defined %}
{% for key,pricerange in Params.pricerange %}
<input type="hidden" name="pricerange[{{ key }}]" value="{{ pricerange }}">
{% endfor %}
{% endif %}
</form>
<style>
.mvList{
background-image:url( {{ mv_path_pc }} )!important;
}
@media screen and (max-width: 768px){
.mvList{
background-image:url( {{ mv_path_sp }} )!important;
}
}
</style>
{% if Params.name is defined or Params.categories is defined %}
<div class="mvLow">
<h1 class="ttl01">COLLECTION</h1>
</div>
{% else %}
<div class="type01 mvList {% if mv_path_pc == "/html/template/raspia/img/low/low_cate_noimage.png" %}spTxtCenter{% endif %}" style="">
{% if NowId == "" %}
<div class="textArea type01">
<h1 class="ttl01">
{% if Categories is empty %}
ALL ITEM
{% else %}
{{ Categories['title'] }}
{% endif %}
</h1>
<p>全ての商品を見る
<br><span>All item</span></p>
</div>
{% else %}
{% if Category.mv_html != "" %}
{{ Category.mv_html|raw }}
{% else %}
<div class="textArea noimage spTxtCenter">
<h1 class="ttl01">
{# カテゴリ名の自動取得 #}
{% for Category in ListCategories %}
{% if Category.id == NowId %}
{{ Category.name }}
{% endif %}
{% if Category.children|length > 0 %}
{% for Cate in Category.children %}
{% if Cate.id == NowId %}
{{ Cate.name }}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</h1>
<p>全ての商品を見る
<br><span>All item</span></p>
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
{# Layout: CONTENTS_TOP #}
{% if Layout.ContentsTop %}
<div class="listBreadcrumbs">
<ul>
<li><a href="/">HOME</a></li>
<li><a href="{{ url('product_list') }}">コレクション</a></li>
{% if Category is not null %}
{% for Path in Category.path %}
<li><a href="{{ url('product_list') }}?category_id={{ Path.id }}">{{ Path.name }}</a></li>
{% endfor %}
{% endif %}
</ul>
</div>
<div class="spSearchArea">
<div class="menuTrigger" id="contentTopTrigger" data-cateId="searchMenu">
<p>
絞り込み検索
{# <span><img src="/html/template/raspia/img/common/menu_allow.webp"></span> #}
</p>
</div>
<div class="ec-layoutRole__contentTop">
{{ include('block.twig', {'Blocks': Layout.ContentsTop}) }}
</div>
</div>
{% endif %}
<section class="mainWrap01">
{% set ListCate = "" %}{# リストを表示したいカテゴリのデータ 初期化 #}
{% for Category in ListCategories %}
{% if Category.id == NowId %}
{% set ListCate = Category %}
{% else %}
{% for ChildCate in Category.children %}
{% if ChildCate.id == NowId %}
{% set ListCate = ChildCate.parent %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% macro tree(Category) %}
<li><span>{{ Category.name }}{% if Category.id == 24 or Category.id == 12 or Category.id == 41 or Category.id == 44 %}から探す{% endif %}</span>
{% if Category.children|length > 0 %}
<ul style="display: none">
<a href="{{ url('product_list') }}?category_id={{ Category.id }}"><li><span>すべてを表示</span></li></a>
{% for ChildCategory in Category.children %}
<a href="{{ url('product_list') }}?category_id={{ ChildCategory.id }}">{{ _self.tree(ChildCategory) }}</a>
{% endfor %}
</ul>
{% endif %}
</li>
{% endmacro %}
<!--<div class="flexWrapSb01">
<div class="txtBoxType01">
<h3 class="searchTtl01">検索結果</h3>
<p class="resultCountPc pc">{{ pagination.totalItemCount }} 件の商品の {{ NowPage }} ページ目を表示しています。</p>
</div>
{% if pagination.totalItemCount >= 5 %}
{% include "pagination.twig" with { 'pages' : pagination.paginationData } %}
{% endif %}
{% if pagination.totalItemCount == 0 and SimilarProducts != "" %}
<h2 class="comTtl03 type01">
「{{ Categories['title']}}」<br>
の該当商品はみつかりませんでした。
</h2>
<div class="flexBox type01">
<a href="/products/list">商品一覧へ戻る</a>
<a href="/">トップページへ戻る</a>
</div>
{% endif %}
</div>-->
<div class="searchKeywords">
<p class="ttl">絞り込み条件:</p>
<p class='keywords'>
{{ SearchKeywords }}
</p>
</div>
<div class="navi cf">
<div class="cf categoryWrapp">
<ul class="resultInfoBox sp">
<li class="count">
全 {{ pagination.totalItemCount }} 件 {{ NowPage }} ページ目
</li>
{% if pagination.totalItemCount > 0 %}
<li><form name="page_navi_top" id="page_navi_top" action="?">
<div id="result_info_box__menu_box" class="no-padding ec-searchnavRole__actions">
<ul id="result_info_box__menu" class="pagenumberarea clearfix ec-select">
<li id="result_info_box__disp_menu">
{{ form_widget(disp_number_form, {'id': '', 'attr': {'class': 'disp-number'}}) }}
</li>
<li id="result_info_box__order_menu">
{{ form_widget(order_by_form, {'id': '', 'attr': {'class': 'order-by'}}) }}
</li>
</ul>
</div>
{% for f in disp_number_form.getIterator %}
{% if f.vars.name matches '[^plg*]' %}
{{ form_label(f) }}
{{ form_widget(f) }}
{{ form_errors(f) }}
{% endif %}
{% endfor %}
{% for f in order_by_form.getIterator %}
{% if f.vars.name matches '[^plg*]' %}
{{ form_label(f) }}
{{ form_widget(f) }}
{{ form_errors(f) }}
{% endif %}
{% endfor %}
{% else %}
<p><strong><span>{{ pagination.totalItemCount }}</span>件</strong>
該当する商品はありません</p>
{% endif %}
</form>
</li>
</ul>
</div>
</div>
<main>
<!-- ▼item_list▼ -->
<div class="itemList" data-list-name="コレクション{% if Category is not null %}{% for Path in Category.path %}{{ Path.name }} {% endfor %}{% endif %} 商品一覧">
{% for Product in pagination %}
{% if Product.hasProductClass -%}
{% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
{% set price = Product.getPrice01()[0] %}
{% set taxIn = Product.getPrice01IncTaxs()[0] %}
{% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
{% set price = Product.getPrice01()[0] %}
{% set taxIn = Product.getPrice01IncTaxs()[0] %}
{% endif %}
{% else -%}
{% if Product.getPrice01Max is not null %}
{% set price = Product.getPrice01()[0] %}
{% set taxIn = Product.getPrice01IncTaxs()[0] %}
{% endif %}
{% endif -%}
{% if Product.hasProductClass -%}
{% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
{% set price = Product.getPrice02()[0] %}
{% set taxIn = Product.getPrice02IncTaxs()[0] %}
{% else %}
{% set price = Product.getPrice02()[0] %}
{% set taxIn = Product.getPrice02IncTaxs()[0] %}
{% endif %}
{% else -%}
{% set price = Product.getPrice02()[0] %}
{% set taxIn = Product.getPrice02IncTaxs()[0] %}
{% endif -%}
<div class="item product-box" data-id="{{ Product.id }}" data-name="{{ Product.name }}" data-category="{% for ProductCategory in Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if(loop.parent.loop.index != 1) %}{{ Category.name }}{% endif %}{% endfor %}{% endfor %}
" data-price="{{ Product.getPrice02IncTaxMax() }}">
<a href="{{ url('product_detail', {'id': Product.id}) }}" class="product-link">
<img class="lazyload" src="/html/template/raspia/img/common/load_logo.png" data-src="{{ asset(Product.main_list_image.getWebpImage|no_image_product, 'save_image') }}">
<h3 class="ttl">{{ Product.name }}</h3>
</a>
<p>
{{ taxIn|price }} <span class="small">(税込)</span>
{% if Product.stock_find %}
{% else %}
<span class="soldOut">SOLD OUT</span>
{% endif %}
</p>
</div>
{% endfor %}
</div>
<!-- ▲item_list▲ -->
</main>
{% if pagination.totalItemCount == 0 and SimilarProducts != "" %}
<div>
<h2 class="comTtl03 type01">
「{{ Categories['title']}}」<br>
の該当商品はみつかりませんでした。
</h2>
<div class="flexBox type01">
<a href="/products/list">商品一覧へ戻る</a>
<a href="/">トップページへ戻る</a>
</div>
</div>
{% else %}
<div class="flexWrapSb01 type02">
<div class="txtBoxType01">
<p class="resultCountPc pc">{{ pagination.totalItemCount }} 件の商品の {{ NowPage }} ページ目を表示しています。</p>
</div>
{% if pagination.totalItemCount >= 5 %}
{% include "pagination.twig" with { 'pages' : pagination.paginationData } %}
{% endif %}
</div>
{% endif %}
{% if SimilarProducts != "" %}
<div class="ec-secHeading">
<h2 class="comTtl03 type02">「{{ Categories['title']}}」<br>関連商品</h2>
</div>
<!-- ▼item_list▼ -->
<div class="itemList" data-list-name="コレクション{% if Category is not null %}{% for Path in Category.path %}{{ Path.name }} {% endfor %}{% endif %} 商品一覧">
{% for Product in SimilarProducts %}
<div class="item product-box" data-id="{{ Product.id }}" data-name="{{ Product.name }}" data-category="{% for ProductCategory in Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if(loop.parent.loop.index != 1) %}{{ Category.name }}{% endif %}{% endfor %}{% endfor %}
" data-price="{{ Product.getPrice02IncTaxMax() }}">
<a href="{{ url('product_detail', {'id': Product.id}) }}" class="product-link">
<img class="lazyload" src="/html/template/raspia/img/common/load_logo.png" data-src="{{ asset(Product.main_list_image.getWebpImage|no_image_product, 'save_image') }}">
<h3 class="ttl">{{ Product.name }}</h3>
</a>
<p>
{{ (Product.default_price * 1.1)|price }} <span class="small">(税込)</span>
{% if Product.stock_find %}
{% else %}
<span class="soldOut">SOLD OUT</span>
{% endif %}
</p>
</div>
{% endfor %}
</div>
{% endif %}
</section>
<!--Criteo BEGIN-->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
async function sha256(text){
const uint8 = new TextEncoder().encode(text)
const digest = await crypto.subtle.digest('SHA-256', uint8)
return Array.from(new Uint8Array(digest)).map(v => v.toString(16).padStart(2,'0')).join('')
}
{% if is_granted('ROLE_USER') %}
var crto_hem = sha256("{{ app.user.email }}");
{% endif %}
var crto_list =[];
{% for crto_list in pagination %}
crto_list.push("{{ crto_list.id }}");
{% endfor %}
if(crto_list.length > 0){
crto_list_top3 =[];
for(var i =0; i< 3; i++){
if(crto_list[i] !== undefined){
crto_list_top3.push(crto_list[i]);
}
}
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
{ event: "setAccount", account: 82881 },
{ event: "setSiteType", type: /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d" },
{% if is_granted('ROLE_USER') %}
{ event: "setEmail", email: crto_hem, hash_method: "sha256" },
{% endif %}
{ event: "viewList", item: crto_list_top3, ecpplugin: "ec-cube-4gd"}
);
}
</script>
<div id="lineButtonArea">
<a href="https://lin.ee/qJTCKzZ" target="_blank" alt="LINEで相談" onclick="gtag('event', 'tap', {'event_category': 'entry','event_label': 'line'});"><span>LINE</span>で相談</a>
</div>
<!--Criteo END-->
{% endblock %}