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

Open in your IDE?
  1. {% block javascript %}
  2.     <script type="text/javascript">
  3.         $(function(){
  4.             $(".top_menu").click(function(){
  5.                 $(".top_menu").removeClass("active");
  6.                 $(".top_menu_content").removeClass("active");
  7.                 $(this).addClass("active");
  8.                 var id = $(this).attr('id');
  9.                 var targetId = id.replace('title','content');
  10.                 var target = document.getElementById(targetId);
  11.                 $(target).toggleClass("active");
  12.             });
  13.             $(".top_menu_sp").click(function(){
  14.                 {# $(".top_menu_sp").removeClass("active");
  15.                 $(".top_menu_content_sp").removeClass("active"); #}
  16.                 if($(this).hasClass("active")){
  17.                     $(this).removeClass("active");
  18.                 }else{
  19.                     $(this).toggleClass("active");
  20.                 }
  21.                 $(this).next().slideToggle();
  22.                 {# $(".top_menu_sp").not($(this)).next().slideUp(); #}
  23.                 {# $(".top_menu_sp").not($(this)).removeClass("active"); #}
  24.                 {# var id = $(this).attr('id');
  25.                 var targetId = id.replace('title','content');
  26.                 var target = document.getElementById(targetId);
  27.                 $(target).toggleClass("active"); #}
  28.             });
  29.         });
  30.         {# $(window).on("load resize", function() {
  31.             var browser_w = $(window).innerWidth();
  32.             if(browser_w <= 768) {
  33.                 $(".top_menu").removeClass("active");
  34.                 $(".top_menu_content").removeClass("active");
  35.                 $("#category-title-1").addClass("active");
  36.                 $("#category-content-1").addClass("active");
  37.             }
  38.         }); #}
  39.     </script>
  40. {% endblock javascript %}
  41. <div class="block_outer">
  42.     <div class="ec-categoryRole" id="top_category_area">
  43.         <div class="ec-role color-container">
  44.             <h2 class="illust-title"><img src="/html/user_data/assets/img/icon/icon_book_green.png" alt="東山書房の本" class="aligncenter">東山書房の本</h2>
  45.             <div class="block_body">
  46.                 {# SP時の表示 #}
  47.                 <div class="full_content only-sp">
  48.                     <div class="category-tag__list flex">
  49.                     {% for i, Category in Categories %}
  50.                     {% if Category %}
  51.                         {% if loop.index == 4 %}<div class="top_menu_sp active" id="category-title-{{ Category.id }}-sp">{% else %}<div class="top_menu_sp" id="category-title-{{ Category.id }}-sp">{% endif %}
  52.                         {{ Category.name }}<span class="btn-toggle"></span>
  53.                         </div>
  54.                         {% if loop.index == 4 %}<div class="top_menu_content_sp active" id="category-content-{{ Category.id }}-sp">{% else %}<div class="top_menu_content_sp" id="category-content-{{ Category.id }}-sp">{% endif %}
  55.                             {% if Category.children %}
  56.                             <ul class="top_menu_category square5 flex">
  57.                                 {% for cildren in Category.children %}
  58.                                 <li><a href="/products/list?category_id={{ cildren.id }}">{{ cildren.name }}</a></li>
  59.                                 {% endfor %}
  60.                             </ul>
  61.                             {% endif %}
  62.                             <ul class="top_menu_category_recommend flex">
  63.                                 {% for key,product in CatProducts[i] %}
  64.                                     {# タグ #}
  65.                                     {% set newTag = false %}
  66.                                     {% if product.ProductTag is not null %}
  67.                                         {% for tag in product.ProductTag %}
  68.                                             {% if tag.Tag.id == 1 %}
  69.                                                 {% set newTag = true %}
  70.                                             {% endif %}
  71.                                         {% endfor %}
  72.                                     {% endif %}
  73.                                     <li class="category-recom__item{% if newTag %} newtag{% endif %}">
  74.                                         <a href="{{ url('product_detail', {'id': product.id}) }}">
  75.                                             <div class="osusume_image">
  76.                                                 <img src="{{ asset(product.main_list_image|no_image_product, 'save_image') }}" alt="{{ product.name }}">
  77.                                             </div>
  78.                                             <div class="osusume_name">{{product.name}}</div>
  79.                                         </a>
  80.                                     </li>
  81.                                 {% endfor %}
  82.                             </ul>
  83.                         </div>
  84.                     {% endif %}
  85.                     {% endfor %}
  86.                     </div>
  87.                 </div>
  88.                 {# PC時の表示 #}
  89.                 <div class="full_content only-pc">
  90.                     <div class="category-tag__list flex">
  91.                     {% for Category in Categories %}
  92.                     {% if Category %}
  93.                         {% if loop.index == 4 %}<div class="top_menu active" id="category-title-{{ Category.id }}">{% else %}<div class="top_menu" id="category-title-{{ Category.id }}">{% endif %}
  94.                         {{ Category.name }}
  95.                         </div>
  96.                     {% endif %}
  97.                     {% endfor %}
  98.                     </div>
  99.                     <div class="category-menu__list">
  100.                     {% for i, Category in Categories %}
  101.                     {% if Category %}
  102.                     {% if loop.index == 4 %}<div class="top_menu_content active" id="category-content-{{ Category.id }}">{% else %}<div class="top_menu_content" id="category-content-{{ Category.id }}">{% endif %}
  103.                         {% if Category.children %}
  104.                         <ul class="top_menu_category square5 flex">
  105.                             {% for cildren in Category.children %}
  106.                             <li><a href="/products/list?category_id={{ cildren.id }}">{{ cildren.name }}</a></li>
  107.                             {% endfor %}
  108.                         </ul>
  109.                         {% endif %}
  110.                         <ul class="top_menu_category_recommend flex">
  111.                             {% for key,product in CatProducts[i] %}
  112.                                 {# タグ #}
  113.                                 {% set newTag = false %}
  114.                                 {% if product.ProductTag is not null %}
  115.                                     {% for tag in product.ProductTag %}
  116.                                         {% if tag.Tag.id == 1 %}
  117.                                             {% set newTag = true %}
  118.                                         {% endif %}
  119.                                     {% endfor %}
  120.                                 {% endif %}
  121.                             <li class="category-recom__item{% if newTag %} newtag{% endif %}">
  122.                                 <a href="{{ url('product_detail', {'id': product.id}) }}">
  123.                                     <div class="osusume_image">
  124.                                         <img src="{{ asset(product.main_list_image|no_image_product, 'save_image') }}" alt="{{ product.name }}">
  125.                                     </div>
  126.                                     <div class="osusume_name">{{product.name}}</div>
  127.                                 </a>
  128.                             </li>
  129.                             {% endfor %}
  130.                         </ul>
  131.                     </div>
  132.                     {% endif %}
  133.                     {% endfor %}
  134.                 </div>
  135.             </div>
  136.         </div>
  137.     </div>
  138. </div>