app/template/aneros2023/Product/detail_default.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. {% set body_class = 'product_page' %}
  9. {% block stylesheet %}
  10. <style>
  11.     .slick-slider {
  12.         margin-bottom: 30px;
  13.     }
  14.     .slick-dots {
  15.         position: absolute;
  16.         bottom: -45px;
  17.         display: block;
  18.         width: 100%;
  19.         padding: 0;
  20.         list-style: none;
  21.         text-align: center;
  22.     }
  23.     .slick-dots li {
  24.         position: relative;
  25.         display: inline-block;
  26.         width: 20px;
  27.         height: 20px;
  28.         margin: 0 5px;
  29.         padding: 0;
  30.         cursor: pointer;
  31.     }
  32.     .slick-dots li button {
  33.         font-size: 0;
  34.         line-height: 0;
  35.         display: block;
  36.         width: 20px;
  37.         height: 20px;
  38.         padding: 5px;
  39.         cursor: pointer;
  40.         color: transparent;
  41.         border: 0;
  42.         outline: none;
  43.         background: transparent;
  44.     }
  45.     .slick-dots li button:hover,
  46.     .slick-dots li button:focus {
  47.         outline: none;
  48.     }
  49.     .slick-dots li button:hover:before,
  50.     .slick-dots li button:focus:before {
  51.         opacity: 1;
  52.     }
  53.     .slick-dots li button:before {
  54.         content: " ";
  55.         line-height: 20px;
  56.         position: absolute;
  57.         top: 0;
  58.         left: 0;
  59.         width: 12px;
  60.         height: 12px;
  61.         text-align: center;
  62.         opacity: .25;
  63.         background-color: black;
  64.         border-radius: 50%;
  65.     }
  66.     .slick-dots li.slick-active button:before {
  67.         opacity: .75;
  68.         background-color: black;
  69.     }
  70.     .slick-dots li button.thumbnail img {
  71.         width: 0;
  72.         height: 0;
  73.     }
  74.     
  75. /*#default-product-page .favorite-button {
  76. margin-top:10px;
  77. text-align:right;
  78. }
  79. */
  80. @media only screen and (max-width: 999px){
  81. #default-product-page #form1, #default-product-page #form2{
  82. width:100%;
  83. }
  84. #default-product-page .favorite-button .button, #default-product-page .favorite-button .button-favorited {
  85. width:100%;
  86. padding:0;
  87. }
  88. #default-product-page .add-to-cart-wrapper .favorite-button {
  89. margin-right:0;
  90. }
  91. }
  92. </style>
  93. {% endblock %}
  94. {% block javascript %}
  95. <script>
  96.     // 規格2に選択肢を割り当てる。
  97.     function fnSetClassCategories(form, classcat_id2_selected) {
  98.         var $form = $(form);
  99.         var product_id = $form.find('input[name=product_id]').val();
  100.         var $sele1 = $form.find('select[name=classcategory_id1]');
  101.         var $sele2 = $form.find('select[name=classcategory_id2]');
  102.         eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  103.     }
  104. </script>
  105. <script>
  106.     $(function () {
  107.         // 外から移動
  108.         eccube.classCategories = {{ class_categories_as_json(Product) | raw }};
  109.         {% if form.classcategory_id2 is defined %}
  110.     fnSetClassCategories(
  111.         $('#form1'), {{ form.classcategory_id2.vars.value | json_encode | raw }}
  112.     );
  113.     {% elseif form.classcategory_id1 is defined %}
  114.     eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value | json_encode | raw }}, null);
  115.     {% endif %}
  116.         // bfcache無効化
  117.         $(window).bind('pageshow', function (event) {
  118.             if (event.originalEvent.persisted) {
  119.                 location.reload(true);
  120.             }
  121.         });
  122.         $('.item_visual').slick({
  123.             dots: false,
  124.             arrows: false,
  125.             responsive: [{
  126.                 breakpoint: 768,
  127.                 settings: {
  128.                     dots: true
  129.                 }
  130.             }]
  131.         });
  132.         $('.slideThumb').on('click', function () {
  133.             var index = $(this).attr('data-index');
  134.             $('.item_visual').slick('slickGoTo', index, false);
  135.         })
  136.     });
  137. </script>
  138. {% endblock %}
  139. {% block main %}
  140. {# デフォルト商品 #}
  141. <div class="main-container" id="default-product-page">
  142.     <div class="breadcrumbs">
  143.         <div class="container">
  144.             <ul itemscope itemtype="http://schema.org/BreadcrumbList">
  145.                 <li class="0" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
  146.                     <a itemprop="item" href="{{ url('homepage') }}" title="トップページに戻る">
  147.                         <span itemprop="name" style="padding:0">トップページ</span></a>
  148.                     <meta itemprop="position" content="1" />
  149.                     <span>></span>
  150.                 </li>
  151.                 {% if Product.ProductCategories is not empty %}
  152.                     {% set break = false %}
  153.                     {# 表示するカテゴリ 優先順 #}
  154.                     {% set showcategory = [7, 9, 12, 14, 10, 8, 11, 13] %}
  155.                     {% set categoryurl = {7: 'prostate-massagers', 8: 'accessories', 9: 'special-offers', 10: 'lubricants', 11: 'sex-toys-for-women', 12: 'sex-toys-for-couples', 13: 'sex-toys-for-men', 14: 'masturbators'} %}
  156.                     {% for cat in showcategory if not break %}
  157.                         {% for ProductCategory in Product.ProductCategories if not break %}
  158.                             {% for Category in ProductCategory.Category.path if not break %}
  159.                                 {% if Category.id == cat %}
  160.                                     <li class="category" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
  161.                                         <a itemprop="item" href="{{ url('homepage') }}{{categoryurl[Category.id]}}" title="{{ Category.name }}"><span
  162.                                                 itemprop="name" style="padding:0">{{ Category.name }}</span></a>
  163.                                         <meta itemprop="position" content="2" />
  164.                                         <span>></span>
  165.                                     </li>
  166.                                     {% set break = true %}
  167.                                 {% endif %}
  168.                             {% endfor %}
  169.                         {% endfor %}
  170.                     {% endfor %}
  171.                 {% endif %}
  172.                 <li class="product">
  173.                     <strong>{{ Product.name }}</strong>
  174.                 </li>
  175.             </ul>
  176.         </div>
  177.     </div>
  178.     <div itemscope itemtype="http://schema.org/Product" class="container common-style">
  179.         <section id="item_detail_area">
  180.             <div id="messages_product_view">
  181.             </div>
  182.             <div class="product-view">
  183.                 <div class="product-essential">
  184.                         <div class="product-top-box flexbox">
  185.                             <div class="product-img-box flexbox">
  186.                                 <div class="more-views">
  187.                                     {% if Product.ProductImage|length > 1 %}
  188.                                     <div class="product-images-thumbs">
  189.                                         <ul class="product-image-thumbs">
  190.                                             {% if Product.ProductImage|length > 0 %}
  191.                                             {% for ProductImage in Product.ProductImage %}
  192.                                             <li>
  193.                                                 {% if loop.index == 1 %}
  194.                                                     <a class="thumb-link selected" href="javascript: void(0)" title="{{ Product.name }}"
  195.                                                         data-image-index="{{ loop.index0 }}">
  196.                                                 {% else %}
  197.                                                     <a class="thumb-link" href="javascript: void(0)" title="{{ Product.name }}"
  198.                                                         data-image-index="{{ loop.index0 }}">
  199.                                                 {% endif %}
  200.                                                         <img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ Product.name }}" />
  201.                                                     </a>
  202.                                             </li>
  203.                                             {% endfor %}
  204.                                             {% else %}
  205.                                             <li>
  206.                                                 <a class="thumb-link" href="javascript: void(0)" title="{{ Product.name }}" data-image-index="0">
  207.                                                     <img src="{{ app.config.image_save_urlpath }}/{{ ''|no_image_product }}"
  208.                                                         alt="{{ Product.name }}" />
  209.                                                 </a>
  210.                                             </li>
  211.                                             {% endif %}
  212.                                         </ul>
  213.                                     </div>
  214.                                     <div class="carousel-next">
  215.                                         <i class="fa fa-angle-down">
  216.                                         </i>
  217.                                         <i class="fa fa-angle-right">
  218.                                         </i>
  219.                                     </div>
  220.                                     <div class="carousel-prev">
  221.                                         <i class="fa fa-angle-up">
  222.                                         </i>
  223.                                         <i class="fa fa-angle-left">
  224.                                         </i>
  225.                                     </div>
  226.                                     {% endif %}
  227.                                 </div>
  228.                                 <div class="product-image product-image-zoom" id="product-image-view">
  229.                                     {#
  230.                                     <a href="javascript: void(0)" id="product-image-large-view">
  231.                                     </a>
  232.                                     #}
  233.                                     <div class="product-image-gallery">
  234.                                         {% if Product.ProductImage|length > 0 %}
  235.                                         {% for ProductImage in Product.ProductImage %}
  236.                                         {% if loop.index == 1 %}
  237.                                         <img itemprop="image" id="image-{{ loop.index0 }}" class="gallery-image visible"
  238.                                             src="{{ asset(ProductImage, 'save_image') }}" rel="product-image-gallery" alt="{{ Product.name }}"
  239.                                             title="{{ Product.name }}" />
  240.                                         {% else %}
  241.                                         <img itemprop="image" id="image-{{ loop.index0 }}" class="gallery-image " src="{{ asset(ProductImage, 'save_image') }}"
  242.                                             rel="product-image-gallery" alt="{{ Product.name }}" title="{{ Product.name }}" />
  243.                                         {% endif %}
  244.                                         {% endfor %}
  245.                                         {% else %}
  246.                                         <img id="image-0" class="gallery-image visible" src="{{ asset(''|no_image_product, 'save_image') }}"
  247.                                             rel="product-image-gallery" alt="{{ Product.name }}" title="{{ Product.name }}" />
  248.                                         {% endif %}
  249.                                     </div>
  250.                                 </div>
  251.                             </div>
  252.                             <div class="product-shop">
  253.                                 <div class="product-name">
  254.                                     <h1 itemprop="name">{{ Product.name }}</h1>
  255.                                 </div>
  256.                                 <div class="price-info flexbox">
  257.                                     <div class="price-box">
  258.                                         <span class="regular-price" id="product-price-154">
  259.                                             <!--★通常価格★-->
  260.                                             {% if Product.hasProductClass -%}
  261.                                             {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  262.                                             <p id="detail_description_box__class_normal_price" class="normal_price"> 通常価格:<span
  263.                                                     class="price price01_default">{{ Product.getPrice01IncTaxMin|price }}</span>
  264.                                                 <span class="inctax">(税込)</span>
  265.                                             </p>
  266.                                             {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  267.                                             <p id="detail_description_box__class_normal_range_price" class="normal_price"> 通常価格:<span
  268.                                                     class="price price01_default">{{ Product.getPrice01IncTaxMin|price }} ~ {{ Product.getPrice01IncTaxMax|price
  269.                                                     }}</span>
  270.                                                     <span class="inctax">(税込)</span>
  271.                                             </p>
  272.                                             {% endif %}
  273.                                             {% else -%}
  274.                                             {% if Product.getPrice01Max is not null %}
  275.                                             <p id="detail_description_box__normal_price" class="normal_price"> 通常価格:<span
  276.                                                     class="price price01_default">{{ Product.getPrice01IncTaxMin|price }}</span>
  277.                                                 <span class="inctax">(税込)</span>
  278.                                             </p>
  279.                                             {% endif %}
  280.                                             {% endif -%}
  281.                                             <!--★販売価格★-->
  282.                                             {% if Product.hasProductClass -%}
  283.                                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  284.                                             <p id="detail_description_box__class_sale_price" itemprop="offers" itemscope
  285.                                                 itemtype="http://schema.org/Offer" class="sale_price text-primary"><span
  286.                                                     itemprop="priceCurrency" content="JPY"></span><span
  287.                                                     class="price price02_default" itemprop="price" content="{{ Product.getPrice02IncTaxMin }}">{{ Product.getPrice02IncTaxMin|price }}</span>
  288.                                                 <span class="inctax">(税込)</span>
  289.                                             </p>
  290.                                             {% else %}
  291.                                             <p id="detail_description_box__class_range_sale_price" itemprop="offers" itemscope
  292.                                                 itemtype="http://schema.org/Offer" class="sale_price text-primary"><span
  293.                                                     itemprop="priceCurrency" content="JPY"></span><span
  294.                                                     class="price price02_default" itemprop="price">{{ Product.getPrice02IncTaxMin|price }} ~ {{
  295.                                                     Product.getPrice02IncTaxMax|price }}</span>
  296.                                                 <span class="inctax">(税込)</span>
  297.                                             </p>
  298.                                             {% endif %}
  299.                                             {% else -%}
  300.                                             <p id="detail_description_box__sale_price" itemprop="offers" itemscope
  301.                                                 itemtype="http://schema.org/Offer" class="sale_price text-primary"><span
  302.                                                     itemprop="priceCurrency" content="JPY"></span><span class="price price02_default"
  303.                                                     itemprop="price" content="{{ Product.getPrice02IncTaxMin }}">{{ Product.getPrice02IncTaxMin|price }}</span>
  304.                                                 <span class="inctax">(税込)</span>
  305.                                             </p>
  306.                                             {% endif -%}
  307.                                         </span>
  308.                                         {% if Product.getPrice02IncTaxMin >= 3000 %}
  309.                                             <p class="paidy-price">
  310.                                                 <img src="{{ asset('aneros/img/products/paidy-small.jpg') }}" alt="Paidy" style="vertical-align:middle;display:inline-block;max-width:60px;margin-right:3px;">なら月々<b>{% if ( Product.getPrice02IncTaxMin >= 3000 ) and ( Product.getPrice02IncTaxMin < 6000 ) %}{{ Product.getPrice02IncTaxMin // 3 }}{% elseif ( Product.getPrice02IncTaxMin >= 6000 ) and ( Product.getPrice02IncTaxMin < 12000 ) %}{{ Product.getPrice02IncTaxMin // 6 }}{% elseif Product.getPrice02IncTaxMin >= 12000 %}{{ Product.getPrice02IncTaxMin // 12 }}{% endif %}円</b>から。分割手数料無料 <a href="https://paidy.com/guide/#3pay" target="_blank"><i class="fas fa-info-circle"></i></i></a>
  311.                                             </p>
  312.                                         {% endif %}
  313.                                         {# 会員ランクごとの取得ポイント表示↓ #}
  314.                                         <div style="width: 100%;text-align: right; margin:5px 0;">
  315.                                             {{ include('Product/customer_rank_point.twig') }}
  316.                                         </div>
  317.                                         {# 会員ランクごとの取得ポイント表示↑ #}
  318.                                         
  319.                                     </div>
  320.                                     <div class="add-to-cart-wrapper flexbox">
  321.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  322.                                         <div class="add-to-cart flexbox">
  323.                                             {% if Product.stock_find %}
  324.                                                 <div class="qty-wrapper flexbox">
  325.                                                     <label for="qty">数量:</label>
  326.                                                     {# 数量 #}
  327.                                                     {{ form_widget(form.quantity) }}
  328.                                                     {{ form_errors(form.quantity) }}
  329.                                                     <a href="javascript: void(0)" class="increase-qty">+</a>
  330.                                                     <div id="qty-error">
  331.                                                     </div>
  332.                                                 </div>
  333.                                                 <div class="ec-productRole__btn">
  334.                                                     <button type="submit" title="カゴに入れる" class="button btn-cart add-cart">
  335.                                                         <span>
  336.                                                             <span>カゴに入れる</span>
  337.                                                         </span>
  338.                                                     </button>
  339.                                                 </div>
  340.                                             {% else %}
  341.                                                 <div class="ec-productRole__btn">
  342.                                                     {% if arrivemail %}
  343.                                                         <button type="button" data-productid="{{ Product.id }}" data-productname="{{ Product.name }}" title="入荷お知らせ" class="button btn-cart add-to-mail">
  344.                                                             <span>入荷お知らせ</span>
  345.                                                         </button>
  346.                                                     {% else %}
  347.                                                         <button type="button" title="在庫切れ" class="button btn-cart add-to-cart-out">
  348.                                                             <span>在庫切れ</span>
  349.                                                         </button>
  350.                                                     {% endif %}
  351.                                                 </div>
  352.                                             {% endif %}
  353.                                         </div>
  354.                 
  355.                                         {{ form_rest(form) }}
  356.                     </form>
  357.                     {# {% if is_granted('ROLE_USER') %} #}
  358.                     {% if BaseInfo.option_favorite_product %}
  359.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post" id="form2">
  360.                             <div class="ec-productRole__btn favorite-button">
  361.                                 {% if is_favorite == false %}
  362.                                     {# <button type="submit" id="favorite" class="ec-blockBtn--cancel button">
  363.                                         {{ 'お気に入りに追加'|trans }}
  364.                                     </button> #}
  365.                                     
  366.                                     <button type="submit" id="favorite" class="favorite-heart">
  367.                                         {#{{ 'お気に入りに追加'|trans }}#}
  368.                                         <i class="fa fa-heart-o" title="お気に入りに追加"></i>
  369.                                     </button>
  370.                                 {% else %}
  371.                                     <button type="button" id="unfavorite" class="unfavorite-heart one-click-remove-favorite" data-action="{{ url('mypage_favorite_delete', { id : Product.id }) }}" data-method="delete" {{ csrf_token_for_anchor() }}>
  372.                                         {#{{ 'お気に入りに追加'|trans }}#}
  373.                                         <i class="fa fa-heart" title="お気に入りに追加済です"></i>
  374.                                     </button>
  375.                                     
  376.                                     {# <button type="button" id="unfavorite" class="ec-blockBtn--cancel button-favorited one-click-remove-favorite"
  377.                                     data-action="{{ url('mypage_favorite_delete', { id : Product.id }) }}" data-method="delete" {{ csrf_token_for_anchor() }}>
  378.                                         {{ 'お気に入りに追加済です。'|trans }}
  379.                                     </button> #}
  380.                                     
  381.                                 {% endif %}
  382.                             </div>
  383.                         </form>
  384.                     {% endif %}
  385.                     {# {% endif %} #}
  386.                                     </div>
  387.                                     <a href="#review_area" class="top_review_score"></a>
  388.                                 </div>
  389.                             </div>
  390.                             <div class="product-name mobile">
  391.                                 <h1 itemprop="name">{{ Product.name }}</h1>
  392.                             </div>
  393.                             <!-- ▼レビュープラグインの記述▼ -->
  394.                             {% if 0 < ProductReviewCount %}
  395.                             <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
  396.                                 <span style="display:none" itemprop="ratingValue">{{ Reviews_avg|number_format(1, '.') }}</span>
  397.                                 <span style="display:none" itemprop="reviewCount">{{ ProductReviewCount }}</span>
  398.                             </div>
  399.                             {% endif %}
  400.                             <!-- ▲レビュープラグインの記述▲ -->
  401.                         </div>
  402.                     <div class="product-info-box description">
  403.                         <h3>商品説明</h3>
  404.                         <div class="std" itemprop="description">{{ Product.description_detail|raw|nl2br }}</div>
  405.                     </div>
  406.                     <script type="text/javascript">
  407.                         $(document).ready(function () {
  408.                             $('.qty-wrapper .increase-qty').click(function () {
  409.                                 $('.qty-wrapper #quantity').val(parseInt($('.qty-wrapper #quantity').val()) + 1);
  410.                             })
  411.                         })
  412.                                         //]]>
  413.                     </script>
  414.                 </div>
  415.             </div>
  416.         </section>
  417.     </div>
  418.     <div id="relatedproduct_area" class="container"></div>
  419.     <div id="review_area" class="container">
  420.     </div>
  421.     <div class="swooth-wrapper grey-swooth">
  422.     </div>
  423.     {# 商品拡大 #}
  424.     <div class="product-zoom-area" style="display: none">
  425.         <img class="zoom-image">
  426.         <a title="Previous" class="nav prev" href="javascript:;"><span></span></a>
  427.         <a title="Next" class="nav next" href="javascript:;"><span></span></a>
  428.         <a title="Close" class="zoom-close" href="javascript:;">
  429.             <i class="fa fa-close"></i>
  430.         </a>
  431. </div>
  432.     {% endblock %}