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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) LOCKON CO.,LTD. All Rights Reserved.
  4. http://www.lockon.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. {% endblock %}
  12. {% block javascript %}
  13.     <script src="{{ asset('assets/js/eccube.js') }}"></script>
  14.     <script src="https://cdn.jsdelivr.net/npm/swiper@5.3.6/js/swiper.min.js" integrity="sha256-dwAIpWA5jmq1E3AHBeJDH86emZuOEMKZrZxNr9DJAQs=" crossorigin="anonymous"></script>
  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 bgHeight(elem){
  35.             var elemOffsetTop = elem.offset().top,
  36.                 elemHeight = elem.outerHeight();
  37.             $('#js-layout__body-bg').height(elemOffsetTop + elemHeight);
  38.         }
  39.         $(function() {
  40.             // bfcache無効化
  41.             $(window).bind('pageshow', function(event) {
  42.                 if (event.originalEvent.persisted) {
  43.                     location.reload(true);
  44.                 }
  45.             });
  46.             var galleryThumbs = new Swiper('#js-detail-product__gallery-thumbs', {
  47.                 slidesPerView: 4,
  48.                 spaceBetween: 16,
  49.                 freeMode: true,
  50.                 watchSlidesVisibility: true,
  51.                 watchSlidesProgress: true
  52.             });
  53.             var galleryTop = new Swiper('#js-product__detail-gallery-slide', {
  54.                 slidesPerView: 1,
  55.                 spaceBetween: 20,
  56.                 thumbs: {
  57.                     swiper: galleryThumbs
  58.                 },
  59.                 pagination: {
  60.                     el: '#js-detail-product__gallery-pager-contents',
  61.                     clickable: true
  62.                 },
  63.                 breakpoints: {
  64.                     479: {
  65.                         slidesPerView: 1,
  66.                         spaceBetween: 16
  67.                     }
  68.                 }
  69.             });
  70.             bgHeight($('#js-detail-product__price'));
  71.             var resizeTimer = null;
  72.             $(window).on('resize', function() {
  73.                 clearTimeout(resizeTimer);
  74.                 resizeTimer = setTimeout(function() {
  75.                     bgHeight($('#js-detail-product__price'));
  76.                 }, 200);
  77.             });
  78.         });
  79.     </script>
  80.     <script>
  81.         $(function() {
  82.             $('.add-cart').on('click', function(event) {
  83.                 {% if form.classcategory_id1 is defined %}
  84.                     // 規格1フォームの必須チェック
  85.                     if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  86.                         $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  87.                         return true;
  88.                     } else {
  89.                         $('#classcategory_id1')[0].setCustomValidity('');
  90.                     }
  91.                 {% endif %}
  92.                 {% if form.classcategory_id2 is defined %}
  93.                     // 規格2フォームの必須チェック
  94.                     if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  95.                         $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  96.                         return true;
  97.                     } else {
  98.                         $('#classcategory_id2')[0].setCustomValidity('');
  99.                     }
  100.                 {% endif %}
  101.                 // 個数フォームのチェック
  102.                 if ($('#quantity').val() < 1) {
  103.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  104.                     return true;
  105.                 } else {
  106.                     $('#quantity')[0].setCustomValidity('');
  107.                 }
  108.                 event.preventDefault();
  109.                 $form = $('#form1');
  110.                 $.ajax({
  111.                     url: $form.attr('action'),
  112.                     type: $form.attr('method'),
  113.                     data: $form.serialize(),
  114.                     dataType: 'json',
  115.                     beforeSend: function(xhr, settings) {
  116.                         // Buttonを無効にする
  117.                         $('.add-cart').prop('disabled', true);
  118.                     }
  119.                 }).done(function(data) {
  120.                     // レスポンス内のメッセージをalertで表示
  121.                     $.each(data.messages, function() {
  122.                         $('#js-product__modal-message').html(this);
  123.                     });
  124.                     $('.js-product__modal-checkbox').prop('checked', true);
  125.                     // カートブロックを更新する
  126.                     $.ajax({
  127.                         url: "{{ url('block_cart') }}",
  128.                         type: 'GET',
  129.                         dataType: 'html'
  130.                     }).done(function(html) {
  131.                         $('#js-header__utility-cart').html(html);
  132.                     });
  133.                 }).fail(function(data) {
  134.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  135.                 }).always(function(data) {
  136.                     // Buttonを有効にする
  137.                     $('.add-cart').prop('disabled', false);
  138.                 });
  139.             });
  140.         });
  141.     </script>
  142.     <script type="application/ld+json">
  143.         {
  144.             "@context": "https://schema.org/",
  145.             "@type": "Product",
  146.             "name": "{{ Product.name }}",
  147.             "image": [
  148.                 {% for img in Product.ProductImage %}
  149.                     "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  150.                 {% else %}
  151.                     "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  152.                 {% endfor %}
  153.             ],
  154.             "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  155.             {% if Product.code_min %}
  156.                 "sku": "{{ Product.code_min }}",
  157.             {% endif %}
  158.             "offers": {
  159.                 "@type": "Offer",
  160.                 "url": "{{ url('product_detail', {'id': Product.id}) }}",
  161.                 "priceCurrency": "{{ eccube_config.currency }}",
  162.                 "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  163.                 "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  164.             }
  165.         }
  166.     </script>
  167. {% endblock %}
  168. {% block main %}
  169.     <div class="p-product">
  170.         <div class="p-product__contents" id="js-product__contents">
  171.             <div class="p-product__detail" id="js-product__detail">
  172.                 <article class="c-detail-product">
  173.                     <div class="c-detail-product__gallery">
  174.                         <div class="c-detail-product__gallery-slide" id="js-product__detail-gallery-slide">
  175.                             <div class="c-detail-product__gallery-slide-contents swiper-wrapper">
  176.                                 {% for ProductImage in Product.ProductImage %}
  177.                                     <div class="c-detail-product__gallery-slide-item swiper-slide">
  178.                                         <div class="c-detail-product__image">
  179.                                             <img class="c-detail-product__image-pic" src="{{ asset(ProductImage, 'save_image') }}" alt="{{ Product.name }}">
  180.                                         </div>
  181.                                     </div>
  182.                                 {% else %}
  183.                                     <div class="c-detail-product__gallery-slide-item swiper-slide">
  184.                                         <div class="c-detail-product__image">
  185.                                             <img class="c-detail-product__image-pic" src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ Product.name }}">
  186.                                         </div>
  187.                                     </div>
  188.                                 {% endfor %}
  189.                             </div>
  190.                         </div>
  191.                         <div class="c-detail-product__gallery-thumbs" id="js-detail-product__gallery-thumbs">
  192.                             <div class="c-detail-product__gallery-thumbs-contents swiper-wrapper">
  193.                                 {% for ProductImage in Product.ProductImage %}
  194.                                     <div class="c-detail-product__gallery-thumbs-item swiper-slide">
  195.                                         <div class="c-detail-product__image">
  196.                                             <img class="c-detail-product__image-pic" src="{{ asset(ProductImage, 'save_image') }}" alt="{{ Product.name }}">
  197.                                         </div>
  198.                                     </div>
  199.                                 {% endfor %}
  200.                             </div>
  201.                         </div>
  202.                         <div class="c-detail-product__gallery-pager">
  203.                             <div class="c-detail-product__gallery-pager-contents" id="js-detail-product__gallery-pager-contents"></div>
  204.                         </div>
  205.                     </div>
  206.                     <div class="c-detail-product__profile">
  207.                         <div class="c-detail-product__profile-layout">
  208.                             {# タグ #}
  209.                             {% if Product.Tags is not empty %}
  210.                                 <div class="c-detail-product__profile-layout-item">
  211.                                     <div class="c-detail-product__tag">
  212.                                         <ul class="c-detail-product__tag-list">
  213.                                             {% for Tag in Product.Tags %}
  214.                                                 <li class="c-detail-product__tag-list-item" id="c-detail-product__tag-list-item--{{ Tag.id }}">
  215.                                                     <span class="c-detail-product__tag-text">{{ Tag }}</span>
  216.                                                 </li>
  217.                                             {% endfor %}
  218.                                         </ul>
  219.                                     </div>
  220.                                 </div>
  221.                             {% endif %}
  222.                             <div class="c-detail-product__profile-layout-item">
  223.                                 <div class="c-detail-product__favorite">
  224.                                     {# お気に入り #}
  225.                                     {% if BaseInfo.option_favorite_product %}
  226.                                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  227.                                             {% if is_favorite == false %}
  228.                                                 <button class="c-detail-product__favorite-button c-ripple-surface mdc-ripple-surface" type="submit" id="favorite">
  229.                                                     <i class="c-detail-product__favorite-button-icon material-icons">favorite_border</i>
  230.                                                 </button>
  231.                                             {% else %}
  232.                                                 <button class="c-detail-product__favorite-button is-disabled c-ripple-surface mdc-ripple-surface" type="submit" id="favorite" disabled="disabled">
  233.                                                     <i class="c-detail-product__favorite-button-icon material-icons">favorite</i>
  234.                                                 </button>
  235.                                             {% endif %}
  236.                                         </form>
  237.                                     {% endif %}
  238.                                 </div>
  239.                             </div>
  240.                         </div>
  241.                         {# 商品名 #}
  242.                         <h1 class="c-detail-product__title">{{ Product.name }}</h1>
  243.                         {# 商品コード #}
  244.                         {% if Product.code_min is not empty %}
  245.                             <div class="c-detail-product__code">
  246.                                 <span class="c-detail-product__code--label">{{ '商品コード'|trans }}</span>
  247.                                 <span class="c-detail-product__code--number product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  248.                             </div>
  249.                         {% endif %}
  250.                         <div class="c-detail-product__price" id="js-detail-product__price">
  251.                             {# 通常価格 #}
  252.                             <div class="c-detail-product__price-normal">
  253.                                 {% if Product.hasProductClass -%}
  254.                                     {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  255.                                         <span class="c-detail-product__price-normal--label">{{ '通常価格'|trans }}</span>
  256.                                         <span class="c-detail-product__price-normal--number price01-default">{{ Product.getPrice01IncTaxMin|price }}</span>
  257.                                         <span class="c-detail-product__price-normal--tax">{{ '(税込)'|trans }}</span>
  258.                                     {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  259.                                         <span class="c-detail-product__price-normal--label">{{ '通常価格'|trans }}</span>
  260.                                         <span class="c-detail-product__price-normal--number price01-default">{{ Product.getPrice01IncTaxMin|price }} ~ {{ Product.getPrice01IncTaxMax|price }}</span>
  261.                                         <span class="c-detail-product__price-normal--tax">{{ '(税込)'|trans }}</span>
  262.                                     {% endif %}
  263.                                 {% else %}
  264.                                     {% if Product.getPrice01Max is not null %}
  265.                                         <span class="c-detail-product__price-normal--label">{{ '通常価格'|trans }}</span>
  266.                                         <span class="c-detail-product__price-normal--number">{{ Product.getPrice01IncTaxMin|price }}</span>
  267.                                         <span class="c-detail-product__price-normal--tax">{{ '(税込)'|trans }}</span>
  268.                                     {% endif %}
  269.                                 {% endif %}
  270.                             </div>
  271.                             {# 販売価格 #}
  272.                             <div class="c-detail-product__price-selling">
  273.                                 {% if Product.hasProductClass -%}
  274.                                     {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  275.                                         <span class="c-detail-product__price-selling--number price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  276.                                         <span class="c-detail-product__price-selling--tax">{{ '(税込)'|trans }}</span>
  277.                                     {% else %}
  278.                                         <span class="c-detail-product__price-selling--number price02-default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span>
  279.                                         <span class="c-detail-product__price-selling--tax">{{ '(税込)'|trans }}</span>
  280.                                     {% endif %}
  281.                                 {% else %}
  282.                                     <span class="c-detail-product__price-selling--number">{{ Product.getPrice02IncTaxMin|price }}</span>
  283.                                     <span class="c-detail-product__price-selling--tax">{{ '(税込)'|trans }}</span>
  284.                                 {% endif %}
  285.                             </div>
  286.                         </div>
  287.                         {# 関連カテゴリ #}
  288.                         {% if Product.ProductCategories is not empty %}
  289.                             <dl class="c-detail-product__category">
  290.                                 <dt class="c-detail-product__category-label">{{ '関連カテゴリ'|trans }}</dt>
  291.                                 <dd class="c-detail-product__category-detail">
  292.                                     {% for ProductCategory in Product.ProductCategories %}
  293.                                         <ul class="c-detail-product__category-list u-list-sanitize">
  294.                                             {% for Category in ProductCategory.Category.path %}
  295.                                                 <li class="c-detail-product__category-list-item">
  296.                                                     <a class="c-detail-product__category-link" href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a>
  297.                                                 </li>
  298.                                             {% endfor %}
  299.                                         </ul>
  300.                                     {% endfor %}
  301.                                 </dd>
  302.                             </dl>
  303.                         {% endif %}
  304.                         <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  305.                             {% if Product.stock_find %}
  306.                                 {% if form.classcategory_id1 is defined %}
  307.                                     <div class="c-detail-product__form-box">
  308.                                         <div class="c-detail-product__form-box-item">
  309.                                             <div class="c-select mdc-select mdc-select--outlined">
  310.                                                 <i class="mdc-select__dropdown-icon"></i>
  311.                                                 {{ form_widget(form.classcategory_id1, {'attr': { 'class': 'c-select__native-control mdc-select__native-control' }}) }}
  312.                                                 <div class="mdc-notched-outline">
  313.                                                     <div class="mdc-notched-outline__leading"></div>
  314.                                                     <div class="mdc-notched-outline__notch"></div>
  315.                                                     <div class="mdc-notched-outline__trailing"></div>
  316.                                                 </div>
  317.                                             </div>
  318.                                             {{ form_errors(form.classcategory_id1, {'label_attr': {'class': 'mdc-select-helper-text mdc-select-helper-text--validation-msg'}}) }}
  319.                                         </div>
  320.                                     </div>
  321.                                     {% if form.classcategory_id2 is defined %}
  322.                                         <div class="c-detail-product__form-box">
  323.                                             <div class="c-detail-product__form-box-item">
  324.                                                 <div class="c-select mdc-select mdc-select--outlined">
  325.                                                     <i class="mdc-select__dropdown-icon"></i>
  326.                                                     {{ form_widget(form.classcategory_id2, {'attr': { 'class': 'c-select__native-control mdc-select__native-control' }}) }}
  327.                                                     <div class="mdc-notched-outline">
  328.                                                         <div class="mdc-notched-outline__leading"></div>
  329.                                                         <div class="mdc-notched-outline__notch"></div>
  330.                                                         <div class="mdc-notched-outline__trailing"></div>
  331.                                                     </div>
  332.                                                 </div>
  333.                                                 {{ form_errors(form.classcategory_id2, {'label_attr': {'class': 'mdc-select-helper-text mdc-select-helper-text--validation-msg'}}) }}
  334.                                             </div>
  335.                                         </div>
  336.                                     {% endif %}
  337.                                 {% endif %}
  338.                                 <div class="c-detail-product__form-box">
  339.                                     <div class="c-detail-product__form-box-item">
  340.                                         <div class="c-text-field mdc-text-field mdc-text-field--outlined{{ has_errors(form.quantity) ? ' mdc-text-field--invalid' }}">
  341.                                             {{ form_widget(form.quantity, {'attr': { 'class': 'c-text-field__input mdc-text-field__input' }}) }}
  342.                                             <div class="mdc-notched-outline">
  343.                                                 <div class="mdc-notched-outline__leading"></div>
  344.                                                 <div class="mdc-notched-outline__notch">
  345.                                                     <label class="c-floating-label mdc-floating-label" for="quantity">{{ '数量'|trans }}</label>
  346.                                                 </div>
  347.                                                 <div class="mdc-notched-outline__trailing"></div>
  348.                                             </div>
  349.                                         </div>
  350.                                         {{ form_errors(form.quantity, {'label_attr': {'class': 'mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg'}}) }}
  351.                                     </div>
  352.                                 </div>
  353.                                 <div class="c-detail-product__actions">
  354.                                     <div class="c-detail-product__actions-item">
  355.                                         <button class="c-button is-secondary c-button--unelevated mdc-button mdc-button--unelevated add-cart" type="submit">
  356.                                             <span class="c-detail-product__button-label">{{ 'カートに入れる'|trans }}</span>
  357.                                         </button>
  358.                                     </div>
  359.                                 </div>
  360.                             {% else %}
  361.                                 <div class="c-detail-product__actions">
  362.                                     <div class="c-detail-product__actions-item">
  363.                                         <button class="c-button c-button--unelevated mdc-button mdc-button--unelevated" type="button" disabled="disabled">
  364.                                             <span class="c-detail-product__button-label">{{ 'SOLD OUT'|trans }}</span>
  365.                                         </button>
  366.                                     </div>
  367.                                 </div>
  368.                             {% endif %}
  369.                             {{ form_rest(form) }}
  370.                         </form>
  371.                         <div class="p-product__modal">
  372.                             <input class="p-product__modal-checkbox js-product__modal-checkbox" id="p-product__modal-checkbox" type="checkbox">
  373.                             <div class="p-product__modal-overlay">
  374.                                 <label class="p-product__modal-overlay-close" for="p-product__modal-checkbox"></label>
  375.                                 <div class="p-product__modal-contents">
  376.                                     <label class="p-product__modal-close" for="p-product__modal-checkbox">
  377.                                         <i class="p-product__modal-close-icon material-icons">close</i>
  378.                                     </label>
  379.                                     <div class="p-product__modal-header">
  380.                                         <p class="p-product__modal-message" id="js-product__modal-message">{{ 'カートに追加しました。'|trans }}</p>
  381.                                     </div>
  382.                                     <div class="p-product__modal-actions">
  383.                                         <div class="p-product__modal-actions-item">
  384.                                             <a class="p-product__modal-button c-button c-button--unelevated is-secondary mdc-button mdc-button--unelevated" href="{{ url('cart') }}">
  385.                                                 <span class="c-button__label mdc-button__label">{{ 'カートへ進む'|trans }}</span>
  386.                                             </a>
  387.                                         </div>
  388.                                         <div class="p-product__modal-actions-item">
  389.                                             <label class="p-product__modal-button c-button c-button--unelevated is-primary mdc-button mdc-button--unelevated" for="p-product__modal-checkbox">
  390.                                                 <span class="c-button__label mdc-button__label">{{ 'お買い物を続ける'|trans }}</span>
  391.                                             </label>
  392.                                         </div>
  393.                                     </div>
  394.                                 </div>
  395.                             </div>
  396.                         </div>
  397.                         {% if Product.description_detail %}
  398.                             <div class="c-detail-product__comment">{{ Product.description_detail|raw|nl2br }}</div>
  399.                         {% endif %}
  400.                         {% if Product.freearea %}
  401.                             {{ include(template_from_string(Product.freearea)) }}
  402.                         {% endif %}
  403.                     </div>
  404.                 </article>
  405.                 {# プラグイン要素(ProductReview4/RelatedProduct4)追加箇所 #}
  406.                 <div class="ec-layoutRole__main">
  407.                 </div>
  408.             </div>
  409.         </div>
  410.     </div>
  411. {% endblock %}