app/template/BlackCherry/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. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'front_page' %}
  15. {% block stylesheet %}
  16.     <style>
  17.         .main_visual {
  18.             text-align: center;
  19.             margin: 0 auto;
  20.             padding-left: 20px;
  21.             padding-right: 20px;
  22.         }
  23.         .main_visual img {
  24.             width: 100%;
  25.             height: auto;
  26.             max-width: 100%;
  27.         }
  28.         @media only screen and (min-width: 768px) {
  29.             .main_visual img {
  30.                 width: 80%;
  31.                 margin: auto;
  32.             }
  33.         }
  34.         /* モバイルでのLCP最適化 */
  35.         @media only screen and (max-width: 767px) {
  36.             .main_visual img {
  37.                 width: 100%;
  38.                 height: auto;
  39.                 object-fit: cover;
  40.             }
  41.         }
  42.         .slick-slider {
  43.             margin-bottom: 30px;
  44.         }
  46.         .slick-dots {
  47.             position: absolute;
  48.             bottom: -45px;
  49.             display: block;
  50.             width: 100%;
  51.             padding: 0;
  52.             list-style: none;
  53.             text-align: center;
  54.         }
  56.         .slick-dots li {
  57.             position: relative;
  58.             display: inline-block;
  59.             width: 20px;
  60.             height: 20px;
  61.             margin: 0 5px;
  62.             padding: 0;
  64.             cursor: pointer;
  65.         }
  67.         .slick-dots li button {
  68.             font-size: 0;
  69.             line-height: 0;
  70.             display: block;
  71.             width: 20px;
  72.             height: 20px;
  73.             padding: 5px;
  74.             cursor: pointer;
  75.             color: transparent;
  76.             border: 0;
  77.             outline: none;
  78.             background: transparent;
  79.         }
  81.         .slick-dots li button:hover,
  82.         .slick-dots li button:focus {
  83.             outline: none;
  84.         }
  86.         .slick-dots li button:hover:before,
  87.         .slick-dots li button:focus:before {
  88.             opacity: 1;
  89.         }
  91.         .slick-dots li button:before {
  92.             content: " ";
  93.             line-height: 20px;
  94.             position: absolute;
  95.             top: 0;
  96.             left: 0;
  97.             width: 12px;
  98.             height: 12px;
  99.             text-align: center;
  100.             opacity: .25;
  101.             background-color: black;
  102.             border-radius: 50%;
  104.         }
  106.         .slick-dots li.slick-active button:before {
  107.             opacity: .75;
  108.             background-color: black;
  109.         }
  111.         .slick-dots li button.thumbnail img {
  112.             width: 0;
  113.             height: 0;
  114.         }
  115.     </style>
  116. {% endblock %}
  119. {% block javascript %}
  120.     <script>
  122.         $(function () {
  123.             eccube.productsClassCategories = {
  124.                 {% for Product in Products_new %}
  125.                     "{{ Product.id|escape('js') }}": {{ class_categories_as_json(Product)|raw }}{% if not loop.last or Products_semi is not empty %}, {% endif %}
  126.                 {% endfor %}
  127.                 {% for Product in Products_semi %}
  128.                     "{{ Product.id|escape('js') }}": {{ class_categories_as_json(Product)|raw }}{% if not loop.last %}, {% endif %}
  129.                 {% endfor %}
  130.             };
  132.             eccube.common.initProductDetail($('.add-cart').closest('form'));
  133.         });
  135.         $(function() {
  136.             // お気に入り追加
  137.             $('.add_favorite').on('click', function(e) {
  138.                 var data = $(this).data();
  139.                 if (confirm(data.product_name + '\r\n\r\n' + 'こちらの商品をお気に入りに登録しますか？') ) {
  140.                 } else {
  141.                     return false;
  142.                 }
  143.             });
  145.             
  146.            $('.add-cart').on('click', function(e) {
  147.                 var data = $(this).data();
  148.                 var $form = $('#productForm' + data.cartid);
  149.                 
  150.                 e.preventDefault();
  152.                 var formData = new FormData($form[0]);
  154.                 // ✅ `ProductClass` の値を確実にセット
  155.                 let productClassValue = $form.find('input[name="ProductClass"]').val();
  156.                 if (!productClassValue) {
  157.                     alert("商品規格が選択されていません");
  158.                     return;
  159.                 }
  160.                 formData.append('ProductClass', productClassValue);
  162.                 $.ajax({
  163.                     url: $form.attr('action'),
  164.                     type: $form.attr('method'),
  165.                     data: $form.serialize(),
  166.                     dataType: 'json',
  167.                     beforeSend: function(xhr, settings) {
  168.                         // Buttonを無効にする
  169.                         $('.add-cart').prop('disabled', true);
  170.                     }
  171.                 }).done(function(data) {
  172.                     // レスポンス内のメッセージをalertで表示
  173.                     $.each(data.messages, function() {
  174.                         $('#ec-modal-header').text(this);
  175.                     });
  177.                     // カートブロックを更新する
  178.                     $.ajax({
  179.                         url: '{{ url('block_cart') }}',
  180.                         type: 'GET',
  181.                         dataType: 'html'
  182.                     }).done(function(html) {
  183.                         const $html = $('<div>').html(html);
  185.                         // ① ヘッダー用のカート部分を更新
  186.                         const $headerCart = $html.find('.ec-headerRole__cart');
  187.                         if ($headerCart.length) {
  188.                             $('.ec-headerRole__cart').replaceWith($headerCart);
  189.                         }
  191.                         // ② サイドカート（ec-cartNaviWrap）も更新
  192.                         const $sideCart = $html.find('.ec-cartNaviWrap');
  193.                         if ($sideCart.length) {
  194.                             $('.ec-cartNaviWrap').replaceWith($sideCart);
  195.                         }
  196.                     });
  198.                     $('.ec-modal').show()
  200.                     
  202.             
  203.                 }).fail(function(xhr, textStatus, errorThrown) {
  204.                     alert('{{ 'カートへの追加に失敗しました。' |trans }}');
  205.                 }).always(function(data) {
  206.                     // Buttonを有効にする
  207.                     $('.add-cart').prop('disabled', false);
  208.                 });
  209.             });
  210.         
  212.         $('.ec-modal-wrap').on('click', function(e) {
  213.             // モーダル内の処理は外側にバブリングさせない
  214.             e.stopPropagation();
  215.         });
  216.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  217.             $('.ec-modal').hide()
  218.         });
  219.     });
  220.     </script>
  221. {% endblock javascript %}
  224. {% block main %}
  225. {% endblock %}