Before - 変更前 After - 変更後
{# {#
This file is part of EC-CUBE This file is part of EC-CUBE
   
Copyright(c) 2000-2015 EC-CUBE CO.,LTD. All Rights Reserved. Copyright(c) 2000-2015 EC-CUBE CO.,LTD. All Rights Reserved.
   
https://www.ec-cube.co.jp/ https://www.ec-cube.co.jp/
   
This program is free software; you can redistribute it and/or This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2 as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version. of the License, or (at your option) any later version.
   
This program is distributed in the hope that it will be useful, This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details. GNU General Public License for more details.
   
You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA. Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
#} #}
{% extends 'default_frame.twig' %} {% extends 'default_frame.twig' %}
   
{% set body_class = 'product_page' %} {% set body_class = 'product_page' %}
   
{% block javascript %} {% block javascript %}
<script> <script>
   eccube.classCategories = {{ Product.class_categories|json_encode|raw }};    eccube.classCategories = {{ Product.class_categories|json_encode|raw }};
   
   // 規格2に選択肢を割り当てる。    // 規格2に選択肢を割り当てる。
   function fnSetClassCategories(form, classcat_id2_selected) {    function fnSetClassCategories(form, classcat_id2_selected) {
       var $form = $(form);        var $form = $(form);
       var product_id = $form.find('input[name=product_id]').val();        var product_id = $form.find('input[name=product_id]').val();
       var $sele1 = $form.find('select[name=classcategory_id1]');        var $sele1 = $form.find('select[name=classcategory_id1]');
       var $sele2 = $form.find('select[name=classcategory_id2]');        var $sele2 = $form.find('select[name=classcategory_id2]');
       eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);        eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
   }    }
   
   {% if form.classcategory_id2 is defined %}    {% if form.classcategory_id2 is defined %}
   fnSetClassCategories(    fnSetClassCategories(
           document.form1, {{ form.classcategory_id2.vars.value|json_encode|raw }}            document.form1, {{ form.classcategory_id2.vars.value|json_encode|raw }}
   );    );
   {% endif %}    {% endif %}
</script> </script>
   
<script> <script>
$(function(){ $(function(){
   $('.carousel').slick({    $('.carousel').slick({
       infinite: false,        infinite: false,
       speed: 300,        speed: 300,
       prevArrow:'<button type="button" class="slick-prev"><span class="angle-circle"><svg class="cb cb-angle-right"><use xlink:href="#cb-angle-right" /></svg></span></button>',        prevArrow:'<button type="button" class="slick-prev"><span class="angle-circle"><svg class="cb cb-angle-right"><use xlink:href="#cb-angle-right" /></svg></span></button>',
       nextArrow:'<button type="button" class="slick-next"><span class="angle-circle"><svg class="cb cb-angle-right"><use xlink:href="#cb-angle-right" /></svg></span></button>',        nextArrow:'<button type="button" class="slick-next"><span class="angle-circle"><svg class="cb cb-angle-right"><use xlink:href="#cb-angle-right" /></svg></span></button>',
       slidesToShow: 4,        slidesToShow: 4,
       slidesToScroll: 4,        slidesToScroll: 4,
       responsive: [        responsive: [
           {            {
               breakpoint: 768,                breakpoint: 768,
               settings: {                settings: {
                   slidesToShow: 3,                    slidesToShow: 3,
                   slidesToScroll: 3                    slidesToScroll: 3
               }                }
           }            }
       ]        ]
   });    });
   
   $('.slides').slick({    $('.slides').slick({
       dots: true,        dots: true,
       arrows: false,        arrows: false,
       speed: 300,        speed: 300,
       customPaging: function(slider, i) {        customPaging: function(slider, i) {
           return '<button class="thumbnail">' + $(slider.$slides[i]).find('img').prop('outerHTML') + '</button>';            return '<button class="thumbnail">' + $(slider.$slides[i]).find('img').prop('outerHTML') + '</button>';
       }        }
   });    });
   
   $('#favorite').click(function() {    $('#favorite').click(function() {
       $('#mode').val('add_favorite');        $('#mode').val('add_favorite');
   });    });
   
.     $('#add-cart').click(function() {
         $('#mode').val('add_cart');
     });
}); });
</script> </script>
   
