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

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}

{% set body_class = 'product_page' %}

{% block stylesheet %}
    <style>
    @import url("https://marusan_sentakudaiko.php74.ropes.co.jp//html/user_data/assets/css/customize.css");
    .slide-item img {
        width: 90%;
        margin: 0 auto;
    }
    
    .ec-grid2 {
        margin: 20rem auto;
    }

    .ec-grid2__cell {
        margin: 30rem auto;
    }

    .ec-grid2__cell.image {
        margin-top: 10rem;
    }
    .ec-productRole .ec-productRole__price {
        border: none;
        padding: 25rem 0 30rem;
    }
    </style>
{% endblock %}

{% block javascript %}
    <script>
        eccube.classCategories = {{ class_categories_as_json(Product)|raw }};

        // 規格2に選択肢を割り当てる。
        function fnSetClassCategories(form, classcat_id2_selected) {
            var $form = $(form);
            var product_id = $form.find('input[name=product_id]').val();
            var $sele1 = $form.find('select[name=classcategory_id1]');
            var $sele2 = $form.find('select[name=classcategory_id2]');
            eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
        }

        {% if form.classcategory_id2 is defined %}
        fnSetClassCategories(
            $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
        );
        {% elseif form.classcategory_id1 is defined %}
        eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
        {% endif %}
    </script>
    <script>
        $(function() {
            // bfcache無効化
            $(window).bind('pageshow', function(event) {
                if (event.originalEvent.persisted) {
                    location.reload(true);
                }
            });
        });
    </script>
    <script>
        $(function() {
            $('.add-cart').on('click', function(event) {
                {% if form.classcategory_id1 is defined %}
                // 規格1フォームの必須チェック
                if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
                    $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
                    return true;
                } else {
                    $('#classcategory_id1')[0].setCustomValidity('');
                }
                {% endif %}

                {% if form.classcategory_id2 is defined %}
                // 規格2フォームの必須チェック
                if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
                    $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
                    return true;
                } else {
                    $('#classcategory_id2')[0].setCustomValidity('');
                }
                {% endif %}

                // 個数フォームのチェック
                if ($('#quantity').val() < 1) {
                    $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
                    return true;
                } else {
                    $('#quantity')[0].setCustomValidity('');
                }

                event.preventDefault();
                $form = $('#form1');
                $.ajax({
                    url: $form.attr('action'),
                    type: $form.attr('method'),
                    data: $form.serialize(),
                    dataType: 'json',
                    beforeSend: function(xhr, settings) {
                        // Buttonを無効にする
                        $('.add-cart').prop('disabled', true);
                    }
                }).done(function(data) {
                    // レスポンス内のメッセージをalertで表示
                    // $.each(data.messages, function() {
                    //     $('#ec-modal-header').html(this);
                    // });

                    if(data.done == false) {
                        $('#errorCartModal').show();
                    } else {
                        $('#cartModal').show()
    
                        // カートブロックを更新する
                        $.ajax({
                            url: '{{ url('block_cart') }}',
                            type: 'GET',
                            dataType: 'html'
                        }).done(function(html) {
                            $('.ec-headerRole__cart').html(html);
                        });
                    }
                }).fail(function(data) {
                    alert('{{ 'カートへの追加に失敗しました。'|trans }}');
                }).always(function(data) {
                    // Buttonを有効にする
                    $('.add-cart').prop('disabled', false);
                });
            });
        });

        $('.ec-modal-wrap').on('click', function(e) {
            // モーダル内の処理は外側にバブリングさせない
            e.stopPropagation();
        });
        $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
            $('.ec-modal').hide()
        });
    </script>
    <script type="application/ld+json">
    {
        "@context": "https://schema.org/",
        "@type": "Product",
        "name": "{{ Product.name }}",
        "image": [
            {% for img in Product.ProductImage %}
                "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}

            {% else %}
                "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
            {% endfor %}
        ],
        "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
        {% if Product.code_min %}
        "sku": "{{ Product.code_min }}",
        {% endif %}
        "offers": {
            "@type": "Offer",
            "url": "{{ url('product_detail', {'id': Product.id}) }}",
            "priceCurrency": "{{ eccube_config.currency }}",
            "price": {{ Product.getPrice02IncTaxMin }},
            "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
        }
    }
    </script>
{% endblock %}

