app/template/default/Block/populer_search_word.twig line 1

Open in your IDE?
  1. {#
  2. 照明器具なら電材 Blue Wood, 電線・ケーブルなどのバナーリスト
  3. #}
  5. {% block stylesheet %}
  6.     <style>
  7.         .populer_search_word {
  8.             background: var(--background-gray);
  9.             padding: 40px 20px 60px;
  10.         }
  12.         @media screen and (min-width: 768px) {
  13.             .populer_search_word {
  14.                 padding: 24px 24px 32px;
  15.             }
  16.         }
  18.         .populer_search_word-container {
  19.             display: flex;
  20.             flex-wrap: wrap;
  21.             gap: 8px;
  22.             margin-top: 24px;
  23.         }
  25.         @media screen and (min-width: 768px) {
  26.             .populer_search_word-container {
  27.                 margin-top: 20px;
  28.             }
  29.         }
  31.         .populer_search_word-container__item {
  32.             display: flex;
  33.             padding: 6px 16px;
  34.             justify-content: center;
  35.             align-items: center;
  36.             border-radius: 16px;
  37.             border: 1px solid var(--border-gray);
  38.             background: #FFF;
  39.             color: var(--primary-black);
  40.             text-align: center;
  41.             font-size: 14px;
  42.             font-weight: 500;
  43.         }
  45.     </style>
  46. {% endblock %}
  48. {% set populer_search_words = [
  49.     { name: 'テレビドアホン' },
  50.     { name: 'LED電球' },
  51.     { name: 'サーキットブレーカ 2P' },
  52.     { name: 'サーキットブレーカ 2P' },
  53.     { name: '漏電ブレーカ 2P' },
  54.     { name: '漏電ブレーカ 2P' },
  55.     { name: '検索ワードリンク' },
  56.     { name: 'ダウンライト' }
  57. ] %}
  59. <section id="populer_search_word" class="populer_search_word">
  60.     {{ include('Block/heading_with_search_icon.twig', {label: '人気検索ワード'}) }}
  61.     <div class="populer_search_word-container">
  62.         {% for word in populer_search_words %}
  63.             <a href="{{ url('product_list') }}?name={{word.name}}" class="populer_search_word-container__item">
  64.                 {{ word.name }}
  65.             </a>
  66.         {% endfor %}
  67.     </div>
  68. </section>