app/template/yamaria/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.         .slick-slider {
  13.             margin-bottom: 30px;
  14.         }
  15.         .slick-dots {
  16.             position: absolute;
  17.             bottom: -45px;
  18.             display: block;
  19.             width: 100%;
  20.             padding: 0;
  21.             list-style: none;
  22.             text-align: center;
  23.         }
  24.         .slick-dots li {
  25.             position: relative;
  26.             display: inline-block;
  27.             width: 20px;
  28.             height: 20px;
  29.             margin: 0 5px;
  30.             padding: 0;
  31.             cursor: pointer;
  32.         }
  33.         .slick-dots li button {
  34.             font-size: 0;
  35.             line-height: 0;
  36.             display: block;
  37.             width: 20px;
  38.             height: 20px;
  39.             padding: 5px;
  40.             cursor: pointer;
  41.             color: transparent;
  42.             border: 0;
  43.             outline: none;
  44.             background: transparent;
  45.         }
  46.         .slick-dots li button:hover,
  47.         .slick-dots li button:focus {
  48.             outline: none;
  49.         }
  50.         .slick-dots li button:hover:before,
  51.         .slick-dots li button:focus:before {
  52.             opacity: 1;
  53.         }
  54.         .slick-dots li button:before {
  55.             content: " ";
  56.             line-height: 20px;
  57.             position: absolute;
  58.             top: 0;
  59.             left: 0;
  60.             width: 12px;
  61.             height: 12px;
  62.             text-align: center;
  63.             opacity: .25;
  64.             background-color: black;
  65.             border-radius: 50%;
  66.         }
  67.         .slick-dots li.slick-active button:before {
  68.             opacity: .75;
  69.             background-color: black;
  70.         }
  71.         .slick-dots li button.thumbnail img {
  72.             width: 0;
  73.             height: 0;
  74.         }
  75.         .item_visual .slide-item {
  76.             display: flex;
  77.             align-items: center;
  78.             align-content: center;
  79.             justify-content: center;
  80.             min-height: 100vw;
  81.             text-align: center;
  82.         }
  83.         .item_visual .slide-item img {
  84.             max-height: 100vw;
  85.             width: auto;
  86.             margin: auto;
  87.         }
  88.         .item_visual .slide-item span {
  89.             display: block;
  90.             padding-top: 100%;
  91.             position: relative;
  92.             width: 100%;
  93.         }
  94.         .item_visual .slide-item span img {
  95.             position: absolute;
  96.             top: 50%;
  97.             left: 50%;
  98.             transform: translate(-50%,-50%);
  99.         }
  100.         @media only screen and (min-width: 768px) {
  101.             .item_visual .slide-item {
  102.                 min-height: 0;
  103.             }
  104.             .item_visual .slide-item img {
  105.                 max-height: 100%;
  106.             }
  107.         }
  108.     </style>
  109. {% endblock %}
  110. {% block javascript %}
  111.     <script>
  112.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  113.         eccube.productStockInfo = {};
  114.         eccube.productStockInfo.stockMax = {{ Product.StockMax }};
  115.         eccube.productStockInfo.stockUnlimitedMax = {% if Product.getStockUnlimitedMax() %}1{% else %}0{% endif %};
  116.         // 規格2に選択肢を割り当てる。
  117.         function fnSetClassCategories(form, classcat_id2_selected) {
  118.             var $form = $(form);
  119.             var product_id = $form.find('input[name=product_id]').val();
  120.             var $sele1 = $form.find('select[name=classcategory_id1]');
  121.             var $sele2 = $form.find('select[name=classcategory_id2]');
  122.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  123.         }
  124.         {% if form.classcategory_id2 is defined %}
  125.         fnSetClassCategories(
  126.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  127.         );
  128.         {% elseif form.classcategory_id1 is defined %}
  129.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  130.         {% endif %}
  131.     </script>
  132.     <script>
  133.         $(function() {
  134.             // bfcache無効化
  135.             $(window).bind('pageshow', function(event) {
  136.                 if (event.originalEvent.persisted) {
  137.                     location.reload(true);
  138.                 }
  139.             });
  140.             $('.item_visual').slick({
  141.                 dots: false,
  142.                 arrows: true,
  143.                 asNavFor: '.item_nav',
  144.                 responsive: [{
  145.                     breakpoint: 768,
  146.                     settings: {
  147.                         dots: false
  148.                     }
  149.                 }]
  150.             });
  151.             $('.item_nav').slick({
  152.                 asNavFor: '.item_visual',
  153.                 arrows: false,
  154.                 focusOnSelect: true,
  155.                 slidesToShow: 5,
  156.                 slidesToScroll: 1,
  157.                 centerMode: false,
  158.                 centerPadding: '0px'
  159.             });
  160.             /*
  161.             $('.slideThumb').on('click', function() {
  162.                 var index = $(this).attr('data-index');
  163.                 $('.item_visual').slick('slickGoTo', index, false);
  164.             })
  165.             */
  166.         });
  167.     </script>
  168.     <script>
  169.         $(function() {
  170.             $('.add-cart').on('click', function(event) {
  171.                 {% if form.classcategory_id1 is defined %}
  172.                 // 規格1フォームの必須チェック
  173.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  174.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  175.                     return true;
  176.                 } else {
  177.                     $('#classcategory_id1')[0].setCustomValidity('');
  178.                 }
  179.                 {% endif %}
  180.                 {% if form.classcategory_id2 is defined %}
  181.                 // 規格2フォームの必須チェック
  182.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  183.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  184.                     return true;
  185.                 } else {
  186.                     $('#classcategory_id2')[0].setCustomValidity('');
  187.                 }
  188.                 {% endif %}
  189.                 // 個数フォームのチェック
  190.                 if ($('#quantity').val() < 1) {
  191.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  192.                     return true;
  193.                 } else {
  194.                     $('#quantity')[0].setCustomValidity('');
  195.                 }
  196.                 event.preventDefault();
  197.                 $form = $('#form1');
  198.                 $.ajax({
  199.                     url: $form.attr('action'),
  200.                     type: $form.attr('method'),
  201.                     data: $form.serialize(),
  202.                     dataType: 'json',
  203.                     beforeSend: function(xhr, settings) {
  204.                         // Buttonを無効にする
  205.                         $('.add-cart').prop('disabled', true);
  206.                     }
  207.                 }).done(function(data) {
  208.                     // レスポンス内のメッセージをalertで表示
  209.                     $.each(data.messages, function() {
  210.                         $('#ec-modal-header').html(this);
  211.                     });
  212.                     $('.ec-modal').show()
  213.                     // カートブロックを更新する
  214.                     $.ajax({
  215.                         url: "{{ url('block_cart') }}",
  216.                         type: 'GET',
  217.                         dataType: 'html'
  218.                     }).done(function(html) {
  219.                         $('.ec-headerRole__cart').html(html);
  220.                     });
  221.                 }).fail(function(data) {
  222.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  223.                 }).always(function(data) {
  224.                     // Buttonを有効にする
  225.                     $('.add-cart').prop('disabled', false);
  226.                 });
  227.             });
  228.         });
  229.         $('.ec-modal-overlay, .ec-modal .ec-inlineBtn--cancel').on('click', function() {
  230.             $('.ec-modal').hide()
  231.         });
  232.     </script>
  233. {% endblock %}
  234. {% block main %}
  235.      <div class="ym-topicpath">
  236.         <ul>
  237.             <li><a href="{{ url('homepage') }}">HOME</a></li>
  238.             <li><a href="{{ url('homepage') }}products/list">商品一覧</a></li>
  239.             {% if Product.ProductCategories is not empty %}
  240.                 {% set ProductCategory = Product.ProductCategories|first %}
  241.                 <li><a href="{{ url('product_list') }}?category_id={{ ProductCategory.Category.id }}">{{ ProductCategory.Category.name }}</a>
  242.                 </li>
  243.             {% endif %}
  244.             <li>{{ Product.name }}</li>
  245.         </ul>
  246.     </div>
  247.     
  248.     <div class="ec-productRole">
  249.             <!--<div class="ym-product_tags">
  250.                 <span class="ym-tag ym-tag_price">特別価格</span>
  251.             </div>-->
  252.             <div class="ec-productRole__title">
  253.                 <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  254.             </div>
  255.         <div class="ec-grid2">
  256.             <div class="ec-grid2__cell">
  257.                 <div class="ym-slider">
  258.                     <div class="ec-sliderItemRole">
  259.                         <div class="item_visual">
  260.                             {% for ProductImage in Product.ProductImage %}
  261.                                 <div class="slide-item"><span><img src="{{ asset(ProductImage, 'save_image') }}"></span></div>
  262.                             {% else %}
  263.                                 <div class="slide-item"><span><img src="{{ asset(''|no_image_product, 'save_image') }}"/></span></div>
  264.                             {% endfor %}
  265.                         </div>
  266.                         <div class="item_nav">
  267.                             {% for ProductImage in Product.ProductImage %}
  268.                                 <div class="slideThumb" data-index="{{ loop.index0 }}"><span><img src="{{ asset(ProductImage, 'save_image') }}"></span></div>
  269.                             {% endfor %}
  270.                         </div>
  271.                     </div>
  272.                 </div>
  273.                 <div class="ec-productRole__description">
  274.                     {{ Product.description_detail|raw|nl2br }}
  275.                 </div>
  276.             </div>
  277.             <div class="ec-grid2__cell">
  278.                 <div class="ec-productRole__profile ym-productRole__profile ym-bg_gray">
  279.                     {# 商品コード #}
  280.                     {#
  281.                     {% if Product.code_min is not empty %}
  282.                         <div class="ec-productRole__code">
  283.                             {{ '商品コード'|trans }}: <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}{% endif %}</span>
  284.                         </div>
  285.                     {% endif %}
  286.                     #}
  287.                     {# 商品名 #}
  288.                     <div class="ec-productRole__title">
  289.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  290.                     </div>
  291.                     {# タグ #}
  292.                     <ul class="ec-productRole__tags">
  293.                         {% for Tag in Product.Tags %}
  294.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  295.                         {% endfor %}
  296.                     </ul>
  297.                     <div class="ym-productRole__price">
  298.                     {# 通常価格 #}
  299.                     <div class="ym-price_regular">
  300.                     {% if Product.hasProductClass -%}
  301.                         <div class="ec-productRole__priceRegular">
  302.                         {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  303.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}</span></span>
  304.                             <span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>
  305.                         {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  306.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:<span class="price01-default">{{ Product.getPrice01IncTaxMin|price }}~ {{ Product.getPrice01IncTaxMax|price }}</span></span>
  307.                             <!--<span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>-->
  308.                         {% endif %}
  309.                         </div>
  310.                     {% else %}
  311.                         {% if Product.getPrice01Max is not null %}
  312.                             <span class="ec-productRole__priceRegularPrice">{{ '通常価格'|trans }}:{{ Product.getPrice01IncTaxMin|price }}</span>
  313.                             <!--<span class="ec-productRole__priceRegularTax">{{ '税込'|trans }}</span>-->
  314.                         {% endif %}
  315.                     {% endif %}
  316.                     </div>
  317.                     {# 販売価格 #}
  318.                         <div class="ec-productRole__price">
  319.                         <!--<span class="ym-tag ym-tag_price">特別価格</span>-->
  320.                         {% if Product.hasProductClass -%}
  321.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  322.                                 <div class="ec-price">
  323.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  324.                                     <!--<span class="ec-price__tax">{{ '税込'|trans }}</span>-->
  325.                                 </div>
  326.                             {% else %}
  327.                                 <div class="ec-price">
  328.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}</span>
  329.                                     <!--<span class="ec-price__tax">{{ '税込'|trans }}</span>-->
  330.                                 </div>
  331.                             {% endif %}
  332.                         {% else %}
  333.                             <div class="ec-price">
  334.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  335.                                 <!--<span class="ec-price__tax">{{ '税込'|trans }}</span>-->
  336.                             </div>
  337.                         {% endif %}
  338. <?php if (false): ?>                            
  339.                         {% if TabaCustomFieldsProduct('add_priceinfo', Product.id) %}
  340.                         <div style="margin: 10px 5px 0;">
  341.                             {{ TabaCustomFieldsProduct('add_priceinfo', Product.id)|raw }}
  342.                         </div>
  343.                         {% endif %}
  344. <?php endif; ?>
  345.                         </div>
  346.                     </div>
  347.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  348.                         {% if Product.stock_find %}
  349.                             <div class="ec-productRole__actions">
  350.                                 {% if form.classcategory_id1 is defined %}
  351.                                     <div class="ec-select">
  352.                                         <label class="ym-label"></label>
  353.                                         {{ form_widget(form.classcategory_id1) }}
  354.                                         {{ form_errors(form.classcategory_id1) }}
  355.                                     </div>
  356.                                     {% if form.classcategory_id2 is defined %}
  357.                                         <div class="ec-select">
  358.                                             <label class="ym-label"></label>
  359.                                             {{ form_widget(form.classcategory_id2) }}
  360.                                             {{ form_errors(form.classcategory_id2) }}
  361.                                         </div>
  362.                                     {% endif %}
  363.                                 {% endif %}
  364.                                 <div class="ec-numberInput"><span class="ym-label">{{ '数量'|trans }}</span>
  365.                                     {{ form_widget(form.quantity) }}
  366.                                     <span class="fc-red ym-quantity_desc" data-stock="{{Product.StockMax}}" data-max="10">
  367.                                         {% if Product.StockMax <= 10 and Product.getStockUnlimitedMax() == 0 %}在庫残りわずか!{% endif %}
  368.                                     </span>
  369.                                     {{ form_errors(form.quantity) }}
  370.                                 </div>
  371.                             </div>
  372.                             <div class="ec-productRole__btn ym-btn_cart">
  373.                                 <button type="submit" class="ec-blockBtn--action add-cart">
  374.                                     {{ 'カートに入れる'|trans }}
  375.                                 </button>
  376.                             </div>
  377.                         {% else %}
  378.                             <div class="ec-productRole__btn ym-btn_cart">
  379.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  380. <?php if (false): ?>
  381.                                     {% if TabaCustomFieldsProduct('soldout_message', Product.id) %}
  382.                                         {{ TabaCustomFieldsProduct('soldout_message', Product.id)|raw }}
  383.                                     {% else %}
  384.                                         {{ '売り切れました'|trans }}
  385.                                     {% endif %}
  386. <?php endif; ?>
  387.                                 </button>
  388.                             </div>
  389.                         {% endif %}
  390.                         {{ form_rest(form) }}
  391.                     </form>
  392.                     <div class="ec-modal">
  393.                         <div class="ec-modal-overlay">
  394.                             <div class="ec-modal-wrap">
  395.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  396.                                 <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  397.                                 <div class="ec-modal-box">
  398.                                     <div class="ec-role">
  399.                                         <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  400.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  401.                                     </div>
  402.                                 </div>
  403.                             </div>
  404.                         </div>
  405.                     </div>
  406.                     {% if BaseInfo.option_favorite_product %}
  407.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  408.                             <div class="ec-productRole__btn ym-btn_favorite">
  409.                                 {% if is_favorite == false %}
  410.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel">
  411.                                         {{ 'お気に入りに追加'|trans }}
  412.                                     </button>
  413.                                 {% else %}
  414.                                     <button type="submit" id="favorite" class="ec-blockBtn--cancel"
  415.                                             disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
  416.                                     </button>
  417.                                 {% endif %}
  418.                             </div>
  419.                         </form>
  420.                     {% endif %}
  421.                     <div class="ym-product_sns fc-product_sns"></div>
  422.                     <p class="ym-guice_link"><a href="/guide">ご利用ガイド</a></p>
  423.                 </div>
  424.             </div>
  425.         </div>
  426.         {% if Product.freearea %}
  427.          <div class="ec-productRole__description">
  428.             <div class="ym-product_description">
  429.                 <p class="ym-heading ym-heading_lv2">商品情報</p>
  430.             {{ include(template_from_string(Product.freearea)) }}
  431. <?php if (false): ?>
  432.             {% if TabaCustomFieldsProduct('size_detail', Product.id) or TabaCustomFieldsProduct('side_image', Product.id) %}
  433.                 <p class="ym-heading ym-heading_lv2">サイズ詳細</p>
  434.                 {% if TabaCustomFieldsProduct('size_detail', Product.id) %}
  435.                     {{TabaCustomFieldsProduct('size_detail', Product.id)|raw}}
  436.                 {% endif %}
  437.                 {% if TabaCustomFieldsProduct('side_image', Product.id) %}
  438.                     <div class="ym-scroll" style="margin-top: 20px;">
  439.                         <img src="{{TabaCustomFieldsProduct('side_image', Product.id)}}" alt="">
  440.                     </div>
  441.                 {% endif %}
  442.             {% endif %}
  443. <?php endif; ?>
  444.              </div>
  445.         </div>
  446.         {% endif %}
  447.     </div>
  448. {% endblock %}