app/template/user_data/1yen_2025_lp.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block javascript %}
  4. <script>
  6.     {% set current_domain = app.request.getHost() %}
  8.     {# ドメイン判定 #}
  9.     {% set is_prod = 'web-order.shikomel.com' in current_domain %}
  10.     {% set is_stg = 'web-order-stg.shikomel.com' in current_domain %}
  12.     {% if is_prod %}
  13.     // Lineバナークリックイベント
  14.     $('.btn_1yen_product_detail').on('click', function(event) {
  16.         const currentPageUrl = window.location.href;
  18.         fbq('trackCustom', 'ce_click_1yen_lp', {
  19.             content_type: "Click1YenLp",
  20.             content_name: currentPageUrl,
  21.             value: 20
  22.         });
  24.         window.dataLayer.push({
  25.             event: 'ce_click_1yen_lp',
  26.             custom_event_name: 'ce_click_1yen_lp',
  27.             custom_page_url: currentPageUrl,
  28.             custom_customer_id: '',
  29.             custom_user_agent: $("#user_agent").val(),
  30.             custom_is_ig: $("#is_ig").val(),
  31.             custom_is_line: $("#is_line").val(),
  32.             custom_referer: $("#referer").val(),
  33.             custom_real_ip: $("#real_ip").val(),
  34.         });
  36.         _lt('send', 'cv', {
  37.             type: 'ce_click_1yen_lp'
  38.         },['d6fb195c-aa19-4109-8ea0-7b1d883fb349']);
  39.     });
  40.     {% endif %}
  42. </script>
  43. {% if is_prod %}
  44. <script src="https://js.ptengine.jp/3epvpvfz.js"></script>
  45. {% endif %}
  47. {% endblock javascript %}
  49. {% block stylesheet %}
  50.     <style>
  51.     .main_content h1 {
  52.         font-size: 22px;
  53.         font-weight: bold;
  54.         margin: 0px;
  55.     }
  56.     .main_content h2 {
  57.         font-size: 20px;
  58.         font-weight: bold;
  59.         margin: 0px;
  60.     }
  61.     .main_content h3 {
  62.         font-size: 14px;
  63.         font-weight: bold;
  64.     }
  65.     .main_content img {
  66.         margin-bottom: 0px;
  67.     }
  68.     .main_content strong {
  69.         margin-bottom: 10px;
  70.         line-height: 1.8;
  71.     }
  72.     .main_content p, .main_content td {
  73.         line-height: 1.8;
  74.     }
  75.     .main_content {
  76.         color: black;
  77.         font-family: "メイリオ","Meiryo","Hiragino Sans","ヒラギノ角ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial","sans-serif";
  78.     }
  80.     #this_week_products {
  81.         scroll-margin-top: 30px; /* ← アンカー遷移時に上に20px余白を確保 */
  82.     }
  84.     .cta_2 {
  85.         width: 305px; display: block;
  86.     }
  87.     .cta_outer_1 {
  88.         position: absolute; top: 410px; left: 45px;
  89.     }
  90.     .cta_outer_2 {
  91.         position: absolute; top: 390px; left: 45px;
  92.     }
  93.     .cta_outer_3 {
  94.         position: absolute; top: 410px; left: 45px;
  95.     }
  97.     /* スマホ（例: 768px以下の画面幅） */
  98.     @media screen and (max-width: 768px) {
  99.         .cta_2 {
  100.             width: 305px;
  101.         }
  102.         .cta_outer_1 {
  103.             position: absolute; top: 385px; left: 35px;
  104.         }
  105.         .cta_outer_2 {
  106.             position: absolute; top: 365px; left: 35px;
  107.         }
  108.         .cta_outer_3 {
  109.             position: absolute; top: 385px; left: 35px;
  110.         }
  111.     }
  112.     </style>
  113. {% endblock %}
  115. {% block main %}
  116.     <div class="main_content" style="max-width: 400px; margin: auto;">
  118.         <header id="header_content" style="position: relative; text-align: center;">
  119.             <h1 style="margin: auto;">
  120.                 <img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_2025_1.webp', 'user_data') }}" alt="食材1円お試しキャンペーン" style="max-width: 100%;">
  121.             </h1>
  122.             <a href="./1yen_2025_lp#this_week_products" class="eye_cta_outer_1">
  123.                 <img src="{{ asset('assets/img/1yen_2025_lp/cta_1.png', 'user_data') }}" alt="今週の商品をチェック" style="width: 100%; display: block;">
  124.             </a>
  125.         </header>
  127.         <section style="margin: 40px 10px 48px 10px;">
  128.             <h2><img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_2025_2.png', 'user_data') }}" alt="キャンペーン概要" style="max-width: 100%;"></h2>
  129.         </section>
  131.         <section id="this_week_products" style="background-color: #FFF100; text-align: center; margin-top: 66px;">
  132.             <h2><img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_2025_3.png', 'user_data') }}" alt="今週の対象商品" style="margin-top: -20px; max-width: 259px;"></h2>
  133.         </section>
  135.         <section style="background-color: #FFF100; text-align: center; padding: 20px;">
  136.             <h2><img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_2025_4_up3.webp', 'user_data') }}" alt="日付" style="max-width: 264px;"></h2>
  137.         </section>
  139.         <section style="background-color: #FFF100; padding-right: 15px; padding-left: 15px; padding-bottom: 16px; position: relative;">
  140.             <div style="max-width:369px; width: 100%; border:3px solid #000; border-radius:10px; overflow:hidden; font-family: 'Helvetica', 'Arial', sans-serif;">
  141.               <!-- 商品画像 -->
  142.               <img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_food_4-1.webp', 'user_data') }}" alt="鶏もものトマト煮" style="width:100%; display:block;">
  143.               <!-- テキスト部分 -->
  144.               <div style="padding:16px; background:#fff;">
  145.                 <!-- 商品名 -->
  146.                 <h2 style="font-size:24px; font-weight:bold; margin:0 0 12px 0; color:#000;">
  147.                   鶏もものトマト煮
  148.                 </h2>
  149.                 <!-- 詳細テキスト -->
  150.                 <p style="font-size:14px; line-height:1.6; margin:0 0 20px 0; color:#333;">
  151.                   都内ダイニングバーで、ランチで月500食の販売実績あり。<br>しっとり柔らかな鶏もも肉を、香草とともにじっくり煮込んだ一品。女性客からの評判も高い。
  152.                 </p>
  153.                 <!-- CTAボタン -->
  154.                 {# <a href="{{ url('product_detail', { id: 680 }) }}" style="display:block; text-align:center; background:#ED4F00; color:#fff; text-decoration:none; font-weight:bold; padding:16px 0; border-radius:4px; font-size:16px;">
  155.                   1円でこの商品を試す
  156.                 </a> #}
  157.               </div>
  158.             </div>
  159.         </section>
  161.         <section style="background-color: #FFF100; padding-right: 15px; padding-left: 15px; padding-bottom: 16px; position: relative;">
  162.             <div style="max-width:369px; width: 100%; border:3px solid #000; border-radius:10px; overflow:hidden; font-family: 'Helvetica', 'Arial', sans-serif;">
  163.               <!-- 商品画像 -->
  164.               <img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_food_4-2.webp', 'user_data') }}" alt="オリジナルエビカレー" style="width:100%; display:block;">
  165.               <!-- テキスト部分 -->
  166.               <div style="padding:16px; background:#fff;">
  167.                 <!-- 商品名 -->
  168.                 <h2 style="font-size:24px; font-weight:bold; margin:0 0 12px 0; color:#000;">
  169.                   オリジナルエビカレー
  170.                 </h2>
  171.                 <!-- 詳細テキスト -->
  172.                 <p style="font-size:14px; line-height:1.6; margin:0 0 20px 0; color:#333;">
  173.                   大ぶりのエビが17〜20個入った、食べ応え抜群の贅沢感あるカレー。<br>辛さが苦手な方でも楽しめる、やさしくも奥深い味わいが特徴。
  174.                 </p>
  175.                 <!-- CTAボタン -->
  176.                 {# <a href="{{ url('product_detail', { id: 681 }) }}" style="display:block; text-align:center; background:#ED4F00; color:#fff; text-decoration:none; font-weight:bold; padding:16px 0; border-radius:4px; font-size:16px;">
  177.                   1円でこの商品を試す
  178.                 </a> #}
  179.               </div>
  180.             </div>
  181.         </section>
  183.         <section style="background-color: #FFF100; padding-right: 15px; padding-left: 15px; padding-bottom: 15px; position: relative;">
  184.             <div style="max-width:369px; width: 100%; border:3px solid #000; border-radius:10px; overflow:hidden; font-family: 'Helvetica', 'Arial', sans-serif;">
  185.               <!-- 商品画像 -->
  186.               <img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_food_4-3.webp', 'user_data') }}" alt="黒カレーベース" style="width:100%; display:block;">
  187.               <!-- テキスト部分 -->
  188.               <div style="padding:16px; background:#fff;">
  189.                 <!-- 商品名 -->
  190.                 <h2 style="font-size:24px; font-weight:bold; margin:0 0 12px 0; color:#000;">
  191.                   黒カレーベース
  192.                 </h2>   
  193.                 <!-- 詳細テキスト -->
  194.                 <p style="font-size:14px; line-height:1.6; margin:0 0 20px 0; color:#333;">
  195.                   少しピリ辛に仕上げた、深いコクと辛さを引き立てた濃厚な黒カレーベース。<br>特徴的な色の黒さで、オムライスなどのソースとしても。
  196.                 </p>
  197.                 <!-- CTAボタン -->
  198.                 {# <a href="{{ url('product_detail', { id: 682 }) }}" style="display:block; text-align:center; background:#ED4F00; color:#fff; text-decoration:none; font-weight:bold; padding:16px 0; border-radius:4px; font-size:16px;">
  199.                   1円でこの商品を試す
  200.                 </a> #}
  201.               </div>
  202.             </div>
  203.         </section>
  204.  
  205.         <section style="background-color: #FFF100; padding-right: 20px; padding-left: 20px; padding-bottom: 15px;">
  206.             <h2><img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_2025_8.png', 'user_data') }}" alt="利用規約" style="max-width: 100%;"></h2>
  207.         </section>
  209.         <section style="margin: 0px; text-align: center;">
  210.             <h2><img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_2025_9.png', 'user_data') }}" alt="商品ラインナップ" style="max-width: 259px; margin-top: 48px; margin-bottom: 32px;"></h2>
  211.         </section>
  213.         <section style="margin: 0px 15px 32px 15px">
  214.             <h2><img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_2025_10.webp', 'user_data') }}" alt="第１弾 シコメルの名物商品たち" style="max-width: 100%;"></h2>
  215.         </section>
  217.         <section style="margin: 0px 15px 32px 15px">
  218.             <h2><img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_2025_11_up.webp', 'user_data') }}" alt="第２弾 前菜の強い味方" style="max-width: 100%;"></h2>
  219.         </section>
  221.         <section style="margin: 0px 15px 32px 15px">
  222.             <h2><img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_2025_12_close.webp', 'user_data') }}" alt="第３弾 手の込んだ、至高の逸品" style="max-width: 100%;"></h2>
  223.         </section>
  225.         <section style="margin: 0px 15px 32px 15px">
  226.             <h2><img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_2025_13_close.jpg', 'user_data') }}" alt="第４弾 ランチの強い味方" style="max-width: 100%;"></h2>
  227.         </section>
  229.         <section style="margin: 48px 15px 96px 15px;">
  230.             <h2><img src="{{ asset('assets/img/1yen_2025_lp/1yen_cp_2025_14.webp', 'user_data') }}" alt="キャンペーン詳細" style="max-width: 100%;"></h2>
  231.         </section>
  232.         
  233. {% endblock %}