app/template/default/JoolenCategoryBannerText42/Resource/template/default/banner_text.twig line 1

Open in your IDE?
  1. {#
  2. Plugin Name: JoolenCategoryBannerText42
  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. <style>
  13.     #category_banner_text img{
  14.         width: 100%;
  15.     }
  16.     .category_banner_inner{
  17.         margin-top: 20px;
  18.         margin-bottom: 20px;
  19.     }
  20.     .category_banner_textarea{
  21.         margin-top: 20px;
  22.         padding: 15px 20px;
  23.         background: rgb(248, 248, 248);
  24.         word-break: break-all;
  25.     }
  26.     @media only screen and (max-width: 767px){
  27.         .category_banner_inner{
  28.             margin-bottom: 10px;
  29.             padding-left: 20px;
  30.             padding-right: 20px;
  31.         }
  32.         .category_banner_textarea{
  33.             margin-top: 10px;
  34.             padding: 10px 15px;
  35.         }
  36.     }
  37.     .slick-slider {
  38.         margin-bottom: 50px;
  39.     }
  41.     .slick-dots {
  42.         position: absolute;
  43.         bottom: -45px;
  44.         display: block;
  45.         width: 100%;
  46.         padding: 0;
  47.         list-style: none;
  48.         text-align: center;
  49.     }
  51.     .slick-dots li {
  52.         position: relative;
  53.         display: inline-block;
  54.         width: 20px;
  55.         height: 20px;
  56.         margin: 0 5px;
  57.         padding: 0;
  59.         cursor: pointer;
  60.     }
  62.     .slick-dots li button {
  63.         font-size: 0;
  64.         line-height: 0;
  65.         display: block;
  66.         width: 20px;
  67.         height: 20px;
  68.         padding: 5px;
  69.         cursor: pointer;
  70.         color: transparent;
  71.         border: 0;
  72.         outline: none;
  73.         background: transparent;
  74.     }
  76.     .slick-dots li button:hover,
  77.     .slick-dots li button:focus {
  78.         outline: none;
  79.     }
  81.     .slick-dots li button:hover:before,
  82.     .slick-dots li button:focus:before {
  83.         opacity: 1;
  84.     }
  86.     .slick-dots li button:before {
  87.         content: " ";
  88.         line-height: 20px;
  89.         position: absolute;
  90.         top: 0;
  91.         left: 0;
  92.         width: 12px;
  93.         height: 12px;
  94.         text-align: center;
  95.         opacity: .25;
  96.         background-color: black;
  97.         border-radius: 50%;
  99.     }
  101.     .slick-dots li.slick-active button:before {
  102.         opacity: .75;
  103.         background-color: black;
  104.     }
  106.     .slick-dots li button.thumbnail img {
  107.         width: 0;
  108.         height: 0;
  109.     }
  110. </style>
  112. <script>
  113.     $(function() {
  114.         $('.main_visual').slick({
  115.             dots: true,
  116.             arrows: false,
  117.             autoplay: true,
  118.             speed: 300
  119.         });
  120.     });
  121. </script>
  123. {% if (CategoryBanners is defined and CategoryBanners | length > 0) or (CategoryBannerText is defined and CategoryBannerText) %}
  124.     <div id="category_banner_text" class="ec-sliderRole">
  125.         <div class="category_banner_inner">
  127.             {# バナー #}
  128.             {% if CategoryBanners | length > 0 %}
  129.                 <div class="main_visual">
  130.                     {% for CategoryBanner in CategoryBanners %}
  131.                         <img src="{{ asset(CategoryBanner.file_name|no_image_product, 'save_image') }}">
  132.                     {% endfor %}
  133.                 </div>
  134.             {% endif %}
  136.             {# テキスト #}
  137.             {% if CategoryBannerText %}
  138.                 {% set text = CategoryBannerText.description %}
  139.                 {% if text != null and text != ''%}
  140.                     <p class="category_banner_textarea">{{ text |raw}}</p>
  141.                 {% endif %}
  142.             {% endif %}
  144.         </div>
  145.     </div>
  146. {% endif %}