app/template/user_data/books.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. {% set body_class = 'front_page' %}
  15. {% block stylesheet %}
  16.     <link rel="stylesheet" href="{{ asset('assets/css/main_style.css', 'user_data') }}">
  17.     <link rel="stylesheet" href="{{ asset('assets/css/main_module.css', 'user_data') }}">
  18.     <style>
  19.         .new {
  20.           position: absolute;
  21.           top: -1%;
  22.           left: -2%;
  23.           width: 40%;
  24.           height: 19%;
  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.           color: white;
  32.           clip-path: polygon(0 60%, 60% 0, 100% 0, 0 100%);
  33.         }
  34.             
  35.         .new-text {
  36.           position: absolute;
  37.           color: #ffffff;
  38.           font-weight: bold;
  39.           font-size: 1em;
  40.           text-align: center;
  41.           line-height: 3em;
  42.           transform: rotate(-45deg) translate(-10%,-30%);
  43.         }
  44.         
  45.     </style>
  46. {% endblock %}
  48. {% block main %}
  49.   <!-- ファーストビュー -->
  50. <section class="first-carousel">
  51.     <div class="carousel">
  52.         {# ダミー: 最後の画像（ループ用） #}
  53.         <a class="car-cont"><img src="{{ asset('assets/img/mv3.png', 'user_data') }}" alt="slide3" /></a>
  55.         {# 本来のスライド #}
  56.         <a class="car-cont"><img src="{{ asset('assets/img/mv1.png', 'user_data') }}" alt="slide1" /></a>
  57.         <a class="car-cont"><img src="{{ asset('assets/img/mv2.png', 'user_data') }}" alt="slide2" /></a>
  58.         <a class="car-cont"><img src="{{ asset('assets/img/mv3.png', 'user_data') }}" alt="slide3" /></a>
  59.         <a class="car-cont"><img src="{{ asset('assets/img/mv2.png', 'user_data') }}" alt="slide4" /></a>
  61.         {# ダミー: 最初の画像（ループ用） #}
  62.         <a class="car-cont"><img src="{{ asset('assets/img/mv1.png', 'user_data') }}" alt="slide1" /></a>
  63.     </div>
  65.     <div class="carousel-dots">
  66.         <span class="dot active"></span>
  67.         <span class="dot"></span>
  68.         <span class="dot"></span>
  69.         <span class="dot"></span>
  70.     </div>
  72.     <div class="carousel-btn prev-btn" style="display:none;">←</div>
  73.     <div class="carousel-btn next-btn" style="display:none;">→</div>
  74. </section>
  78. {% block javascript %}
  79. <script>
  80. window.addEventListener("load", function () {
  81.     const carousel = document.querySelector(".carousel");
  82.     const dots = document.querySelectorAll(".dot");
  83.     let slides = Array.from(document.querySelectorAll(".carousel a"));
  85.     const firstClone = slides[0].cloneNode(true);
  86.     const lastClone = slides[slides.length - 1].cloneNode(true);
  87.     carousel.appendChild(firstClone);
  88.     carousel.insertBefore(lastClone, slides[0]);
  89.     slides = Array.from(document.querySelectorAll(".carousel a"));
  91.     let currentIndex = 1;
  92.     let slideWidth = slides[0].offsetWidth + 40;
  93.     let isTransitioning = false;
  95.     function updateSlidePosition(withTransition = false) {
  96.         carousel.style.transition = withTransition ? "transform 2s ease-in-out" : "none";
  97.         carousel.style.transform = `translateX(${-slideWidth * currentIndex}px)`;
  98.     }
  100.     function updateDots() {
  101.         dots.forEach(dot => dot.classList.remove("active"));
  102.         const activeDotIndex = (currentIndex - 1 + dots.length) % dots.length;
  103.         dots[activeDotIndex].classList.add("active");
  104.     }
  106.     function updateActiveSlide() {
  107.         slides.forEach(slide => slide.classList.remove("active"));
  108.         slides[currentIndex]?.classList.add("active");
  109.     }
  111.     function goToSlide(index) {
  112.         if (isTransitioning) return; // ← 連打・タイミングずれ防止
  113.         isTransitioning = true;
  114.         currentIndex = index;
  115.         updateSlidePosition(true);
  116.         updateDots();
  117.         updateActiveSlide();
  118.     }
  120.     // 無限ループ処理（修正済）
  121.     carousel.addEventListener("transitionend", () => {
  122.         if (currentIndex === 0) {
  123.             currentIndex = slides.length - 2;
  124.             carousel.style.transition = "none";
  125.             carousel.style.transform = `translateX(${-slideWidth * currentIndex}px)`;
  126.             updateActiveSlide();
  127.         } else if (currentIndex === slides.length - 1) {
  128.             currentIndex = 1;
  129.             carousel.style.transition = "none";
  130.             carousel.style.transform = `translateX(${-slideWidth * currentIndex}px)`;
  131.             updateActiveSlide();
  132.         }
  133.         isTransitioning = false; // ← 切り替え終わったら解放
  134.     });
  136.     document.querySelector(".prev-btn")?.addEventListener("click", () => goToSlide(currentIndex - 1));
  137.     document.querySelector(".next-btn")?.addEventListener("click", () => goToSlide(currentIndex + 1));
  138.     dots.forEach((dot, idx) => {
  139.         dot.addEventListener("click", () => goToSlide(idx + 1));
  140.     });
  142.     window.addEventListener("resize", () => {
  143.         slideWidth = slides[0].offsetWidth + 40;
  144.         updateSlidePosition();
  145.     });
  147.     updateSlidePosition();
  148.     updateActiveSlide();
  149.     updateDots();
  151.     // 自動スライド（isTransitioning考慮）
  152.     let autoSlideInterval = setInterval(() => {
  153.         if (!isTransitioning) {
  154.             goToSlide(currentIndex + 1);
  155.         }
  156.     }, 4500);
  158.     document.addEventListener("visibilitychange", () => {
  159.         if (document.hidden) {
  160.             clearInterval(autoSlideInterval);
  161.         } else {
  162.             autoSlideInterval = setInterval(() => {
  163.                 if (!isTransitioning) {
  164.                     goToSlide(currentIndex + 1);
  165.                 }
  166.             }, 4500);
  167.         }
  168.     });
  169. });
  170. </script>
  173. {% endblock %}
  177.     
  178.         <!-- メインコンテンツ -->
  179.     <main class="main-content">
  180.         <!-- 上位コンテンツ -->
  181.         <section class="special-1">
  182.             <div class="bg-blue-1"></div>
  183.             <!-- 新刊 -->
  184.             <h2 class="newbook-title"><img src="{{ asset('assets/img/title_ic_newbook.svg', 'user_data') }}" alt="new-books" class="newbook-icon"> 新刊案内</h2>
  185.             <div class="pipe-line">
  186.                 <div class="pipe">
  187.                     <div class="line"></div>
  188.                 </div>
  189.                 <div class="white"></div>
  190.             </div>
  191.             {# まず、Tag.id==1の商品だけ別に集める #}
  192.             {% set newTaggedProducts = [] %}
  193.             {% for Product in Products %}
  194.                 {% for ProductTag in Product.ProductTag %}
  195.                     {% if ProductTag.Tag.id == 1 %}
  196.                         {% set newTaggedProducts = newTaggedProducts|merge([Product]) %}
  197.                     {% endif %}
  198.                 {% endfor %}
  199.             {% endfor %}
  200.             {# その上でランダムシャッフルして5件だけ抜く #}
  201.             {% set newTaggedRandomProducts = [] %}
  202.             {% set newTaggedworkingProducts = newTaggedProducts %}
  203.                 {% for i in 0..4 %}
  204.                     {#{% set randomProducts = randomProducts|merge([random(taggedProducts)]) %}#}
  205.                     {% if newTaggedworkingProducts|length > 0 %}
  206.                         {% set newTaggedRandomIndex = random(newTaggedworkingProducts|keys) %}
  207.                         {% set newTaggedrandomProduct = newTaggedworkingProducts[newTaggedRandomIndex] %}
  208.                         {% set newTaggedRandomProducts = newTaggedRandomProducts|merge([newTaggedrandomProduct]) %}
  209.                         {# 選んだやつをworkingProductsから除外する #}
  210.                         {% set newTaggedworkingProducts = newTaggedworkingProducts|filter(p => p != newTaggedrandomProduct) %}
  211.                     {% endif %}
  212.                 {% endfor %}
  213.             <div class="content-1">
  214.                 {% for Product in newTaggedRandomProducts %}
  215.                     <div class="card-1">
  216.                         {% for ProductTags in Product.ProductTag %}
  217.                             {% if ProductTags.Tag.id == 1 %}
  218.                                 <div class="new">
  219.                                     <div class="new-text">New</div>
  220.                                 </div>
  221.                             {% endif %}
  222.                         {% endfor %}
  223.                         <a href="{{ url('product_detail', {'id': Product.id}) }}">
  224.                             <img src="{{asset(Product.main_list_image|no_image_product, 'save_image') }}" class="" alt="コンテンツ1"/>
  225.                         </a>
  226.                         <h3>{{Product.name}}</h3>
  227.                         <p>著者:<span>{{Product.author}}</span></p>
  228.                         <p>￥<span>{{ Product.getPrice02IncTaxMax|number_format(0, '.', ',')  }}</span>税込</p>
  229.                     </div>
  230.                 {% endfor %}
  231.             </div>
  233.             <!-- オススメ書籍 -->
  234.             <h2 class="newbook-title"><img src="{{ asset('assets/img/title_ic_recommend.svg', 'user_data') }}" alt="new-books" class="newbook-icon"> オススメ書籍</h2>
  235.             <div class="pipe-line">
  236.                 <div class="pipe">
  237.                     <div class="line"></div>
  238.                 </div>
  239.                 <div class="blue"></div>
  240.             </div>
  241.             {# まず、Tag.id==1の商品だけ別に集める #}
  242.             {% set taggedProducts = [] %}
  243.             {% for Product in Products %}
  244.                 {% for ProductTag in Product.ProductTag %}
  245.                     {% if ProductTag.Tag.id == 2 %}
  246.                         {% set taggedProducts = taggedProducts|merge([Product]) %}
  247.                     {% endif %}
  248.                 {% endfor %}
  249.             {% endfor %}
  250.             {# その上でランダムシャッフルして5件だけ抜く #}
  251.             {% set randomProducts = [] %}
  252.             {% set workingProducts = taggedProducts %}
  253.                 {% for i in 0..4 %}
  254.                     {#{% set randomProducts = randomProducts|merge([random(taggedProducts)]) %}#}
  255.                     {% if workingProducts|length > 0 %}
  256.                         {% set randomIndex = random(workingProducts|keys) %}
  257.                         {% set randomProduct = workingProducts[randomIndex] %}
  258.                         {% set randomProducts = randomProducts|merge([randomProduct]) %}
  259.                         {# 選んだやつをworkingProductsから除外する #}
  260.                         {% set workingProducts = workingProducts|filter(p => p != randomProduct) %}
  261.                     {% endif %}
  262.                 {% endfor %}
  263.             <div class="content-1">
  264.                 {% for Product in randomProducts %}
  265.                     <div class="card-1">
  266.                         {% for ProductTags in Product.ProductTag %}
  267.                             {% if ProductTags.Tag.id == 1 %}
  268.                                 <div class="new">
  269.                                     <div class="new-text">New</div>
  270.                                 </div>
  271.                             {% endif %}
  272.                         {% endfor %}
  273.                         <a href="{{ url('product_detail', {'id': Product.id}) }}">
  274.                             <img src="{{asset(Product.main_list_image|no_image_product, 'save_image') }}" class="" alt="コンテンツ1"/>
  275.                         </a>
  276.                         <h3>{{Product.name}}</h3>
  277.                         <p>著者:<span>{{Product.author}}</span></p>
  278.                         <p>￥<span>{{ Product.getPrice02IncTaxMax|number_format(0, '.', ',') }}</span>税込</p>
  279.                     </div>
  280.                 {% endfor %}
  281.             </div>
  282.         </section>
  284.         <!-- 中盤コンテンツ -->
  285.         <section class="special-2">
  287.             <!-- 売れ筋ランキング -->
  288.             <h2 class="newbook-title"><img src="{{ asset('assets/img/title_ic_ranking.svg', 'user_data') }}" alt="ranking" class="newbook-icon"> 売れ筋ランキング</h2>
  289.             <div class="pipe-line">
  290.                 <div class="pipe">
  291.                     <div class="line"></div>
  292.                 </div>
  293.                 <div class="green"></div>
  294.             </div>
  295.             <div class="content-2">
  296.                 {% set rankTaggedProducts = [] %}
  297.                 {% for Product in Products %}
  298.                     {% for ProductTag in Product.ProductTag %}
  299.                         {% if ProductTag.Tag.id >=3 and ProductTag.Tag.id<=9 %}
  300.                             {% set rankTaggedProducts = rankTaggedProducts|merge([{'product': Product, 'tag_id': ProductTag.Tag.id}]) %}
  301.                         {% endif %}
  302.                     {% endfor %}
  303.                 {% endfor %}
  304.                 {% set rankTaggedProducts = rankTaggedProducts|sort((a, b) => a.tag_id <=> b.tag_id) %}
  305.                 {% for Product in rankTaggedProducts %}
  306.                         <div class="card-2">
  307.                             <div class="lank">
  308.                                 <div class="lank-num">{{Product.tag_id - 2}}</div>
  309.                             </div>
  310.                             {% for ProductTags in Product.product.ProductTag %}
  311.                                     {% if ProductTags.Tag.id == 1 %}
  312.                                         <div class="new">
  313.                                             <div class="new-text">New</div>
  314.                                         </div>
  315.                                     {% endif %}
  316.                             {% endfor %}
  317.                             <a href="{{ url('product_detail', {'id': Product.product.id}) }}">
  318.                                 <img src="{{asset(Product.product.main_list_image|no_image_product, 'save_image') }}" class="" alt="コンテンツ1"/>
  319.                             </a>
  320.                             <h3>{{Product.product.name}}</h3>
  321.                             <p>著者:<span>{{Product.product.author}}</span></p>
  322.                             <p>￥<span>{{ Product.product.getPrice02IncTaxMax|number_format(0, '.', ',') }}</span>税込</p>
  323.                         </div>
  324.                 {% endfor %}
  327.             </div>
  329.             <!-- 最近チェック -->
  330.             {% if RecentlyViewedProducts|length > 0 %}
  331.             <h2 class="newbook-title"><img src="{{ asset('assets/img/title_ic_check.svg', 'user_data')}}" alt="check" class="newbook-icon"> 最近チェックした商品</h2>
  332.             <div class="pipe-line">
  333.                 <div class="pipe">
  334.                     <div class="line"></div>
  335.                 </div>
  336.                 <div class="green"></div>
  337.             </div>
  338.             {{ render(path('block_recently_viewed_products')) }}
  339.             {% endif %}
  340.             
  341.             
  342.             
  343.             {#あなたへのおすすめ#}
  344.             {% if is_granted('ROLE_USER') %}
  345.             <h2><img src="{{asset('assets/img/title_ic_check.svg', 'user_data') }}" alt="あなたへのオススメ"> あなたへのオススメ</2>
  346.             <div class="pipe-line">
  347.                 <div class="pipe">
  348.                     <div class="line"></div>
  349.                 </div>
  350.                 <div class="green"></div>
  351.             </div>
  352.             <div class="content-2">
  353.                 {# ランダムシャッフルして7件だけ抜く #}
  354.                 {% set randomProducts = [] %}
  355.                 {% set workingProducts = recommendProducts %}
  356.                     {% for i in 0..6 %}
  357.                         {#{% set randomProducts = randomProducts|merge([random(taggedProducts)]) %}#}
  358.                         {% if workingProducts|length > 0 %}
  359.                             {% set randomIndex = random(workingProducts|keys) %}
  360.                             {% set randomProduct = workingProducts[randomIndex] %}
  361.                             {% set randomProducts = randomProducts|merge([randomProduct]) %}
  362.                             {# 選んだやつをworkingProductsから除外する #}
  363.                             {% set workingProducts = workingProducts|filter(p => p != randomProduct) %}
  364.                         {% endif %}
  365.                     {% endfor %}
  366.                     {% for Product in randomProducts %}
  367.                             <div class="card-2 osusume">
  368.                                 {% for ProductTags in Product.ProductTag %}
  369.                                     {% if ProductTags.Tag.id == 1 %}
  370.                                         <div class="new">
  371.                                             <div class="new-text">New</div>
  372.                                         </div>
  373.                                     {% endif %}
  374.                                 {% endfor %}
  375.                                 <a href="{{ url('product_detail', {'id': Product.id}) }}">
  376.                                     <img src="{{asset(Product.main_list_image|no_image_product, 'save_image') }}" class="" alt="コンテンツ1"/>
  377.                                 </a>
  378.                                 <h3>{{Product.name}}</h3>
  379.                                 <p>著者:<span>{{Product.author}}</span></p>
  380.                                 <p>￥<span>{{ Product.getPrice02IncTaxMax|number_format(0, '.', ',') }}</span>税込</p>
  381.                             </div>
  382.                     {% endfor %}
  383.                 </div>
  384.             {% endif %}
  385.         </section>
  386.         <style>
  387.             .ec-historyRole {
  388.                 padding: 0;
  389.             }
  390.             .ec-historyRole__heading {
  391.                 display: none;
  392.             }
  393.             </style>
  397.         <!-- 下位コンテンツ -->
  398.         <section class="special-3">
  400.             <h2 class="newbook-title"><img src="{{ asset('assets/img/title_ic_category.svg', 'user_data') }} " alt="" class="newbook-icon"> 書籍カテゴリー</h2>
  401.             <div class="pipe-line">
  402.                 <div class="pipe">
  403.                     <div class="line"></div>
  404.                 </div>
  405.                 <div class="white"></div>
  406.             </div>
  407.             {# まず、Category.id==1の商品だけ別に集める #}
  408.             {% set CategoryProducts = [] %}
  409.             {% for Product in Products %}
  410.                 {% for ProductCategory in Product.ProductCategories %}
  411.                     {% if ProductCategory.Category.id == 1 %}
  412.                         {% set CategoryProducts = CategoryProducts|merge([Product]) %}
  413.                     {% endif %}
  414.                 {% endfor %}
  415.             {% endfor %}
  416.             {# その上でランダムシャッフルして5件だけ抜く #}
  417.             {% set randomProducts = [] %}
  418.             {% set workingProducts = CategoryProducts %}
  419.                 {% for i in 0..4 %}
  420.                     {% if workingProducts|length > 0 %}
  421.                         {% set randomIndex = random(workingProducts|keys) %}
  422.                         {% set randomProduct = workingProducts[randomIndex] %}
  423.                         {% set randomProducts = randomProducts|merge([randomProduct]) %}
  424.                         {# 選んだやつをworkingProductsから除外する #}
  425.                         {% set workingProducts = workingProducts|filter(p => p != randomProduct) %}
  426.                     {% endif %}
  427.                 {% endfor %}
  428.             <div class="content-3">
  429.                 <!-- 鉄道 -->
  430.                 <div class="sub-cont">
  431.                     <div class="con-title">
  432.                         <h3>鉄道</h3>
  433.                         <a href="{{ url('product_list') }}?category_id=1" class="list-link">
  434.                             <span class="list-btn">一覧はコチラ</span>
  435.                             <span class="btn-l">→</span>
  436.                         </a>
  437.                     </div>
  438.                     <div class="zone">
  439.                     {% for Product in randomProducts %}
  440.                         <div class="card-3">
  441.                             <a href="{{ url('product_detail', {'id': Product.id}) }}">
  442.                                 <img src="{{asset(Product.main_list_image|no_image_product, 'save_image') }}" class="" alt="コンテンツ1"/>
  443.                             </a>
  444.                             <h4>{{Product.name}}</h4>
  445.                         </div>
  446.                     {% endfor %}
  447.                     </div>
  448.                 </div>
  449.             {# まず、Category.id==2の商品だけ別に集める #}
  450.             {% set CategoryProducts = [] %}
  451.             {% for Product in Products %}
  452.                 {% for ProductCategory in Product.ProductCategories %}
  453.                     {% if ProductCategory.Category.id == 2 %}
  454.                         {% set CategoryProducts = CategoryProducts|merge([Product]) %}
  455.                     {% endif %}
  456.                 {% endfor %}
  457.             {% endfor %}
  458.             {# その上でランダムシャッフルして5件だけ抜く #}
  459.             {% set randomProducts = [] %}
  460.             {% set workingProducts = CategoryProducts %}
  461.                 {% for i in 0..4 %}
  462.                     {% if workingProducts|length > 0 %}
  463.                         {% set randomIndex = random(workingProducts|keys) %}
  464.                         {% set randomProduct = workingProducts[randomIndex] %}
  465.                         {% set randomProducts = randomProducts|merge([randomProduct]) %}
  466.                         {# 選んだやつをworkingProductsから除外する #}
  467.                         {% set workingProducts = workingProducts|filter(p => p != randomProduct) %}
  468.                     {% endif %}
  469.                 {% endfor %}
  470.                 <!-- バス   -->
  471.                 <div class="sub-cont">
  472.                     <div class="con-title">
  473.                         <h3>バス</h3>
  474.                         <a href="{{ url('product_list') }}?category_id=2" class="list-link">
  475.                             <span class="list-btn">一覧はコチラ</span>
  476.                             <span class="btn-l">→</span>
  477.                         </a>
  478.                     </div>
  479.                     <div class="zone">
  480.                     {% for Product in randomProducts %}
  481.                         <div class="card-3">
  482.                             <a href="{{ url('product_detail', {'id': Product.id}) }}">
  483.                                 <img src="{{asset(Product.main_list_image|no_image_product, 'save_image') }}" class="" alt="コンテンツ1"/>
  484.                             </a>
  485.                             <h4>{{Product.name}}</h4>
  486.                         </div>
  487.                     {% endfor %}
  488.                     </div>
  489.                 </div>
  492.                 <!-- 古地図・歴史散歩（地域） -->
  493.                 <div class="sub-cont">
  494.                     <div class="con-title">
  495.                         <h3>古地図・歴史散歩（地域）</h3>
  496.                         <a href="" class="list-link">
  497.                             <span class="list-btn">一覧はコチラ</span>
  498.                             <span class="btn-l">→</span>
  499.                         </a>
  500.                     </div>
  501.                     {# まず、Category.id==5の商品だけ別に集める #}
  502.                     {% set CategoryProducts = [] %}
  503.                     {% for Product in Products %}
  504.                         {% for ProductCategory in Product.ProductCategories %}
  505.                             {% if ProductCategory.Category.id == 5 %}
  506.                                 {% set CategoryProducts = CategoryProducts|merge([Product]) %}
  507.                             {% endif %}
  508.                         {% endfor %}
  509.                     {% endfor %}
  510.                     {# その上でランダムシャッフルして5件だけ抜く #}
  511.                     {% set randomProducts = [] %}
  512.                     {% set workingProducts = CategoryProducts %}
  513.                         {% for i in 0..4 %}
  514.                             {% if workingProducts|length > 0 %}
  515.                                 {% set randomIndex = random(workingProducts|keys) %}
  516.                                 {% set randomProduct = workingProducts[randomIndex] %}
  517.                                 {% set randomProducts = randomProducts|merge([randomProduct]) %}
  518.                                 {# 選んだやつをworkingProductsから除外する #}
  519.                                 {% set workingProducts = workingProducts|filter(p => p != randomProduct) %}
  520.                             {% endif %}
  521.                         {% endfor %}
  522.                     <div class="zone">
  523.                     {% for Product in randomProducts %}
  524.                         <div class="card-3">
  525.                             <a href="{{ url('product_detail', {'id': Product.id}) }}">
  526.                                 <img src="{{asset(Product.main_list_image|no_image_product, 'save_image') }}" class="" alt="コンテンツ1"/>
  527.                             </a>
  528.                             <h4>{{Product.name}}</h4>
  529.                         </div>
  530.                     {% endfor %}
  531.                     </div>
  532.                 </div>
  535.                 <!-- その他 -->
  536.                 <div class="sub-cont">
  537.                     <div class="con-title">
  538.                         <h3>その他</h3>
  539.                         <a href="" class="list-link">
  540.                             <span class="list-btn">一覧はコチラ</span>
  541.                             <span class="btn-l">→</span>
  542.                         </a>
  543.                     </div>
  544.                     {# まず、Category.id==7の商品だけ別に集める #}
  545.                     {% set CategoryProducts = [] %}
  546.                     {% for Product in Products %}
  547.                         {% for ProductCategory in Product.ProductCategories %}
  548.                             {% if ProductCategory.Category.id == 7 %}
  549.                                 {% set CategoryProducts = CategoryProducts|merge([Product]) %}
  550.                             {% endif %}
  551.                         {% endfor %}
  552.                     {% endfor %}
  553.                     {# その上でランダムシャッフルして5件だけ抜く #}
  554.                     {% set randomProducts = [] %}
  555.                     {% set workingProducts = CategoryProducts %}
  556.                         {% for i in 0..4 %}
  557.                             {% if workingProducts|length > 0 %}
  558.                                 {% set randomIndex = random(workingProducts|keys) %}
  559.                                 {% set randomProduct = workingProducts[randomIndex] %}
  560.                                 {% set randomProducts = randomProducts|merge([randomProduct]) %}
  561.                                 {# 選んだやつをworkingProductsから除外する #}
  562.                                 {% set workingProducts = workingProducts|filter(p => p != randomProduct) %}
  563.                             {% endif %}
  564.                         {% endfor %}
  565.                     <div class="zone">
  566.                     {% for Product in randomProducts %}
  567.                         <div class="card-3">
  568.                             <a href="{{ url('product_detail', {'id': Product.id}) }}">
  569.                                 <img src="{{asset(Product.main_list_image|no_image_product, 'save_image') }}" class="" alt="コンテンツ1"/>
  570.                             </a>
  571.                             <h4>{{Product.name}}</h4>
  572.                         </div>
  573.                     {% endfor %}
  574.                 </div>
  575.             </div>
  576.         </section>
  577.     </main>
  579. {% endblock %}