app/template/user_data/new_open_resto_lp.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block javascript %}
  4. <script>
  5.     var headerContent = document.getElementById("header_content");
  6.     var footerCtaBtn = document.getElementById("footer-cta-btn");
  7.     var floatingCta = document.getElementById("float-cta-btn");
  9.     function checkVisibility() {
  11.         if (headerContent && footerCtaBtn) {
  13.             var rect_h = headerContent.getBoundingClientRect();
  14.             var rect_f = footerCtaBtn.getBoundingClientRect();
  15.             var windowHeight = window.innerHeight || document.documentElement.clientHeight;
  17.             if ((rect_h.top < windowHeight && rect_h.bottom >= 0) || (rect_f.top < windowHeight && rect_f.bottom >= 0)) {
  18.                 floatingCta.style.display = "none";
  19.             } else {
  20.                 floatingCta.style.display = "block";
  21.             }
  22.         }
  23.     }
  25.     window.addEventListener("scroll", checkVisibility);
  26.     checkVisibility(); // 初回実行
  28.     $(function() {
  30.         // メニュー例のカルーセル
  31.         $('.sample_menu').slick({
  32.             dots: false,
  33.             autoplay: false,
  34.             centerMode: false,
  35.             centerPadding: '0px',
  36.             arrows: false,
  37.             infinite: true,
  38.             slidesToShow: 1
  39.         });
  41.         // アイキャッチのズームインとフェード処理
  42.         $("#header_content .slider")
  43.         // 最初のスライドに"add-animation"のclassを付ける(data-slick-index="0"が最初のスライドを指す)
  44.         .on("init", function () {
  45.             $('#header_content .slick-slide[data-slick-index="0"]').addClass("add-animation");
  46.         })
  47.         // 通常のオプション
  48.         .slick({
  49.             autoplay: true, // 自動再生ON
  50.             fade: true, // フェードON
  51.             arrows: false, // 矢印OFF
  52.             speed: 2000, // スライド、フェードアニメーションの速度2000ミリ秒
  53.             autoplaySpeed: 4000, // 自動再生速度4000ミリ秒
  54.             pauseOnFocus: false, // フォーカスで一時停止OFF
  55.             pauseOnHover: false, // マウスホバーで一時停止OFF
  56.         })
  57.         .on({
  58.             // スライドが移動する前に発生するイベント
  59.             beforeChange: function (event, slick, currentSlide, nextSlide) {
  60.                 // 表示されているスライドに"add-animation"のclassをつける
  61.                 $(".slick-slide", this).eq(nextSlide).addClass("add-animation");
  62.                 // あとで"add-animation"のclassを消すための"remove-animation"classを付ける
  63.                 $(".slick-slide", this).eq(currentSlide).addClass("remove-animation");
  64.             },
  65.             // スライドが移動した後に発生するイベント
  66.             afterChange: function () {
  67.                 // 表示していないスライドはアニメーションのclassを外す
  68.                 $(".remove-animation", this).removeClass(
  69.                     "remove-animation add-animation"
  70.                 );
  71.             },
  72.         });
  73.     }); 
  75.     {% set current_domain = app.request.getHost() %}
  77.     {# ドメイン判定 #}
  78.     {% set is_prod = 'web-order.shikomel.com' in current_domain %}
  79.     {% set is_stg = 'web-order-stg.shikomel.com' in current_domain %}
  81.     {% if is_prod %}
  83.     // CTAボタンクリック
  84.     $('.enrty_btn_new_open_resto_lp').on('click', function(event) {
  86.         const currentPageUrl = window.location.href;
  88.         fbq('trackCustom', 'ce_click_new_open_resto_lp', {
  89.             content_type: "ClickNewOpenRestoBtn",
  90.             content_name: currentPageUrl,
  91.             value: 20
  92.         });
  94.         window.dataLayer.push({
  95.             event: 'ce_click_new_open_resto_lp',
  96.             custom_event_name: 'ce_click_new_open_resto_lp',
  97.             custom_page_url: currentPageUrl,
  98.             custom_customer_id: '',
  99.             custom_user_agent: $("#user_agent").val(),
  100.             custom_is_ig: $("#is_ig").val(),
  101.             custom_is_line: $("#is_line").val(),
  102.             custom_referer: $("#referer").val(),
  103.             custom_real_ip: $("#real_ip").val(),
  104.         });
  106.         _lt('send', 'cv', {
  107.             type: 'ce_click_new_open_resto_lp'
  108.         },['d6fb195c-aa19-4109-8ea0-7b1d883fb349']);
  109.     });
  111.     {% endif %}
  113. </script>
  114. {% if is_prod %}
  115. <script src="https://js.ptengine.jp/641b8uky.js"></script>
  116. {% endif %}
  118. {% endblock javascript %}
  120. {% block stylesheet %}
  121.     <style>
  122.     .ec-layoutRole {
  123.         background: #FFFFFF;
  124.     }
  125.     .main_content h1 {
  126.         font-size: 22px;
  127.         font-weight: bold;
  128.         margin: 0px;
  129.     }
  130.     .main_content h2 {
  131.         font-size: 20px;
  132.         font-weight: bold;
  133.         margin: 0px;
  134.     }
  135.     .main_content h3 {
  136.         font-size: 14px;
  137.         font-weight: bold;
  138.     }
  139.     .main_content img {
  140.         margin-bottom: 0px;
  141.     }
  142.     .main_content strong {
  143.         margin-bottom: 10px;
  144.         line-height: 1.8;
  145.     }
  146.     .main_content p, .main_content td {
  147.         line-height: 1.8;
  148.     }
  149.     .main_content {
  150.         color: black;
  151.         font-family: "メイリオ","Meiryo","Hiragino Sans","ヒラギノ角ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial","sans-serif";
  152.     }
  153.     .ec-layoutRole__contents {
  154.         background-color: #FFFFFF;
  155.     }
  156.     .cta_2 {
  157.         width: 100%;
  158.         max-width: 140px;
  159.         bottom: 70px;
  160.         position: absolute;
  161.         right: 25px;
  162.     }
  164.     {# メニュー例のスライド #}
  165.     .sample_menu {
  166.         margin-bottom: 0px; width: 100%; max-width: 400px; padding: 0px;
  167.     }
  168.     .sample_menu .slick-list {
  169.         padding: 0px !important;
  170.         padding-right: 21% !important;
  171.     }
  173.     {# アイキャッチのフェードインとスライド調整 #}
  174.     #header_content {
  175.         position: relative;
  176.         overflow: hidden;
  177.         width: 100%;
  178.         max-width: 100%;
  179.         height: 509px;
  180.     }
  181.     #header_content .slider {
  182.         height: 509px;
  183.         margin-inline: auto;
  184.         overflow: hidden; /* 画像がはみ出ないようにする */
  185.         width: 100%;
  186.     }
  187.     #header_content .slick-img img {
  188.         width: 100%;
  189.     }
  190.     @keyframes zoomUp {
  191.         0% {
  192.             transform: scale(1);
  193.         }
  194.         100% {
  195.             transform: scale(1.15); /* 拡大率 */
  196.         }
  197.     }
  198.     .add-animation {
  199.         animation: zoomUp 7s linear 0s normal both;
  200.     }
  201.     </style>
  202. {% endblock %}
  204. {% block main %}
  205.     <div class="main_content" style="max-width: 400px; margin: auto;">
  207.         {# フローティングCTA #}
  208.         <section id="float-cta-btn" style="bottom: 0px; position: fixed; z-index: 1000; background-color: white; text-align: center;">
  209.             <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=list&param=開業直前" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  210.                 <img src="{{ asset('assets/img/new_open_resto_lp/cta.png', 'user_data') }}" alt="会員登録して商品をチェック" style="width: 100%; max-width: 400px; padding: 16px;">
  211.             </a>
  212.         </section>
  214.         {# アイキャッチ #}
  215.         <header id="header_content">
  216.             <div class="slider">
  217.                 <div class="slick-img">
  218.                     <img src="{{ asset('assets/img/new_open_resto_lp/eye_catch_bk_1.webp', 'user_data') }}" class="" alt="Slide 1">
  219.                 </div>
  220.                 <div class="slick-img">
  221.                     <img src="{{ asset('assets/img/new_open_resto_lp/eye_catch_bk_2.webp', 'user_data') }}" class="" alt="Slide 1">
  222.                 </div>
  223.                 <div class="slick-img">
  224.                     <img src="{{ asset('assets/img/new_open_resto_lp/eye_catch_bk_3.webp', 'user_data') }}" class="" alt="Slide 1">
  225.                 </div>
  226.             </div>
  227.             <h1><img src="{{ asset('assets/img/new_open_resto_lp/eye_catch_fr.png', 'user_data') }}" alt="仕込みゼロの売れる食材たち" style="width: 100%; max-width: 400px; position: absolute; margin-top: -340px; padding-left: 32px; padding-right: 32px;"></h1>
  228.             <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=list&param=開業直前" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  229.                 <img src="{{ asset('assets/img/new_open_resto_lp/cta.png', 'user_data') }}" alt="会員登録して商品をチェック" style="width: 100%; max-width: 400px; position: absolute; margin-top: -88px; padding-left: 16px; padding-right: 16px;">
  230.             </a>
  231.         </header>
  233.         {# もうすぐ開業 #}
  234.         <header id="first_content">
  235.             <img src="{{ asset('assets/img/new_open_resto_lp/1.webp', 'user_data') }}" alt="もうすぐ開業。不安はありませんか？" style="width: 100%; max-width: 400px;">
  236.         </header>
  238.         {# メニュースクロール #}
  239.         <section style="margin: 0px; background-color: #242424; padding-bottom: 50px;">
  240.             {# こだわりの逸品に #}
  241.             <h2><img src="{{ asset('assets/img/new_open_resto_lp/carousel_text_1.png', 'user_data') }}" alt="こだわりの逸品に" style="width: 100%; max-width: 216px; margin: 72px 0px 16px 16px;"></h2>
  242.             <div class="sample_menu" style="">
  243.                 <div class="item slick-slide">
  244.                     <img src="{{ asset('assets/img/new_open_resto_lp/carousel_1_2.webp', 'user_data') }}" alt="スチーム調理の骨付き丸鶏" style="width: 100%; padding-right: 16px;">
  245.                     <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=detail&param=577" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  246.                         <img src="{{ asset('assets/img/new_open_resto_lp/carousel_cta.png', 'user_data') }}" alt="この商品をチェック" style="width: 100%; position: relative; margin-top: -68px; margin-bottom: 16px; padding-left: 16px; padding-right: 32px;">
  247.                     </a>
  248.                 </div>
  249.                 <div class="item slick-slide">
  250.                     <img src="{{ asset('assets/img/new_open_resto_lp/carousel_1_1.webp', 'user_data') }}" alt="鳥刺しむね" style="width: 100%; padding-right: 16px;">
  251.                     <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=detail&param=574" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  252.                         <img src="{{ asset('assets/img/new_open_resto_lp/carousel_cta.png', 'user_data') }}" alt="この商品をチェック" style="width: 100%; position: relative; margin-top: -68px; margin-bottom: 16px; padding-left: 16px; padding-right: 32px;">
  253.                     </a>
  254.                 </div>
  255.                 <div class="item slick-slide">
  256.                     <img src="{{ asset('assets/img/new_open_resto_lp/carousel_1_3.webp', 'user_data') }}" alt="低温調理牛タン" style="width: 100%; padding-right: 16px;">
  257.                     <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=detail&param=637" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  258.                         <img src="{{ asset('assets/img/new_open_resto_lp/carousel_cta.png', 'user_data') }}" alt="この商品をチェック" style="width: 100%; position: relative; margin-top: -68px; margin-bottom: 16px; padding-left: 16px; padding-right: 32px;">
  259.                     </a>
  260.                 </div>
  261.             </div>
  262.             {# 即出しのおつまみに #}
  263.             <h2><img src="{{ asset('assets/img/new_open_resto_lp/carousel_text_2.png', 'user_data') }}" alt="即出しのおつまみに" style="width: 100%; max-width: 244px; margin: 64px 0px 16px 16px;"></h2>
  264.             <div class="sample_menu" style="">
  265.                 <div class="item slick-slide">
  266.                     <img src="{{ asset('assets/img/new_open_resto_lp/carousel_2_1.webp', 'user_data') }}" alt="牛牛の山芋キムチ" style="width: 100%; padding-right: 16px;">
  267.                     <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=detail&param=561" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  268.                         <img src="{{ asset('assets/img/new_open_resto_lp/carousel_cta.png', 'user_data') }}" alt="この商品をチェック" style="width: 100%; position: relative; margin-top: -68px; margin-bottom: 16px; padding-left: 16px; padding-right: 32px;">
  269.                     </a>
  270.                 </div>
  271.                 <div class="item slick-slide">
  272.                     <img src="{{ asset('assets/img/new_open_resto_lp/carousel_2_3.webp', 'user_data') }}" alt="肉じゃがポテサラ" style="width: 100%; padding-right: 16px;">
  273.                     <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=detail&param=643" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  274.                         <img src="{{ asset('assets/img/new_open_resto_lp/carousel_cta.png', 'user_data') }}" alt="この商品をチェック" style="width: 100%; position: relative; margin-top: -68px; margin-bottom: 16px; padding-left: 16px; padding-right: 32px;">
  275.                     </a>
  276.                 </div>
  277.                 <div class="item slick-slide">
  278.                     <img src="{{ asset('assets/img/new_open_resto_lp/carousel_2_2.webp', 'user_data') }}" alt="九州名物さつま揚げ" style="width: 100%; padding-right: 16px;">
  279.                     <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=detail&param=663" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  280.                         <img src="{{ asset('assets/img/new_open_resto_lp/carousel_cta.png', 'user_data') }}" alt="この商品をチェック" style="width: 100%; position: relative; margin-top: -68px; margin-bottom: 16px; padding-left: 16px; padding-right: 32px;">
  281.                     </a>
  282.                 </div>
  283.             </div>
  284.             {# デザートに #}
  285.             <h2><img src="{{ asset('assets/img/new_open_resto_lp/carousel_text_3.png', 'user_data') }}" alt="デザートに" style="width: 100%; max-width: 136px; margin: 64px 0px 16px 16px;"></h2>
  286.             <div class="sample_menu" style="">
  287.                 <div class="item slick-slide">
  288.                     <img src="{{ asset('assets/img/new_open_resto_lp/carousel_3_2.webp', 'user_data') }}" alt="濃厚チーズテリーヌ" style="width: 100%; padding-right: 16px;">
  289.                     <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=detail&param=647" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  290.                         <img src="{{ asset('assets/img/new_open_resto_lp/carousel_cta.png', 'user_data') }}" alt="この商品をチェック" style="width: 100%; position: relative; margin-top: -68px; margin-bottom: 16px; padding-left: 16px; padding-right: 32px;">
  291.                     </a>
  292.                 </div>
  293.                 <div class="item slick-slide">
  294.                     <img src="{{ asset('assets/img/new_open_resto_lp/carousel_3_1.webp', 'user_data') }}" alt="生ちょこ餅" style="width: 100%; padding-right: 16px;">
  295.                     <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=detail&param=660" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  296.                         <img src="{{ asset('assets/img/new_open_resto_lp/carousel_cta.png', 'user_data') }}" alt="この商品をチェック" style="width: 100%; position: relative; margin-top: -68px; margin-bottom: 16px; padding-left: 16px; padding-right: 32px;">
  297.                     </a>
  298.                 </div>
  299.                 <div class="item slick-slide">
  300.                     <img src="{{ asset('assets/img/new_open_resto_lp/carousel_3_3.webp', 'user_data') }}" alt="極上チーズケーキ" style="width: 100%; padding-right: 16px;">
  301.                     <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=detail&param=545" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  302.                         <img src="{{ asset('assets/img/new_open_resto_lp/carousel_cta.png', 'user_data') }}" alt="この商品をチェック" style="width: 100%; position: relative; margin-top: -68px; margin-bottom: 16px; padding-left: 16px; padding-right: 32px;">
  303.                     </a>
  304.                 </div>
  305.             </div>
  306.             {# 〆やご飯ものに #}
  307.             <h2><img src="{{ asset('assets/img/new_open_resto_lp/carousel_text_4.png', 'user_data') }}" alt="〆やご飯ものに" style="width: 100%; max-width: 188px; margin: 64px 0px 16px 16px;"></h2>
  308.             <div class="sample_menu" style="">
  309.                 <div class="item slick-slide">
  310.                     <img src="{{ asset('assets/img/new_open_resto_lp/carousel_4_1.webp', 'user_data') }}" alt="キンパ各種" style="width: 100%; padding-right: 16px;">
  311.                     <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=detail&param=8" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  312.                         <img src="{{ asset('assets/img/new_open_resto_lp/carousel_cta.png', 'user_data') }}" alt="この商品をチェック" style="width: 100%; position: relative; margin-top: -68px; margin-bottom: 16px; padding-left: 16px; padding-right: 32px;">
  313.                     </a>
  314.                 </div>
  315.                 <div class="item slick-slide">
  316.                     <img src="{{ asset('assets/img/new_open_resto_lp/carousel_4_2.webp', 'user_data') }}" alt="チャーハンベース" style="width: 100%; padding-right: 16px;">
  317.                     <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=detail&param=11" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  318.                         <img src="{{ asset('assets/img/new_open_resto_lp/carousel_cta.png', 'user_data') }}" alt="この商品をチェック" style="width: 100%; position: relative; margin-top: -68px; margin-bottom: 16px; padding-left: 16px; padding-right: 32px;">
  319.                     </a>
  320.                 </div>
  321.                 <div class="item slick-slide">
  322.                     <img src="{{ asset('assets/img/new_open_resto_lp/carousel_4_3.webp', 'user_data') }}" alt="牛肉チャプチェ" style="width: 100%; padding-right: 16px;">
  323.                     <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=detail&param=144" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  324.                         <img src="{{ asset('assets/img/new_open_resto_lp/carousel_cta.png', 'user_data') }}" alt="この商品をチェック" style="width: 100%; position: relative; margin-top: -68px; margin-bottom: 16px; padding-left: 16px; padding-right: 32px;">
  325.                     </a>
  326.                 </div>
  327.             </div>            
  328.         </section>
  330.         {# お客様の事例ラベル #}
  331.         <header style="text-align: center; padding-top: 64px;">
  332.             <img src="{{ asset('assets/img/new_open_resto_lp/2.png', 'user_data') }}" alt="お客様の事例" style="width: 100%; max-width: 144px;">
  333.         </header>
  335.         {# CASE1 #}
  336.         <header style="padding-top: 24px; padding-left: 16px; padding-right: 16px;">
  337.             <img src="{{ asset('assets/img/new_open_resto_lp/3.webp', 'user_data') }}" alt="開業直後から活用し、手仕込みメニューとの“ハイブリッド”構成を実現" style="width: 100%; max-width: 400px;">
  338.         </header>
  340.         {# CASE2 #}
  341.         <header style="padding-top: 88px; padding-left: 16px; padding-right: 16px;">
  342.             <img src="{{ asset('assets/img/new_open_resto_lp/4.webp', 'user_data') }}" alt="業態リニューアルに伴い定番のサイドメニューを即導入" style="width: 100%; max-width: 400px;">
  343.         </header>
  345.         <section style="margin-bottom: 50px; margin-top: 50px;" id="footer-cta-btn">
  346.             <a href="https://web-order.shikomel.com/entry/before?fromNewOpenRestoLp=1&sendto=list&param=開業直前" style="cursor: pointer;" class="enrty_btn_new_open_resto_lp">
  347.                 <img src="{{ asset('assets/img/new_open_resto_lp/cta.png', 'user_data') }}" alt="会員登録して商品をチェック" style="width: 100%; max-width: 400px; padding-left: 16px; padding-right: 16px;">
  348.             </a>
  349.         </section>
  350.     </div>
  351. {% endblock %}