app/template/default/Help/guide.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2.     {% block main %}
  3.     <script>
  4. document.addEventListener('DOMContentLoaded', function () {
  5.     // ナビゲーションボタンのクリックイベント
  6.     document.querySelectorAll('.guide-nav button').forEach(btn => {
  7.         btn.addEventListener('click', function () {
  8.             const target = document.querySelector(this.dataset.scroll);
  9.             if (target) {
  10.                 scrollToTarget(target);
  11.             }
  12.         });
  13.     });
  14.     // ページ読み込み時にハッシュがある場合の処理
  15.     if (window.location.hash) {
  16.         // 少し遅延させてから実行(ページの完全な読み込みを待つ)
  17.         setTimeout(function() {
  18.             const target = document.querySelector(window.location.hash);
  19.             if (target) {
  20.                 scrollToTarget(target);
  21.             }
  22.         }, 100);
  23.     }
  24.     // スクロール処理を共通化
  25.     function scrollToTarget(target) {
  26.         const offset = -200;
  27.         const targetPosition = target.getBoundingClientRect().top + window.pageYOffset + offset;
  28.         window.scrollTo({
  29.             top: targetPosition,
  30.             behavior: 'smooth'
  31.         });
  32.     }
  33. });
  34.     </script>
  35.     <div class="guide-container">
  36.         <div class="custom-heading">
  37.         <div class="custom-heading__row">
  38.             <img src="/html/user_data/ContentImg/siopanda.png" alt="Logo" class="custom-heading__logo">
  39.             <div class="custom-heading__text">
  40.                     <span class="custom-heading__ja">{{ 'ユーザーガイド'|trans }}</span>
  41.                     <span class="custom-heading__en">{{ 'User Guide'|trans }}</span>
  42.             </div>
  43.         </div>
  44.     </div>
  45.     <!-- 目次ナビゲーション -->
  46.     <nav class="guide-nav">
  47.     <button data-scroll="#order">ご注文方法</button>
  48.     <button data-scroll="#fee">送料について</button>
  49.     <button data-scroll="#shipping">お届けについて</button>
  50.     <button data-scroll="#payment">お支払いについて</button>
  51.     <button data-scroll="#change">変更について</button>
  52.     <button data-scroll="#cancel">キャンセル・返品</button>
  53.     </nav>
  54.         <div class="guide-header">
  55.             <h1 id ="order" class="main-title">ご注文方法</h1>
  56.         </div>
  57.         <!-- メインコンテンツ -->
  58.         <div class="guide-main-content">
  59.             <!-- セクション1: 商品をカートに入れる -->
  60.             <section class="guide-section">
  61.                 <div class="guide-section-header">
  62.                     <div class="section-number">1</div>
  63.                     <h2 class="section-title">商品をカートに入れ、ご注文手続きへ進む</h2>
  64.                 </div>
  65.                 <div class="guide-section-content">
  66.                     <p>注文商品の数量を選択して、カートに入れます。</p>
  67.                     <p>カート内の商品の確認後、「<span class="highlight">ご注文手続きへ</span>」をクリックしてください。</p>
  68.                 </div>
  69.             </section>
  70.             <!-- セクション2: ログインまたは新規会員登録 -->
  71.             <section class="guide-section">
  72.                 <div class="guide-section-header">
  73.                     <div class="section-number">2</div>
  74.                     <h2 class="section-title">ログインまたは新規会員登録をする</h2>
  75.                 </div>
  76.                 <div class="guide-section-content">
  77.                     <p>会員登録がお済みの方は、メールアドレスとパスワードを入力して「ログイン」をクリックしてください。</p>
  78.                     <p>当オンラインショップをはじめてご利用される方は<span class="highlight">新規会員登録</span>が必要となります。新規会員登録は<span class="link"><a href ="/entry">こちら。</a></span></p>
  79.                 </div>
  80.             </section>
  81.             <!-- セクション3: お客様情報入力 -->
  82.             <section class="guide-section">
  83.                 <div class="guide-section-header">
  84.                     <div class="section-number">3</div>
  85.                     <h2 class="section-title">お届け先を設定する</h2>
  86.                 </div>
  87.                 <div class="guide-section-content">
  88.                     <p>「一つの住所に送る」または「複数の住所に送る」をクリックし、お届け先を設定してください。</p>
  89.                     <p>複数の住所に送る場合は、必要情報を入力後に数量の振分けが可能です。</p>
  90.                 </div>
  91.             </section>
  92.             <!-- セクション4: 注文完了 -->
  93.             <section class="guide-section">
  94.                 <div class="guide-section-header">
  95.                     <div class="section-number">4</div>
  96.                     <h2 class="section-title">お届け日時を設定する</h2>
  97.                 </div>
  98.                 <div class="guide-section-content">
  99.                     <p>お届けご希望日時は、ご注文から<span class="highlight">7営業日以降</span>をご指定いただけます。</p>
  100.                     <p>「指定無し」をご選択の場合は、<span class="highlight">最短でお届けいたします。</span></p><br>
  101.                     <p>※一部地域は発送からお届けまでに時間を要するためご注文から<span class="highlight">7~9営業日以降</span>の日時指定となります。</p>
  102.                     <p>もったいないパンセットについては、お届け日がご指定いただけません。</p>
  103.                     <p>パンが集まり次第の発送となりますのでお届けまでにお時間をいただく場合がございます。</p><br>
  104.                     <p>配送時間指定でご希望の時間帯にお届けいたします。<br>午前中、14時~16時、16時~18時、18時~20時、19時~21時</p>
  105.                 </div>
  106.             </section>
  107.             
  108.             <!-- セクション5: 注文完了 -->
  109.             <section class="guide-section">
  110.                 <div class="guide-section-header">
  111.                     <div class="section-number">5</div>
  112.                     <h2 class="section-title">支払い方法を選択する</h2>
  113.                 </div>
  114.                 <div class="guide-section-content">
  115.                     <p>お支払方法はクレジットカード決済になります。</p>
  116.                 </div>
  117.             </section>
  118.             
  119.                         <!-- セクション6: 注文完了 -->
  120.             <section class="guide-section">
  121.                 <div class="guide-section-header">
  122.                     <div class="section-number">6</div>
  123.                     <h2 class="section-title">ご注文内容を確認する</h2>
  124.                 </div>
  125.                 <div class="guide-section-content">
  126.                     <p>ご注文内容を再度ご確認ください。</p>
  127.                     <p>変更する場合は「変更する」ボタンをクリックして修正してください。<br>すべての確認が終わったら「注文内容を確定し、お支払い手続きへ」ボタンをクリックしてください。</p>
  128.                 </div>
  129.             </section>
  130.             
  131.             <!-- セクション7: 注文完了 -->
  132.             <section class="guide-section">
  133.                 <div class="guide-section-header">
  134.                     <div class="section-number">7</div>
  135.                     <h2 class="section-title">お支払いを完了する</h2>
  136.                 </div>
  137.                 <div class="guide-section-content">
  138.                     <p>クレジットカード決済画面に移動しますので、クレジットカード情報を記入して「次へ」をクリックしてください。</p>
  139.                     <img src="/html/user_data/assets/img/content/credit-card.png" alt="Logo" style="margin:1rem 0; width: 80%; max-width:350px;">
  140.                     <p>内容をご確認いただき、よろしければ「購入」ボタンをクリックしてください。</p>
  141.                 </div>
  142.             </section>
  143.             
  144.             <!-- セクション8: 注文完了 -->
  145.             <section class="guide-section">
  146.                 <div class="guide-section-header">
  147.                     <div class="section-number">8</div>
  148.                     <h2 class="section-title">ご注文完了</h2>
  149.                 </div>
  150.                 <div class="guide-section-content">
  151.                     <p>ご注文いただきますと注文番号が表示され、ご登録メールアドレス宛に「ご注文いただきありがとうございます」という件名の注文確認メールが配信されます。</p>
  152.                 </div>
  153.             </section>
  154.             
  155.         </div>
  156.         <div class="guide-header">
  157.             <h1 id="fee" class="main-title">送料について</h1>
  158.         </div>
  159.         <!-- メインコンテンツ -->
  160.         <div class="guide-main-content">
  161.             <section class="guide-section">
  162.             <div class="guide-section-content">
  163.                 <p>5,000円(税込)以上の購入で<span class='highlight'>送料無料</span>です。</p>
  164.                 <p>※沖縄と北海道のお届けは<span class='highlight'>別途送料1,000円</span>がかかります。</p>
  165.                 <p>送料無料の商品と単品商品は同時購入でも送料無料となります。</p><br>
  166.                 <p>※沖縄と北海道のお届けは<span class='highlight'>別途送料1,000円</span>がかかります。</p>
  167.                 <p>ご購入後、送料を請求させていただきますのでご了承くださいませ。</p>
  168.                 <p>単品商品は都道府県ごとに送料を設定しております。</p>
  169.             </div>
  170.             <div style="padding: 1rem 0;">
  171.                 <table class="shipping-fee-table">
  172.                     <thead>
  173.                         <tr>
  174.                             <th class="prefecture-col">都道府県</th>
  175.                             <th class="fee-col">送料</th>
  176.                         </tr>
  177.                     </thead>
  178.                     <tbody>
  179.                         <tr>
  180.                             <td class="prefecture-col">北海道</td>
  181.                             <td class="fee-col">1,790円</td>
  182.                         </tr>
  183.                         <tr>
  184.                             <td class="prefecture-col">青森県、秋田県、岩手県</td>
  185.                             <td class="fee-col">1,100円</td>
  186.                         </tr>
  187.                         <tr>
  188.                             <td class="prefecture-col">宮城県、山形県、福島県</td>
  189.                             <td class="fee-col">1,000円</td>
  190.                         </tr>
  191.                         <tr>
  192.                             <td class="prefecture-col">茨城県、栃木県、群馬県、埼玉県、千葉県、神奈川県、東京都、山梨県、新潟県、長野県、富山県、石川県、福井県、静岡県、愛知県、三重県、岐阜県、大阪府、京都府、滋賀県、奈良県、和歌山県、兵庫県</td>
  193.                             <td class="fee-col">900円</td>
  194.                         </tr>
  195.                         <tr>
  196.                             <td class="prefecture-col">岡山県、広島県、山口県、鳥取県、島根県、香川県、徳島県、愛媛県、高知県</td>
  197.                             <td class="fee-col">1,000円</td>
  198.                         </tr>
  199.                         <tr>
  200.                             <td class="prefecture-col">福岡県、佐賀県、長崎県、熊本県、大分県、宮崎県、鹿児島県</td>
  201.                             <td class="fee-col">1,100円</td>
  202.                         </tr>
  203.                         <tr>
  204.                             <td class="prefecture-col">沖縄県</td>
  205.                             <td class="fee-col">1,990円</td>
  206.                         </tr>
  207.                     </tbody>
  208.                 </table>
  209.             </div>
  210.             </section>           
  211.         </div>
  212.         <div class="guide-header">
  213.             <h1 id="shipping" class="main-title">お届けについて</h1>
  214.         </div>
  215.         <!-- メインコンテンツ -->
  216.         <div class="guide-main-content">
  217.             <section class="guide-section">
  218.                 <div class="guide-section-header">
  219.                     <h2 class="sub-title">お届け方法について</h2>
  220.                 </div>
  221.                 <div class="guide-section-content">
  222.                     <p>ヤマト運輸クール宅急便にて発送しております。 </p>
  223.                     <p>※伊豆諸島(青ヶ島村・利島村・御蔵島村・式根島)および小笠原諸島小笠原村(父島・母島・硫黄島・南鳥島など)はクール宅急便のお取り扱いをしておりませんので、お届けできかねます。 </p>
  224.                 </div>
  225.             </section>
  226.         </div>
  227.         <div class="guide-main-content">
  228.             <section class="guide-section">
  229.                 <div class="guide-section-header">
  230.                     <h2 class="sub-title">お届け日時について</h2>
  231.                 </div>
  232.                 <div class="guide-section-content">
  233.                     <p>お届けご希望日時は、<span class="highlight">ご注文から7営業日以降</span>をご指定いただけます。<br>
  234.                         「指定無し」をご選択の場合は、<span class="highlight">最短でお届けいたします。</span><br>
  235.                         ※一部地域は発送からお届けまでに時間を要するためご注文から7~9営業日以降の日時指定となります。<br><br>
  236.                         もったいないパンセットについては、お届け日がご指定いただけません。<br>
  237.                         パンが集まり次第の発送となりますのでお届けまでにお時間をいただく場合がございます。<br><br>
  238.                         配送時間指定でご希望の時間帯にお届けいたします。<br>
  239.                         午前中、14時~16時、16時~18時、18時~20時、19時~21時
  240.                     </p>                
  241.                 </div>
  242.             </section>
  243.         </div>
  244.         <div class="guide-main-content">
  245.             <section class="guide-section">
  246.                 <div class="guide-section-header">
  247.                     <h2 class="sub-title">保管期間を過ぎた場合や受取拒否の場合について</h2>
  248.                 </div>
  249.                 <div class="guide-section-content">
  250.                     <p>お客さまご不在の場合、一度荷物は営業所へ持ち帰られます。<br>
  251.                         郵便受けに投函された「ご不在連絡票」にもとづき、再配達手続きをおこなってください。
  252.                         再度、再配達ご依頼指定日にお届けいたしますが、 それでもお受け取りいただけない場合、また、ご不在が続く場合は、約7日間の保管期間を経て弊社へ返送となります。<br>
  253.                         返送された商品は、商品の再発送をお受けすることができません。<br>
  254.                         また、お客さま都合により商品がお受け取りいただけなかった場合、商品代金および配送料はお客さまにご負担いただきますのであらかじめご了承ください</p>
  255.                 </div>
  256.             </section>
  257.         </div>
  258.         <div class="guide-header">
  259.             <h1 id ="payment" class="main-title">お支払いについて</h1>
  260.         </div>
  261.         <!-- メインコンテンツ -->
  262.         <div class="guide-main-content">
  263.             <section class="guide-section">
  264.                 <div class="guide-section-header">
  265.                     <h2 class="sub-title">クレジットカード決済</h2>
  266.                 </div>
  267.                 <div class="guide-section-content">
  268.                     <p>下記のクレジットカードがご利用いただけます。</p>
  269.                     <img src="/html/user_data/assets/img/content/credit-card.png" alt="Logo" style="margin:1rem 0; width: 80%; max-width:350px;">
  270.                     <p>お支払いは一括のみとさせていただいております。<br>
  271.                     引き落とし日は各カード会社の引き落とし規定日に準じます。</p>
  272.                 </div>
  273.             </section>
  274.         </div>
  275.         <div class="guide-main-content">
  276.             <section class="guide-section">
  277.                 <div class="guide-section-header">
  278.                     <h2 class="sub-title">領収書について</h2>
  279.                 </div>
  280.                 <div class="guide-section-content">
  281.                     <p>マイページの購入履歴から発行できます。
  282.                     基本的には発行は1回までとし、2回目以降は「再発行」という文言が印字されますので、あらかじめご了承ください。</br>
  283.                     ※領収書の発行は当ショップマイページ上でのみご利用可能なサービスとなります。</p>
  284.                 </div>
  285.             </section>
  286.         </div>
  287.         <div class="guide-header">
  288.             <h1 id="change" class="main-title">変更について</h1>
  289.         </div>
  290.         <div class="guide-main-content">
  291.             <section class="guide-section">
  292.                 <div class="guide-section-header">
  293.                     <h2 class="sub-title">お届け日・お届け先・ご注文数の変更について</h2>
  294.                 </div>
  295.                 <div class="guide-section-content">
  296.                     <p>変更をご希望の場合は一旦キャンセルし、再度ご注文ください。<br>
  297.                     キャンセルのお手続きは、「注文確定メール」が届く前でしたらお問い合わせフォームより承ります。<br>
  298.                     「注文確定メール」以降は、注文のキャンセルは一切承ることができませんのでご了承くださいませ。</p>
  299.                 </div>
  300.             </section>
  301.         </div>
  302.         <div class="guide-header">
  303.             <h1 id="cancel" class="main-title">キャンセル・返品</h1>
  304.         </div>
  305.         <div class="guide-main-content">
  306.             <section class="guide-section">
  307.                 <div class="guide-section-header">
  308.                     <h2 class="sub-title">キャンセルについて</h2>
  309.                 </div>
  310.                 <div class="guide-section-content">
  311.                     <p>「注文確定メール」が届く前でしたらお問い合わせフォームより承ります。<br>
  312.                     「注文確定メール」以降は、注文のキャンセルは一切承ることができませんのでご了承くださいませ。</p>
  313.                 </div>
  314.             </section>
  315.         </div>
  316.         <div class="guide-main-content">
  317.             <section class="guide-section">
  318.                 <div class="guide-section-header">
  319.                     <h2 class="sub-title">返品・交換について</h2>
  320.                 </div>
  321.                 <div class="guide-section-content">
  322.                     <p>食品のため、原則として不良品以外の返品・交換はできかねます。<br><br>
  323.                     万が一、お届けした商品に不良品などがあった場合は対応させていただきますので、お問い合わせフォームよりご連絡ください。<br>
  324.                     お届け後はすぐに商品の状態をご確認いただき、到着後なるべく早いご連絡をお願いいたします。<br>
  325.                     後日弊社より改めてご連絡差し上げますので、商品の状態が分かるお写真を添付の上、ご返信ください。写真を確認しましたら、その後の流れについてお伝えいたします。</p>
  326.                 </div>
  327.             </section>
  328.         </div>
  329. {% endblock %}