{% block main %}
    <div class="ec-productRole">
        <div class="ec-grid2">
            <div class="ec-grid2__cell image">
                <div class="ec-sliderItemRole">
                    <div class="item_visual">
                        {% for ProductImage in Product.ProductImage %}
                            <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}"></div>
                        {% else %}
                            <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" /></div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="ec-grid2__cell">
                <div class="ec-productRole__profile">
                    {# 商品名 #}
                    <div class="ec-productRole__title">
                        <h2 class="ec-headingTitle">{{ Product.name }}</h2>
                    </div>
                    {# 販売価格 #}
                    <div class="ec-productRole__price">
                        {% if Product.hasProductClass -%}
                            {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
                                <div class="ec-price">
                                    <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|number_format }} 円<span class="ec-price__tax">({{ '税込'|trans }})</span></span>
                                </div>
                            {% else %}
                                <div class="ec-price">
                                    <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|number_format }} ～ {{ Product.getPrice02IncTaxMax|number_format }} 円<span class="ec-price__tax">({{ '税込'|trans }})</span></span>
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="ec-price">
                                <span class="ec-price__price__title">利用料金 :</span>
                                <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|number_format }} 円<span class="ec-price__tax">({{ '税込'|trans }})</span></span>
                            </div>
                        {% endif %}
                    </div>
                    {# 商品コード #}
                    {# {% if Product.code_min is not empty %}
                        <div class="ec-productRole__code">
                            {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
                        </div>
                    {% endif %} #}
                    {# 関連カテゴリ #}
                    {# {% if Product.ProductCategories is not empty %}
                        <div class="ec-productRole__category">
                            <div>{{ '関連カテゴリ'|trans }}</div>
                            {% for ProductCategory in Product.ProductCategories %}
                                <ul>
                                    <li>
                                        {% for Category in ProductCategory.Category.path %}
                                            <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
                                            <span>＞</span>{% endif -%}
                                        {% endfor %}
                                    </li>
                                </ul>
                            {% endfor %}
                        </div>
                    {% endif %} #}
                    <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
                        {% if Product.stock_find %}
                            <div class="ec-productRole__actions" style="display:none">
                                {% if form.classcategory_id1 is defined %}
                                    <div class="ec-select">
                                        {{ form_widget(form.classcategory_id1) }}
                                        {{ form_errors(form.classcategory_id1) }}
                                    </div>
                                    {% if form.classcategory_id2 is defined %}
                                        <div class="ec-select">
                                            {{ form_widget(form.classcategory_id2) }}
                                            {{ form_errors(form.classcategory_id2) }}
                                        </div>
                                    {% endif %}
                                {% endif %}
                                <div class="ec-numberInput"><span>{{ '数量'|trans }}</span>
                                    {{ form_widget(form.quantity) }}
                                    {{ form_errors(form.quantity) }}
                                </div>
                            </div>
                            <div class="ec-productRole__btn">
                                <button type="submit" class="ec-application--action add-cart">
                                    {{ 'お申込する'|trans }}
                                </button>
                            </div>
                        {% endif %}

                        {{ form_rest(form) }}
                    </form>
                    <div class="ec-modal" id="cartModal">
                        <div class="ec-modal-overlay">
                            <div class="ec-modal-wrap">
                                <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
                                <div id="ec-modal-header" class="application-alert text-center">{{ 'カートに追加しました。'|trans }}</div>
                                <div class="ec-modal-box">
                                    <div class="ec-modalBtn-group">
                                        <span class="ec-modalBtn--cancel">{{ 'キャンセル'|trans }}</span>
                                        <a href="{{ url('cart') }}" class="ec-modalBtn--action">{{ 'カートへ進む'|trans }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% if BaseInfo.option_favorite_product %}
                        <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
                            <div class="ec-productRole__btn">
                                {% if is_favorite == false %}
                                    <button type="submit" id="favorite" class="ec-blockBtn--cancel">
                                        {{ 'お気に入りに追加'|trans }}
                                    </button>
                                {% else %}
                                    <button type="submit" id="favorite" class="ec-blockBtn--cancel"
                                            disabled="disabled">{{ 'お気に入りに追加済です。'|trans }}
                                    </button>
                                {% endif %}
                            </div>
                        </form>
                    {% endif %}
                    <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
                    </div>
                </div>
            </div>
        </div>
        {% if Product.freearea %}
             <div class="ec-productRole__description">
                 {{ include(template_from_string(Product.freearea)) }}
            </div>
        {% endif %}
    </div>

    <div class="ec-modal" id="errorCartModal">
        <div class="ec-modal-overlay">
            <div class="ec-modal-wrap">
                <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
                <div id="ec-modal-header" class="application-alert text-center">{{ 'カートにはすでに追加されました。'|trans }}</div>
                <div class="ec-modal-box">
                    <div class="ec-modalBtn-group">
                        <a href="{{ url('cart') }}" class="ec-modalBtn--action">{{ 'カートへ進む'|trans }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}