app/template/user_data/photo-product_list.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% block stylesheet %}
  14.     <link rel="stylesheet" href="{{ asset('assets/css/stock-photo/contents-list.css', 'user_data') }}">
  15.     <link rel="stylesheet" href="{{ asset('assets/css/stock-photo/main_module.css', 'user_data') }}">
  16.     <style>
  17.     .ec-topicpath{
  18.         display: flex;
  19.         flex-wrap: wrap;
  20.         margin: 30px 10% 0;
  21.     }
  23.     .ec-topicpath a{
  24.         color: #109F98;
  25.     }
  26.     .ec-topicpath__divider{
  27.         margin: 0 5px;
  28.     }
  29.     
  30.         .category-btn img{
  31.             margin-right: 15px;
  32.         }
  33.         .tab {
  34.             margin: 30px 15% 0;
  35.         }
  36.         
  37.         @media screen and (max-width:768px){
  38.             .tab {
  39.                 margin: 10px 3% 20px 3%;
  40.             }
  41.         }
  42.         
  43.         .lead-sentence {
  44.             display: flex;
  45.             flex-wrap: wrap;
  46.         }
  47.         
  48.         @media screen and (max-width:768px){
  49.             .tab img{
  50.                 width: 15%;
  51.             }
  52.             .category-btn{
  53.                 margin-bottom: 15px;
  54.             }
  55.         }
  57.         .tab-list {
  58.             display: flex;
  59.             gap: 1px;
  60.         }
  61.         @media screen and (max-width:768px){
  62.             .tab-list{
  63.                 flex-direction: row;
  64.             }
  65.         }
  67.         .tab-item {
  68.             border-radius: 5px 5px 0 0;
  69.             background-color: #109F98;
  70.             border-top: solid 1px #109F98;
  71.             border-right: solid 1px #109F98;
  72.             border-left: solid 1px #109F98;
  73.         }
  74.         .tab-item a{
  75.             color: #FFF;
  76.             padding: 0.5em 1.2em;
  77.             display: block;
  78.         }
  80.         @media screen and (max-width:768px){
  81.             .tab-item{
  82.                 flex: 1 1 auto;
  83.                 min-width: 0;
  84.             }
  85.             
  86.             .tab-item a{
  87.                 margin: 8px 0;
  88.                 text-align: center;
  89.                 white-space: nowrap;
  90.                 padding: 0.4em 0.6em;
  91.             }
  92.         }
  93.         
  94.         @media screen and (max-width:570px){
  95.             .tab-item{
  96.                 font-size: 12px;
  97.                 line-height: 2.5;
  98.             }
  99.         }
  100.         
  101.         @media screen and (max-width:450px){
  102.             .tab-item{
  103.                 font-size: 10px;
  104.             }
  105.         }
  107.         .tab-content:has(.tab-panel.active){
  108.             display: flex;
  109.             justify-content: space-between;
  110.             border-top:solid 1px #109F98;
  111.             border-right:solid 1px #109F98;
  112.             border-left:solid 1px #109F98;
  113.             border-radius: 0 8px 0 0;
  114.         }
  115.         
  116.         .tab-content:not(:has(.tab-panel.active)){
  117.             display: none;
  118.         }
  119.         
  120.         @media screen and (max-width:768px){
  121.             .tab-content{
  122.                 flex-direction: column;
  123.                 border-radius: 0;
  124.             }
  125.         }
  127.         .tab-panel {
  128.             display: none;
  129.         }
  131.         .tab-item.active {
  132.             background-color: #fff;
  133.             font-weight: bold;
  134.             position: relative;
  135.         }
  136.         
  137.         .tab-item.active a{
  138.             color: #109F98;
  139.         }
  140.         
  141.         .tab-item.active::before{
  142.             content: "";
  143.             width: 100%;
  144.             border-bottom: 4px solid  #FFF;
  145.             position: absolute;
  146.             bottom: -3px;
  147.             left: 0;
  148.         }
  150.         .tab-panel.active {
  151.             display: flex;
  152.             padding: 3%;
  153.             flex-wrap: wrap;
  154.             gap:20px 20px;
  155.             flex: 10;
  156.         }
  157.         @media screen and (max-width:768px){
  158.             .tab-panel.active{
  159.                 justify-content: center;
  160.                 
  161.             }
  162.         }
  164.         .tab-panel.active h2 {
  165.             font-size: 20px;
  166.             font-weight: bold;
  167.         }
  168.         
  169.         .search-form-box{
  170.             border: solid 1px #109F98;
  171.             border-radius: 0 0 8px 8px;
  172.         }
  173.         
  174.         .tab-content:not(:has(.active)) + .search-form-box{
  175.             border-radius: 0 8px 8px 8px;
  176.         }
  178.         @media screen and (max-width:768px){
  179.             .search-form-box .search-form-content{
  180.                 display: flex;
  181.                 justify-content: space-between;
  182.                 flex-direction: column;
  183.                 
  184.             }
  185.         }
  186.         .search-form-box .search-form-item{
  187.             margin-left: 3%;
  188.             margin-right: calc(3% + 20px);
  189.         }
  190.         @media screen and (max-width:768px){
  191.             .search-form-box .search-form-item{
  192.                 margin: 0 auto;
  193.                 
  194.             }
  195.         }
  196.         
  197.         .search-form-box .search-form-input{
  198.             -webkit-appearance: none;
  199.             -moz-appearance:none;
  200.             appearance: none;
  201.             border:1px solid #109F98;
  202.             border-radius:25px;
  203.             width: 100%;
  204.             padding-left: 20px;
  205.             height: 36px;
  206.             background-color: #f5f5f5;
  207.         }
  208.         @media screen and (max-width:768px){
  209.             .search-form-box .search-form-input{
  210.                 width: 88vw;
  211.                 box-sizing: border-box;
  212.             }
  213.             .search-form-box .search-form-input::placeholder{
  214.                 font-size: 2vw;
  215.             }
  216.         }
  217.         
  218.         select{
  219.             background:none;
  220.             appearance: none;
  221.             font:inherit;
  222.             padding:9.5px 10px;
  223.             border:1px solid #109F98;
  224.             box-sizing: border-box;
  225.             width: 250px;
  226.             border-radius:2px;
  227.             color: #111111;
  228.         }
  229.         
  230.         .select {
  231.           display: inline-block;
  232.           position: relative;
  233.           vertical-align: middle;
  234.           width: 100%;
  235.         }
  236.         
  237.         .select::before {
  238.           position: absolute;
  239.           top: 18px;
  240.           right: 16px;
  241.           width: 0;
  242.           height: 0;
  243.           border-width: 10px 5px 0 5px;
  244.           border-style: solid;
  245.           border-color: #109F98 transparent transparent transparent;
  246.           content: "";
  247.           pointer-events: none;
  248.         }
  249.         
  250.         /*検索セクション内にあるアイコン(svg)カラー指定*/
  251.         .search-form-box .ic {
  252.             filter: brightness(0) saturate(100%) invert(68%) sepia(68%) saturate(6159%) hue-rotate(145deg) brightness(90%) contrast(87%);
  253.         }
  254.         
  255.         /* 各条件見出し位置調整 */
  256.         .search-form-box .search-title {
  257.             padding: 15px 0 12px 0;
  258.             margin: 0 3%;
  259.             display: flex;
  260.             align-items: center;
  261.             gap: 6px;
  262.             color: #111111;
  263.         }
  264.         
  265.         /*セクション分け用のボーダー*/
  266.         .search-form-box .search-title {
  267.             border-top: 1px solid #D5DAED;
  268.         }
  269.         /*1番目（フリーワード検索）には不要なので非表示*/
  270.         .search-form-box .search-title:first-child {
  271.             border-top: none;
  272.         }
  273.         
  274.         .search-subtitle {
  275.             margin: 16px 0;
  276.         }
  277.         
  278.         /*各条件の副題にh2のトーン寄せ*/
  279.         .search-subtitle label,
  280.         .search-subtitle legend {
  281.             border: solid 2px #109F98;
  282.             border-right: none;
  283.             border-top: none;
  284.             border-bottom: none;
  285.             text-align: left;
  286.             padding: 0 0 0 8px;
  287.             color: #111111;
  288.         }
  289.         
  290.         .search-base-content,
  291.         .search-filter-content {
  292.             margin: 0 3% 3% 3%;
  293.             
  294.         }
  295.         
  296.         /*基本条件*/
  297.         .search-base-content {
  298.             display: flex;
  299.             flex-direction: row;
  300.             gap: 16px;
  301.         }
  302.         
  303.         /* 上記でselectに指定しているスタイルを基本条件用に上書き */
  304.         .search-base-item select {
  305.             border: 1px solid #D5DAED;
  306.         }
  307.         
  308.         @media (max-width: 768px) {
  309.             .search-base-item select {
  310.                 display: flex;
  311.                 flex-wrap: wrap;
  312.             }
  313.             
  314.             .search-base-item {
  315.                 flex: 1 1 200px;
  316.                 max-width: 100%;
  317.             }
  318.             
  319.             .search-base-item select {
  320.                 width: 100%;
  321.             }
  322.         }
  323.         
  324.         .search-filter-list {
  325.           display: flex;
  326.           flex-wrap: wrap;
  327.           gap: 10px;
  328.         }
  329.         
  330.         /*詳細フィルターのチェックボックス並べる数*/
  331.         /*PC表示：10個のチェックボックスが横に5個 × 2行*/
  332.         /*スマホ表示：10個のチェックボックスが横に3個 × 約4行(1個余りになるため)*/
  333.         .filter-checkbox-item {
  334.           display: flex;
  335.           align-items: center;
  336.           gap: 6px;
  337.           align-items: baseline;
  338.           width: calc(100% / 5 - 10px); /* PC: 5列 */
  339.           color: #111111;
  340.         }
  341.         
  342.         @media (max-width: 768px) {
  343.             .filter-checkbox-item {
  344.                 width: calc(100% / 3 - 10px); /* SP: 3列 */
  345.             }
  346.         }
  347.         
  348.         @media (max-width: 450px) {
  349.             .filter-checkbox-item {
  350.                 font-size: max(3.6vw, 12px);
  351.             }
  352.         }
  353.         
  354.         .image-wrapper {
  355.             position: relative;
  356.         }
  358.         .label-free {
  359.             position: absolute;
  360.             top: 0;
  361.             right: 0;
  362.             background-color: #e60012;
  363.             color: #fff;
  364.             font-weight: bold;
  365.             font-size: 14px;
  366.             padding: 3px 10px;
  367.             border-radius: 0 0 0 4px;
  368.             z-index: 1;
  369.         }
  370.         .ec-topicpath__item{
  371.         font-size: 17px;
  372.         }
  373.         
  374.         /* ▼ アコーディオン用 追加CSS ▼ */
  375.         :root{
  376.           --acc-green: #109F98;
  377.           --acc-line:  #0f8a80;
  378.         }
  379.         
  380.         .search-section + .search-section{
  381.           border-top: 1px solid var(--acc-line);
  382.         }
  383.         
  384.         .search-section__header{
  385.           display: flex;
  386.           align-items: center;
  387.           justify-content: space-between;
  388.           padding: 8px 12px;
  389.         }
  390.         
  391.         .accordion-toggle{
  392.           inline-size: 28px;
  393.           block-size: 28px;
  394.           display: grid;
  395.           place-items: center;
  396.           position: relative;
  397.           cursor: pointer;
  398.           border: 1px solid var(--acc-green);
  399.           border-radius: 4px;
  400.           background: var(--acc-green);
  401.         }
  402.         
  403.         .accordion-toggle::before{
  404.           content: "";
  405.           display: block;
  406.           inline-size: 8px;
  407.           block-size: 8px;
  408.           border-right: 2px solid #fff;
  409.           border-bottom: 2px solid #fff;
  410.           transform: rotate(45deg); /* ▼ */
  411.           transition: transform .2s ease;
  412.         }
  413.         
  414.         .is-open .accordion-toggle{
  415.           background: #fff;
  416.           border-color: var(--acc-green);
  417.         }
  418.         
  419.         .is-open .accordion-toggle::before{
  420.           border-right-color: var(--acc-green);
  421.           border-bottom-color: var(--acc-green);
  422.           transform: rotate(-135deg); /* ▲ */
  423.         }
  424.         
  425.         .search-section__panel{
  426.           padding: 12px;
  427.         }
  428.         
  429.         .visually-hidden{
  430.           position: absolute !important;
  431.           inline-size: 1px;
  432.           block-size: 1px;
  433.           margin: -1px;
  434.           padding: 0;
  435.           border: 0;
  436.           clip: rect(0 0 0 0);
  437.           overflow: hidden;
  438.         }
  439.         
  440.         .accordion-toggle:hover{ filter: brightness(0.98); }
  441.         .accordion-toggle:focus-visible{
  442.           outline: 2px solid var(--acc-line);
  443.           outline-offset: 2px;
  444.         }
  445.         
  446.         /* SPだけボタンを中央寄せ */
  447.         @media (max-width: 840px){
  448.           .sp-center{
  449.             display: flex;
  450.             justify-content: center;
  451.           }
  452.         }
  453.     </style>
  454. {% endblock %}
  456. {% set body_class = 'product_page' %}
  458. {% block javascript %}
  459.     <script>
  460.         eccube.productsClassCategories = {
  461.             {% for Product in pagination %}
  462.             "{{ Product.id|escape('js') }}": {{ class_categories_as_json(Product)|raw }}{% if loop.last == false %}, {% endif %}
  463.             {% endfor %}
  464.         };
  466.         $(function() {
  468.             // 表示件数を変更
  469.             $('.disp-number').change(function() {
  470.                 var dispNumber = $(this).val();
  471.                 $('#disp_number').val(dispNumber);
  472.                 $('#pageno').val(1);
  473.                 $("#form1").submit();
  474.             });
  476.             // // 並び順を変更
  477.             $('.order-by').change(function() {
  478.                 var orderBy = $(this).val();
  479.                 $('#orderby').val(orderBy);
  480.                 $('#pageno').val(1);
  481.                 $("#form1").submit();
  482.             });
  484.             $('.add-cart').on('click', function(e) {
  485.                 var $form = $(this).parents('li').find('form');
  487.                 // 個数フォームのチェック
  488.                 var $quantity = $form.parent().find('.quantity');
  489.                 if ($quantity.val() < 1) {
  490.                     $quantity[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  491.                     setTimeout(function() {
  492.                         loadingOverlay('hide');
  493.                     }, 100);
  494.                     return true;
  495.                 } else {
  496.                     $quantity[0].setCustomValidity('');
  497.                 }
  498.                 e.preventDefault();
  499.                 $.ajax({
  500.                     url: $form.attr('action'),
  501.                     type: $form.attr('method'),
  502.                     data: $form.serialize(),
  503.                     dataType: 'json',
  504.                     beforeSend: function(xhr, settings) {
  505.                         // Buttonを無効にする
  506.                         $('.add-cart').prop('disabled', true);
  507.                     }
  508.                 }).done(function(data) {
  509.                     // レスポンス内のメッセージをalertで表示
  510.                     $.each(data.messages, function() {
  511.                         $('#ec-modal-header').html(this);
  512.                     });
  514.                     $('.ec-modal').show()
  516.                     // カートブロックを更新する
  517.                     $.ajax({
  518.                         url: '{{ url('block_cart') }}',
  519.                         type: 'GET',
  520.                         dataType: 'html'
  521.                     }).done(function(html) {
  522.                         $('.ec-headerRole__cart').html(html);
  523.                     });
  524.                 }).fail(function(data) {
  525.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  526.                 }).always(function(data) {
  527.                     // Buttonを有効にする
  528.                     $('.add-cart').prop('disabled', false);
  529.                 });
  530.             });
  531.         });
  533.         $('.ec-modal-wrap').on('click', function(e) {
  534.             // モーダル内の処理は外側にバブリングさせない
  535.             e.stopPropagation();
  536.         });
  537.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  538.             $('.ec-modal').hide()
  539.         });
  540.         
  541.     </script>
  542.     <script>
  543.     //  絞り込み検索は、絞り込み検索ボタンが押されたとき、もしくは入力欄にフォーカスされたときに、
  544.     //  enterを押したときのみ発動する。カテゴリ検索を押したときは発火させない
  545.         document.addEventListener('DOMContentLoaded', function () {
  546.             const form = document.querySelector('.tab');
  547.             const categoryBtn = form.querySelector('button[name="search_parent_id"]:not(.word-search)');
  548.             const wordBtn = form.querySelector('.category-btn.word-search');
  549.             const wordInput = form.querySelector('input.search-form-input');
  550.         
  551.             // カテゴリ検索 → name を送らせない
  552.             categoryBtn.addEventListener('click', function () {
  553.                 if (wordInput) {
  554.                     wordInput.disabled = true;
  555.                 }
  556.             });
  557.         
  558.             // 絞り込み検索 → name を有効化
  559.             wordBtn?.addEventListener('click', function () {
  560.                 if (wordInput) {
  561.                     wordInput.disabled = false;
  562.                 }
  563.             });
  564.         
  565.             // Enterキーで submit 時に絞り込み検索の値を送信するための hidden input 挿入
  566.             form.addEventListener('submit', function (e) {
  567.                 if (document.activeElement === wordInput) {
  568.                     e.preventDefault();
  569.         
  570.                     // 既に存在していたら除去（2重防止）
  571.                     const existingHidden = form.querySelector('input[name="search_parent_id"].auto-injected');
  572.                     if (existingHidden) {
  573.                         existingHidden.remove();
  574.                     }
  575.         
  576.                     // ボタンのvalue属性をそのまま使う
  577.                     const valueFromButton = wordBtn?.getAttribute('value') || '';
  578.         
  579.                     const hidden = document.createElement('input');
  580.                     hidden.type = 'hidden';
  581.                     hidden.name = 'search_parent_id';
  582.                     hidden.value = valueFromButton;
  583.                     hidden.classList.add('auto-injected');
  584.                     form.appendChild(hidden);
  585.                     if (wordInput) {
  586.                         wordInput.disabled = false;
  587.                     }
  588.                     form.submit();
  589.                 }
  590.             });
  591.         });
  592.         
  593.         // カテゴリの詳細検索に値が入っていない場合、buttonのnameの値をcategory_idに変更する
  594.         // document.addEventListener('DOMContentLoaded', function () {
  595.         //     const form = document.querySelector('.tab');
  596.         //     const submitBtn = form.querySelector('button.category-btn');
  597.         //     const categorySelects = form.querySelectorAll('select[name="category_ids[]"]');
  598.         
  599.         //     form.addEventListener('submit', function (e) {
  600.         //         // category_ids[] に選択されている値が1つもない場合、ボタンのnameを変更
  601.         //         const hasValue = Array.from(categorySelects).some(select => select.value && select.value !== '');
  602.         
  603.         //         if (!hasValue) {
  604.         //             submitBtn.setAttribute('name', 'category_id');
  605.         //         } else {
  606.         //             submitBtn.setAttribute('name', 'search_parent_id');
  607.         //         }
  608.         //     });
  609.         // });
  610.     </script>
  611.     
  612.     <script>
  613.         (function () {
  614.           function setState(section, open) {
  615.             const btn   = section.querySelector('.js-accordion-toggle');
  616.             const panel = section.querySelector('.js-accordion-panel');
  617.             section.classList.toggle('is-open', open);
  618.             btn.setAttribute('aria-expanded', open ? 'true' : 'false');
  619.             panel.toggleAttribute('hidden', !open);
  620.             panel.setAttribute('aria-hidden', open ? 'false' : 'true');
  621.           }
  622.         
  623.           document.querySelectorAll('.search-form-box').forEach(function (box) {
  624.             // このフォーム（タブ）に属する2つのアコーディオン
  625.             const sections = box.querySelectorAll('.js-accordion');
  626.             if (!sections.length) return;
  627.         
  628.             const key = location.pathname + '#panel=' + (box.dataset.panel || 'default') + ':openId';
  629.         
  630.             // 初期オープン対象：保存 > data-open="1" > 先頭（=フリーワードを想定）
  631.             const savedId = sessionStorage.getItem(key);
  632.             let initial = Array.from(sections).find(s => s.id === savedId)
  633.                        || Array.from(sections).find(s => s.dataset.open === '1')
  634.                        || sections[0];
  635.         
  636.             // 初期反映
  637.             sections.forEach(s => setState(s, s === initial));
  638.             sessionStorage.setItem(key, initial.id);
  639.         
  640.             sections.forEach(function (sec) {
  641.               const btn = sec.querySelector('.js-accordion-toggle');
  642.               btn.addEventListener('click', function () {
  643.                 if (sec.classList.contains('is-open')) return;
  644.         
  645.                 sections.forEach(s => setState(s, s === sec));
  646.                 sessionStorage.setItem(key, sec.id);
  647.               });
  648.             });
  649.           });
  650.         })();
  651.     </script>
  652. {% endblock %}
  654. {% block main %}
  655.     {% set AllCategories = repository('Eccube\\Entity\\Category').getList() %}
  656.     {% set Categories = AllCategories|filter(c => c.id is not null and c.id == 18) %}
  657.     {% set selected_categories = app.request.query.get('category_ids', []) %}
  658.     {% set parent_category = app.request.query.get('search_parent_id') %}
  659.     {#パンくず#}
  660.         <div class="ec-searchnavRole__topicpath pc">
  661.             <ol class="ec-topicpath">
  662.                 <li class="ec-topicpath__item"><a href="{{ url('photo-product_list') }}">{{ 'front.product.all_category'|trans }}</a>
  663.                 </li>
  664.                 {% if Category is not null %}
  665.                     {% for Path in Category.path %}
  666.                         {% if not loop.first %} 
  667.                             <li class="ec-topicpath__divider">></li>
  668.                             <li class="ec-topicpath__item{% if loop.last %}--active{% endif %}">
  669.                                 <a href="{{ url('photo-product_list') }}?category_id={{ Path.id }}#contents-list">{{ Path.name }}</a>
  670.                             </li>
  671.                         {% endif %}
  672.                     {% endfor %}
  673.                 {% endif %}
  674.               {#  {% if selected_categories is not empty %}#}
  675.               {#  {% set first_matched = true %}#}
  676.                     {#{% for Category in Categories %}#}
  677.                     {#    {% for children in Category.Children %}#}
  678.                     {#        {% if children.id == parent_category %}#}
  679.                     {#            <li class="ec-topicpath__divider">></li>#}
  680.                     {#            <li><a href="{{ url('photo-product_list') }}?category_id={{ children.id }}">{{ children.name }}</a></li>#}
  681.                     {#        {% endif %}#}
  682.                     {#            {% for grandChildren in children.Children %}#}
  683.               {#                      {% for grandgrandChild in grandChildren.Children %}#}
  684.               {#                          {% if grandgrandChild.id in selected_categories %}#}
  685.               {#                              {% if first_matched %}#}
  686.               {#                                  <li class="ec-topicpath__divider">></li>#}
  687.               {#                                  <li><a href="{{ url('photo-product_list') }}?category_ids[]={{ grandgrandChild.id }}&search_parent_id={{parent_category}}">{{ grandgrandChild.name }}</a></li>#}
  688.               {#                                  {% set first_matched = false %}#}
  689.               {#                              {% else %}#}
  690.               {#                                  <li><a href="{{ url('photo-product_list') }}?category_ids[]={{ grandgrandChild.id }}&search_parent_id={{parent_category}}">・{{ grandgrandChild.name }}</a></li>#}
  691.               {#                              {% endif %}#}
  692.               {#                          {% endif %}#}
  693.               {#                      {% endfor %}#}
  694.               {#                  {% endfor %}#}
  695.               {#              {% endfor %}#}
  696.               {#      {% endfor %}#}
  697.               {#  {% endif %}#}
  698.               
  699.                 {#検索ワード#}
  700.                 {% if search_form.vars.value.name %}
  701.                     <li class="ec-topicpath__divider">></li>
  702.                     <li class="ec-topicpath__item"><a href="{{ url('photo-product_list') }}?name={{ search_form.vars.value.name }}#contents-list">{{ search_form.vars.value.name }}</a></li>
  703.                 {% endif %}
  704.                 
  705.                 {#撮影地（都道府県）#}
  706.                 {% if app.request.query.get('prefectures') %}
  707.                     <li class="ec-topicpath__divider">></li>
  708.                     <li class="ec-topicpath__item">
  709.                         <a href="{{ url('photo-product_list', {
  710.                             'category_id': app.request.query.get('category_id'),
  711.                             'prefectures': app.request.query.get('prefectures')
  712.                         }) }}#contents-list">
  713.                             {{app.request.query.get('prefectures')}}
  714.                         </a>
  715.                     </li>
  716.                 {% endif %}
  717.                 
  718.                 {#運行会社#}
  719.                 {% if app.request.query.get('operator') %}
  720.                     <li class="ec-topicpath__divider">></li>
  721.                     <li class="ec-topicpath__item">
  722.                             <a href="{{ url('photo-product_list', {
  723.                                 'category_id': app.request.query.get('category_id'),
  724.                                 'operator': app.request.query.get('operator')
  725.                             }) }}#contents-list">
  726.                                 {{app.request.query.get('operator')}}
  727.                             </a>
  728.                     </li>
  729.                 {% endif %}
  730.                 
  731.                 {#撮影年代#}
  732.                 {% if app.request.query.get('photographing_period') %}
  733.                     <li class="ec-topicpath__divider">></li>
  734.                     <li class="ec-topicpath__item">
  735.                             <a href="{{ url('photo-product_list', {
  736.                                 'category_id': app.request.query.get('category_id'),
  737.                                 'operator': app.request.query.get('photographing_period')
  738.                             }) }}#contents-list">
  739.                                 {{app.request.query.get('photographing_period')}}
  740.                             </a>
  741.                     </li>
  742.                 {% endif %}
  744.                 {#撮影地#}
  745.                 {% if app.request.query.get('locations') %}
  746.                     {% for location in app.request.query.get('locations') %}
  747.                             {% if loop.first %}
  748.                                 <li class="ec-topicpath__divider">></li>
  749.                             {% else %}
  750.                                 <li class="ec-topicpath__divider">・</li>
  751.                             {% endif %}
  752.                                 <li>
  753.                                     <a href="{{ url('photo-product_list', {
  754.                                         'category_id': app.request.query.get('category_id'),
  755.                                         'locations[]': location
  756.                                     }) }}#contents-list">
  757.                                         {{ location }}
  758.                                     </a>
  759.                                 </li>
  760.                     {% endfor %}
  761.                 {% endif %}
  762.                 
  763.                 {#撮影天候#}
  764.                 {% if app.request.query.get('weathers') %}
  765.                     {% for weather in app.request.query.get('weathers') %}
  766.                             {% if loop.first %}
  767.                                 <li class="ec-topicpath__divider">></li>
  768.                             {% else %}
  769.                                 <li class="ec-topicpath__divider">・</li>
  770.                             {% endif %}
  771.                                 <li>
  772.                                     <a href="{{ url('photo-product_list', {
  773.                                         'category_id': app.request.query.get('category_id'),
  774.                                         'weathers[]': weather
  775.                                     }) }}#contents-list">
  776.                                         {{ weather }}
  777.                                     </a>
  778.                                 </li>
  779.                     {% endfor %}
  780.                 {% endif %}
  782.                 {#撮影アングル#}
  783.                 {% if app.request.query.get('camera_angles') %}
  784.                     {% for camera_angle in app.request.query.get('camera_angles') %}
  785.                             {% if loop.first %}
  786.                                 <li class="ec-topicpath__divider">></li>
  787.                             {% else %}
  788.                                 <li class="ec-topicpath__divider">・</li>
  789.                             {% endif %}
  790.                                 <li>
  791.                                     <a href="{{ url('photo-product_list', {
  792.                                         'category_id': app.request.query.get('category_id'),
  793.                                         'camera_angles[]': camera_angle
  794.                                     }) }}#contents-list">
  795.                                         {{ camera_angle }}
  796.                                     </a>
  797.                                 </li>
  798.                     {% endfor %}
  799.                 {% endif %}
  801.                 {#撮影方式#}
  802.                 {% if app.request.query.get('color_types') %}
  803.                     {% for color_type in app.request.query.get('color_types') %}
  804.                             {% if loop.first %}
  805.                                 <li class="ec-topicpath__divider">></li>
  806.                             {% else %}
  807.                                 <li class="ec-topicpath__divider">・</li>
  808.                             {% endif %}
  809.                                 <li>
  810.                                     <a href="{{ url('photo-product_list', {
  811.                                         'category_id': app.request.query.get('category_id'),
  812.                                         'color_types[]': color_type
  813.                                     }) }}#contents-list">
  814.                                         {{ color_type }}撮影
  815.                                     </a>
  816.                                 </li>
  817.                     {% endfor %}
  818.                 {% endif %}
  820.                 {#一押し#}
  821.                 {% if app.request.query.get('features') %}
  822.                     {% for feature in app.request.query.get('features') %}
  823.                             {% if loop.first %}
  824.                                 <li class="ec-topicpath__divider">></li>
  825.                             {% else %}
  826.                                 <li class="ec-topicpath__divider">・</li>
  827.                             {% endif %}
  828.                                 <li>
  829.                                     <a href="{{ url('photo-product_list', {
  830.                                         'category_id': app.request.query.get('category_id'),
  831.                                         'features[]': feature
  832.                                     }) }}#contents-list">
  833.                                         {{ feature }}
  834.                                     </a>
  835.                                 </li>
  836.                     {% endfor %}
  837.                 {% endif %}
  838.             </ol>
  839.         </div>
  840.     <!-- カテゴリ検索 -->
  841.     {% if app.request.query.get('category_id') or app.request.query.get('search_parent_id') %}
  842.         <form action="{{ path('photo-product_list') }}#contents-list" method="get" class="tab" >
  843.             <ul class="tab-list">
  844.                 {% for tab in Categories%}
  845.                     {% for children in tab.Children %}
  846.                         {% set children_ids = [] %}
  847.                         {% for grandChild in children.Children %}
  848.                             {% set children_ids = children_ids|merge([grandChild.id]) %}
  849.                         {% endfor %}
  850.                             {% if children.id == app.request.query.get('category_id')
  851.                             or children.id == app.request.query.get('search_parent_id')
  852.                             or app.request.query.get('category_id') in children_ids
  853.                             %}
  854.                                 <li class="tab-item active" tabindex="0" id="{{children.id}}">
  855.                                     <a href="{{ url('photo-product_list', {'category_id': children.id}) }}">{{children.name}}</a>
  856.                                 </li>
  857.                             {% else %}
  858.                                 <li class="tab-item" tabindex="0" id="{{children.id}}">
  859.                                     <a href="{{ url('photo-product_list', {'category_id': children.id}) }}">{{children.name}}</a>
  860.                                 </li>
  861.                             {% endif %}
  862.                     {% endfor %}
  863.                 {% endfor %}
  864.             </ul>
  865.             <div class="search-form-box">
  866.                 <section id="freeword" class="search-section js-accordion" data-open="1">
  867.                     <header class="search-section__header">
  868.                         <div class="search-title">
  869.                             <img src="{{ asset('/html/user_data/assets/icon/btn_ic_search.svg ', 'user_data') }}" class="ic" style="width: auto"><h3>フリーワード検索</h3>
  870.                         </div>
  871.                         <button type="button"
  872.                             class="accordion-toggle js-accordion-toggle"
  873.                             aria-controls="freeword-panel"
  874.                             aria-expanded="true"
  875.                             title="閉じる">
  876.                             <span class="visually-hidden">フリーワード検索を開閉</span>
  877.                         </button>
  878.                     </header>
  879.                     <div id="freeword-panel"
  880.                         class="search-section__panel js-accordion-panel"
  881.                         aria-hidden="false">
  882.                         <div class="search-form-content">
  883.                             <div class="search-form-item">
  884.                                 <input type="text" name="name" class="search-form-input"
  885.                                  placeholder="駅名・線路名・形式・撮影者名など自由に検索できます"
  886.                                 {% if search_form.vars.value.name
  887.                                 and (app.request.query.get('search_parent_id') is not empty or app.request.query.get('category_id') is not empty) %}
  888.                                 value="{{ search_form.vars.value.name }}"
  889.                                 {% endif %}
  890.                                 >
  891.                             </div>
  892.                         </div>
  893.                         <div class="sp-center">
  894.                             <button type="submit" class="category-btn word-search">
  895.                                 <img src="{{ asset('/html/user_data/assets/icon/btn_ic_search.svg ', 'user_data') }}" alt="お気に入り">
  896.                                 検索
  897.                             </button>
  898.                         </div>
  899.                     </div>
  900.                 </section>
  902.                 <section id="details" class="search-section js-accordion" data-open="0">
  903.                     <header class="search-section__header">
  904.                         <div class="search-title">
  905.                             <img src="{{ asset('/html/user_data/assets/icon/title_ic_filter.svg ', 'user_data') }}" class="ic" style="width: auto"><h3>詳細フィルター</h3>
  906.                         </div>
  907.                         <button type="button"
  908.                                 class="accordion-toggle js-accordion-toggle"
  909.                                 aria-controls="details-panel"
  910.                                 aria-expanded="false"
  911.                                 title="開く">
  912.                           <span class="visually-hidden">詳細フィルターを開閉</span>
  913.                         </button>
  914.                     </header>
  916.                     <div id="details-panel"
  917.                         class="search-section__panel js-accordion-panel"
  918.                         hidden aria-hidden="true">
  919.                         <div class="search-base-content">
  920.                             <div class="search-base-item">
  921.                                 <h4 class="search-subtitle"><label for="pref-select">撮影地（都道府県）</label></h4>
  922.                                 <div class="select">
  923.                                     <select name="prefectures" id="pref-select">
  924.                                         <option value="">選択</option>
  925.                                         {% if prefectures is not empty %}
  926.                                             {% for prefecture in prefectures %}
  927.                                                 <option value="{{prefecture}}"
  928.                                                 {% if app.request.query.get('prefectures') and prefecture == app.request.query.get('prefectures') %}
  929.                                                     selected
  930.                                                 {% endif %}                                        
  931.                                                 >{{prefecture}}</option>
  932.                                             {% endfor %}
  933.                                         {% else %}
  934.                                             <option value="">該当なし</option>
  935.                                         {% endif %}
  936.                                     </select>
  937.                                 </div>
  938.                             </div>
  939.                             
  940.                             <div class="search-base-item">
  941.                                 <h4 class="search-subtitle"><label for="period-select">年代</label></h4>
  942.                                 <div class="select">
  943.                                     <select name="photographing_period" id="period-select" >
  944.                                         <option value="">選択</option>
  945.                                         {% if photographing_periods is not empty %}
  946.                                             {% for photographing_period in photographing_periods |sort %}
  947.                                                 <option value="{{photographing_period}}"
  948.                                                 {% if app.request.query.get('photographing_period') and photographing_period == app.request.query.get('photographing_period') %}
  949.                                                     selected
  950.                                                 {% endif %}  
  951.                                                 >{{photographing_period}}</option>
  952.                                             {% endfor %}
  953.                                         {% else %}
  954.                                             <option value="">該当なし</option>
  955.                                         {% endif %}
  956.                                     </select>
  957.                                 </div>
  958.                             </div>
  959.                         </div>
  960.                         
  961.                         <div class="search-filter-content">
  962.                             <h4 class="search-subtitle"><legend>撮影アングル</legend></h4> 
  963.                             <div class="search-filter-list">
  964.                                 {% if camera_angles is not empty %}
  965.                                     {% for camera_angle in camera_angles %}
  966.                                         <label class="filter-checkbox-item">
  967.                                             <input type="checkbox" name="camera_angles[]" value="{{camera_angle}}"
  968.                                                 {% if app.request.query.get('camera_angles') and camera_angle in app.request.query.get('camera_angles') %}
  969.                                                     checked
  970.                                                 {% endif %}    
  971.                                             >{{camera_angle}}
  972.                                         </label>
  973.                                     {% endfor %}
  974.                                 {% else %}
  975.                                     <p>該当する検索候補がありません。</p>
  976.                                 {% endif %}
  977.                             </div>
  978.         
  979.                             <h4 class="search-subtitle"><legend>カラー種別</legend></h4> {# id属性名・サブタイトル仮置き #}
  980.                             <div class="search-filter-list">
  981.                                 {% if color_types is not empty %}
  982.                                     {% for color_type in color_types %}
  983.                                         <label class="filter-checkbox-item">
  984.                                             <input type="checkbox" name="color_types[]" value="{{color_type}}"
  985.                                                 {% if app.request.query.get('color_types') and color_type in app.request.query.get('color_types') %}
  986.                                                     checked
  987.                                                 {% endif %}
  988.                                             >{{color_type}}
  989.                                         </label>
  990.                                     {% endfor %}
  991.                                 {% else %}
  992.                                     <p>該当する検索候補がありません。</p>
  993.                                 {% endif %}
  994.                             </div>
  995.                         </div>
  996.                         <div class="sp-center">
  997.                             <button type="submit" class="category-btn word-search">
  998.                                 <img src="{{ asset('/html/user_data/assets/icon/btn_ic_search.svg ', 'user_data') }}" alt="お気に入り">
  999.                                 検索
  1000.                             </button>
  1001.                         </div>
  1002.                     </div>
  1003.                 </section>
  1004.             </div>
  1005.             {% if app.request.query.get('category_id') or app.request.query.get('search_parent_id') %}
  1006.                 <input type="hidden" name="category_id" value="{{ app.request.query.get('category_id') ?: app.request.query.get('search_parent_id') }}">
  1007.             {% endif%}
  1008.         </form>
  1009.     {% endif %}
  1010. <section class="contents-list" id="contents-list">
  1011.     <!-- 商品リスト -->
  1013.     <div class="list-view">
  1014.         <div class="list-title">
  1015.             <div class="list-title-left">
  1016.                 {#カテゴリが存在する場合(通常の検索)#}
  1017.                 {% if app.request.query.get('category_id') %}
  1018.                         <h2 class="ec-topicpath__title">{{ Category.name }}<span>の写真</span></h2>
  1019.                         {% if search_form.vars.value.name %}
  1020.                             <p class="ec-topicpath__item">　>　{{ search_form.vars.value.name }}</p>
  1021.                         {% endif %}
  1022.                         {% if app.request.query.get('prefectures') %}
  1023.                             <p class="ec-topicpath__item">　>　{{app.request.query.get('prefectures')}}</p>
  1024.                         {% endif %}
  1025.                         {% if app.request.query.get('operator') %}
  1026.                             <p class="ec-topicpath__item">　>　{{app.request.query.get('operator')}}</p>
  1027.                         {% endif %}
  1028.                         {% if app.request.query.get('photographing_period') %}
  1029.                             <p class="ec-topicpath__item">　>　{{app.request.query.get('photographing_period')}}</p>
  1030.                         {% endif %}
  1031.                         {% if app.request.query.get('locations') %}
  1032.                             <p class="ec-topicpath__item">
  1033.                             {% for location in app.request.query.get('locations') %}
  1034.                                 {% if loop.first %}
  1035.                                     　>　{{ location }}
  1036.                                 {% else %}
  1037.                                     <span class="ec-topicpath__item">・{{ location }}</span>
  1038.                                 {% endif %}
  1039.                             {% endfor %}
  1040.                             </p>
  1041.                         {% endif %}
  1042.                         {% if app.request.query.get('weathers') %}
  1043.                             <p class="ec-topicpath__item">
  1044.                             {% for weather in app.request.query.get('weathers') %}
  1045.                                 {% if loop.first %}
  1046.                                     　>　{{ weather }}
  1047.                                 {% else %}
  1048.                                     <span class="ec-topicpath__item">・{{ weather }}</span>
  1049.                                 {% endif %}
  1050.                             {% endfor %}
  1051.                             </p>
  1052.                         {% endif %}
  1053.                         {% if app.request.query.get('camera_angles') %}
  1054.                             <p class="ec-topicpath__item">
  1055.                             {% for camera_angle in app.request.query.get('camera_angles') %}
  1056.                                 {% if loop.first %}
  1057.                                     　>　{{ camera_angle }}
  1058.                                 {% else %}
  1059.                                     <span class="ec-topicpath__item">・{{ camera_angle }}</span>
  1060.                                 {% endif %}
  1061.                             {% endfor %}
  1062.                             </p>
  1063.                         {% endif %}
  1064.                         {% if app.request.query.get('color_types') %}
  1065.                             <p class="ec-topicpath__item">
  1066.                             {% for color_type in app.request.query.get('color_types') %}
  1067.                                 {% if loop.first %}
  1068.                                     　>　{{ color_type }}
  1069.                                 {% else %}
  1070.                                     <span class="ec-topicpath__item">・{{ color_type }}</span>
  1071.                                 {% endif %}
  1072.                             {% endfor %}
  1073.                             </p>
  1074.                         {% endif %}
  1075.                         {% if app.request.query.get('features') %}
  1076.                             <p class="ec-topicpath__item">
  1077.                             {% for feature in app.request.query.get('features') %}
  1078.                                 {% if loop.first %}
  1079.                                     　>　{{ feature }}
  1080.                                 {% else %}
  1081.                                     <span class="ec-topicpath__item">・{{ feature }}</span>
  1082.                                 {% endif %}
  1083.                             {% endfor %}
  1084.                             </p>
  1085.                         {% endif %}
  1086.                 {% else %}
  1087.                     {#通常の全体検索#}
  1088.                     {% if search_form.vars.value.name %}
  1089.                         <div>
  1090.                             <h2 class="ec-topicpath__title">「{{ search_form.vars.value.name }}」<span style="padding: 0;">で検索</span></h2>
  1091.                         </div>
  1092.                     {% else %}
  1093.                     {#全体を表示#}
  1094.                         <h2 class="ec-topicpath__title">すべての写真</h2>
  1095.                     {% endif %}
  1096.                 {% endif %}
  1097.             </div>
  1098.             <div class="list-title-right">
  1099.                 {% if pagination.totalItemCount > 0 %}
  1100.                     {% set start = ((pagination.currentPageNumber - 1) * pagination.getItemNumberPerPage) + 1 %}
  1101.                 {% else %}
  1102.                     {% set start = 0 %}
  1103.                 {% endif %}
  1104.                 {% set end = min(pagination.currentPageNumber * pagination.getItemNumberPerPage, pagination.totalItemCount) %}
  1105.                 <p>({{ pagination.totalItemCount }}件中{{ start }}件-{{ end }}件を表示)</p>
  1106.             </div>
  1107.         </div>
  1109.         <!-- カテゴリ説明 -->
  1110.         {#デザインにないため、いったんコメントアウト#}
  1111.         {#<p class="lead-sentence">#}
  1112.         {#    <button type="submit" class="category-btn-list word-search" name="search_parent_id" value="1">#}
  1113.   {#              JR埼京線#}
  1114.   {#          </button>#}
  1115.   {#          <button type="submit" class="category-btn-list word-search" name="search_parent_id" value="2">#}
  1116.   {#              SL#}
  1117.   {#          </button>#}
  1118.         {#</p>#}
  1120.         <!-- リストエリア -->
  1121.         {% if pagination.totalItemCount > 0 %}
  1122.             <div>
  1123.                 <div class="list-area">
  1124.                 {% for Product in pagination %}
  1125.                     <div class="card-1">
  1126.                         <a href="{{ url('photo-product_detail', {'id': Product.id}) }}">
  1127.                             <div class="image-wrapper">
  1128.                                 <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  1129.                                     {% if Product.getPrice02IncTaxMin == 0 %}
  1130.                                         <div class="label-free">無料</div>
  1131.                                     {% endif %}
  1132.                             </div>
  1133.                             {#デザインにないため、いったんコメントアウト#}
  1134.                             {#<h3>{{ Product.name }}</h3>#}
  1135.                             {#<p class="price02-default">#}
  1136.                             {#    {{ Product.getPrice02IncTaxMin|price }}<span class="tax">（税込）</span>#}
  1137.                             {#</p>#}
  1138.                         </a>
  1139.                     </div>
  1140.                 {% endfor %}
  1141.                 </div>
  1142.                 <!-- ページネーション -->
  1143.                 {% set pages = pagination.paginationData %}
  1145.                 {% if pages.pageCount > 1 %}
  1146.                     <div class="ec-pager pagination">
  1147.                         {# 前へ #}
  1148.                         {% if pages.previous is defined %}
  1149.                             <a class="page-return" href="{{ path(
  1150.                             app.request.attributes.get('_route'),
  1151.                             app.request.query.all|merge({'pageno': pages.previous})) }}#contents-list">←</a>
  1152.                         {% endif %}
  1153.                         <div class="page-num">
  1154.                             {% for page in pages.pagesInRange %}
  1155.                                 {% if page == pages.current %}
  1156.                                     <a class="active" href="{{ path(
  1157.                                         app.request.attributes.get('_route'),
  1158.                                         app.request.query.all|merge({'pageno': page})) }}#contents-list"> {{ page }} </a>
  1159.                                 {% else %}
  1160.                                     <a href="{{ path(
  1161.                                         app.request.attributes.get('_route'),
  1162.                                         app.request.query.all|merge({'pageno': page})) }}#contents-list"> {{ page }} </a>
  1163.                                 {% endif %}
  1164.                             {% endfor %}
  1165.                         </div>
  1166.                         {# 次へ #}
  1167.                         {% if pages.next is defined %}
  1168.                             <a class="page-advance" href="{{ path(
  1169.                             app.request.attributes.get('_route'),
  1170.                             app.request.query.all|merge({'pageno': pages.next})) }}#contents-list">→</a>
  1171.                         {% endif %}
  1172.                     </div>
  1173.                 {% endif %}
  1174.             </div>
  1175.         {% else %}
  1176.             <p class="no_item">{{ 'お探しの商品は見つかりませんでした'|trans }}</p>
  1177.         {% endif %}
  1178.         
  1179.         <!-- カテゴリ説明 -->
  1180.         {#デザインにないため、いったんコメントアウト#}
  1181.         {#<p class="lead-sentence">#}
  1182.         {#    <button type="submit" class="category-btn-list word-search" name="search_parent_id" value="1">#}
  1183.   {#              JR埼京線#}
  1184.   {#          </button>#}
  1185.   {#          <button type="submit" class="category-btn-list word-search" name="search_parent_id" value="2">#}
  1186.   {#              SL#}
  1187.   {#          </button>#}
  1188.         {#</p>#}
  1189.     </div>
  1190.             
  1191. </section>
  1192. {% endblock %}