app/template/user_data/original_menu_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() {
  29.         $('.sample_menu').slick({
  30.             dots: false,
  31.             autoplay: false,
  32.             centerMode: false,
  33.             centerPadding: '0px',
  34.             arrows: false,
  35.             infinite: true,
  36.             slidesToShow: 1
  37.         });
  38.     }); 
  40.     {% set current_domain = app.request.getHost() %}
  42.     {# ドメイン判定 #}
  43.     {% set is_prod = 'web-order.shikomel.com' in current_domain %}
  44.     {% set is_stg = 'web-order-stg.shikomel.com' in current_domain %}
  46.     {% if is_prod %}
  48.     // CTAボタンクリック
  49.     $('.enrty_btn_original_menu_lp').on('click', function(event) {
  51.         const currentPageUrl = window.location.href;
  53.         fbq('trackCustom', 'ce_click_original_menu_lp', {
  54.             content_type: "ClickOriginalMenuBtn",
  55.             content_name: currentPageUrl,
  56.             value: 20
  57.         });
  59.         window.dataLayer.push({
  60.             event: 'ce_click_original_menu_lp',
  61.             custom_event_name: 'ce_click_original_menu_lp',
  62.             custom_page_url: currentPageUrl,
  63.             custom_customer_id: '',
  64.             custom_user_agent: $("#user_agent").val(),
  65.             custom_is_ig: $("#is_ig").val(),
  66.             custom_is_line: $("#is_line").val(),
  67.             custom_referer: $("#referer").val(),
  68.             custom_real_ip: $("#real_ip").val(),
  69.         });
  71.         _lt('send', 'cv', {
  72.             type: 'ce_click_original_menu_lp'
  73.         },['d6fb195c-aa19-4109-8ea0-7b1d883fb349']);
  74.     });
  75.     {% endif %}
  77. </script>
  78. {% if is_prod %}
  79. <script src="https://js.ptengine.jp/209bn1vq.js"></script>
  80. {% endif %}
  82. {% endblock javascript %}
  84. {% block stylesheet %}
  85.     <style>
  86.     .ec-layoutRole {
  87.         background: #0a0a0a;
  88.     }
  89.     .main_content h1 {
  90.         font-size: 22px;
  91.         font-weight: bold;
  92.         margin: 0px;
  93.     }
  94.     .main_content h2 {
  95.         font-size: 20px;
  96.         font-weight: bold;
  97.         margin: 0px;
  98.     }
  99.     .main_content h3 {
  100.         font-size: 14px;
  101.         font-weight: bold;
  102.     }
  103.     .main_content img {
  104.         margin-bottom: 0px;
  105.     }
  106.     .main_content strong {
  107.         margin-bottom: 10px;
  108.         line-height: 1.8;
  109.     }
  110.     .main_content p, .main_content td {
  111.         line-height: 1.8;
  112.     }
  113.     .main_content {
  114.         color: black;
  115.         font-family: "メイリオ","Meiryo","Hiragino Sans","ヒラギノ角ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial","sans-serif";
  116.     }
  117.     .ec-layoutRole__contents {
  118.         background-color: #0a0a0a;
  119.     }
  120.     .cta_2 {
  121.         width: 100%;
  122.         max-width: 140px;
  123.         bottom: 70px;
  124.         position: absolute;
  125.         right: 25px;
  126.     }
  127.     .sample_menu {
  128.         margin-bottom: 0px; width: 100%; max-width: 400px; padding: 0px 16px;
  129.     }
  130.     .slick-list {
  131.         padding: 0px !important;
  132.         padding-right: 21% !important;
  133.     }
  134.     </style>
  135. {% endblock %}
  137. {% block main %}
  138.     <div class="main_content" style="max-width: 400px; margin: auto;">
  140.         {# フローティングCTA #}
  141.         <section id="float-cta-btn" style="bottom: 0px; position: fixed; z-index: 1000; background-color: white; text-align: center;">
  142.             <a href="https://web-order.shikomel.com/entry/before?fromOriginalMenuLp=1&sendto=list&param=一次加工" style="cursor: pointer;" class="enrty_btn_original_menu_lp">
  143.                 <img src="{{ asset('assets/img/original_menu_lp/CTA_floating.webp', 'user_data') }}" alt="無料会員登録して食材をチェック" style="width: 100%; max-width: 400px;">
  144.             </a>
  145.         </section>
  147.         {# キービジュアル #}
  148.         <header id="header_content">
  149.             <h1><img src="{{ asset('assets/img/original_menu_lp/1_KV.webp', 'user_data') }}" alt="こだわりの逸品で最高のおもてなしを。" style="max-width: 100%;"></h1>
  150.             <a href="https://web-order.shikomel.com/entry/before?fromOriginalMenuLp=1&sendto=list&param=一次加工" style="cursor: pointer;" class="enrty_btn_original_menu_lp">
  151.                 <img src="{{ asset('assets/img/original_menu_lp/CTA_floating.webp', 'user_data') }}" alt="無料会員登録して食材をチェック" style="width: 100%; max-width: 400px; margin-top: -100px; position: absolute;">
  152.             </a>
  153.         </header>
  155.         {# 低温調理牛タン #}
  156.         <section style="margin: 0px; position: relative;">
  157.             <h2><img src="{{ asset('assets/img/original_menu_lp/2.webp', 'user_data') }}" alt="シコメルの一次加工食材がおすすめ" style="max-width: 100%;"></h2>
  158.         </section>
  159.         <section style="margin: 0px; position: relative;">
  160.             <h2><img src="{{ asset('assets/img/original_menu_lp/3-1.webp', 'user_data') }}" alt="低温調理牛タン" style="max-width: 100%;"></h2>
  161.             <a href="https://web-order.shikomel.com/entry/before?fromOriginalMenuLp=1&sendto=detail&param=637" style="cursor: pointer;" class="enrty_btn_original_menu_lp">
  162.                 <img class="cta_2" src="{{ asset('assets/img/original_menu_lp/CTA_2.webp', 'user_data') }}" alt="この食材を見る">
  163.             </a>
  164.         </section>
  166.         <section style="margin: 0px;">
  167.             {# メニュースクロール #}
  168.             <div class="sample_menu" style="">
  169.                 <div class="item slick-slide" style="width: 256px;">
  170.                     <img src="{{ asset('assets/img/original_menu_lp/3-2-1.webp', 'user_data') }}" alt="ユッケ風メニュー写真" style="width: 256px;">
  171.                 </div>
  172.                 <div class="item slick-slide" style="width: 256px;">
  173.                     <img src="{{ asset('assets/img/original_menu_lp/3-2-2.webp', 'user_data') }}" alt="肉寿司メニュー写真" style="width: 256px;">
  174.                 </div>
  175.                 <div class="item slick-slide" style="width: 256px;">
  176.                     <img src="{{ asset('assets/img/original_menu_lp/3-2-3.webp', 'user_data') }}" alt="カルパッチョメニュー写真" style="width: 256px;">
  177.                 </div>
  178.             </div>
  179.         </section>
  180.         <section style="margin: 0px; position: relative;">
  181.             <h2><img src="{{ asset('assets/img/original_menu_lp/3-3.webp', 'user_data') }}" alt="ミシュランシェフの一言アドバイス" style="max-width: 100%;"></h2>
  182.             <a href="https://web-order.shikomel.com/entry/before?fromOriginalMenuLp=1&sendto=detail&param=637" style="cursor: pointer;" class="enrty_btn_original_menu_lp">
  183.                 <img class="" src="{{ asset('assets/img/original_menu_lp/CTA.webp', 'user_data') }}" alt="この食材を見る" style="max-width: 90%; position: absolute; top: 73%; left: 6%;">
  184.             </a>
  185.         </section>
  187.         {# 牛100%ハンバーグ #}
  188.         <section style="margin: 0px; position: relative;">
  189.             <h2><img src="{{ asset('assets/img/original_menu_lp/4-1_1.webp', 'user_data') }}" alt="牛100%ハンバーグ" style="max-width: 100%;"></h2>
  190.             <a href="https://web-order.shikomel.com/entry/before?fromOriginalMenuLp=1&sendto=detail&param=570" style="cursor: pointer;" class="enrty_btn_original_menu_lp">
  191.                 <img class="cta_2" src="{{ asset('assets/img/original_menu_lp/CTA_2.webp', 'user_data') }}" alt="この食材を見る">
  192.             </a>
  193.         </section>
  194.         <section style="margin: 0px;">
  195.             {# メニュースクロール #}
  196.             <div class="sample_menu" style="margin-bottom: 0px; width: 100%; max-width: 400px;">
  197.                 <div class="item slick-slide" style="">
  198.                     <img src="{{ asset('assets/img/original_menu_lp/4-2-1.webp', 'user_data') }}" alt="デミグラスソース" style="width: 256px;">
  199.                 </div>
  200.                 <div class="item slick-slide" style="">
  201.                     <img src="{{ asset('assets/img/original_menu_lp/4-2-2.webp', 'user_data') }}" alt="ミートローディットフライ" style="width: 256px;">
  202.                 </div>
  203.                 <div class="item slick-slide" style="">
  204.                     <img src="{{ asset('assets/img/original_menu_lp/4-2-3.webp', 'user_data') }}" alt="ポットパイ" style="width: 256px;">
  205.                 </div>
  206.             </div>
  207.         </section>
  208.         <section style="margin: 0px; position: relative;">
  209.             <h2><img src="{{ asset('assets/img/original_menu_lp/4-3_1.webp', 'user_data') }}" alt="ミシュランシェフの一言アドバイス" style="max-width: 100%;"></h2>
  210.             <a href="https://web-order.shikomel.com/entry/before?fromOriginalMenuLp=1&sendto=detail&param=570" style="cursor: pointer;" class="enrty_btn_original_menu_lp">
  211.                 <img class="" src="{{ asset('assets/img/original_menu_lp/CTA.webp', 'user_data') }}" alt="この食材を見る" style="max-width: 90%; position: absolute; top: 73%; left: 6%;">
  212.             </a>
  213.         </section>
  215.         {# ローストビーフ #}
  216.         <section style="margin: 0px; position: relative;">
  217.             <h2><img src="{{ asset('assets/img/original_menu_lp/5-1_1.webp', 'user_data') }}" alt="ローストビーフ" style="max-width: 100%;"></h2>
  218.             <a href="https://web-order.shikomel.com/entry/before?fromOriginalMenuLp=1&sendto=detail&param=29" style="cursor: pointer;" class="enrty_btn_original_menu_lp">
  219.                 <img class="cta_2" src="{{ asset('assets/img/original_menu_lp/CTA_2.webp', 'user_data') }}" alt="この食材を見る">
  220.             </a>
  221.         </section>
  222.         <section style="margin: 0px;">
  223.             {# メニュースクロール #}
  224.             <div class="sample_menu" style="margin-bottom: 0px; width: 100%; max-width: 400px;">
  225.                 <div class="item slick-slide" style="">
  226.                     <img src="{{ asset('assets/img/original_menu_lp/5-2-1_1.webp', 'user_data') }}" alt="ローストビーフ丼" style="width: 256px;">
  227.                 </div>
  228.                 <div class="item slick-slide" style="">
  229.                     <img src="{{ asset('assets/img/original_menu_lp/5-2-2_1.webp', 'user_data') }}" alt="肉寿司" style="width: 256px;">
  230.                 </div>
  231.                 <div class="item slick-slide" style="">
  232.                     <img src="{{ asset('assets/img/original_menu_lp/5-2-3_1.webp', 'user_data') }}" alt="柚子胡椒" style="width: 256px;">
  233.                 </div>
  234.             </div>
  235.         </section>
  236.         <section style="margin: 0px; position: relative;">
  237.             <h2><img src="{{ asset('assets/img/original_menu_lp/5-3_1.webp', 'user_data') }}" alt="ミシュランシェフの一言アドバイス" style="max-width: 100%;"></h2>
  238.             <a href="https://web-order.shikomel.com/entry/before?fromOriginalMenuLp=1&sendto=detail&param=29" style="cursor: pointer;" class="enrty_btn_original_menu_lp">
  239.                 <img class="" src="{{ asset('assets/img/original_menu_lp/CTA.webp', 'user_data') }}" alt="この食材を見る" style="max-width: 90%; position: absolute; top: 73%; left: 6%;">
  240.             </a>
  241.         </section>
  242.         {# 鴨メンチ #}
  243.         <section style="margin: 0px; position: relative;">
  244.             <h2><img src="{{ asset('assets/img/original_menu_lp/6-1_1.webp', 'user_data') }}" alt="鴨メンチ" style="max-width: 100%;"></h2>
  245.             <a href="https://web-order.shikomel.com/entry/before?fromOriginalMenuLp=1&sendto=detail&param=664" style="cursor: pointer;" class="enrty_btn_original_menu_lp">
  246.                 <img class="cta_2" src="{{ asset('assets/img/original_menu_lp/CTA_2.webp', 'user_data') }}" alt="この食材を見る">
  247.             </a>
  248.         </section>
  249.         <section style="margin: 0px;">
  250.             {# メニュースクロール #}
  251.             <div class="sample_menu" style="margin-bottom: 0px; width: 100%; max-width: 400px;">
  252.                 <div class="item slick-slide" style="">
  253.                     <img src="{{ asset('assets/img/original_menu_lp/6-2-1_1.webp', 'user_data') }}" alt="鴨メンチカツ" style="width: 256px;">
  254.                 </div>
  255.                 <div class="item slick-slide" style="">
  256.                     <img src="{{ asset('assets/img/original_menu_lp/6-2-2_1.webp', 'user_data') }}" alt="ブレット" style="width: 256px;">
  257.                 </div>
  258.                 <div class="item slick-slide" style="">
  259.                     <img src="{{ asset('assets/img/original_menu_lp/6-2-3_1.webp', 'user_data') }}" alt="パテドカンパーニュ" style="width: 256px;">
  260.                 </div>
  261.             </div>
  262.         </section>
  263.         <section style="margin: 0px; position: relative;">
  264.             <h2><img src="{{ asset('assets/img/original_menu_lp/6-3_1.webp', 'user_data') }}" alt="ミシュランシェフの一言アドバイス" style="max-width: 100%;"></h2>
  265.             <a href="https://web-order.shikomel.com/entry/before?fromOriginalMenuLp=1&sendto=detail&param=664" style="cursor: pointer;" class="enrty_btn_original_menu_lp">
  266.                 <img class="" src="{{ asset('assets/img/original_menu_lp/CTA.webp', 'user_data') }}" alt="この食材を見る" style="max-width: 90%; position: absolute; top: 73%; left: 6%;">
  267.             </a>
  268.         </section>
  271.         <section style="margin-bottom: 50px;" id="footer-cta-btn">
  272.         </section>
  273.     </div>
  274. {% endblock %}