app/template/default/FAQ/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {# Set custom variables for default frame #}
  4. {% set title = custom_params.page_title|default('FAQ') %}
  5. {% set subtitle = custom_params.page_description|default('') %}
  6. {% set body_class = custom_params.custom_css_class|default('faq-page') %}
  9. {% block stylesheet %}
  10.     <link rel="stylesheet" href="{{ asset('assets/css/faq.css') }}">
  11. {% endblock %}
  13. {% block main %}
  15.   <!-- breadcrumb section -->
  16.   <div class="breadcrumb-section">
  17.     <div class="container-1360 border-box px-40">
  18.       <nav class="breadcrumb">
  19.         <a href="{{ url('homepage') }}" class="breadcrumb__item text-black">ホーム</a>
  20.         <img src="{{ asset('assets/img/default/icons/icon-breadcrumb-arrow.svg') }}" alt=">" class="breadcrumb__separator">
  21.         <a href="{{ url('faq') }}" class="breadcrumb__item text-black">よくある質問</a>
  22.       </nav>
  23.     </div>
  24.   </div>
  26.   <!-- faq section -->
  27.   <div class="container-1200">
  28.     <div class="faq-wrapper">
  29.       <!-- FAQ Title Section -->
  30.       <div class="top-header-title-section">
  31.         <div class="top-header-icon-text">
  32.           <div class="top-header-icon-text">
  33.             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  34.               <path d="M3.30811 3.25757C6.5109 -0.440162 12.1045 -0.837808 15.8022 2.36499C19.4997 5.56783 19.8992 11.1632 16.6948 14.8591C15.296 16.4731 13.4401 17.4552 11.4868 17.7869C11.2808 17.8218 11.1201 17.9889 11.1021 18.197L10.9976 19.3982C10.9624 19.8026 10.4481 19.952 10.2017 19.6296L8.94678 17.9841C8.875 17.89 8.76789 17.8282 8.65088 17.8103C7.05636 17.5667 5.50942 16.8858 4.20068 15.7517C0.50299 12.5489 0.103733 6.95362 3.30811 3.25757ZM9.93604 4.87866C7.78875 4.87878 6.3092 6.41203 6.30908 9.05249C6.30908 9.82743 6.43786 10.5156 6.67432 11.0994C7.21958 12.4432 8.58608 13.2719 10.0356 13.2283C10.0406 13.2283 10.0471 13.2289 10.0552 13.2273C10.9163 13.2004 11.7284 12.8652 12.3433 12.3074L13.7427 13.2126C13.7897 13.2428 13.8524 13.2294 13.8843 13.1824L14.4058 12.3757C14.436 12.3288 14.4225 12.2643 14.3755 12.2341L13.0601 11.3835C13.1197 11.2707 13.1762 11.1549 13.2231 11.0339C13.4429 10.4652 13.564 9.80063 13.564 9.05249C13.5638 6.42367 12.0835 4.87866 9.93604 4.87866ZM9.93506 6.26929C11.141 6.26955 11.9076 7.3114 11.9077 9.05249C11.9077 9.60789 11.8345 10.0957 11.7007 10.5056L11.1255 10.1335C11.0786 10.1037 11.015 10.1171 10.9849 10.1638L10.4634 10.9714C10.4333 11.0184 10.4467 11.0819 10.4937 11.1121L11.104 11.5066C10.7898 11.8054 10.395 11.9664 9.93506 11.9666C8.72877 11.9666 7.96143 10.8712 7.96143 9.05249C7.96152 7.30951 8.73052 6.26929 9.93506 6.26929Z" fill="#00A854"/>
  35.             </svg>
  37.             <span class="top-header-text">よくある質問</span>
  38.           </div>
  39.         </div>
  40.         <h1 class="top-header-title">FAQ</h1>
  41.       </div>
  43.       <!-- faq content section -->
  44.       <div class="faq-content-section">
  45.         <!-- FAQ Title -->
  46.         <div class="faq-title-section">
  47.           <h1 class="faq-title">CHEETAH Wi-Fiについて</h1>
  48.         </div>
  50.         <!-- FAQ Accordion -->
  51.         <div class="faq-accordion mb-80" id="faq-accordion-1">
  52.         </div>
  54.          <!-- FAQ Title -->
  55.          <div class="faq-title-section">
  56.           <h1 class="faq-title">発送について</h1>
  57.         </div>
  59.         <!-- FAQ Accordion -->
  60.         <div class="faq-accordion" id="faq-accordion-2">
  61.         </div>
  62.       </div>
  64.     </div>
  66.   </div>
  68.   <script>
  70.   const faqData = [
  71.   {
  72.     question: "契約は必要ですか？",
  73.     answer: "契約は必要ありません。端末をご購入いただくだけでご利用いただけます。"
  74.   },
  75.   {
  76.     question: "有効期間はいつからですか？",
  77.     answer: "WiFiルーターの電源を入れてから開始します。追加チャージの場合は現在お使いのギガがなくなるか、有効期間をむかえてから新たに有効期間カウントされます。"
  78.   },
  79.   {
  80.     question: "ギガを使い切るとどうなりますか？",
  81.     answer: "ギガを使い切るか、有効期間を過ぎるとインターネットがご利用できなくなります。追加ギガをご購入いただくと再度インターネットがご利用いただけます。※ギガがチャージされた後本体の再起動をしてください。"
  82.   },
  83.   {
  84.     question: "ギガの残量の確認はできますか？",
  85.     answer: "端末のディスプレイにてギガ残量の確認ができます。追加ギガは端末のギガが0になったタイミングで自動反映されます。"
  86.   },
  87.   {
  88.     question: "IMEI番号が知りたい",
  89.     answer: "・ルーターの電源を入れる<br>・3回横にスライドする<br>・【端末情報】にIMEI番号(355から始まる15桁の数字)の記載があります。<br><br>もしくは、WiFiルーター本体の梱包箱にIMEI番号(355から始まる15桁の数字)の記載があります。<br><br>追加ギガチャージはどうやってやりますか？"
  90.   },
  91.   {
  92.     question: "追加ギガチャージはどうやってやりますか？",
  93.     answer: "公式サイトでご希望のギガ数をお選びいただき購入可能です。IMEI番号の入力をお願いします。お支払いはクレジットカード、銀行振込、コンビニ払い、PayPayに対応しています。"
  94.   },
  95.   {
  96.     question: "追加ギガはいつ端末に反映されますか？",
  97.     answer: "平日18時までにご購入いただきますと、当日の18時以降にチャージ作業を行います。土日祝日・平日18時以降は翌営業日にチャージ作業を行います。"
  98.   },
  99.   {
  100.     question: "追加ギガの有効期限365日はいつからですか？",
  101.     answer: "ギガ残量がなくなって、追加ギガが端末に反映された日からとなります。"
  102.   },
  103.   {
  104.     question: "ギガがまだ残っている状態でも追加ギガを購入できますか？",
  105.     answer: "ご購入可能です。端末への反映はギガ残量がなくなってからとなりますが、ギガがまだ残っている状態で追加ギガをご購入いただくと途切れることなく通信がおこなえます。"
  106.   },
  107.   {
  108.     question: "インターネット通信が遅い・つながらない",
  109.     answer: "1. WiFiルーター・スマートフォン等の端末の再起動<br>2. スマートフォン等のWiFi設定の削除の後、再設定<br>3. WiFiルーターのネットワーク最適化または初期化<br>をお試しください。"
  110.   },
  111.   {
  112.     question: "電源が入らない・充電が出来ない",
  113.     answer: "30分程度充電していただき、または充電ケーブルを差したまま電源ボタンを30秒以上長押ししていただきますと、強制リセットがかかります。<br>強制リセット中に電源マークが3回ほどゆっくり点滅した後にWiFiマークが出てルーターの電源がつきます。<br>30秒長押ししていただきますと、内部のチップのリセットがかかり改善がされます。"
  114.   },
  115.   {
  116.     question: "領収書は発行できますか？",
  117.     answer: "発送時にインボイス対応の納品書を同封いたしますが、別途領収書が必要な場合はご注文時、備考欄に記入して下さい。<br><br>宛名、但書の希望がございましたら合わせて備考欄に記入して下さい。<br><br>特にご指定のない場合はご注文者さまのお名前、但書は「商品代金として」の記載となります。"
  118.   },
  119.   {
  120.     question: "法人で使用を検討しています",
  121.     answer: "請求書や領収書の発行や数台～数百台のご購入にも対応しておりますのでご相談お願いいたします。"
  122.   },
  123.   {
  124.     question: "SIMを入れた場合、クラウドSIMとどちらが優先されますか？",
  125.     answer: "端末の設定で手動で切替が可能です。物理SIM/クラウドSIMの自動切換えはされません。"
  126.   },
  127.   {
  128.     question: "海外のSIMを入れて使用できますか？",
  129.     answer: "使用可能です。端末のAPN設定が必要です。"
  130.   },
  131.   {
  132.     question: "保証はありますか？",
  133.     answer: "1年間のメーカー保証がございます。自然故障の場合は修理、または交換いたします。交換の場合、残っているギガは引継ぎされます。"
  134.   },
  135.   {
  136.     question: "いつ届きますか？",
  137.     answer: "平日15時までのご注文で即日発送いたします。お届けの目安は本州であれば翌日、北海道は翌々日、沖縄は3日程度です。"
  138.   },
  139.   {
  140.     question: "配送時間の指定はできますか？",
  141.     answer: "配送時間は下記からお選びいただけます。<br>1. 指定なし<br>2. 午前中<br>3. 12:00~14:00<br>4. 14:00~16:00<br>5. 16:00~18:00<br>6. 18:00~21:00"
  142.   },
  143.   {
  144.     question: "海外ですぐに使えますか？",
  145.     answer: "お使いになる国の海外ギガをご購入後、現地で電源を入れるとGPSで自動で場所を特定し使用可能です。"
  146.   }
  147. ];
  148.     function randerFaqItem(faqData) {
  149.       return `<div class="faq-item">
  150.             <div class="faq-question">
  151.               <div class="faq-question-content">
  152.                 <div class="faq-question-label">
  153.                   <span class="faq-label-text">質問</span>
  154.                 </div>
  155.                 <div class="faq-question-text">${faqData.question}</div>
  156.               </div>
  157.             <button class="faq-toggle-btn">
  158.               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  159.               <path d="M7.99805 3.23145L7.99707 3.23242L7.99609 3.23145L1.96289 9.26563L3.4707 10.7734L7.99707 6.24707L12.5234 10.7734L14.0313 9.26562L7.99805 3.23145Z" fill="black"/>
  160.               </svg>
  161.             </button>
  162.             </div>
  163.             <div class="faq-answer">
  164.               <div class="faq-answer-content">
  165.                 <div class="faq-answer-label">
  166.                   <span class="faq-label-text faq-label-text-white">回答</span>
  167.                 </div>
  168.                 <div class="faq-answer-text">
  169.                   <p>${faqData.answer}</p>
  170.                 </div>
  171.               </div>
  172.             </div>
  173.           </div>
  174.           `
  175.     }
  177.     faqData.forEach(item => {
  178.       const faqItem = randerFaqItem(item);
  179.       document.querySelector('#faq-accordion-1').innerHTML += faqItem;
  180.     });
  182.     const faqData2 = [
  183.       {
  184.         question: "送料はいくらですか？",
  185.         answer: "全品送料無料です。"
  186.       },
  187.       {
  188.         question: "領収書は発行できますか？",
  189.         answer: "発送時にインボイス対応の納品書を同封いたしますが、別途領収書が必要な場合はご注文時、備考欄に記入して下さい。<br> 宛名、但書の希望がございましたら合わせて備考欄に記入して下さい。<br>特にご指定のない場合はご注文者さまのお名前、但書は「商品代金として」の記載となります。"
  190.       },
  191.       {
  192.         question: "いつ届きますか？",
  193.         answer: "平日15時までのご注文で即日発送いたします。お届けの目安は本州であれば翌日、北海道は翌々日、沖縄は3日程度です。"
  194.       },
  196.     ];
  197.     faqData2.forEach(item => {
  198.       const faqItem = randerFaqItem(item);
  199.       document.querySelector('#faq-accordion-2').innerHTML += faqItem;
  200.     });
  202.     // FAQ Accordion Functionality
  203.     document.addEventListener('DOMContentLoaded', function() {
  204.       const faqItems = document.querySelectorAll('.faq-item');
  206.       faqItems.forEach(item => {
  207.         const question = item.querySelector('.faq-question');
  208.         const answer = item.querySelector('.faq-answer');
  209.         const toggleBtn = item.querySelector('.faq-toggle-btn');
  211.         question.addEventListener('click', function() {
  212.           const isActive = item.classList.contains('active');
  214.           // Toggle current item
  215.           if (isActive) {
  216.             item.classList.remove('active');
  217.             answer.classList.remove('active');
  218.           } else {
  219.             item.classList.add('active');
  220.             answer.classList.add('active');
  221.           }
  222.         });
  223.       });
  224.     });
  225.   </script>
  226. {% endblock %}