app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  12. {% extends 'default_frame.twig' %}
  14. {% block stylesheet %}
  15.     <link rel="stylesheet" href="{{ asset('assets/css/common_style.css', 'user_data') }}">
  16.     <link rel="stylesheet" href="{{ asset('assets/css/header_nav_0.css') }}">
  17. {% endblock %}
  19. {% set body_class = 'front_page' %}
  22. {% block javascript %}
  23.     <script>
  24.         // $(function() {
  25.         //     $('.main_visual').slick({
  26.         //         dots: true,
  27.         //         arrows: false,
  28.         //         autoplay: true,
  29.         //         speed: 300
  30.         //     });
  31.         // });
  32.         // 画面ロード時
  33.         window.addEventListener("load", function () { 
  34.         
  35.             // 要素取得
  36.             const carousel = document.querySelector(".carousel");
  37.             let slides = [...document.querySelectorAll(".carousel a")];
  38.         
  39.             let slideWidth = slides[0].offsetWidth;
  40.             let currentIndex = 1;
  41.             carousel.style.transition = "none";
  42.             carousel.style.transform = `translateX(${slideWidth + (-slideWidth) * currentIndex}px)`;
  43.         
  44.         
  45.             console.log(slides.map(slide => slide.innerHTML));
  46.         
  47.             // 切り替え機能
  48.             function updateSlide(newIndex) {
  49.                 if (newIndex >= slides.length) {
  50.                     currentIndex = 0; 
  51.                 } else if (newIndex < 0) {
  52.                     currentIndex = slides.length - 1;
  53.                 } else {
  54.                     currentIndex = newIndex;
  55.                 }
  56.         
  57.                 carousel.style.transition = "transform 0.8s ease-in-out";
  58.                 carousel.style.transform = `translateX(${slideWidth + (-slideWidth) * currentIndex}px)`;
  59.         
  60.                 console.log(currentIndex);
  61.                 console.log("Current index:", currentIndex);
  62.             }
  63.         
  64.             // 進むボタン
  65.             document.querySelector(".next-btn").addEventListener("click", () => {
  66.                 updateSlide(currentIndex + 1);
  67.             });
  68.         
  69.             // 戻るボタン
  70.             document.querySelector(".prev-btn").addEventListener("click", () => {
  71.                 updateSlide(currentIndex - 1); 
  72.             });
  73.         
  74.         
  75.             // レスポンシブ
  76.             window.addEventListener("resize", () => {
  77.                 slideWidth = slides[0].offsetWidth; 
  78.                 carousel.style.transition = "none"; 
  79.                 carousel.style.transform = `translateX(${slideWidth + (-slideWidth)  * currentIndex}px)`;
  80.             });
  81.         });
  82.         
  83.         // SNS表示、非表示
  84.         document.addEventListener("DOMContentLoaded", function () {
  85.             const toggleBtn = document.querySelector("#sns-opcl");
  86.             const target = document.querySelector(".sns-scroll");
  87.         
  88.             toggleBtn.addEventListener("click", function () {
  89.                 target.classList.toggle("active");
  90.                 toggleBtn.classList.toggle("active");
  91.             });
  92.         });
  94.     </script>
  95. {% endblock javascript %}
  97. {% block main %}
  98.     <main class="main-content">
  99.         <div class="top-bg">
  100.             <img src="{{ asset('assets/img/common-bg.png', 'user_data') }}" class="" alt="共通TOP-BG"/>
  101.         </div>
  102.         <div class="site-cont">
  103.             <div class="photo-stock">
  105.                 <div class="stock-area container flexlist f-jc-center">
  107.                     <span class="corner-rt"></span>
  108.                     <span class="corner-lb"></span>
  110.                     <img src="{{ asset('assets/img/title_ic_ec-photo.svg', 'user_data') }}" class="icon" alt="フォトサイトストックicon"/>
  111.                     <h2 class="photo-stock-title">ストックフォト</h2>
  112.                     <p>あらゆる列車の写真を取り扱っているECサイトです。無料素材の利用や、提供素材の登録も可能です。</p>
  113.                     <div class="image-area flexlist f-ai-start f-jc-center">
  114.                         <img src="{{ asset('assets/img/photo001.jpg', 'user_data') }}" alt="写真1" class="item01">
  115.                         <img src="{{ asset('assets/img/photo003.jpg', 'user_data') }}" alt="写真2" class="item02">
  116.                         <img src="{{ asset('assets/img/photo002.jpg', 'user_data') }}" alt="写真3" class="item03">
  117.                     </div>
  118.                 </div>
  119.                 <div class="btn-wrapper">
  120.                     <a href="https://photo-pub.com/env" class="btn-s">
  121.                         <span class="btn-text-s">ストックフォトを利用する</span>
  122.                         <span class="btn-icon-s">→</span>
  123.                     </a>
  124.                 </div>
  125.             </div>
  127.             <div class="photo-pub-dou">
  128.                 <div class="pub-area">
  130.                     <span class="corner-rt"></span>
  131.                     <span class="corner-lb"></span>
  133.                     <img src="{{ asset('assets/img/title_ic_ec-book.svg', 'user_data') }}" class="icon" alt="フォトサイトストックicon" />
  134.                     <h2 class="photo-pub-title">フォトパブ堂</h2>
  135.                     <p>列車・バス・古地図・郷土の歴史といった書籍を取り扱っているECサイトです。</p>
  136.                     <div class="image-area flexlist f-jc-center f-ai-center">
  137.                         <img src="{{ asset('assets/img/bookpackage001.jpg', 'user_data') }}" alt="書影1" class="item01">
  138.                         <img src="{{ asset('assets/img/bookpackage003.jpg', 'user_data') }}" alt="書影2" class="item02">
  139.                         <img src="{{ asset('assets/img/bookpackage002.jpg', 'user_data') }}" alt="書影3" class="item03">
  140.                     </div>
  141.                 </div>
  142.                 <div class="btn-wrapper">
  143.                     <a href="https://photo-pub.com/books" class="btn-p">
  144.                         <div class="btn-text-p">フォトパブ堂書店を利用する</div>
  145.                         <div class="btn-icon-p">→</div>
  146.                     </a>
  147.                 </div>
  148.             </div>
  149.         </div>
  150.     </main>
  153.     <section class="guide">
  154.         <div class="guide-title">
  155.             <img src="/html/user_data/assets/img/header_ic_guide.svg" alt="">
  156.             <h2>ご利用ガイド</h2>
  157.         </div>
  158.         <div class="pipe-line">
  159.             <div class="pipe">
  160.                 <div class="line"></div>
  161.             </div>
  162.             <div class="grey"></div>
  163.         </div>
  165.         <div class="base-area">
  166.             <div class="cont-area">
  167.                 <h3 class="cont-title">はじめに</h3>
  168.                 <div class="guide-cont">
  169.                     <p>このたびはフォトパブ堂書店をご利用いただき、誠にありがとうございます。</p>
  170.                     <p>当サイトでは、株式会社フォト・パブリッシングが発行する出版物を中心に、写真・鉄道・歴史にまつわる書籍など、こだわりの一冊をお届けしています。</p>
  171.                     <p>安心してお買い物いただけるよう、ご利用方法やご注意事項をまとめました。</p>
  172.                 </div>
  173.             </div>
  174.     
  175.             <div class="cont-area">
  176.                 <h3 class="cont-title">ご注文の流れ</h3>
  177.                 <div class="guide-cont">
  178.                     <ol>
  179.                         <li>会員登録（無料）またはログイン<br>
  180.                             当サイトをご利用いただくには会員登録が必要です。<br>
  181.                             すでに会員の方は、ログインしてからお買い物をお楽しみください。</li>
  182.                         <li>商品をカートに追加</li>
  183.                         <li>購入手続きへ進む</li>
  184.                         <li>お客様情報・配送先を入力</li>
  185.                         <li>支払い方法を選択</li>
  186.                         <li>内容を確認し、注文確定</li>
  187.                     </ol>
  188.                     <p>ご注文完了後、ご登録のメールアドレスに確認メールが届きます。</p>
  189.                 </div>
  190.             </div>
  191.     
  192.     
  193.             <div class="cont-area">
  194.                 <h3 class="cont-title">お支払い方法</h3>
  195.                 <div class="guide-cont">
  196.                     <ul>
  197.                         <li>クレジットカード（VISA／Mastercard／JCB／AMEXなど）</li>
  198.                         <li>コンビニ決済</li>
  199.                         <li>Apple Pay</li>
  200.                         <li>Google Pay</li>
  201.                     </ul>
  202.                 </div>
  203.             </div>
  204.     
  205.             <div class="cont-area">
  206.                 <h3 class="cont-title">配送について</h3>
  207.                 <div class="guide-cont">
  208.                     <ul>
  209.                         <li>配送方法：クリックポスト／レターパックプラス／ヤマト運輸（宅急便）</li>
  210.                         <li>商品や冊数、サイズに応じて配送方法が異なります</li>
  211.                         <li>同梱されず、複数通に分かれて発送される場合があります</li>
  212.                     </ul>
  213.                     <p>例：2冊購入 → クリックポスト2通になる可能性あり</p>
  214.                 </div>
  215.             </div>
  216.     
  217.             
  218.             <div class="cont-area">
  219.                 <h3 class="cont-title">送料について</h3>
  220.                 <div class="guide-cont">
  221.                     <p>3,500円（税込）以上のご注文で送料無料</p>
  222.                     <p>3,500円未満の場合は所定の送料がかかります（配送方法により異なります）</p>
  223.                 </div>
  224.             </div>
  225.     
  226.     
  227.             <div class="cont-area">
  228.                 <h3 class="cont-title">領収書について</h3>
  229.                 <div class="guide-cont">
  230.                     <p>領収書は商品に同梱してお届けします</p>
  231.                     <p>不要の場合は、ご注文時の備考欄にその旨をご記載ください</p>
  232.                 </div>
  233.             </div>
  234.     
  235.     
  236.             <div class="cont-area">
  237.                 <h3 class="cont-title">キャンセル・返品・交換</h3>
  238.                 <div class="guide-cont">
  239.                     <p>発送前であればキャンセル可能です（お問い合わせ先までご連絡ください）</p>
  240.                     <p>発送後のキャンセル・返品は原則承ることができません。</p>
  241.                     <p>商品に破損・汚損など不備があった場合は、交換または返金で対応いたしますので、<br>
  242.                         商品到着後、7日以内にご連絡ください。</p>
  243.                 </div>
  244.             </div>
  245.     
  246.     
  247.     
  248.             <div class="cont-area">
  249.                 <h3 class="cont-title">お気に入り機能について</h3>
  250.                 <div class="guide-cont">
  251.                     <p>会員登録をしていただくと、気になる商品を「お気に入り登録」することが可能です。</p>
  252.                     <p>会員ページの「お気に入り一覧」から、いつでも確認・再注文できます。</p>
  253.                 </div>
  254.             </div>
  255.     
  256.     
  257.             <div class="cont-area">
  258.                 <h3 class="cont-title">お問い合わせ</h3>
  259.                 <div class="guide-cont">
  260.                     <p>運用代行：株式会社Rit</p>
  261.                     <p>電話：048-871-7160（平日10:00〜18:00 ※年末年始を除く）</p>
  262.                     <p>メール：photo-pub_ec@rit-inc.net</p>
  263.                 </div>
  264.             </div>
  265.     
  266.     
  267.             <div class="cont-area">
  268.                 <h3 class="cont-title">よくあるご質問（FAQ）</h3>
  269.                 <div class="guide-cont">
  271.                     <h4>■ 注文・決済に関する質問</h4>
  272.                     <div class="qa">
  273.                         <p>Q. 注文のキャンセルはどうすればいいですか？</p>
  274.                         <p class="answer">A. お問い合わせ先までお電話またはメールにてご連絡ください。</p>
  275.                     </div>
  276.                     <div class="qa">
  277.                         <p>Q. 支払い方法を間違えてしまいました。変更できますか？</p>
  278.                         <p class="answer">A.ご注文後、支払い方法の変更は承れません。決済前に確認いただくようお願いいたします。</p>
  279.                     </div>
  280.                     <div class="qa">
  281.                         <p>Q. 注文後に支払い方法を変更できますか？</p>
  282.                         <p class="answer">A.支払い方法の変更は、注文確定前であれば可能です。注文後は変更できません。</p>
  283.                     </div>
  284.                     <div class="qa">
  285.                         
  286.                         <p>Q. 決済エラーが出て注文できません</p>
  287.                         <p class="answer">A.支払い情報の再入力や他の支払い方法をお試しください。問題が解決しない場合は、お問い合わせ先までご連絡ください。</p>
  288.                     </div>
  291.                     <h4>■ 配送・発送に関する質問</h4>
  292.                     <div class="qa">
  293.                         <p>Q. いつ発送されますか？</p>
  294.                         <p class="answer">A.決済確認後、5営業日以内に発送いたします。</p>
  295.                     </div>
  296.                     <div class="qa">
  297.                         <p>Q. 配送状況はどこで確認できますか？</p>
  298.                         <p class="answer">A.レターパック：一部追跡可能（日本郵便サイト）<br>
  299.                         ヤマト運輸：荷物お問い合わせシステムで確認可能<br>
  300.                         クリックポスト：簡易追跡あり（詳細な追跡は不可）</p>
  301.                     </div>
  302.                     <div class="qa">
  303.                         <p>Q. 海外発送はできますか？</p>
  304.                         <p class="answer">A. 現在対応しておりません。ご要望がありましたらお問い合わせ先までご連絡ください。</p>
  305.                     </div>
  306.                     <div class="qa">
  307.                         <p>Q. 商品が届きません／遅れています</p>
  308.                         <p class="answer">A. 確認いたしますので、お問い合わせ先までご連絡ください。</p>
  309.                     </div>
  310.                     <div class="qa">
  311.                         <p>Q. クリックポストはポスト投函ですか？</p>
  312.                         <p class="answer">A. はい、ポスト投函となります。</p>
  313.                     </div>
  314.                     <div class="qa">
  315.                         <p>Q. 配達日時の指定はできますか？</p>
  316.                         <p class="answer">A.配達日時の指定はヤマト運輸（宅急便）のみ可能です。その他の配送方法では指定できません。</p>
  317.                     </div>
  318.                 </div>
  319.                 <p>ご利用ガイドをご確認いただいてもご不明な点がございましたら、お問い合わせ先までご連絡ください。</p>
  320.                 <br>
  321.                 <p>今後ともフォトパブ堂書店をよろしくお願いいたします。</p>
  322.             </div>
  323.         </div>
  324.     </section>
  325. {% endblock %}