app/template/default/JoolenCategoryIcon4/Resource/template/default/category_icon_pc.twig line 1

Open in your IDE?
  1. {#
  2. Plugin Name: JoolenCategoryIcon4
  4. Copyright(c) joolen inc. All Rights Reserved.
  6. https://www.joolen.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  12. {# アイコン用CSS #}
  13. <style>
  14.     .l-categorynav_list_pc .l-categorynav_img{
  15.         width: 100%;
  16.         max-width: 60px;
  17.     }
  18.     .l-categorynav_list_pc .l-categorynav_title{
  19.         margin-left: 10px;
  20.     }
  21.     .ec-itemNav__nav li ul li .l-categorynav_list_pc{
  22.         position: relative;
  23.         min-height: 84px;
  24.         display: flex;
  25.         align-items: center;
  26.     }
  27.     .ec-itemNav__nav li ul li .l-categorynav_list_pc .l-categorynav_img{
  28.         width: 100%;
  29.         max-width: 50px;
  30.     }
  31.     .ec-itemNav__nav li ul li .l-categorynav_list_pc .l-categorynav_title{
  32.         -webkit-line-clamp: 2;
  33.         -webkit-box-orient: vertical;
  34.         overflow: hidden;
  35.     }
  36.     @media only screen and (min-width: 768px){
  37.         .ec-itemNav__nav{
  38.             text-align: left;
  39.             display: flex;
  40.             flex-wrap: wrap;
  41.             align-items: center;
  42.             justify-content: center;
  43.         }
  44.         .ec-itemNav__nav li a {
  45.             display: flex;
  46.             align-items: center;
  47.         }
  48.         .ec-itemNav__nav li ul li:hover > ul > li{
  49.             width: 100%;
  50.         }
  51.         .ec-itemNav__nav li ul li ul:before{
  52.             top: 30px;
  53.         }
  54.     }
  56. </style>
  58. {# アイコン画像の差し込み #}
  59. <script type="text/javascript">
  60.     {% if categoryImages is defined %}
  61.     $(function () {
  62.         {% for categoryId, categoryImage in categoryImages %}
  63.             $("#category_icon_pc_{{ categoryId }}").before('<img src="{{ asset(categoryImage|no_image_product, 'save_image') }}" class="l-categorynav_img">');
  64.         {% endfor %}
  65.     });
  66.     {% endif %}
  67. </script>