{#
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.
#}
{% set Category = repository("Eccube\\Entity\\Category").find(1) %}
{%
set products = repository("Eccube\\Entity\\Product")
.getQueryBuilderBySearchData({'category_id':Category})
.setMaxResults(5)
.getQuery()
.getResult()
%}
{# <div class="ec-categoryRole" id="Category">
<div class="ec-role">
<div class="ec-secHeading">
<div class="ec-secHeading_back">
<p class="outline">Category</p>
</div>
<h2 class="ec-secHeading__ja">{{ 'カテゴリ'|trans }}</h2>
</div>
<div class="ec-itemNav gnavi__list_sp">
<ul class="gnavi__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=1" class="sp">
ソファ<span class="dli-chevron-down"></span>
</a>
<ul class="dropdown__lists_sp">
<ul class="ec-itemNav__nav">
<li class="pc">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=1">
ソファ</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=2">
ベッド</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=5">
テーブル</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=7">
チェア</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=8">
収納家具</a>
</li>
</ul>
<ul class="ec-itemNav__nav">
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=9">
ラグ</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=10">
インテリア雑貨</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=11">
照明</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=12">
キッチン</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=13">
ガーデン・アウトドア</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=14">
ペット</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=15">
季節商品</a>
</li>
</ul>
</ul>
</ul>
</div>
</div>
<div class="ec-role">
<div class="ec-newItemRole">
<div class="category_list_scroll">
<div class="ec-newItemRole__list">
{% if products %}
{% for p in products %}
<div class="ec-newItemRole__listItem ec-newItemRole__list_category">
<a href="{{ url('product_detail', {'id': p.id}) }}">
<img src="{{ asset(p.main_list_image|no_image_product, 'save_image') }}">
</a>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
<div class="ec-more__btn">
<a class="more-btn" href="{{ url('product_list') }}">View More</a>
</div>
</div> #}
{#
<div class="ec-itemNav gnavi__list_sp">
<ul class="gnavi__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=1" class="sp">
ソファ<span class="dli-chevron-down"></span>
</a>
<ul class="dropdown__lists_sp">
<ul class="ec-itemNav__nav">
<li class="pc">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=1">
ソファ</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=2">
ベッド</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=5">
テーブル</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=7">
チェア</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=8">
収納家具</a>
</li>
</ul>
<ul class="ec-itemNav__nav">
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=9">
ラグ</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=10">
インテリア雑貨</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=11">
照明</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=12">
キッチン</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=13">
ガーデン・アウトドア</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=14">
ペット</a>
</li>
<li class="dropdown__list_sp">
<a href="{{ url('user_data', {'route': 'category'}) }}?category_id=15">
季節商品</a>
</li>
</ul>
</ul>
</ul>
</div> #}
<div class="ec-categoryRole" id="Category">
<div class="ec-role">
<div class="ec-secHeading">
<div class="ec-secHeading_back">
<p class="outline">Category</p>
</div>
<h2 class="ec-secHeading__ja">{{ 'カテゴリ'|trans }}</h2>
</div>
<div class="ec-itemNav">
{% set categories = repository("Eccube\\Entity\\Category").findBy({}, {'id': 'ASC'}, 12) %}
{% set selected_category_id = app.request.query.get('category_id') %}
{# カテゴリーリストSP #}
<div class="ec-itemNav__listSp">
<div class="ec-itemNav gnavi__list_sp">
<span class="ec-itemNav-dropdown js-dropdown">
選択してください<span class="dli-chevron-down"></span>
</span>
{# <div class="gnavi__list_sp"> #}
<div class="dropdown__lists_sp js-dropdown-contents">
<ul class="ec-itemNav__nav">
{% for category in categories %}
<li>
<button data-category-id="{{ category.id }}" {% if category.id == selected_category_id %} class="active" {% endif %}>
{{ category.name }}
</button>
</li>
{% endfor %}
</ul>
</div>
{# </div> #}
</div>
</div>
{# カテゴリーリストPC #}
<div class="ec-itemNav__listPc">
<ul class="ec-itemNav__nav">
{% for category in categories %}
<li class="pc">
<button data-category-id="{{ category.id }}" {% if category.id == selected_category_id %} class="active" {% endif %}>
{{ category.name }}
</button>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div
class="ec-role">
{# タブで切り替えたいエリア #}
{% for category in categories %}
<div class="ec-newItemRole js-tabChange" data-category-id="{{ category.id }}">
<div class="category_list_scroll">
<div class="ec-newItemRole__list">
{% set products = repository("Eccube\\Entity\\Product").getQueryBuilderBySearchData({'category_id': category}).setMaxResults(5).getQuery().getResult() %}
{% if products %}
{% for p in products %}
<div class="ec-newItemRole__listItem ec-newItemRole__list_category">
<a href="{{ url('product_detail', {'id': p.id}) }}">
<img src="{{ asset(p.main_list_image|no_image_product, 'save_image') }}">
</a>
</div>
{% endfor %}
{% else %}
<div class="ec-newItemRole__listItem ec-newItemRole__list_category">
商品がありません。
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
{# ボタン #}
{% for category in categories %}
<div class="ec-more__btn js-tabChange" data-category-id="{{ category.id }}">
<a class="more-btn" href="{{ url('product_list') }}?category_id={{ category.id }}">View More</a>
</div>
{% endfor %}
</div>
</div>
</div>{% block javascript %}
<script>
$(document).ready(function() {
var defaultCategoryId = 1;
var changeList = $('.js-tabChange');
changeList.each(function() {
var categoryDataId = $(this).data('category-id');
if (categoryDataId == defaultCategoryId) {
$(this).show();
} else {
$(this).hide();
}
});
$('.ec-itemNav__nav button').click(function() {
var categoryId = $(this).data('category-id');
changeList.each(function() {
var categoryDataId = $(this).data('category-id');
if (categoryDataId == categoryId) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
</script>
<script>
$(document).ready(function() {
$('.js-dropdown').click(function() {
$('.js-dropdown-contents').toggle();
});
$('.js-dropdown-contents button').click(function() {
$('.js-dropdown-contents').hide();
});
});
</script>{% endblock %}