app/template/user_data/guide_detail.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. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'front_page' %}
  15. {% block javascript %}
  16. <script>
  17.     $(document).ready(function () {
  18.         var hash = window.location.hash;
  19.         if (hash) {
  20.             var target = $(hash);
  21.             if (target.length) {
  22.                 var adjust = 300;
  23.                 var position = target.offset().top - adjust;
  24.                 $('body,html').animate({scrollTop: position}, 400, 'swing');
  25.             }
  26.         }
  27.     });
  28. </script>
  29. {% endblock %}
  31. {% block stylesheet %}
  32.     <style>
  33.         details {
  34.             --arrow-size: 18px;
  35.         }
  37.         details summary {
  38.             box-sizing: border-box;
  39.             position: relative;
  40.             display: block;
  41.             font-weight: 200;
  42.             padding: 1.5em calc(var(--arrow-size) + 3em);
  43.             cursor: pointer;
  44.         }
  46.         details summary::-webkit-details-marker {
  47.             /* iOSで表示されるデフォルトの三角形アイコンを消す */
  48.             display: none;
  49.         }
  50.         details summary::after {
  51.             content: "";
  52.             position: absolute;
  53.             top: 0;
  54.             right: 1.5em;
  55.             bottom: 0;
  56.             display: block;
  57.             width: var(--arrow-size);
  58.             height: calc(var(--arrow-size) * 0.6);
  59.             /*aspect-ratio: 1/0.6;*/
  60.             /* ※追記 Windows版Chrome124にてaspect-ratioを指定した要素と、position: absoluteの位置調整の組み合わせに不具合が発生したため、height値をcalcの計算に切り替え */
  61.             margin: auto;
  62.             background: #ffffff;
  63.             clip-path: polygon(100% 13%, 50% 100%, 0 13%, 8% 0, 50% 73%, 92% 0);
  64.         }
  66.         details[open] summary::after {
  67.             transform: rotate(180deg);
  68.         }
  69.     </style>
  70. {% endblock %}
  72. {% set details_1 = [
  73.             {
  74.                 'heading':'(1) 商品詳細ページにアクセスし、注文したい商品をカートに入れます。',
  75.                 'description':'お位牌は1度につき1点のみカートに追加できます。2個以上注文したい場合は、1度カートに商品を入れてから商品詳細ページに戻り次の商品をカートに入れてください。',
  76.             },
  77.             {
  78.                  'heading':'(2) カート内の商品をご確認の上、「レジへ進む」をクリックします。',
  79.                  'description':'お位牌に名入れを行う場合、この画面から入力ページへ進みます。詳しくは「 <a href="%url%" class="underline hover:no-underline">お位牌の名入れについて </a>」をご覧ください。'
  80.             },
  81.             {
  82.                  'heading':'(3) ログイン・会員登録を行なってください。',
  83.                  'description':'会員登録せずに「ゲスト」として注文も可能です。\n会員登録して頂くと、お得なクーポンが発行され（クーポンを発行していない時期もございます）、次回から住所などの入力が不要になるなど、便利な機能をご利用いただけます。ぜひご登録ください。'
  84.             },
  85.             {
  86.                  'heading':'(4) ご注文手続き画面で、お支払い方法・お届け先・クーポンの利用有無などを記入し、金額を確認の上、注文を確定させてください。',
  87.                  'description':'・お届け日のご指定はできません。\n
  88.                  *お位牌のないご注文の場合\n
  89.                  ご注文から【3～7日前後】で発送させて頂きます。\n
  90.                  *お位牌などの「名入れ」があるご注文の場合\n【名入れ原稿確定から約3週間程度】お時間を頂きます。\n
  91.                  ※お急ぎの場合は、有料で約7～10日程度でお届けします。ご要望の場合は、お電話（03-5579-5671）でご連絡ください。\n
  92.                  ※長期休業の際は、通常よりもお時間を頂戴する場合がございます。\n
  93.                  ・ご注文後、自動配信で注文確認メールを送信しております。12時間たってもメールが受信できない方はお電話（03-5579-5671）でご連絡ください。'
  94.             },
  95. ] %}
  96. {% set details_2 = [
  97.     {
  98.         'heading':'● 商品の発送・納期について',
  99.         'description':'お位牌などの「名入れ」があるご注文の場合【名入れ原稿確定から約3週間程度】お時間を頂きます。お位牌の「お急ぎ制作サービス」もございますので、納期をお急ぎの方はお電話（03-5579-5671）でご連絡ください。'
  100.     },
  101.     {
  102.         'heading':'● 送料・配送について',
  103.         'description':'各商品はサイズによりそれぞれ配送区分が設定されています（全国一律）。\n注文時に商品ごとの区分が適用されますので、ご確認ください。\n複数商品ご注文の際は、一番大きな商品の配送区分が適用されます。
  104.         <img src="%asset%" alt="配送料についての画像">
  105.         ※1 軽量区分の商品につきましては日本郵便もしくはヤマト運輸にてお届け致します。\n※2 軽量区分以外の商品につきましてはヤマト運輸にてお届け致します。\n※3 ご注文受付後、配送の準備が整いましたら、当店より発送通知をメールでお送りします。\n※4 発送通知メールに荷物の伝票番号を記載いたします。\n※5 送料については告知なく変更させていただく場合がございます。'
  106.     },
  107. ]
  108. %}
  109. {% set details_3 = [
  110.     {
  111.         'heading':'(1) クレジットカード',
  112.         'description':'下記のクレジットカードでのお支払いが可能です。セキュリティーについては、個人情報が送受信されるページ（お問い合わせ・ショッピングカート）において、SSLによる暗号化通信を使用し、お客様の個人情報を外部から通信傍受できないよう対策を行っております。',
  113.         'methods':[
  114.             {
  115.                 'title':'● ご利用可能なクレジットカード：',
  116.                 'description':' <div class="mb-5 p-3 bg-white"><img src="%asset%" alt="配送料についての画像" ></div>'
  117.             },
  118.             {
  119.                 'title':'● 分割払いもご利用いただけます：',
  120.                 'description':'3回/5回/6回/10回/12回/15回/18回/20回/24回/リボ払い\n ※ クレジットカードの種類によってはご利用いただけない場合があります。\n※ 分割・リボ手数料は、各カード会社に準じます。'
  121.             },
  122.         ],
  123.         'description2':'クレジット決済でエラーとなる場合、下記内容をご確認の上、再度お試し頂けますようお願いします。',
  124.         'description2_text':[
  125.             {
  126.                 'text':'◎ クレジットカードの番号が間違っている。(番号は半角数字で入力)'
  127.             },
  128.             {
  129.                 'text':'◎ クレジットカードの有効期限が切れている。'
  130.             },
  131.             {
  132.                 'text':'◎ セキュリティーコードの番号が間違っている。(番号は半角数字で入力）'
  133.             },
  134.             {
  135.                 'text':'◎ 注文金額がクレジットカードのご利用限度枠を超えている。'
  136.             },
  137.             {
  138.                 'text':'◎ 今回のご注文商品が高額になるため、ご利用のカード会社の制限が入った。'
  139.             },
  140.         ]
  141.     },
  142.     {
  143.         'heading':'(2) 銀行振込',
  144.         'description':'',
  145.         'methods':null,
  146.         'description2':'',
  147.         'description2_text':[
  148.             {
  149.                 'text':'注文画面より銀行振り込みをお選び頂けます。ログインした状態で注文画面にお進みください。'
  150.             },
  151.             {
  152.                 'text':'お振込み先は、ご注文後にお送りする注文内容確認メールにてご案内いたします。'
  153.             },
  154.             {
  155.                 'text':'商品の発送につきましては、ご入金確認後に手配をさせて頂きます。\nお届けするエリアによりますが、ご入金後１週間程度でのお届けとなります。'
  156.             },
  157.             {
  158.                 'text':'振込手数料に関しては、お客様にご負担頂いております。'
  159.             },
  160.             {
  161.                 'text':'その他、決済方法についてのご質問などございましたら <a href="%url%" class="underline hover:no-underline">お問い合わせフォーム</a>・お電話（03-5579-5671）にご連絡ください。'
  162.             },
  163.         ]
  164.     },
  165.     {
  166.         'heading':'(3) Amazon Pay',
  167.         'description':'',
  168.         'methods':null,
  169.         'description2':'',
  170.         'description2_text':[
  171.             {
  172.                 'text':'Amazon Payは、Amazon.co.jpアカウントに登録されている住所情報とクレジット情報を使って、Amazon Payに対応しているサイトやアプリケーションで商品やサービスの支払ができるサービスです。'
  173.             },
  174.             {
  175.                 'text':'詳しくは<a href="https://pay.amazon.co.jp/help/5970" target="_blank" class="underline hover:no-underline">Amazon Payに関するよくある質問</a>をご覧ください。'
  176.             },
  177.         ]
  178.     },
  179. ]
  180. %}
  181. {% set details_4 = [
  182.     {
  183.          'heading':'● 会員情報を変更する場合',
  184.          'description':'ログイン後、マイページ内で変更が必要な部分を変更してください。',
  185.     },
  186.     {
  187.          'heading':'● パスワードをお忘れの場合',
  188.          'description':'「<a href="%url%" class="underline hover:no-underline">パスワードをお忘れの方</a>」から、登録したメールアドレスを入力ください。\n届いたメールに従って、パスワードを再発行してください。',
  189.     },
  190.     {
  191.          'heading':'● 退会する場合',
  192.          'description':'マイページよりお手続きが可能です。',
  193.     },
  194. ] %}
  195. {% set details_5 = [
  196.     {
  197.          'heading':'● ご利用料金',
  198.          'description':'お引き取りするお仏壇のサイズによって異なりますので詳しくは提携会社にお尋ねください。',
  199.     },
  200.     {
  201.          'heading':'● 対象地域',
  202.          'description':'全国で対応しております。　＊一部離島地域は除く',
  203.     },
  204.     {
  205.          'heading':'● 特典',
  206.          'description':'当店からの紹介とお伝え頂くと特別割引を受けることができます。\n＊詳しくは提携会社に直接お尋ねください。',
  207.     },
  208.     {
  209.          'heading':'● 注意事項',
  210.          'description':'提携会社のご連絡先については、商品をご購入後に仏壇引き取りをご希望のお客様のみにご案内しておりますので、ご希望の方はご購入後にメールまたは電話にてお問い合わせください。\n
  211.          当店が直接提供するサービスではございません。お客様と提携会社の直接契約になりますので契約内容やトラブルについては一切の責任を負いかねますのでご了承ください。',
  212.     },
  213. ] %}
  215. {% set details_7 = [
  216.     {
  217.         'heading':'● 返品・交換について',
  218.         'description':'・ご注文前に、必ず各商品ページ内の「注意事項」をご確認いただき、ご了承の上でご注文下さい。\n・お客様都合による返品・交換について\n商品の品質には万全の注意を払っておりますが、万が一不良や破損等がございましたら、商品到着日から7日以内にご連絡をお願いいたします。
  219.         ご注文内容や状況を確認し、対応させていただきます。返品・交換となる場合は、弊社にて送料を全額負担いたします。\n
  220.        ※同一商品の良品との交換ができかねる場合がございます。その場合は返金での対応となります。\n※返品の場合は、弊社にて商品を受領後、返金のお手続きをさせていただきます。\nクレジットカード決済の場合は、ご請求締め日の都合により、注文の引き落としと返金の入金が前後する場合がございます。\n詳しくはクレジットカード会社に直接お問い合わせください。'
  221.     },
  222.     {
  223.         'heading':'● キャンセルについて',
  224.         'description':'原則、商品の発送前に限り、内容の変更を承ります。\n
  225.         ご不明な点等ございましたら、\n<a href="%url%" class="underline hover:no-underline">お問い合わせフォーム</a>・お電話（03-5579-5671）にてご連絡ください。'
  226.     },
  227.     {
  228.         'heading':'● 決済後の追加注文について',
  229.         'description':'商品を決済後に追加でご注文される場合、システムの都合上、送料をおまとめすることはできません。\n
  230.         注文者や住所が同じ場合でも、決済の回数に応じて送料をご請求させて頂いておりますのでご了承ください。'
  231.     }
  232. ] %}
  234. {% block main %}
  235.     <div class="md:mt-6 w-full lg:max-w-none mx-auto lg:mx-0 flex flex-col tems-center justify-center">
  236.         <div class="w-full lg:px-6 flex gap-x-[70px]  justify-center md:text-sm font-extralight animate-slideIn">
  237.             <div class="max-w-[720px] w-full flex flex-col mt-10">
  238.                 <h2 class="text-[26px] md:text-lg mb-6 md:mb-4">ご利用ガイド</h2>
  239.                 <p class="mb-8 tracking-wide text-[#666666]">こちらをご覧になっても解決しない場合は、<a href={{url('contact')}} class="underline hover:no-underline">お問い合わせフォーム</a>よりお気軽にお問い合わせください。
  240.                 </p>
  241.                 <div class="w-full flex flex-col items-center text-[#666666] md:text-sm">
  242.                     <div class="w-full flex flex-col gap-8 md:gap-5 ">
  243.                         <details class="w-full">
  244.                             <summary class="flex justify-between bg-manakaForm px-4 py-4 items-center">
  245.                                 <p class=" text-white text-lg font-bold tracking-wide">1.ご注文手順</p>
  246.                             </summary>
  247.                             <div class="py-4" id="sec01">
  248.                                 <p class="mb-4 tracking-wide">商品は以下の手順でご注文いただけます。</p>
  249.                                 {% for detail_1 in details_1 %}
  250.                                     <div class="pt-6 pb-4 flex flex-col border-t-[2px]  border-[#cccccc]">
  251.                                         <p class="mb-3 md:mb-2 font-bold tracking-wide">{{detail_1.heading}}</p>
  252.                                         <p class=" leading-7 tracking-wide">{{detail_1.description|trans({'%url%': url("user_data",{'route':'naire'})})|raw|nl2br}}</p>
  253.                                     </div>
  254.                                 {% endfor %}
  255.                             </div>
  256.                         </details>
  257.                         <details class="w-full">
  258.                             <summary class="flex justify-between bg-manakaForm px-4 py-4 items-center">
  259.                                 <p class=" text-white text-lg font-bold tracking-wide">2.送料・配送方法</p>
  260.                             </summary>
  261.                             <div class="py-4" id="sec02">
  262.                                 {% for detail_2 in details_2 %}
  263.                                     <div class="pt-6 pb-4 flex flex-col border-t-[2px]  border-[#cccccc]">
  264.                                         <p class="mb-3 md:mb-2 font-bold tracking-wide">{{detail_2.heading}}</p>
  265.                                         <p class=" leading-7 tracking-wide">{{detail_2.description|trans({'%asset%':asset('assets/img/guide_detail/haisou_mini.webp')})|raw|nl2br}}</p>
  266.                                     </div>
  267.                                 {% endfor %}
  268.                             </div>
  269.                         </details>
  270.                         <details class="w-full">
  271.                             <summary class="flex justify-between bg-manakaForm px-4 py-4 items-center">
  272.                                 <p class=" text-white text-lg font-bold tracking-wide">3.お支払い方法</p>
  273.                             </summary>
  274.                             <div class="py-4" id="sec03">
  275.                                 <p class="mb-4 tracking-wide ">クレジットカード・銀行振込・Amazon Payからお選びいただけます。</p>
  276.                                 {% for detail_3 in details_3 %}
  277.                                     <div class="pt-6 pb-4 flex flex-col border-t-[2px]  border-[#cccccc]">
  278.                                         <p class="mb-3 md:mb-2 font-bold tracking-wide">{{detail_3.heading}}</p>
  279.                                         <p class=" leading-7 tracking-wide">{{detail_3.description|raw|nl2br}}</p>
  280.                                         {% if detail_3.methods is not null %}
  281.                                             <div class="bg-manakaBeige my-4 py-4 px-6">
  282.                                                 {% for method in detail_3.methods %}
  283.                                                     <p class="mb-3 font-bold tracking-wide">{{method.title}}</p>
  284.                                                     <p class=" leading-7 tracking-wide">{{method.description|trans({'%asset%':asset('assets/img/guide_detail/bn-credit.webp')})|raw|nl2br}}</p>
  285.                                                 {% endfor %}
  286.                                             </div>
  287.                                         {% endif %}
  288.                                         {% if detail_3.description2 is null or detail_3.description2_text is not null and loop.index == 2 %}
  289.                                             <p class="mb-2 md:mb-2 leading-7 tracking-wide">{{detail_3.description2}}</p>
  290.                                             {% for description2_text in detail_3.description2_text %}
  291.                                                 <p class="mb-1  leading-7 tracking-wide">{{description2_text.text|trans({'%url%': url('contact')})|raw|nl2br}}</p>
  292.                                             {% endfor %}
  293.                                         {% endif %}
  294.                                         {% if detail_3.description2 is null or detail_3.description2_text is not null and loop.index == 3 %}
  295.                                             <p class="mb-2 md:mb-2 leading-7 tracking-wide">{{detail_3.description2}}</p>
  296.                                             {% for description2_text in detail_3.description2_text %}
  297.                                                 <p class="mb-1  leading-7 tracking-wide">{{description2_text.text|raw|nl2br}}</p>
  298.                                             {% endfor %}
  299.                                         {% endif %}
  300.                                     </div>
  301.                                 {% endfor %}
  302.                             </div>
  303.                         </details>
  304.                         <details class="w-full">
  305.                             <summary class="flex justify-between bg-manakaForm px-4 py-4 items-center">
  306.                                 <p class=" text-white text-lg font-bold tracking-wide">4.会員登録について</p>
  307.                             </summary>
  308.                             <div class="py-4" id="sec04">
  309.                                 <p class="tracking-wide mb-4">会員登録をすることで、次回以降ご連絡先の入力が不要になります。<br>
  310.                                     マイページでは、会員情報・お届け先住所の変更、ご注文履歴・お気に入りの確認などが行えます。<br>
  311.                                     入会費・年会費は無料です。</p>
  312.                                 {% for detail_4 in details_4 %}
  313.                                     <div class="pt-6 pb-4 flex flex-col border-t-[2px]  border-[#cccccc]">
  314.                                         <p class="mb-3 md:mb-2 font-bold tracking-wide">{{detail_4.heading}}</p>
  315.                                         <p class=" leading-7 tracking-wide">{{detail_4.description|trans({'%url%': url("forgot")})|raw|nl2br}}</p>
  316.                                     </div>
  317.                                 {% endfor %}
  318.                             </div>
  319.                         </details>
  320.                         <details class="w-full">
  321.                             <summary class="flex justify-between bg-manakaForm px-4 py-4 items-center">
  322.                                 <p class=" text-white text-lg font-bold tracking-wide">5.お仏壇の引き取りについて</p>
  324.                             </summary>
  325.                             <div class="py-4" id="sec05">
  326.                                 <p class="tracking-wide mb-4">当店にて10万円以上のお仏壇・お位牌をご購入頂いたお客様を対象に提携会社によるお仏壇引き取りサービス（有償）をご紹介しております。<br>
  327.                                     事前の訪問見積り（無料）から、仏壇引き取り、遺品整理まで対応しておりますので安心してご相談頂けます。</p>
  328.                                 {% for detail_5 in details_5 %}
  329.                                     <div class="pt-6 pb-4 flex flex-col border-t-[2px]  border-[#cccccc]">
  330.                                         <p class="mb-3 md:mb-2 font-bold tracking-wide">{{detail_5.heading}}</p>
  331.                                         <p class=" leading-7 tracking-wide">{{detail_5.description|raw|nl2br}}</p>
  332.                                     </div>
  333.                                 {% endfor %}
  334.                             </div>
  335.                         </details>
  336.                         <details class="w-full">
  337.                             <summary class="flex justify-between bg-manakaForm px-4 py-4 items-center">
  338.                                 <p class=" text-white text-lg font-bold tracking-wide">6.お位牌への名入れサービス</p>
  340.                             </summary>
  341.                             <div class="py-4" id="sec06">
  342.                                 <p class="tracking-wide">追加料金にて承ります。くわしくは
  343.                                     <a href={{url("user_data",{"route":"naire"} )}} class="underline hover:no-underline">お位牌への名入れについて</a>をご覧ください。</p>
  344.                             </div>
  345.                         </details>
  346.                         <details class="w-full">
  347.                             <summary class="flex justify-between bg-manakaForm px-4 py-4 items-center">
  348.                                 <p class=" text-white text-lg font-bold tracking-wide">7.返品・交換・キャンセル・追加</p>
  350.                             </summary>
  351.                             <div class="py-4" id="sec07">
  352.                                 <p class="tracking-wide mb-4">当店にて10万円以上のお仏壇・お位牌をご購入頂いたお客様を対象に提携会社によるお仏壇引き取りサービス（有償）をご紹介しております。<br>
  353.                                     事前の訪問見積り（無料）から、仏壇引き取り、遺品整理まで対応しておりますので安心してご相談頂けます。</p>
  354.                                 {% for detail_7 in details_7 %}
  355.                                     <div class="pt-6 pb-4 flex flex-col border-t-[2px]  border-[#cccccc]">
  356.                                         <p class="mb-3 md:mb-2 font-bold tracking-wide">{{detail_7.heading}}</p>
  357.                                         <p class=" leading-7 tracking-wide">{{detail_7.description|trans({'%url%': url("contact")})|raw|nl2br}}</p>
  358.                                     </div>
  359.                                 {% endfor %}
  360.                             </div>
  361.                         </details>
  362.                         <details class="w-full">
  363.                             <summary class="flex justify-between bg-manakaForm px-4 py-4 items-center">
  364.                                 <p class=" text-white text-lg font-bold tracking-wide">8.領収書の発行</p>
  365.                             </summary>
  366.                             <div class="py-4" id="sec08">
  367.                                 <p class="tracking-wide">ご注文の際、備考欄に【領収書希望の旨】と【宛名】【但し書き】をご記入ください。商品に領収書を同封致します。<br>
  368.                                     ※ ギフト直送の場合は、ご注文者様のご住所宛てに郵送させて頂きます。<br>
  369.                                     ※ 領収書の再発行は一切承っておりません。あらかじめご了承ください。
  370.                                 </p>
  371.                             </div>
  372.                         </details>
  373.                         <details class="w-full">
  374.                             <summary class="flex justify-between bg-manakaForm px-4 py-4 items-center">
  375.                                 <p class=" text-white text-lg font-bold tracking-wide">9.運営会社について</p>
  376.                             </summary>
  377.                             <div class="py-4" id="sec09">
  378.                                 <p class="tracking-wide">
  379.                                     <a href={{url("user_data",{"route":"corporate"} )}} class="underline hover:no-underline">会社概要</a>のページをご覧ください。
  380.                                 </p>
  381.                             </div>
  382.                         </details>
  383.                     </div>
  384.                     <a href={{url("user_data",{"route":"guide_top"} )}} class="underline hover:no-underline mt-14 text-lg">ご利用ガイド・サービスTOPへ</a>
  385.                 </div>
  386.             </div>
  387.         </div>
  388.         <div class="w-full lg:px-12 mt-[130px] md:mt-10 mb-8 md:mb-0">
  389.             <ul id="breadcrumbs" class="border-t-[1px] border-[#EFEFEF] py-5 md:py-4 w-full md:text-xs text-sm tracking-widest flex items-center gap-x-1">
  390.                 <li>
  391.                     <a href="{{ url('homepage') }}" class="hover">
  392.                         <span>HOME</span>
  393.                     </a>
  394.                 </li>
  395.                 <span>/</span>
  396.                 <li>
  397.                     <a href="{{ url('user_data',{'route': 'guide_top'}) }}" class="hover">
  398.                         <span>ご利用ガイド・サービス</span>
  399.                     </a>
  400.                 </li>
  401.                 <span>/</span>
  402.                 <li>
  403.                     <span>ご利用ガイド詳細</span>
  404.                 </li>
  405.             </ul>
  406.         </div>
  407.     </div>
  408. {% endblock %}