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

Open in your IDE?
  1. {% block stylesheet %}
  2.         <style>
  3.             .slick-slide {
  4.                 padding-right: 3px; padding-left: 3px;
  5.             }
  6.             .slick-slide img {
  7.                 border-radius: var(--8px, 8px);
  8.             }
  10.             .slick-prev:before {
  11.                 display: inline-block;
  12.                 width: 54px;  /* 指定したい幅 */
  13.                 height: 54px; /* 指定したい高さ */
  14.                 background-image: url({{ asset('assets/img/top_page/arrow_carousel_l.png', 'user_data') }});
  15.                 background-size: contain;
  16.                 background-repeat: no-repeat;
  17.                 background-position: center;
  18.             }
  19.                 
  20.             .slick-next:before {
  21.                 display: inline-block;
  22.                 width: 54px;  /* 指定したい幅 */
  23.                 height: 54px; /* 指定したい高さ */
  24.                 background-image: url({{ asset('assets/img/top_page/arrow_carousel_r.png', 'user_data') }});
  25.                 background-size: contain;
  26.                 background-repeat: no-repeat;
  27.                 background-position: center;
  28.             }
  29.     
  30.             .slick-prev:hover,
  31.             .slick-prev:focus,
  32.             .slick-next:hover,
  33.             .slick-next:focus {
  34.                 color: transparent;
  35.                 outline: none;
  36.                 background: transparent;
  37.             }
  38.             
  39.             .slick-prev:hover:before,
  40.             .slick-prev:focus:before,
  41.             .slick-next:hover:before,
  42.             .slick-next:focus:before {
  43.                 opacity: 1;
  44.             }
  45.             
  46.             .slick-prev.slick-disabled:before,
  47.             .slick-next.slick-disabled:before {
  48.                 opacity: .25;
  49.             }
  51.             .gradient-container {
  52.                 position: relative;
  53.                 overflow: hidden;
  54.             }
  56.             /* 左側のグラデーション */
  57.             .gradient-container::before {
  58.                 content: '';
  59.                 position: absolute;
  60.                 top: 0;
  61.                 left: 0;
  62.                 height: 100%;
  63.                 width: 70px; /* 左側の幅 */
  64.                 background: linear-gradient(to right, white, transparent);
  65.                 pointer-events: none;
  66.                 z-index: 1;
  67.             }
  69.             /* 右側のグラデーション */
  70.             .gradient-container::after {
  71.                 content: '';
  72.                 position: absolute;
  73.                 top: 0;
  74.                 right: 0;
  75.                 height: 100%;
  76.                 width: 70px; /* 右側の幅 */
  77.                 background: linear-gradient(to left, white, transparent);
  78.                 pointer-events: none;
  79.             }
  81.         </style>
  82.     {% endblock %}
  83.     
  84.     {% block javascript %}
  85.         <script>
  86.             
  87.             $(function() {
  89.                 $('.top_carousel').slick({
  90.                     dots: false,
  91.                     autoplay: true,
  92.                     speed: 300,
  93.                     centerMode: true,
  94.                     centerPadding: '6%',
  95.                     arrows: true,
  96.                     infinite: true,
  97.                     swipeToSlide: true,
  98.                     slidesToShow: 3
  99.                 });
  101.                 {% set current_domain = app.request.getHost() %}
  103.                 {% set is_prod = 'web-order.shikomel.com' in current_domain %}
  104.                 {% set is_stg = 'web-order-stg.shikomel.com' in current_domain %}
  106.                 // Lineバナークリックイベント
  107.                 {% if is_prod %}
  109.                     $('#line_link_carousel').on('click', function(event) {
  111.                         const currentPageUrl = window.location.href;
  113.                         fbq('trackCustom', 'ce_click_line_btn', {
  114.                             content_type: "ClickLineBtn",
  115.                             content_name: currentPageUrl,
  116.                             value: 50
  117.                         });
  119.                         window.dataLayer.push({
  120.                             event: 'ce_click_line_btn',
  121.                             custom_event_name: 'ce_click_line_btn',
  122.                             custom_page_url: currentPageUrl,
  123.                             custom_customer_id: '',
  124.                             custom_user_agent: $("#user_agent").val(),
  125.                             custom_is_ig: $("#is_ig").val(),
  126.                             custom_is_line: $("#is_line").val(),
  127.                             custom_referer: $("#referer").val(),
  128.                             custom_real_ip: $("#real_ip").val(),
  129.                         });
  131.                         _lt('send', 'cv', {
  132.                             type: 'ce_click_line_btn'
  133.                         },['d6fb195c-aa19-4109-8ea0-7b1d883fb349']);
  134.                         
  135.                     });
  136.                 {% endif %}
  137.             });
  138.         </script>
  139.     {% endblock javascript %}
  140.         <div class="ec-sliderRole" style="margin-bottom: 48px; padding: 0px;">
  141.             <div class="top_carousel gradient-container" style="margin-bottom: 13px; margin-top: 50px;">
  142.                 {# 開業直前事業者向けLP誘導 #}
  143.                 <div class="item slick-slide" style="height: 100px;">
  144.                     <a href="./user_data/new_open_resto_lp" alt="開業直前でも安心仕込みゼロの売れる食材たち">
  145.                         <img src="{{ asset('assets/img/top_carousel_banner/top_carousel_banner_open.jpg', 'user_data') }}">
  146.                     </a>
  147.                 </div>
  148.                 {# LINE未連携の場合、LINE連携誘導 #}
  149.                 {% if not isLineLinked %}
  150.                     <div class="item slick-slide" style="">
  151.                         <a href="./plugin_line_login" alt="LINE連携での会員登録で必ずもらえる3000円引きクーポン" id="line_link_carousel">
  152.                             <img src="{{ asset('assets/img/top_carousel_banner/top_carousel_banner_line.jpg', 'user_data') }}">
  153.                         </a>
  154.                     </div>
  155.                 {% endif %}
  156.                 {# ジビエLP誘導 #}
  157.                 <div class="item slick-slide" style="height: 100px;">
  158.                     <a href="./user_data/gibier_lp" alt="珍しいジビエ肉で客単価アップ">
  159.                         <img src="{{ asset('assets/img/top_carousel_banner/top_carousel_banner_gibier.png', 'user_data') }}">
  160.                     </a>
  161.                 </div>
  162.                 {# スポットLP誘導 #}
  163.                 <div class="item slick-slide" style="height: 100px;">
  164.                     <a href="./user_data/spot_menu_lp" alt="そのまま提供するだけ即戦力メニュー">
  165.                         <img src="{{ asset('assets/img/top_carousel_banner/top_carousel_banner_spot.jpg', 'user_data') }}">
  166.                     </a>
  167.                 </div>
  168.                 {# ランチLP誘導 #}
  169.                 <div class="item slick-slide" style="height: 100px;">
  170.                     <a href="./user_data/oneope_lunch_lp" alt="仕込み時間短縮で月30万円の売り上げUP">
  171.                         <img src="{{ asset('assets/img/top_carousel_banner/top_carousel_banner_lunch.jpg', 'user_data') }}">
  172.                     </a>
  173.                 </div>
  174.                 {# デザートLP誘導 #}
  175.                 {#<div class="item slick-slide" style="height: 100px;">#}
  176.                 {#    <a href="./user_data/dessert_lp" alt="カフェ営業に最適テリーヌとチーズケーキ">#}
  177.                 {#        <img src="{{ asset('assets/img/top_carousel_banner/top_carousel_banner_dessert.jpg', 'user_data') }}">#}
  178.                 {#    </a>#}
  179.                 {#</div>#}
  180.                 {# 一次加工LP誘導 #}
  181.                 <div class="item slick-slide" style="height: 100px;">
  182.                     <a href="./user_data/original_menu_lp" alt="こだわりの逸品で最高のおもてなしを">
  183.                         <img src="{{ asset('assets/img/top_carousel_banner/top_carousel_banner_ingredient_1.png', 'user_data') }}">
  184.                     </a>
  185.                 </div>
  186.                 {# 友達紹介キャンペーン #}
  187.                 <div class="item slick-slide" style="height: 100px;">
  188.                     <a href="./refer_friend_lp" alt="友達紹介で1000円もらえる">
  189.                         <img src="{{ asset('assets/img/common/referrer_banner_max5000.webp', 'user_data') }}">
  190.                     </a>
  191.                 </div>
  192.             </div>
  193.         </div>