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