Symfony Profiler

{% extends 'fullwidth_frame.twig' %}
{% block main %}
{# ブランド[カテゴリID:34]の子カテゴリ一覧を表示 #}
{% set parentId = 34 %}
{% set ParentCategory = repository('Eccube\\Entity\\Category').find(parentId) %}
{% set childCategories = ParentCategory.children|sort((a, b) => a.sortNo <=> b.sortNo) %}
<div class="home_title__inner">
<h2 class="home_en_title "><span class="en">Brand</span><small>ブランドから探す</small></h2>
</div>
<div class="brand_sort_area">
<ul class="sort-btn">
<li class="sort_search_btn">
<input class="search-field form-control" type="text" name="search" placeholder="ブランド名検索">
<img class="seach_icon" src="{{ asset('assets/icon/search-dark.svg') }}" alt="">
</li>
<li class="alphabet_wrap">
<ul class="alphabet">
<li class="brand_A"><span>A</span></li>
<li class="brand_B"><span>B</span></li>
<li class="brand_C"><span>C</span></li>
<li class="brand_D"><span>D</span></li>
<li class="brand_E"><span>E</span></li>
<li class="brand_F"><span>F</span></li>
<li class="brand_G"><span>G</span></li>
<li class="brand_H"><span>H</span></li>
<li class="brand_I"><span>I</span></li>
<li class="brand_J"><span>J</span></li>
<li class="brand_K"><span>K</span></li>
<li class="brand_L"><span>L</span></li>
<li class="brand_M"><span>M</span></li>
<li class="brand_N"><span>N</span></li>
<li class="brand_O"><span>O</span></li>
<li class="brand_P"><span>P</span></li>
<li class="brand_Q"><span>Q</span></li>
<li class="brand_R"><span>R</span></li>
<li class="brand_S"><span>S</span></li>
<li class="brand_T"><span>T</span></li>
<li class="brand_U"><span>U</span></li>
<li class="brand_V"><span>V</span></li>
<li class="brand_W"><span>W</span></li>
<li class="brand_X"><span>X</span></li>
<li class="brand_Y"><span>Y</span></li>
<li class="brand_Z"><span>Z</span></li>
</ul>
</li>
</ul>
<ul class="grid">
{% for category in childCategories|sort((a, b) => a.slug <=> b.slug) %}
<li class="item brand_{{ category.slug }}">
<a class="item_content" href="#target{{ category.id }}" data-id="{{ category.id }}">
<div class="thumb">
<img src="{{ asset('rich_category/'~category.file_name,'save_image') }}">
</div>
<span class="ttl_en">{{ category.englishText }}</span>
<span class="ttl">{{ category.japaneseText }}</span>
<span class="search_keywords">{{ category.searchKeywords }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
<section class="brand_display_section">
{# A〜E #}
{% set filteredCategories = childCategories|filter(category => category.slug|slice(0, 1)|upper in ['A', 'B', 'C', 'D', 'E']) %}
{% if filteredCategories %}
<div class="home_title__inner">
<h2 class="home_en_title "><span class="en">A-E</span></h2>
</div>
<div class="category_detail_list">
{% for category in filteredCategories|sort((a, b) => a.slug <=> b.slug) %}
<a id="target{{ category.id }}" class="category_detail_block" href="{{ url('homepage') }}products/list?category_id={{ category.id }}">
<div class="category_detail_block__inner">
<div class="category_detail_block__img">
<img src="{{ asset('rich_category/'~category.file_name,'save_image') }}">
</div>
<div class="category_detail_block__txt">
<div class="logo_ja_block">
<img src="{{ asset('rich_category/'~category.logo_file_name,'save_image') }}">
<p class="cat_ttl">{{ category.japaneseText }}</p>
</div>
<p>{{ category.content|default('説明文がありません') }}</p>
<div class="text-right">
<span class="base_link_brn">
<span>詳細を見る</span>
<span>詳細を見る</span>
</span>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
{% endif %}
{# F〜J #}
{% set filteredCategories = childCategories|filter(category => category.slug|slice(0, 1)|upper in ['F', 'G', 'H', 'I', 'J']) %}
<div class="home_title__inner">
<h2 class="home_en_title "><span class="en">F-J</span></h2>
</div>
{% if filteredCategories %}
<div class="category_detail_list">
{% for category in filteredCategories|sort((a, b) => a.slug <=> b.slug) %}
<a id="target{{ category.id }}" class="category_detail_block" href="{{ url('homepage') }}products/list?category_id={{ category.id }}">
<div class="category_detail_block__inner">
<div class="category_detail_block__img">
<img src="{{ asset('rich_category/'~category.file_name,'save_image') }}">
</div>
<div class="category_detail_block__txt">
<div class="logo_ja_block">
<img src="{{ asset('rich_category/'~category.logo_file_name,'save_image') }}">
<p class="cat_ttl">{{ category.japaneseText }}</p>
</div>
<p>{{ category.content|default('説明文がありません') }}</p>
<div class="text-right">
<span class="base_link_brn">
<span>詳細を見る</span>
<span>詳細を見る</span>
</span>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
{% endif %}
{# K〜O #}
{% set filteredCategories = childCategories|filter(category => category.slug|slice(0, 1)|upper in ['K', 'L', 'M', 'N', 'O']) %}
{% if filteredCategories %}
<div class="home_title__inner">
<h2 class="home_en_title "><span class="en">K-O</span></h2>
</div>
<div class="category_detail_list">
{% for category in filteredCategories|sort((a, b) => a.slug <=> b.slug) %}
<a id="target{{ category.id }}" class="category_detail_block" href="{{ url('homepage') }}products/list?category_id={{ category.id }}">
<div class="category_detail_block__inner">
<div class="category_detail_block__img">
<img src="{{ asset('rich_category/'~category.file_name,'save_image') }}">
</div>
<div class="category_detail_block__txt">
<div class="logo_ja_block">
<img src="{{ asset('rich_category/'~category.logo_file_name,'save_image') }}">
<p class="cat_ttl">{{ category.japaneseText }}</p>
</div>
<p>{{ category.content|default('説明文がありません') }}</p>
<div class="text-right">
<span class="base_link_brn">
<span>詳細を見る</span>
<span>詳細を見る</span>
</span>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
{% endif %}
{# P〜T #}
{% set filteredCategories = childCategories|filter(category => category.slug|slice(0, 1)|upper in ['P', 'Q', 'R', 'S', 'T']) %}
{% if filteredCategories %}
<div class="home_title__inner">
<h2 class="home_en_title "><span class="en">P-T</span></h2>
</div>
<div class="category_detail_list">
{% for category in filteredCategories|sort((a, b) => a.slug <=> b.slug) %}
<a id="target{{ category.id }}" class="category_detail_block" href="{{ url('homepage') }}products/list?category_id={{ category.id }}">
<div class="category_detail_block__inner">
<div class="category_detail_block__img">
<img src="{{ asset('rich_category/'~category.file_name,'save_image') }}">
</div>
<div class="category_detail_block__txt">
<div class="logo_ja_block">
<img src="{{ asset('rich_category/'~category.logo_file_name,'save_image') }}">
<p class="cat_ttl">{{ category.japaneseText }}</p>
</div>
<p>{{ category.content|default('説明文がありません') }}</p>
<div class="text-right">
<span class="base_link_brn">
<span>詳細を見る</span>
<span>詳細を見る</span>
</span>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
{% endif %}
{# U〜Z #}
{% set filteredCategories = childCategories|filter(category => category.slug|slice(0, 1)|upper in ['U', 'V', 'W', 'X', 'Y','Z']) %}
{% if filteredCategories %}
<div class="home_title__inner">
<h2 class="home_en_title "><span class="en">U-Z</span></h2>
</div>
<div class="category_detail_list">
{% for category in filteredCategories|sort((a, b) => a.slug <=> b.slug) %}
<a id="target{{ category.id }}" class="category_detail_block" href="{{ url('homepage') }}products/list?category_id={{ category.id }}">
<div class="category_detail_block__inner">
<div class="category_detail_block__img">
<img src="{{ asset('rich_category/'~category.file_name,'save_image') }}">
</div>
<div class="category_detail_block__txt">
<div class="logo_ja_block">
<img src="{{ asset('rich_category/'~category.logo_file_name,'save_image') }}">
<p class="cat_ttl">{{ category.japaneseText }}</p>
</div>
<p>{{ category.content|default('説明文がありません') }}</p>
<div class="text-right">
<span class="base_link_brn">
<span>詳細を見る</span>
<span>詳細を見る</span>
</span>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
{% endif %}
</section>
{% endblock %}
{% block javascript %}
<script>
$(window).on('load',function(){
$('.grid').addClass('show');
//Muuriギャラリープラグイン設定
var grid = new Muuri('.grid', {
});
// 検索機能
$('input.search-field').on('input', function () {
var searchText = $(this).val().toLowerCase();
grid.filter(function (item) {
var element = item.getElement();
var textContent = element.textContent || element.innerText;
return textContent.toLowerCase().indexOf(searchText) > -1;
});
});
//並び替えボタン設定
$('.sort-btn ul li').on('click',function(){//並び替えボタンをクリックしたら
var className = $(this).attr("class")//クリックしたボタンのクラス名を取得
className = className.split(' '); //「.sort-btn ul li」のクラス名を分割して配列にする
//ボタンにクラス名activeがついている場合
if($(this).hasClass("active")){
if(className[0] != "all"){ //ボタンのクラス名がallでなければ
$(this).removeClass("active"); //activeクラスを消す
var selectElms = $(".sort-btn ul li.active"); //ボタン内にactiveクラスがついている要素を全て取得
if(selectElms.length == 0){ //取得した配列内にactiveクラスがついている要素がなければ
$(".sort-btn ul li.all").addClass("active");//ボタンallにactiveを追加し
grid.show(''); //ギャラリーの全ての画像を表示
}else{
filterDo(); //取得した配列内にactiveクラスがついている要素があれば並び替えを行う
}
}
}
//ボタンにクラス名activeがついていない場合
else{
if(className[0] == "all"){ //ボタンのクラス名にallとついていたら
$(".sort-btn ul li").removeClass("active"); //ボタンのli要素の全てのactiveを削除し
$(this).addClass("active"); //allにactiveクラスを付与
grid.show(''); //ギャラリーの全ての画像を表示
}else{
if($(".all").hasClass("active")){ //allクラス名にactiveクラスが付いていたら
$(".sort-btn ul li.all").removeClass("active");//ボタンallのactiveクラスを消し
}
$(this).addClass("active"); //クリックしたチェックボックスへactiveクラスを付与
filterDo(); //並び替えを行う
}
}
});
//画像の並び替え設定
function filterDo(){
var selectElms = $(".sort-btn ul li.active"); //全てのボタンのactive要素を取得
var selectElemAry = []; //activeクラスがついているボタンのクラス名（sortXX）を保存する配列を定義
$.each(selectElms, function(index, selectElm) {
var className = $(this).attr("class") //activeクラスがついている全てのボタンのクラス名（sortXX）を取得
className = className.split(' '); //ボタンのクラス名を分割して配列にし、
selectElemAry.push("."+className[0]); //selectElemAry配列に、チェックのついたクラス名（sortXX）を追加
})
str = selectElemAry.join(','); //selectElemAry配列に追加されたクラス名をカンマ区切りでテキストにして
grid.filter(str); //grid.filter(str);のstrに代入し、ボタンのクラス名と<li>につけられたクラス名が一致したら出現
}
});
</script>
{% endblock %}

app/template/default/brand.twig line 1