app/template/bravers/Product/detail.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% extends 'default_frame.twig' %}
  9. {% set body_class = 'product_page' %}
  10. {% block stylesheet %}
  11.     <style>
  12.     </style>
  13. {% endblock %}
  14. {% block javascript %}
  15.     <script>
  16.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  17.         // 規格2に選択肢を割り当てる。
  18.         function fnSetClassCategories(form, classcat_id2_selected) {
  19.             var $form = $(form);
  20.             var product_id = $form.find('input[name=product_id]').val();
  21.             var $sele1 = $form.find('select[name=classcategory_id1]');
  22.             var $sele2 = $form.find('select[name=classcategory_id2]');
  23.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  24.         }
  25.         {% if form.classcategory_id2 is defined %}
  26.         fnSetClassCategories(
  27.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  28.         );
  29.         {% elseif form.classcategory_id1 is defined %}
  30.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  31.         {% endif %}
  32.     </script>
  33.     <script>
  34.         $(function() {
  35.             // bfcache無効化
  36.             $(window).bind('pageshow', function(event) {
  37.                 if (event.originalEvent.persisted) {
  38.                     location.reload(true);
  39.                 }
  40.             });
  41.         });
  42.         const thumbnail = document.querySelectorAll('.thumbnailImage');
  43.         let isCheck = false;
  44.         if (thumbnail.length > 3) {
  45.             isCheck = true;
  46.         }
  47.         const sliderThumbnail = new Swiper(".slider-thumbnail", {
  48.             slidesPerView: 3, // サムネイルの枚数
  49.             loop: isCheck,
  50.             spaceBetween: 6,
  51.         });
  52.         // スライダー
  53.         const slider = new Swiper(".slider", {
  54.             loop: isCheck,
  55.             thumbs: {
  56.                 swiper: sliderThumbnail,
  57.             },
  58.         });
  59.         // ウィンドウがリサイズされたときに実行する関数
  60.         function updatePaddingTop() {
  61.             // 全ての.thumbnailImage要素を取得
  62.             const thumbnailElements = document.querySelectorAll('.thumbnailImage');
  63.             // 各.thumbnailImage要素に対して処理を行う
  64.             thumbnailElements.forEach(function(thumbnailElement) {
  65.                 let computedStyle = window.getComputedStyle(thumbnailElement);
  66.                 let thumbnailWidth = parseFloat(computedStyle.width);
  67.                 thumbnailElement.style.paddingTop = thumbnailWidth + 'px';
  68.             });
  69.         }
  70.         // 初回の実行
  71.         updatePaddingTop();
  72.         // ウィンドウのリサイズが終わったら実行
  73.         window.addEventListener('resize', function() {
  74.             updatePaddingTop();
  75.         });
  76.     </script>
  77.     <script>
  78.         $(function() {
  79.             $('.add-cart').on('click', function(event) {
  80.                 {% if form.classcategory_id1 is defined %}
  81.                 // 規格1フォームの必須チェック
  82.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  83.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  84.                     return true;
  85.                 } else {
  86.                     $('#classcategory_id1')[0].setCustomValidity('');
  87.                 }
  88.                 {% endif %}
  89.                 {% if form.classcategory_id2 is defined %}
  90.                 // 規格2フォームの必須チェック
  91.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  92.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  93.                     return true;
  94.                 } else {
  95.                     $('#classcategory_id2')[0].setCustomValidity('');
  96.                 }
  97.                 {% endif %}
  98.                 // 個数フォームのチェック
  99.                 if ($('#quantity').val() < 1) {
  100.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  101.                     return true;
  102.                 } else {
  103.                     $('#quantity')[0].setCustomValidity('');
  104.                 }
  105.                 event.preventDefault();
  106.                 $form = $('#form1');
  107.                 $.ajax({
  108.                     url: $form.attr('action'),
  109.                     type: $form.attr('method'),
  110.                     data: $form.serialize(),
  111.                     dataType: 'json',
  112.                     beforeSend: function(xhr, settings) {
  113.                         // Buttonを無効にする
  114.                         $('.add-cart').prop('disabled', true);
  115.                     }
  116.                 }).done(function(data) {
  117.                     // レスポンス内のメッセージをalertで表示
  118.                     $.each(data.messages, function() {
  119.                         $('#ec-modal-header').text(this);
  120.                     });
  121.                     $('.ec-modal').show()
  122.                     // カートブロックを更新する
  123.                     $.ajax({
  124.                         url: "{{ url('block_cart') }}",
  125.                         type: 'GET',
  126.                         dataType: 'html'
  127.                     }).done(function(html) {
  128.                         $('.ec-headerRole__cart').html(html);
  129.                     });
  130.                 }).fail(function(data) {
  131.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  132.                 }).always(function(data) {
  133.                     // Buttonを有効にする
  134.                     $('.add-cart').prop('disabled', false);
  135.                 });
  136.             });
  137.         });
  138.         $('.ec-modal-wrap').on('click', function(e) {
  139.             // モーダル内の処理は外側にバブリングさせない
  140.             e.stopPropagation();
  141.         });
  142.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  143.             $('.ec-modal').hide()
  144.         });
  145.     </script>
  146.     <script type="application/ld+json">
  147.     {
  148.         "@context": "https://schema.org/",
  149.         "@type": "Product",
  150.         "name": "{{ Product.name }}",
  151.         "image": [
  152.             {% for img in Product.ProductImage %}
  153.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  154.             {% else %}
  155.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  156.             {% endfor %}
  157.         ],
  158.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  159.         {% if Product.code_min %}
  160.         "sku": "{{ Product.code_min }}",
  161.         {% endif %}
  162.         "offers": {
  163.             "@type": "Offer",
  164.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  165.             "priceCurrency": "{{ eccube_config.currency }}",
  166.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  167.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  168.         }
  169.     }
  170.     </script>
  171. {% endblock %}
  172. {% block main %}
  173.     <div class="ec-productRole">
  174.         <ul class="breadcrumb">
  175.             <li class="breadcrumb__item">
  176.                 <a href="{{ url('product_list') }}" class="breadcrumb__item__link">
  177.                     ホーム
  178.                 </a>
  179.             </li>
  180.             <li class="breadcrumb__item">
  181.                 <p class="breadcrumb__item__arrow">></p>
  182.             </li>
  183.             {% if BreadcrumbCategory is not empty %}
  184.                 {# {% set ProductCategory = Product.ProductCategories|first %} #}
  185.                 {% for Category in BreadcrumbCategory.path %}
  186.                     {% if Category.id != constant('Customize\\Common\\Constant::MANUFACTURER_CATEGORY_ID') %}
  187.                     <li class="breadcrumb__item">
  188.                         <a class="breadcrumb__item__link" href="{{ url('product_list') }}?category_id={{ Category.id }}">
  189.                             {{ Category.name }}
  190.                         </a>
  191.                     </li>
  192.                      <li class="breadcrumb__item">
  193.                         <p class="breadcrumb__item__arrow">></p>
  194.                     </li>
  195.                     {% endif %}
  196.                 {% endfor %}
  197.             {% endif %}
  198.             <li class="breadcrumb__item">
  199.                 <p class="breadcrumb__item__text" href="javascript:void(0)">
  200.                     {{ Product.name }}
  201.                 </p>
  202.             </li>
  203.         </ul>
  204.         <div class="ec-productDetail">
  205.             <div class="ec-productDetail__image">
  206.                 <!-- スライダー -->
  207.                 <div class="swiper slider">
  208.                     <div class="swiper-wrapper">
  209.                         {% for ProductImage in Product.ProductImage %}
  210.                             <div class="swiper-slide"><img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"{% if loop.index > 1 %} loading="lazy"{% endif %}></div>
  211.                         {% else %}
  212.                             <div class="swiper-slide"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550"></div>
  213.                         {% endfor %}
  214.                     </div>
  215.                 </div>
  216.                 <!-- サムネイル -->
  217.                 <div class="swiper slider-thumbnail">
  218.                     <div class="swiper-wrapper">
  219.                         {% for ProductImage in Product.ProductImage %}
  220.                             <div class="swiper-slide thumbnailImage" data-index="{{ loop.index0 }}">
  221.                                 <img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="125" height="125">
  222.                             </div>
  223.                         {% endfor %}
  224.                     </div>
  225.                 </div>
  226.             </div>
  227.             <div class="ec-productDetail__content">
  228.                 {# 商品名 #}
  229.                 <div class="ec-productDetail__content__title">
  230.                     <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  231.                 </div>
  232.                 {# 関連カテゴリ #}
  233.                 {# {% if Product.ProductCategories is not empty %}
  234.                     <div class="ec-productRole__category">
  235.                         <div>{{ '関連カテゴリ'|trans }}</div>
  236.                         {% for ProductCategory in Product.ProductCategories %}
  237.                             <ul>
  238.                                 <li>
  239.                                     {% for Category in ProductCategory.Category.path %}
  240.                                         <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> 
  241.                                         {%- if loop.last == false %}
  242.                                             <span>></span>
  243.                                         {% endif -%}
  244.                                     {% endfor %}
  245.                                 </li>
  246.                             </ul>
  247.                         {% endfor %}
  248.                     </div>
  249.                 {% endif %} #}
  250.                 
  251.                 {% if MakerCategory %}
  252.                 <dl class="ec-productDetail__content__category">
  253.                     <dt class="ec-productDetail__content__category__dt">メーカー</dt>
  254.                     <dd class="ec-productDetail__content__category__dd">
  255.                         {% for Category in MakerCategory.path %}
  256.                             {% if Category.id != constant('Customize\\Common\\Constant::MANUFACTURER_CATEGORY_ID') %}
  257.                                 <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> 
  258.                                 {%- if loop.last == false %}
  259.                                     <span>></span>
  260.                                 {% endif -%}
  261.                             {% endif %}
  262.                         {% endfor %}
  263.                     </dd>
  264.                 </dl>
  265.                 {% endif %}
  266.                 
  267.                 {% if DefaultCategory %}
  268.                 <dl class="ec-productDetail__content__category">
  269.                     <dt class="ec-productDetail__content__category__dt">カテゴリー</dt>
  270.                     <dd class="ec-productDetail__content__category__dd">
  271.                         {% for Category in DefaultCategory.path %}
  272.                             {% if Category.id != constant('Customize\\Common\\Constant::DEFAULT_CATEGORY_ID') %}
  273.                                 <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> 
  274.                                 {%- if loop.last == false %}
  275.                                     <span>></span>
  276.                                 {% endif -%}
  277.                             {% endif %}
  278.                         {% endfor %}
  279.                     </dd>
  280.                 </dl>
  281.                 {% endif %}
  282.                 {% if is_granted('ROLE_USER') %}
  283.                     <dl class="ec-productDetail__content__category">
  284.                         <dt class="ec-productDetail__content__category__dt">{{ '発送目安'|trans }}</dt>
  285.                         <dd class="ec-productDetail__content__category__dd">
  286.                             {% if Product.getDeliveryDuration %}
  287.                                 {{Product.getDeliveryDuration.name}}
  288.                             {% else %}
  289.                                 未定
  290.                             {% endif %}
  291.                         </dd>
  292.                     </dl>
  293.                     <dl class="ec-productDetail__content__category">
  294.                         <dt class="ec-productDetail__content__category__dt">{{ '在庫'|trans }}</dt>
  295.                         <dd class="ec-productDetail__content__category__dd">
  296.                             {% if Product.getStockUnlimitedMin or Product.getStockMin >= 10 %}
  297.                                 ◎
  298.                             {% else %}
  299.                                 {% if Product.getStockMin >= 1 and Product.getStockMin <= 9 %}
  300.                                     ○
  301.                                 {% endif %}
  302.                                 {% if Product.getStockMin <= 0 %}
  303.                                     ■
  304.                                 {% endif %}
  305.                             {% endif %}
  306.                         </dd>
  307.                     </dl>
  308.                     <p class="ec-productDetail__content__line"></p>
  309.                     <div class="ec-productDetail__content__description">{{ Product.description_detail|raw|nl2br }}</div>
  310.                     {# タグ #}
  311.                     {# {% if Product.Tags is not empty %}
  312.                     <ul class="ec-productRole__tags">
  313.                         {% for Tag in Product.Tags %}
  314.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  315.                         {% endfor %}
  316.                     </ul>
  317.                     {% endif %} #}
  318.                     <p class="ec-productDetail__content__line"></p>
  319.                     {# 通常価格 #}
  320.                     {% if Product.hasProductClass -%}
  321.                         <div class="ec-productDetail__content__priceRegular">
  322.                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  323.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  324.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  325.                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  326.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}~ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  327.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  328.                             {% endif %}
  329.                         </div>
  330.                     {% else %}
  331.                         {% if Product.getPrice01Max is not null %}
  332.                             <div class="ec-productDetail__content__priceRegular">
  333.                                 <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:{{ Product.getPrice01IncTaxMin|price }}</span>
  334.                                 <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  335.                             </div>
  336.                         {% endif %}
  337.                     {% endif %}
  338.                     {# 販売価格 #}
  339.                     <div class="ec-productDetail__content__price">
  340.                         {% if Product.hasProductClass -%}
  341.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  342.                                 <div class="ec-price">
  343.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  344.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  345.                                 </div>
  346.                             {% else %}
  347.                                 <div class="ec-price">
  348.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span>
  349.                                     <span class="ec-price__tax">{{ '税込'|trans }}</span>
  350.                                 </div>
  351.                             {% endif %}
  352.                         {% else %}
  353.                             <div class="ec-price">
  354.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  355.                                 <span class="ec-price__tax">{{ '税込'|trans }}</span>
  356.                             </div>
  357.                         {% endif %}
  358.                     </div>
  359.                     {# 商品コード #}
  360.                     {# {% if Product.code_min is not empty %}
  361.                         <div class="ec-productRole__code">
  362.                             {{ '商品コード'|trans }}: <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  363.                         </div>
  364.                     {% endif %} #}
  365.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  366.                         <div class="ec-productDetail__content__form">
  367.                             {% if not Product.getStockUnlimitedMin and Product.getStockMin <= 0 and Product.isStockDiscontinued %}
  368.                                 <div class="ec-productRole__btn soldOut">
  369.                                     <button type="button" class="ec-blockBtn--action" disabled="disabled">
  370.                                         {{ 'ただいま品切れ中です。'|trans }}
  371.                                     </button>
  372.                                 </div>
  373.                             {% else %}
  374.                                 <div class="ec-productDetail__content__num">
  375.                                     {% if form.classcategory_id1 is defined %}
  376.                                         <div class="ec-select">
  377.                                             {{ form_row(form.classcategory_id1) }}
  378.                                             {{ form_errors(form.classcategory_id1) }}
  379.                                         </div>
  380.                                         {% if form.classcategory_id2 is defined %}
  381.                                             <div class="ec-select">
  382.                                                 {{ form_row(form.classcategory_id2) }}
  383.                                                 {{ form_errors(form.classcategory_id2) }}
  384.                                             </div>
  385.                                         {% endif %}
  386.                                     {% endif %}
  387.                                     <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
  388.                                         {{ form_widget(form.quantity) }}
  389.                                         {{ form_errors(form.quantity) }}
  390.                                     </div>
  391.                                 </div>
  392.                                 <div class="ec-productRole__btn">
  393.                                     <button type="submit" class="ec-regular__btn add-cart">
  394.                                         {{ 'カートに入れる'|trans }}
  395.                                     </button>
  396.                                 </div>
  397.                             {% endif %}
  398.                             {{ form_rest(form) }}
  399.                         </div>
  400.                     </form>
  401.                     <div class="ec-modal">
  402.                         <div class="ec-modal-overlay">
  403.                             <div class="ec-modal-wrap product-detail">
  404.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  405.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  406.                                 <div class="ec-modal-box">
  407.                                     <div class="ec-role">
  408.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  409.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  410.                                     </div>
  411.                                 </div>
  412.                             </div>
  413.                         </div>
  414.                     </div>
  415.                     {% if BaseInfo.option_favorite_product %}
  416.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  417.                             <div class="ec-productRole__btn ec-productRoleFavorite__btn">
  418.                                 {% if is_favorite == false %}
  419.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel active">
  420.                                         <img src="{{ asset('assets/img/favorite/after.svg') }}" alt="お気に入り" width="24" height="24" loading="lazy">
  421.                                         <span>{{ 'お気に入りに追加'|trans }}</span>
  422.                                     </button>
  423.                                 {% else %}
  424.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  425.                                             disabled="disabled">
  426.                                             <img src="{{ asset('assets/img/favorite/before.svg') }}" alt="お気に入り" width="24" height="24" loading="lazy">
  427.                                             <span>{{ 'お気に入りに追加済です。'|trans }}</span>
  428.                                     </button>
  429.                                 {% endif %}
  430.                             </div>
  431.                         </form>
  432.                     {% endif %}
  433.                 {% else %}
  434.                     <a href="{{ url('entry_contact') }}" class="ec-blockProductBtn--action">会員登録はこちら</a>
  435.                 {% endif %}
  436.                 <p class="ec-productDetail__content__line"></p>
  437.                 <ul class="ec-productDetail__content__faq">
  438.                     <li class="ec-productDetail__content__faq__item"><button class="modal-toggle" data-modal="detailPostage">送料について</button></li>
  439.                     <li class="ec-productDetail__content__faq__item"><button class="modal-toggle" data-modal="detailDelivery">お届け日について</button></li>
  440.                     <li class="ec-productDetail__content__faq__item"><button class="modal-toggle" data-modal="detailPay">お支払い方法/領収書について</button></li>
  441.                     <li class="ec-productDetail__content__faq__item"><button class="modal-toggle" data-modal="detailProductReturn">返品</button></li>
  442.                     <li class="ec-productDetail__content__faq__item"><button class="modal-toggle" data-modal="detailRepair">修理について</button></li>
  443.                 </ul>
  444.             </div>
  445.         </div>
  446.         {# {% if Product.freearea %}
  447.              <div class="ec-productRole__description">
  448.                  {{ include(template_from_string(Product.freearea)) }}
  449.             </div>
  450.         {% endif %} #}
  451.     </div>
  452.     <!-- modal一覧 -->
  453.     <div id="detailPostage" class="modal-outer">
  454.         <div class="modal-inner productDetail">
  455.             <div class="modal-inner__content">
  456.                 <button class="modalCloseTop"></button>
  457.                 <p class="modal-inner__content__title">
  458.                     送料について
  459.                 </p>
  460.                 <p class="modal-inner__content__detail">10,000円(税抜)以上は送料無料<br>10,000円未満は地域別送料が発生します。</p>
  461.                 <table class="modal-inner__content__postage" border="1">
  462.                     <tr><th class="postage__title" colspan="8">北海道・東北</th></tr>
  463.                     <tr>
  464.                         <th>北海道</th>
  465.                         <th>青森県</th>
  466.                         <th>秋田県</th>
  467.                         <th>岩手県</th>
  468.                         <th>宮城県</th>
  469.                         <th>山形県</th>
  470.                         <th>福島県</th>
  471.                         <th></th>
  472.                     </tr>
  473.                     <tr>
  474.                         <td>1100円</td>
  475.                         <td colspan="3">800円</td>
  476.                         <td colspan="3">700円</td>
  477.                         <td></td>
  478.                     </tr>
  479.                     <tr><th class="postage__title" colspan="8">関東</th></tr>
  480.                     <tr>
  481.                         <th>茨城県</th>
  482.                         <th>栃木県</th>
  483.                         <th>群馬県</th>
  484.                         <th>埼玉県</th>
  485.                         <th>千葉県</th>
  486.                         <th>神奈川県</th>
  487.                         <th>東京都</th>
  488.                         <th>山梨県</th>
  489.                     </tr>
  490.                     <tr>
  491.                         <td colspan="8">700円</td>
  492.                     </tr>
  493.                     <tr><th class="postage__title" colspan="8">信越</th></tr>
  494.                     <tr>
  495.                         <th>新潟県</th>
  496.                         <th>長野県</th>
  497.                         <th></th>
  498.                         <th></th>
  499.                         <th></th>
  500.                         <th></th>
  501.                         <th></th>
  502.                         <th></th>
  503.                     </tr>
  504.                     <tr>
  505.                         <td colspan="2">700円</td>
  506.                         <td></td>
  507.                         <td></td>
  508.                         <td></td>
  509.                         <td></td>
  510.                         <td></td>
  511.                         <td></td>
  512.                     </tr>
  513.                     <tr><th class="postage__title" colspan="8">中部・北陸</th></tr>
  514.                     <tr>
  515.                         <th>静岡県</th>
  516.                         <th>愛知県</th>
  517.                         <th>三重県</th>
  518.                         <th>岐阜県</th>
  519.                         <th>富山県</th>
  520.                         <th>石川県</th>
  521.                         <th>福井県</th>
  522.                         <th></th>
  523.                     </tr>
  524.                     <tr>
  525.                         <td colspan="7">700円</td>
  526.                         <td></td>
  527.                     </tr>
  528.                     <tr><th class="postage__title" colspan="8">関西</th></tr>
  529.                     <tr>
  530.                         <th>大阪府</th>
  531.                         <th>京都府</th>
  532.                         <th>滋賀県</th>
  533.                         <th>奈良県</th>
  534.                         <th>和歌山県</th>
  535.                         <th>兵庫県</th>
  536.                         <th></th>
  537.                         <th></th>
  538.                     </tr>
  539.                     <tr>
  540.                         <td colspan="6">800円</td>
  541.                         <td></td>
  542.                         <td></td>
  543.                     </tr>
  544.                     <tr><th class="postage__title" colspan="8">中国</th></tr>
  545.                     <tr>
  546.                         <th>岡山県</th>
  547.                         <th>広島県</th>
  548.                         <th>山口県</th>
  549.                         <th>鳥取県</th>
  550.                         <th>島根県</th>
  551.                         <th></th>
  552.                         <th></th>
  553.                         <th></th>
  554.                     </tr>
  555.                     <tr>
  556.                         <td colspan="5">900円</td>
  557.                         <td></td>
  558.                         <td></td>
  559.                         <td></td>
  560.                     </tr>
  561.                     <tr><th class="postage__title" colspan="8">中国</th></tr>
  562.                     <tr>
  563.                         <th>岡山県</th>
  564.                         <th>広島県</th>
  565.                         <th>山口県</th>
  566.                         <th>鳥取県</th>
  567.                         <th>島根県</th>
  568.                         <th></th>
  569.                         <th></th>
  570.                         <th></th>
  571.                     </tr>
  572.                     <tr>
  573.                         <td colspan="5">900円</td>
  574.                         <td></td>
  575.                         <td></td>
  576.                         <td></td>
  577.                     </tr>
  578.                     <tr><th class="postage__title" colspan="8">四国</th></tr>
  579.                     <tr>
  580.                         <th>香川県</th>
  581.                         <th>徳島県</th>
  582.                         <th>愛媛県</th>
  583.                         <th>高知県</th>
  584.                         <th></th>
  585.                         <th></th>
  586.                         <th></th>
  587.                         <th></th>
  588.                     </tr>
  589.                     <tr>
  590.                         <td colspan="4">1000円</td>
  591.                         <td></td>
  592.                         <td></td>
  593.                         <td></td>
  594.                     </tr>
  595.                     <tr><th class="postage__title" colspan="8">九州・沖縄</th></tr>
  596.                     <tr>
  597.                         <th>福岡県</th>
  598.                         <th>大分県</th>
  599.                         <th>長崎県</th>
  600.                         <th>佐賀県</th>
  601.                         <th>宮崎県</th>
  602.                         <th>熊本県</th>
  603.                         <th>鹿児島県</th>
  604.                         <th>沖縄</th>
  605.                     </tr>
  606.                     <tr>
  607.                         <td colspan="7">1100円</td>
  608.                         <td>1200円</td>
  609.                     </tr>
  610.                 </table>
  611.             </div>
  612.         </div>
  613.     </div>
  614.     <div id="detailDelivery" class="modal-outer">
  615.         <div class="modal-inner productDetail">
  616.             <div class="modal-inner__content">
  617.                 <button class="modalCloseTop"></button>
  618.                 <p class="modal-inner__content__title">
  619.                     お届け日について
  620.                 </p>
  621.                 <div class="modal-inner__content__map">
  622.                     <div class="modal-inner__content__map__block">
  623.                         <ul class="modal-inner__content__map__block__list">
  624.                             <li class="modal-inner__content__map__block__list__item">翌日着</li>
  625.                             <li class="modal-inner__content__map__block__list__item">翌々日着</li>
  626.                             <li class="modal-inner__content__map__block__list__item">平日中3日着</li>
  627.                         </ul>
  628.                         <div class="modal-inner__content__map__block__image">
  629.                             <img src="{{ asset('assets/img/product/map.png') }}" alt="日本地図" width="2084" height="1473" loading="lazy">
  630.                         </div>
  631.                     </div>
  632.                     <div class="modal-inner__content__map__detail">
  633.                         <table class="modal-inner__content__map__detail__table" border="1">
  634.                             <tr>
  635.                                 <th class="title">12時まで注文の<br>最短お届け日</th>
  636.                                 <th>配送エリア</th>
  637.                             <tr>
  638.                             <tr>
  639.                                 <td class="tdMain">翌日着</td>
  640.                                 <td>
  641.                                     <ul>
  642.                                         <li>【東北】 岩手・宮城・山形・福島</li>
  643.                                         <li>【甲信越】 新潟・長野・山梨</li>
  644.                                         <li>【関東】 東京・神奈川・埼玉・千葉・茨城・栃木・群馬</li>
  645.                                         <li>【北陸】 富山・石川・福井</li>
  646.                                         <li>【東海】 愛知・岐阜・静岡・三重</li>
  647.                                         <li>【関西】 大阪・兵庫・京都・滋賀・奈良</li>
  648.                                     </ul> 
  649.                                 </td>
  650.                             <tr>
  651.                             <tr>
  652.                                 <td class="tdMain">翌々日着</td>
  653.                                 <td>
  654.                                     <ul>
  655.                                         <li>【北海道】 北海道</li>
  656.                                         <li>【東北】 青森・秋田</li>
  657.                                         <li>【関西】 和歌山</li>
  658.                                         <li>【中国】 鳥取・島根・岡山・広島・山口</li>
  659.                                         <li>【四国】 徳島・香川・愛媛・高知</li>
  660.                                         <li>【九州】 福岡・佐賀・長崎・熊本・大分・宮崎・鹿児島</li>
  661.                                     </ul> 
  662.                                 </td>
  663.                             <tr>
  664.                             <tr>
  665.                                 <td class="tdMain">平日中3日着</td>
  666.                                 <td>
  667.                                     <ul>
  668.                                         <li>【沖縄】 沖縄</li>
  669.                                         <li>【その他】 離島</li>
  670.                                     </ul> 
  671.                                 </td>
  672.                             <tr>
  673.                         </table>
  674.                     </div>
  675.                 </div>
  676.             </div>
  677.         </div>
  678.     </div>
  679.     <div id="detailPay" class="modal-outer">
  680.         <div class="modal-inner payDetail">
  681.             <div class="modal-inner__content">
  682.                 <button class="modalCloseTop"></button>
  683.                 <p class="modal-inner__content__title">
  684.                     お支払い方法/領収書について
  685.                 </p>
  686.                 <dl class="modal-inner__content__pay">
  687.                     <dt class="modal-inner__content__pay__dt">●クレジットカード決済</dt>
  688.                     <dd class="modal-inner__content__pay__dd">
  689.                         VISA・Master・JCB・Diners・AMEX 分割払い可能 手数料無料
  690.                         <br>荷物に納品書兼領収書を同梱します。
  691.                         <br>カード会社が発行する利用明細も領収書の代わりとなります。
  692.                     </dd>
  693.                     <dt class="modal-inner__content__pay__dt">●代金引換</dt>
  694.                     <dd class="modal-inner__content__pay__dd">
  695.                         商品受取時に配送業者にお支払いください(現金のみ)
  696.                         <br>1万円(税抜)以上手数料無料
  697.                         <br>1万円(税抜)未満手数料300円(税抜)
  698.                         <br>荷物受取りの際に配送業者さんがお渡しする
  699.                         <br>送り状(伝票)の控えが領収書となります。
  700.                     </dd>
  701.                     <dt class="modal-inner__content__pay__dt">●コンビニ後払い</dt>
  702.                     <dd class="modal-inner__content__pay__dd">
  703.                         会員登録住所へ請求書ハガキを郵送しますのでコンビニにてお支払いください。
  704.                         <br>5万円(税込)まで利用可能※審査があります
  705.                         <br>手数料190円(税抜)
  706.                         <br>コンビニでお支払いの際にレジでお渡しする
  707.                         <br>お客様控え(払込受領書)が領収書となります
  708.                     </dd>
  709.                 </dl>
  710.                 <p class="modal-inner__content__pay__text">「<a href="{{ url('mypage') }}">マイページ</a>」-「<a href="">領収書一覧</a>」より領収書の発行もできます</p>
  711.             </div>
  712.         </div>
  713.     </div>
  714.     <div id="detailProductReturn" class="modal-outer">
  715.         <div class="modal-inner payDetail">
  716.             <div class="modal-inner__content">
  717.                 <button class="modalCloseTop"></button>
  718.                 <p class="modal-inner__content__title">
  719.                     返品
  720.                 </p>
  721.                 <dl class="modal-inner__content__pay">
  722.                     <dt class="modal-inner__content__pay__dt">●返品</dt>
  723.                     <dd class="modal-inner__content__pay__dd">
  724.                         到着後14日以内の商品で未使用・未開封に限り返品を受け付けます。
  725.                         <br> (キャンセル不可・受注発注品は除きます)
  726.                         <br>返品いただく際の送料はお客様ご負担になります。
  727.                         <br>銀行振込(手数料5%を差し引きます)で返金します。
  728.                         <br>受取時破損や初期不良は別対応になりますので
  729.                         <br>お問い合わせください。
  730.                     </dd>
  731.                 </dl>
  732.             </div>
  733.         </div>
  734.     </div>
  735.     <div id="detailRepair" class="modal-outer">
  736.         <div class="modal-inner productDetail">
  737.             <div class="modal-inner__content">
  738.                 <button class="modalCloseTop"></button>
  739.                 <p class="modal-inner__content__title">
  740.                     修理について
  741.                 </p>
  742.                 <dl class="modal-inner__content__pay">
  743.                     <dt class="modal-inner__content__pay__dt">●修理</dt>
  744.                     <dd class="modal-inner__content__pay__dd">
  745.                         Breavers shopで購入した商品の修理を受け付けます。
  746.                     </dd>
  747.                 </dl>
  748.                 <ul class="modal-inner__content__repair">
  749.                     <li class="modal-inner__content__repair__item">
  750.                         <p class="modal-inner__content__repair__item__title">初期不良</p>
  751.                         <p class="modal-inner__content__repair__item__detail">
  752.                             到着後30日以内で故障した場合、交換または返品対応します。
  753.                             <br>ご連絡のうえ「保証書」「付属品」を同梱し着払いにてお送りください。
  754.                             <br>交換品の送料も無料です。
  755.                         </p>
  756.                     </li>
  757.                     <li class="modal-inner__content__repair__item">
  758.                         <p class="modal-inner__content__repair__item__title">保証期間内</p>
  759.                         <p class="modal-inner__content__repair__item__detail">
  760.                             到着後、保証期間内の場合は、無償修理します。
  761.                             <br>ご連絡のうえ「保証書」「付属品」を同梱しお送りください。
  762.                             <br>お送りいただく際の送料はお客様ご負担になります。
  763.                             <br>修理完了後の送料は無料です。
  764.                         </p>
  765.                         <p class="modal-inner__content__repair__item__notice">
  766.                             ※保証期間内でもメーカー判断により有償になる場合もございます。
  767.                             <br>その際はご連絡しますのでご確認ください。
  768.                         </p>
  769.                     </li>
  770.                     <li class="modal-inner__content__repair__item">
  771.                         <p class="modal-inner__content__repair__item__title">保証期間外(保証書なし)</p>
  772.                         <p class="modal-inner__content__repair__item__detail">
  773.                             保証期間が過ぎている(もしくはない)場合は有償修理します。
  774.                             <br>ご連絡のうえ「保証書(任意)」「付属品」を同梱しお送りください。
  775.                             <br>お送りいただく際の送料はお客様ご負担になります。
  776.                             <br>修理金額は確定後ご連絡します。
  777.                             <br>修理完了後の送料は無料です。
  778.                             <br>代金引換でお送りします。
  779.                         </p>
  780.                     </li>
  781.                 </ul>
  782.                 <p class="modal-inner__content__address">
  783.                     【送付先】
  784.                     <br>株式会社bravers[Breavers shop修理の依頼]
  785.                     <br>〒599-8111
  786.                     <br>大阪府堺市東区日置荘北町2丁目17-19
  787.                     <br>072-363-3131
  788.                 </p>
  789.             </div>
  790.         </div>
  791.     </div>
  792. {% endblock %}