{% endblock %} {% endblock %}
   
{% block main %} {% block main %}
   {# todo ブロック化}    {# todo ブロック化}
   <div id="topicpath" class="row">    <div id="topicpath" class="row">
       {% for ProductCategory in Product.ProductCategories %}        {% for ProductCategory in Product.ProductCategories %}
       <ol>        <ol>
           <li><a href="{{ url('product_list') }}">全商品</a></li>            <li><a href="{{ url('product_list') }}">全商品</a></li>
           {% for Category in ProductCategory.Category.path %}            {% for Category in ProductCategory.Category.path %}
               <li><a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a></li>                <li><a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a></li>
           {% endfor %}            {% endfor %}
           <li>{{ Product.name }}</li>            <li>{{ Product.name }}</li>
       </ol>        </ol>
       {% endfor %}        {% endfor %}
   </div>    </div>
   #}    #}
   
   <!-- ▼item_detail▼ -->    <!-- ▼item_detail▼ -->
   <div id="item_detail">    <div id="item_detail">
       <div id="detail_wrap" class="row">        <div id="detail_wrap" class="row">
           <!--★画像★-->            <!--★画像★-->
           <div id="item_photo_area" class="col-sm-6">            <div id="item_photo_area" class="col-sm-6">
               <div id="detail_image_box__slides" class="slides">                <div id="detail_image_box__slides" class="slides">
                   {% if Product.ProductImage|length > 0 %}                    {% if Product.ProductImage|length > 0 %}
                       {% for ProductImage in Product.ProductImage %}                        {% for ProductImage in Product.ProductImage %}
                       <div id="detail_image_box__item--{{ loop.index }}"><img src="{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}"/></div>                        <div id="detail_image_box__item--{{ loop.index }}"><img src="{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}"/></div>
                       {% endfor %}                        {% endfor %}
                   {% else %}                    {% else %}
                       <div id="detail_image_box__item"><img src="{{ app.config.image_save_urlpath }}/{{ ''|no_image_product }}"/></div>                        <div id="detail_image_box__item"><img src="{{ app.config.image_save_urlpath }}/{{ ''|no_image_product }}"/></div>
                   {% endif %}                    {% endif %}
               </div>                </div>
           </div>            </div>
   
           <section id="item_detail_area" class="col-sm-6">            <section id="item_detail_area" class="col-sm-6">
   
               <!--★商品名★-->                <!--★商品名★-->
               <h3 id="detail_description_box__name" class="item_name">{{ Product.name }}</h3>                <h3 id="detail_description_box__name" class="item_name">{{ Product.name }}</h3>
               <div id="detail_description_box__body" class="item_detail">                <div id="detail_description_box__body" class="item_detail">
   
                   {% if Product.ProductTag is not empty %}                    {% if Product.ProductTag is not empty %}
                       <!--▼商品タグ-->                        <!--▼商品タグ-->
                       <div id="product_tag_box" class="product_tag">                        <div id="product_tag_box" class="product_tag">
                           {% for ProductTag in Product.ProductTag %}                            {% for ProductTag in Product.ProductTag %}
                               <span id="product_tag_box__product_tag--{{ ProductTag.Tag.id }}" class="product_tag_list">{{ ProductTag.Tag }}</span>                                <span id="product_tag_box__product_tag--{{ ProductTag.Tag.id }}" class="product_tag_list">{{ ProductTag.Tag }}</span>
                           {% endfor %}                            {% endfor %}
                       </div>                        </div>
                       <hr>                        <hr>
                       <!--▲商品タグ-->                        <!--▲商品タグ-->
                   {% endif %}                    {% endif %}
   
                   <!--★通常価格★-->                    <!--★通常価格★-->
                   {% if Product.hasProductClass -%}                    {% if Product.hasProductClass -%}
                       {% if Product.getPrice01Min is not null and Product.getPrice01Min == Product.getPrice01Max %}                        {% if Product.getPrice01Min is not null and Product.getPrice01Min == Product.getPrice01Max %}
                       <p id="detail_description_box__class_normal_price" class="normal_price"> 通常価格：<span class="price01_default">{{ Product.getPrice01IncTaxMin|price }}</span> <span class="small">税込</span></p>                        <p id="detail_description_box__class_normal_price" class="normal_price"> 通常価格：<span class="price01_default">{{ Product.getPrice01IncTaxMin|price }}</span> <span class="small">税込</span></p>
                       {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}                        {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
.                        <p id="detail_description_box__class_normal_range_price" class="normal_price"> 通常価格：<span class="price01_default">{{ Product.getPrice01IncTaxMin|price }}</span> ～ <span class="price01_default">{{ Product.getPrice01IncTaxMax|price }}</span> <span class="small">税込</span></p>                        <p id="detail_description_box__class_normal_range_price" class="normal_price"> 通常価格：<span class="price01_default">{{ Product.getPrice01IncTaxMin|price }} ～ {{ Product.getPrice01IncTaxMax|price }}</span> <span class="small">税込</span></p>
                       {% endif %}                        {% endif %}
                   {% else -%}                    {% else -%}
                       {% if Product.getPrice01Max is not null %}                        {% if Product.getPrice01Max is not null %}
                       <p id="detail_description_box__normal_price" class="normal_price"> 通常価格：<span class="price01_default">{{ Product.getPrice01IncTaxMin|price }}</span> <span class="small">税込</span></p>                        <p id="detail_description_box__normal_price" class="normal_price"> 通常価格：<span class="price01_default">{{ Product.getPrice01IncTaxMin|price }}</span> <span class="small">税込</span></p>
                       {% endif %}                        {% endif %}
                   {% endif -%}                    {% endif -%}
   
                   <!--★販売価格★-->                    <!--★販売価格★-->
                   {% if Product.hasProductClass -%}                    {% if Product.hasProductClass -%}
                       {% if Product.getPrice02Min == Product.getPrice02Max %}                        {% if Product.getPrice02Min == Product.getPrice02Max %}
                       <p id="detail_description_box__class_sale_price" class="sale_price text-primary"> <span class="price02_default">{{ Product.getPrice02IncTaxMin|price }}</span> <span class="small">税込</span></p>                        <p id="detail_description_box__class_sale_price" class="sale_price text-primary"> <span class="price02_default">{{ Product.getPrice02IncTaxMin|price }}</span> <span class="small">税込</span></p>
                       {% else %}                        {% else %}
.                        <p id="detail_description_box__class_range_sale_price" class="sale_price text-primary"> <span class="price02_default">{{ Product.getPrice02IncTaxMin|price }}</span> ～ <span class="price02_default">{{ Product.getPrice02IncTaxMax|price }}</span> <span class="small">税込</span></p>                        <p id="detail_description_box__class_range_sale_price" class="sale_price text-primary"> <span class="price02_default">{{ Product.getPrice02IncTaxMin|price }} ～ {{  Product.getPrice02IncTaxMax|price }}</span> <span class="small">税込</span></p>
                       {% endif %}                        {% endif %}
                   {% else -%}                    {% else -%}
                       <p id="detail_description_box__sale_price" class="sale_price text-primary"> <span class="price02_default">{{ Product.getPrice02IncTaxMin|price }}</span> <span class="small">税込</span></p>                        <p id="detail_description_box__sale_price" class="sale_price text-primary"> <span class="price02_default">{{ Product.getPrice02IncTaxMin|price }}</span> <span class="small">税込</span></p>
                   {% endif -%}                    {% endif -%}
   
                   <!--▼商品コード-->                    <!--▼商品コード-->
                   <p id="detail_description_box__item_range_code" class="item_code">商品コード： <span id="item_code_default">                    <p id="detail_description_box__item_range_code" class="item_code">商品コード： <span id="item_code_default">
                       {{ Product.code_min }}                        {{ Product.code_min }}
                       {% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}                        {% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}
                       </span> </p>                        </span> </p>
                   <!--▲商品コード-->                    <!--▲商品コード-->
   
                   <!-- ▼関連カテゴリ▼ -->                    <!-- ▼関連カテゴリ▼ -->
                   <div id="relative_category_box" class="relative_cat">                    <div id="relative_category_box" class="relative_cat">
                       <p>関連カテゴリ</p>                        <p>関連カテゴリ</p>
                         {% for ProductCategory in Product.ProductCategories %}                          {% for ProductCategory in Product.ProductCategories %}
                       <ol id="relative_category_box__relative_category--{{ ProductCategory.product_id }}_{{ loop.index }}">                        <ol id="relative_category_box__relative_category--{{ ProductCategory.product_id }}_{{ loop.index }}">
                           {% for Category in ProductCategory.Category.path %}                            {% for Category in ProductCategory.Category.path %}
                           <li><a id="relative_category_box__relative_category--{{ ProductCategory.product_id }}_{{ loop.parent.loop.index }}_{{ Category.id }}" href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a></li>                            <li><a id="relative_category_box__relative_category--{{ ProductCategory.product_id }}_{{ loop.parent.loop.index }}_{{ Category.id }}" href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a></li>
                           {% endfor %}                            {% endfor %}
                       </ol>                        </ol>
                       {% endfor %}                        {% endfor %}
                   </div>                    </div>
                   <!-- ▲関連カテゴリ▲ -->                    <!-- ▲関連カテゴリ▲ -->
   
                   <form action="?" method="post" id="form1" name="form1">                    <form action="?" method="post" id="form1" name="form1">
                       <!--▼買い物かご-->                        <!--▼買い物かご-->
                       <div id="detail_cart_box" class="cart_area">                        <div id="detail_cart_box" class="cart_area">
                           {% if Product.stock_find %}                            {% if Product.stock_find %}
   
                               {# 規格 #}                                {# 規格 #}
                               {% if form.classcategory_id1 is defined %}                                {% if form.classcategory_id1 is defined %}
                               <ul id="detail_cart_box__cart_class_category_id" class="classcategory_list">                                <ul id="detail_cart_box__cart_class_category_id" class="classcategory_list">
                                   {# 規格1 #}                                    {# 規格1 #}
                                   <li>                                    <li>
                                       {{ form_widget(form.classcategory_id1) }}                                        {{ form_widget(form.classcategory_id1) }}
                                       {{ form_errors(form.classcategory_id1) }}                                        {{ form_errors(form.classcategory_id1) }}
                                   </li>                                    </li>
                                   {# 規格2 #}                                    {# 規格2 #}
                                   {% if form.classcategory_id2 is defined %}                                    {% if form.classcategory_id2 is defined %}
                                       <li>                                        <li>
                                           {{ form_widget(form.classcategory_id2) }}                                            {{ form_widget(form.classcategory_id2) }}
                                           {{ form_errors(form.classcategory_id2) }}                                            {{ form_errors(form.classcategory_id2) }}
                                       </li>                                        </li>
                                    {% endif %}                                     {% endif %}
                               </ul>                                </ul>
                               {% endif %}                                {% endif %}
   
                               {# 数量 #}                                {# 数量 #}
                               <dl id="detail_cart_box__cart_quantity" class="quantity">                                <dl id="detail_cart_box__cart_quantity" class="quantity">
                                   <dt>数量</dt>                                    <dt>数量</dt>
                                   <dd>                                    <dd>
                                       {{ form_widget(form.quantity) }}                                        {{ form_widget(form.quantity) }}
                                       {{ form_errors(form.quantity) }}                                        {{ form_errors(form.quantity) }}
                                   </dd>                                    </dd>
                               </dl>                                </dl>
   
                               <div class="extra-form">                                <div class="extra-form">
                                   {% for f in form.getIterator %}                                    {% for f in form.getIterator %}
                                       {% if f.vars.name matches '[^plg*]' %}                                        {% if f.vars.name matches '[^plg*]' %}
                                           {{ form_row(f) }}                                            {{ form_row(f) }}
                                       {% endif %}                                        {% endif %}
                                   {% endfor %}                                    {% endfor %}
                               </div>                                </div>
   
                               {# カートボタン #}                                {# カートボタン #}
                               <div id="detail_cart_box__button_area" class="btn_area">                                <div id="detail_cart_box__button_area" class="btn_area">
                                   <ul id="detail_cart_box__insert_button" class="row">                                    <ul id="detail_cart_box__insert_button" class="row">
.                                        <li class="col-xs-12 col-sm-8"><button type="submit" id="cart" class="btn btn-primary btn-block prevention-btn prevention-mask">カートに入れる</button></li>                                        <li class="col-xs-12 col-sm-8"><button type="submit" id="add-cart" class="btn btn-primary btn-block prevention-btn prevention-mask">カートに入れる</button></li>
                                   </ul>                                    </ul>
                                   {% if BaseInfo.option_favorite_product == 1 %}                                    {% if BaseInfo.option_favorite_product == 1 %}
                                   <ul id="detail_cart_box__favorite_button" class="row">                                    <ul id="detail_cart_box__favorite_button" class="row">
                                       {% if is_favorite == false %}                                        {% if is_favorite == false %}
                                           <li class="col-xs-12 col-sm-8"><button type="submit" id="favorite" class="btn btn-info btn-block prevention-btn prevention-mask">お気に入りに追加</button></li>                                            <li class="col-xs-12 col-sm-8"><button type="submit" id="favorite" class="btn btn-info btn-block prevention-btn prevention-mask">お気に入りに追加</button></li>
                                       {% else %}                                        {% else %}
                                           <li class="col-xs-12 col-sm-8"><button type="submit" id="favorite" class="btn btn-info btn-block" disabled="disabled">お気に入りに追加済みです</button></li>                                            <li class="col-xs-12 col-sm-8"><button type="submit" id="favorite" class="btn btn-info btn-block" disabled="disabled">お気に入りに追加済みです</button></li>
                                       {% endif %}                                        {% endif %}
                                   </ul>                                    </ul>
                                   {% endif %}                                    {% endif %}
                               </div>                                </div>
                           {% else %}                            {% else %}
                               {# 在庫がない場合は品切れボタンのみ表示 #}                                {# 在庫がない場合は品切れボタンのみ表示 #}
                               <div id="detail_cart_box__button_area" class="btn_area">                                <div id="detail_cart_box__button_area" class="btn_area">
                                   <ul class="row">                                    <ul class="row">
                                       <li class="col-xs-12 col-sm-8"><button type="button" class="btn btn-default btn-block" disabled="disabled">ただいま品切れ中です</button></li>                                        <li class="col-xs-12 col-sm-8"><button type="button" class="btn btn-default btn-block" disabled="disabled">ただいま品切れ中です</button></li>
                                   </ul>                                    </ul>
                               </div>                                </div>
                           {% endif %}                            {% endif %}
                       </div>                        </div>
                       <!--▲買い物かご-->                        <!--▲買い物かご-->
                       {{ form_rest(form) }}                        {{ form_rest(form) }}
                   </form>                    </form>
   
                   <!--★商品説明★-->                    <!--★商品説明★-->
                   <p id="detail_not_stock_box__description_detail" class="item_comment">{{ Product.description_detail|raw|nl2br }}</p>                    <p id="detail_not_stock_box__description_detail" class="item_comment">{{ Product.description_detail|raw|nl2br }}</p>
   
               </div>                </div>
               <!-- /.item_detail -->                <!-- /.item_detail -->
   
           </section>            </section>
           <!--詳細ここまで-->            <!--詳細ここまで-->
       </div>        </div>
   
       {# フリーエリア #}        {# フリーエリア #}
       {% if Product.freearea %}        {% if Product.freearea %}
       <div id="sub_area" class="row">        <div id="sub_area" class="row">
           <div class="col-sm-10 col-sm-offset-1">            <div class="col-sm-10 col-sm-offset-1">
               <div id="detail_free_box__freearea" class="freearea">{{ include(template_from_string(Product.freearea)) }}</div>                <div id="detail_free_box__freearea" class="freearea">{{ include(template_from_string(Product.freearea)) }}</div>
           </div>            </div>
       </div>        </div>
       {% endif %}        {% endif %}
   </div>    </div>
   <!-- ▲item_detail▲ -->    <!-- ▲item_detail▲ -->
{% endblock %} {% endblock %}