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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% block stylesheet %}
  14.     {#<link rel="stylesheet" href="{{ asset('assets/css/contents.css', 'user_data') }}">#}
  15.     {#<link rel="stylesheet" href="{{ asset('assets/css/main_module.css', 'user_data') }}">#}
  16.     <link rel="stylesheet" href="{{ asset('assets/css/page/_product_detail.css', 'user_data') }}">
  17.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">
  18.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css">
  19.     <style>
  20.     .reservation4-add-cart{
  21.         justify-content: center;
  22.     }
  23.         .new {
  24.           position: absolute;
  25.           top: -1%;
  26.           left: -2%;
  27.           width: 41%;
  28.           background: linear-gradient(to top left, transparent 50%, #df0b75 50%);
  29.           z-index: 10;
  30.           display: flex;
  31.           align-items: center;
  32.           justify-content: center;
  33.           transform-origin: top left;
  34.           container-type: inline-size;
  35.           color: white;
  36.           clip-path: polygon(0 60%, 60% 0, 100% 0, 0 100%);
  37.           aspect-ratio: 1 / 1;
  38.         }
  39.             
  40.         .new-text {
  41.           position: absolute;
  42.           color: #ffffff;
  43.           font-weight: bold;
  44.           font-size: 20cqw;
  45.           text-align: center;
  46.           line-height: 3em;
  47.           transform: rotate(-45.5deg) translate(0%,-25%);
  48.         }
  49.     
  50.     .list-btn {
  51.         width:100%;
  52.     }
  53.     @media screen and (max-width: 820px) {
  54.     .list-btn {
  55.         width:50%;
  56.     }
  57.     }
  58.     .ec-modal {
  59.       display: none;
  60.       position: fixed;
  61.       top: 0;
  62.       left: 0;
  63.       z-index: 9999;
  64.       width: 100%;
  65.       height: 100%;
  66.     }
  67.     .ec-modal.small {
  68.       width: 30%;
  69.     }
  70.     .ec-modal.full {
  71.       width: 100%;
  72.       height: 100%;
  73.     }
  74.     .ec-modal .ec-modal-overlay {
  75.       display: flex;
  76.       justify-content: center;
  77.       align-items: center;
  78.       background-color: rgba(0, 0, 0, 0.3);
  79.       width: 100%;
  80.       height: 100%;
  81.     }
  82.     .ec-modal .ec-modal-wrap {
  83.       position: relative;
  84.       border-radius: 10px;
  85.       border: 1px solid #333;
  86.       background-color: #fff;
  87.       width: 40%;
  88.       margin: 20px;
  89.       padding: 40px 5px;
  90.       color: #555555;
  91.       text-decoration: none;
  92.     }
  93.     .ec-modal .ec-modal-close {
  94.       cursor: pointer;
  95.       position: absolute;
  96.       right: 20px;
  97.       top: 10px;
  98.       font-size: 20px;
  99.       height: 30px;
  100.       width: 20px;
  101.     }
  102.     .ec-modal .ec-modal-close:hover {
  103.       color: #4b5361;
  104.     }
  105.     .ec-modal .ec-modal-box {
  106.       text-align: center;
  107.       font-weight: 600;
  108.     }
  109.     .ec-modal .ec-role {
  110.       margin-top: 20px;
  111.     }
  112.     #ec-modal-header {
  113.         text-align: center;
  114.     }
  115.     .ec-role {
  116.         display: flex;
  117.         justify-content: space-around;
  118.     }
  119.     .ec-inlineBtn--cancel {
  120.         color: #09860d;
  121.         border: solid 1px #09860d;
  122.         border-radius: 50px;
  123.         padding: 10px;
  124.     }
  125.     .ec-inlineBtn--cancel:hover {
  126.         color: #ffffff;
  127.         background-color:#09860d;
  128.     }
  129.     .ec-inlineBtn--action {
  130.         color: #e8353e;
  131.         border: solid 1px #e8353e;
  132.         border-radius: 50px;
  133.         padding: 10px;
  134.     }
  135.     .ec-inlineBtn--action:hover {
  136.         color: #ffffff;
  137.         background-color:#e8353e ;
  138.     }
  139.     
  140.     .img-list img{
  141.         height: auto;
  142.         object-fit: cover;
  143.     }
  144.     
  145.     .img-list,.img-main {
  146.       opacity: 0;
  147.     }
  148. .img-list.slick-initialized,.img-main.slick-initialized{
  149.   opacity: 1;
  150. }
  151. .img-list .slick-list {
  152.   margin: 0 -5px;
  153. }
  154. .img-list .slick-slide {
  155.   margin: 0 5px;
  156. } 
  157.     
  158.     </style>
  159. {% endblock %}
  161. {% set body_class = 'product_page' %}
  163. {% block javascript %}
  164.     <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  165.     <script>
  166.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  168.         // 規格2に選択肢を割り当てる。
  169.         function fnSetClassCategories(form, classcat_id2_selected) {
  170.             var $form = $(form);
  171.             var product_id = $form.find('input[name=product_id]').val();
  172.             var $sele1 = $form.find('select[name=classcategory_id1]');
  173.             var $sele2 = $form.find('select[name=classcategory_id2]');
  174.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  175.         }
  177.         {% if form.classcategory_id2 is defined %}
  178.         fnSetClassCategories(
  179.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  180.         );
  181.         {% elseif form.classcategory_id1 is defined %}
  182.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  183.         {% endif %}
  184.     </script>
  185.     <script>
  186.     //画像をクリックするたびにslickが初期化されることへの対応
  187.         function initSlick() {
  188.             if ($(".img-main").hasClass('slick-initialized')) {
  189.                 $(".img-main").slick('unslick');
  190.             }
  191.             $(".img-main").slick({
  192.                 slidesToShow: 1,
  193.                 slidesToScroll: 1,
  194.                 arrows: false,
  195.                 fade: true,
  196.                 asNavFor: ".img-list"
  197.             });
  198.         
  199.             if ($(".img-list").hasClass('slick-initialized')) {
  200.                 $(".img-list").slick('unslick');
  201.             }
  202.             $(".img-list").slick({
  203.                 slidesToShow: 3,
  204.                 slidesToScroll: 1,
  205.                 asNavFor: ".img-main",
  206.                 focusOnSelect: true
  207.             });
  208.         }
  209.         
  210.         $(window).on('load', function() {
  211.             initSlick();
  212.         });
  214.     </script>
  215.     <script>
  216.     //もっと読むボタン
  217.     document.querySelector(".more").addEventListener("click",function(){
  218.         document.querySelector(".content-text").classList.add("show");
  219.         document.querySelector(".more").classList.add("hide");
  220.     });
  221.     
  222.     
  223.     </script>
  224.     <script>
  225.         $(function() {
  226.             $('.add-cart').on('click', function(event) {
  227.                 {% if form.classcategory_id1 is defined %}
  228.                 // 規格1フォームの必須チェック
  229.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  230.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  231.                     return true;
  232.                 } else {
  233.                     $('#classcategory_id1')[0].setCustomValidity('');
  234.                 }
  235.                 {% endif %}
  237.                 {% if form.classcategory_id2 is defined %}
  238.                 // 規格2フォームの必須チェック
  239.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  240.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  241.                     return true;
  242.                 } else {
  243.                     $('#classcategory_id2')[0].setCustomValidity('');
  244.                 }
  245.                 {% endif %}
  247.                 // 個数フォームのチェック
  248.                 if ($('#quantity').val() < 1) {
  249.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  250.                     return true;
  251.                 } else {
  252.                     $('#quantity')[0].setCustomValidity('');
  253.                 }
  255.                 event.preventDefault();
  256.                 $form = $('#form1');
  257.                 $.ajax({
  258.                     url: $form.attr('action'),
  259.                     type: $form.attr('method'),
  260.                     data: $form.serialize(),
  261.                     dataType: 'json',
  262.                     beforeSend: function(xhr, settings) {
  263.                         // Buttonを無効にする
  264.                         $('.add-cart').prop('disabled', true);
  265.                     }
  266.                 }).done(function(data) {
  267.                     // レスポンス内のメッセージをalertで表示
  268.                     $.each(data.messages, function() {
  269.                         $('#ec-modal-header').html(this);
  270.                     });
  272.                     $('.ec-modal').show()
  274.                     // カートブロックを更新する
  275.                     $.ajax({
  276.                         url: "{{ url('block_cart') }}",
  277.                         type: 'GET',
  278.                         dataType: 'html'
  279.                     }).done(function(html) {
  280.                         $('.ec-headerRole__cart').html(html);
  281.                     });
  282.                 }).fail(function(data) {
  283.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  284.                 }).always(function(data) {
  285.                     // Buttonを有効にする
  286.                     $('.add-cart').prop('disabled', false);
  287.                 });
  288.             });
  289.         });
  291.         $('.ec-modal-wrap').on('click', function(e) {
  292.             // モーダル内の処理は外側にバブリングさせない
  293.             e.stopPropagation();
  294.         });
  295.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  296.             $('.ec-modal').hide()
  297.         });
  298.     </script>
  299.     <script type="application/ld+json">
  300.     {
  301.         "@context": "https://schema.org/",
  302.         "@type": "Product",
  303.         "name": "{{ Product.name }}",
  304.         "image": [
  305.             {% for img in Product.ProductImage %}
  306.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  308.             {% else %}
  309.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  310.             {% endfor %}
  311.         ],
  312.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  313.         {% if Product.code_min %}
  314.         "sku": "{{ Product.code_min }}",
  315.         {% endif %}
  316.         "offers": {
  317.             "@type": "Offer",
  318.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  319.             "priceCurrency": "{{ eccube_config.currency }}",
  320.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  321.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  322.         }
  323.     }
  324.     </script>
  325.     <script>
  326.         document.addEventListener('DOMContentLoaded', function() {
  327.             function adjustItems(selector,amount) {
  328.                 const items = document.querySelectorAll(selector);
  329.                 items.forEach((item, index) => {
  330.                     if (window.innerWidth <= 768) {
  331.                         item.style.display = index < amount ? 'block' : 'none';
  332.                     } else {
  333.                         item.style.display = 'block';
  334.                     }
  335.                 });
  336.             }
  337.         
  338.             adjustItems(".relation .card-2",3);
  339.             adjustItems(".recommended .card-2",3);
  340.             window.addEventListener('resize', adjustItems);
  341.         });
  342.     </script>
  343. {% endblock %}
  345. {% block main %}
  346.         <!-- 商品詳細 -->
  347.         <section class="detail">
  349.             <div class="content-area">
  351.                 <!-- SP用タイトル -->
  352.                 <div class="content-status sp-on">
  353.                     <h2>{{ Product.name }}</h2>
  354.                         <p><span class="status-author-name">{{ Product.author }}</span></p>
  355.                         <p><span class="status-price">{{ Product.ProductClasses|first.price02IncTax|price}}</span>(税込)</p>
  356.                         <div class="status-detail">
  357.                             <p class="sp-space">発売日:<span class="status-release">{{ Product.release_date }}</span></p>
  358.                             <p>版型:<span class="status-size">{{ Product.plate_type }}</span></p>
  359.                         </div>
  360.                         <p>ページ数:<span class="status-pages">{{ Product.page_amount }}ページ</span></p>
  361.                 </div>
  363.                 <div class="content-image">
  364.                     <div class="img-main">
  365.                         {% for ProductImage in Product.ProductImage %}
  366.                             <div class="slideThumb" data-index="{{ loop.index0 }}">
  367.                                 <img src="{{ asset(ProductImage, 'save_image') }}" alt=""loading="lazy">
  368.                             </div>
  369.                         {% endfor %}
  370.                     </div>
  371.                     {% if Product.ProductImage|length > 1 %}
  372.                     <div class="img-list">
  373.                         {% for ProductImage in Product.ProductImage %}
  374.                             <div class="slideThumb" data-index="{{ loop.index0 }}">
  375.                                 <img src="{{ asset(ProductImage, 'save_image') }}" alt=""loading="lazy">
  376.                             </div>
  377.                         {% endfor %}
  378.                     </div>
  379.                     {% endif %}
  380.                     {% if Product.meclib_url %}
  381.                     <a href="{{ Product.meclib_url }}" class="list-link" target="_blank">
  382.                         <span class="btn-l"><img src="{{ asset('assets/img/btn_circle_read-sample.svg', 'user_data') }}" alt="book-icon"></span>
  383.                         <span class="list-btn">試し読みをする</span>
  384.                     </a>
  385.                     <p>※外部サイトへ</p>
  386.                     {% endif %}
  387.                 </div>
  388.                 
  389.                 <div class="content-data">
  390.                     <!-- PC用タイトル -->
  391.                     <div class="content-status pc">
  392.                         <h2>{{ Product.name }}</h2>
  393.                         <p><span class="status-author-name">{{ Product.author }}</span></p>
  394.                             <p><span class="status-price">{{ Product.ProductClasses|first.price02IncTax|price }}</span>(税込)</p>
  395.                         <div class="status-detail">
  396.                             <p>発売日:<span class="status-release">{{ Product.release_date }}</span></p>
  397.                             <p>版型:<span class="status-size">{{Product.plate_type}}</span></p>
  398.                             <p>ページ数:<span class="status-pages">{{Product.page_amount}}ページ</span></p>
  399.                         </div>
  400.                     </div>
  401.                     <div class="content-text">
  402.                         <p>{{Product.description_detail|nl2br|raw}}</p>
  403.                     </div>
  404.                     <button class="list-link more sp" type="button">
  405.                         <span class="btn-l"><img src="{{ asset('assets/img/btn_ic_arrow_btm.svg ', 'user_data') }}" alt="book-icon"></span>
  406.                         <span class="list-btn">もっと見る</span>
  407.                     </button>
  408.                 </div>
  409.             </div>
  410.             <!-- 購入エリア -->
  411.             <div class="buy-area">
  412.                 <p class="price-line"><span class="price">{{Product.ProductClasses|first.price02IncTax|price}}</span>(税込)</p>
  413.                 <div class="ec-productRole__tags"></div>
  414.                 <div class="postage">
  415.                     <p>合計3500円以上で送料無料</p>
  416.                 </div>
  417.                 <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  418.                         {% if Product.stock_find %}
  419.                             <div class="ec-productRole__actions">
  420.                                 {% if form.classcategory_id1 is defined %}
  421.                                     <div class="ec-select">
  422.                                         {{ form_row(form.classcategory_id1) }}
  423.                                         {{ form_errors(form.classcategory_id1) }}
  424.                                     </div>
  425.                                     {% if form.classcategory_id2 is defined %}
  426.                                         <div class="ec-select">
  427.                                             {{ form_row(form.classcategory_id2) }}
  428.                                             {{ form_errors(form.classcategory_id2) }}
  429.                                         </div>
  430.                                     {% endif %}
  431.                                 {% endif %}
  432.                                 <div class="quantities">
  433.                                     <p>数量:</p> 
  434.                                     {{ form_widget(form.quantity) }}
  435.                                     {{ form_errors(form.quantity) }}
  436.                                 </div>
  437.                             </div>
  438.                             <div class="ec-productRole__btn">
  439.                                 <button type="submit" class="buy-btn add-cart">
  440.                                     <div class="cart-in"><img src="{{ asset('assets/img/btn_ic_cart.svg', 'user_data') }}" alt="カート">
  441.                                         カートに入れる
  442.                                     </div>
  443.                                 </button>
  444.                             </div>
  445.                         {% else %}
  446.                             <div class="ec-productRole__btn">
  447.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  448.                                     {{ 'ただいま品切れ中です。'|trans }}
  449.                                 </button>
  450.                             </div>
  451.                         {% endif %}
  452.                     {{ form_rest(form) }}
  453.                 </form>
  454.                 
  455.                 {% if BaseInfo.option_favorite_product and is_granted('ROLE_USER')%}
  456.                     {% if is_favorite == false %}
  457.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  458.                             <div class="ec-productRole__btn">
  459.                                 <button type="submit" class="favorite-btn">
  460.                                         <div class="cart-in">
  461.                                             <img src="{{ asset('/html/user_data/assets/icon/btn_ster.svg', 'user_data') }}" alt="お気に入り">
  462.                                             <span class="ec-closeBtn--circle">{{ 'お気に入りに追加'|trans }}</span>
  463.                                         </div>
  464.                                 </button>
  465.                             </div>
  466.                         </form>
  467.                     {% else %}
  468.                     <a href="{{ url('mypage_favorite_delete', { id : Product.id }) }}" {{ csrf_token_for_anchor() }}  data-method="delete">
  469.                         <div class="ec-productRole__btn">
  470.                             <button type="button" class="favorite-btn-after">
  471.                                     <div class="cart-in">
  472.                                         <img src="{{ asset('/html/user_data/assets/icon/btn_ster2.svg', 'user_data') }}" alt="お気に入り">
  473.                                         <span class="ec-closeBtn--circle"></span>{{ 'お気に入りから削除'|trans }}</span>
  474.                                     </div>
  475.                             </button>
  476.                         </div>
  477.                     </a>
  478.                     {% endif %}
  479.                 {% endif %}
  480.                 {% if Product.amazon_url %}
  481.                     <div class="amazon">
  482.                         <p>※外部サイトへ</p>
  483.                         <a href="{{Product.amazon_url}}" target="_blank"><img src="{{ asset('/html/user_data/assets/img/amazon.png', 'user_data') }}" alt="アマゾン購入"></a>
  484.                     </div>
  485.                 {% endif %}
  486.             </div>
  487.         </section>
  488.         
  489.         <div class="ec-modal">
  490.                     <div class="ec-modal-overlay">
  491.                         <div class="ec-modal-wrap">
  492.                             <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  493.                             <div id="ec-modal-header" class="text-center">{{ 'カートに追加しました。'|trans }}</div>
  494.                             <div class="ec-modal-box">
  495.                                 <div class="ec-role">
  496.                                     <span class="ec-inlineBtn--cancel">{{ 'お買い物を続ける'|trans }}</span>
  497.                                     <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'カートへ進む'|trans }}</a>
  498.                                 </div>
  499.                             </div>
  500.                         </div>
  501.                     </div>
  502.                 </div>
  505.         {# 関連コンテンツ #}
  506.         <section class="special-2">
  507.             <h2><img src="/html/user_data/assets/img/title_ic_newbook.svg" alt="関連icon"> この商品に関連する商品</h2>
  509.             <div class="pipe-line">
  510.                 <div class="pipe">
  511.                     <div class="line"></div>
  512.                 </div>
  513.                 <div class="green"></div>
  514.             </div>
  516.             <div class="content-2 relation">
  517.                 {# Step 1: 現在の商品が持つカテゴリIDを先に抽出 #}
  518.                 {% set CurrentCategoryIds = [] %}
  519.                 {% for ProductCategory in Product.ProductCategories %}
  520.                     {% set CurrentCategoryIds = CurrentCategoryIds | merge([ProductCategory.Category.id]) %}
  521.                 {% endfor %}
  522.                 
  523.                 {# Step 2: 同じカテゴリを持つ他の商品を抽出 #}
  524.                 {% set CategoryProducts = [] %}
  525.                 {% for otherProduct in allProducts %}
  526.                     {% if otherProduct.id != Product.id %}
  527.                         {% set match = false %}
  528.                         {% for otherCategory in otherProduct.ProductCategories %}
  529.                             {% if otherCategory.Category.id in CurrentCategoryIds %}
  530.                                 {% set match = true %}
  531.                             {% endif %}
  532.                         {% endfor %}
  533.                 
  534.                         {% if match %}
  535.                             {% set CategoryProducts = CategoryProducts | merge([otherProduct]) %}
  536.                         {% endif %}
  537.                     {% endif %}
  538.                 {% endfor %}
  539.                 {#その上でランダムシャッフルして7件だけ抜く #}
  540.                 {% set randomProducts = [] %}
  541.                 {% set workingProducts = CategoryProducts %}
  542.                     {% for i in 0..6 %}
  543.                         {% if workingProducts|length > 0 %}
  544.                             {% set randomIndex = random(workingProducts|keys) %}
  545.                             {% set randomProduct = workingProducts[randomIndex] %}
  546.                             {% set randomProducts = randomProducts|merge([randomProduct]) %}
  547.                              {#選んだやつをworkingProductsから除外する #}
  548.                             {% set workingProducts = workingProducts|filter(p => p != randomProduct) %}
  549.                         {% endif %}
  550.                     {% endfor %}
  551.                     {% for RecommendProduct in randomProducts %}
  552.                           <div class="card-2">
  553.                             {% for ProductTags in RecommendProduct.ProductTag %}
  554.                                 {% if ProductTags.Tag.id == 1 %}
  555.                                     <div class="new">
  556.                                         <div class="new-text">New</div>
  557.                                     </div>
  558.                                 {% endif %}
  559.                             {% endfor %}
  560.                             <a href="{{ url('product_detail', {'id': RecommendProduct.id}) }}">
  561.                                 <img src="{{asset(RecommendProduct.main_list_image|no_image_product, 'save_image') }}" class="" alt="コンテンツ1"/>
  562.                             </a>
  563.                             <h3>{{RecommendProduct.name}}</h3>
  564.                             <p>{{RecommendProduct.author}}</p>
  565.                             {% set firstClass = RecommendProduct.ProductClasses|first %}
  566.                             <p>{{ firstClass.price02_inc_tax | price}}税込</p>
  567.                         </div>
  568.                     {% endfor %}
  569.             </div>
  570.         
  571.         </section>
  574.         <!-- 商品詳細 -->
  575.         <section class="detail-data">
  576.             <h2><img src="{{ asset('assets/img/title_ic_infomation.svg', 'user_data') }}" alt=""> 登録情報</h2>
  577.             
  578.             <div class="pipe-line">
  579.                 <div class="pipe">
  580.                     <div class="line"></div>
  581.                 </div>
  582.                 <div class="white"></div>
  583.             </div>
  584.             
  585.             <div class="data-list">
  586.                 <table>
  587.                     <tr>
  588.                         <td>商品名 : <span>{{Product.name}}</span></td>
  589.                     </tr>
  590.                     <tr>
  591.                         <td>著者名 : <span>{{Product.author}}</span></td>
  592.                     </tr>
  593.                     <tr>
  594.                         <td>発売日 : <span>{{Product.release_date}}</span></td>
  595.                     </tr>
  596.                     <tr>
  597.                         <td>定価 : <span>{{Product.ProductClasses|first.price02IncTax|price}}(税込)</span></td>
  598.                     </tr>
  599.                     <tr>
  600.                         <td>ページ数 : <span>{{Product.page_amount}}ページ</span></td>
  601.                     </tr>
  602.                     <tr>
  603.                         <td>ISBN-13 : <span>{{Product.ISBN_13}}</span></td>
  604.                     </tr>
  605.                     <tr>
  606.                         <td>版型 : <span>{{Product.plate_type}}</span></td>
  607.                     </tr>
  608.                     <tr>
  609.                         <td>寸法 : <span>{{Product.book_size}}</span></td>
  610.                     </tr>
  611.                 </table>
  612.             </div>
  615.             
  616.         </section>
  621.         <!-- 閲覧履歴 -->
  622.         {% if app.user %}
  623.         <section class="special-2 recommended">
  624.             <h2><img src="/html/user_data/assets/img/title_ic_recommend.svg" alt="閲覧icon"> 閲覧履歴に基づくおすすめ</h2>
  626.             <div class="pipe-line">
  627.                 <div class="pipe">
  628.                     <div class="line"></div>
  629.                 </div>
  630.                 <div class="green"></div>
  631.             </div>
  633.             <div class="content-2">
  634.                 {# ランダムシャッフルして7件だけ抜く #}
  635.                 {% set randomProducts = [] %}
  636.                 {% set workingProducts = recommendProducts %}
  637.                     {% for i in 0..6 %}
  638.                         {#{% set randomProducts = randomProducts|merge([random(taggedProducts)]) %}#}
  639.                         {% if workingProducts|length > 0 %}
  640.                             {% set randomIndex = random(workingProducts|keys) %}
  641.                             {% set randomProduct = workingProducts[randomIndex] %}
  642.                             {% set randomProducts = randomProducts|merge([randomProduct]) %}
  643.                             {# 選んだやつをworkingProductsから除外する #}
  644.                             {% set workingProducts = workingProducts|filter(p => p != randomProduct) %}
  645.                         {% endif %}
  646.                     {% endfor %}
  647.                 {% for recommendedProduct in randomProducts %}
  648.                     <div class="card-2">
  649.                             {% for ProductTags in recommendedProduct.ProductTag %}
  650.                                 {% if ProductTags.Tag.id == 1 %}
  651.                                     <div class="new">
  652.                                         <div class="new-text">New</div>
  653.                                     </div>
  654.                                 {% endif %}
  655.                             {% endfor %}
  656.                         <a href="{{ url('product_detail', {'id': recommendedProduct.id}) }}">
  657.                             <img src="{{asset(recommendedProduct.main_list_image|no_image_product, 'save_image') }}" class="" alt="コンテンツ1"/>
  658.                         </a>
  659.                         <h3>{{recommendedProduct.name}}</h3>
  660.                         <p><span>{{recommendedProduct.author}}</span></p>
  661.                         <p>￥<span>{{ recommendedProduct.getPrice02IncTaxMax|number_format(0, '.', ',') }}</span>(税込)</p>
  662.                     </div>
  663.                 {% endfor %}
  664.             </div>
  665.         </section>
  666.         {% endif %}
  667.     </section>
  669. {% endblock %}