app/Plugin/NZCategoryLayoutManager42/EventSubscriber/TemplateEventSubscriber.php line 26

Open in your IDE?
  1. <?php
  3. namespace Plugin\NZCategoryLayoutManager42\EventSubscriber;
  5. use Eccube\Event\TemplateEvent;
  6. use Plugin\NZCategoryLayoutManager42\Repository\CategoryLayoutRepository;
  7. use Symfony\Component\EventDispatcher\EventSubscriberInterface;
  8. use Symfony\Component\HttpFoundation\RequestStack;
  10. class TemplateEventSubscriber implements EventSubscriberInterface
  11. {
  12.     private $categoryLayoutRepository;
  13.     private $requestStack;
  15.     public function __construct(CategoryLayoutRepository $categoryLayoutRepository, RequestStack $requestStack)
  16.     {
  17.         $this->categoryLayoutRepository = $categoryLayoutRepository;
  18.         $this->requestStack = $requestStack;
  19.     }
  21.     public static function getSubscribedEvents()
  22.     {
  23.         return ['Product/list.twig' => 'onProductList'];
  24.     }
  26.     public function onProductList(TemplateEvent $event)
  27.     {
  28.         $request = $this->requestStack->getCurrentRequest();
  29.         if (!$request) {
  30.             return;
  31.         }
  33.         $categoryId = $request->query->get('category_id');
  34.         if (!$categoryId) {
  35.             return;
  36.         }
  38.         try {
  39.             $layout = $this->categoryLayoutRepository->findActiveByParentCategoryId((int)$categoryId);
  40.             if (!$layout) {
  41.                 return;
  42.             }
  43.             
  44.             $items = $layout->getCategoryLayoutItems();
  45.             if (!$items || $items->count() === 0) {
  46.                 return;
  47.             }
  49.             // 子カテゴリ情報を構築
  50.             $gameCategories = [];
  51.             foreach ($items as $item) {
  52.                 $gameCategories[] = [
  53.                     'id' => (int)$item->getChildCategoryId(), 
  54.                     'name' => $item->getDisplayName(), 
  55.                     'icon' => $item->getIconPath() ?: ''
  56.                 ];
  57.             }
  59.             $gameCategoriesJson = json_encode($gameCategories, JSON_UNESCAPED_UNICODE);
  61.             // CSS
  62.             $event->addSnippet('<style>
  63. .game-category-parent-layout{width:100%;padding:20px 0}
  64. .game-section{margin-bottom:60px;padding-bottom:40px;border-bottom:2px solid #e0e0e0}
  65. .game-section:last-child{border-bottom:none}
  66. .game-section-title{font-size:1.8rem;margin-bottom:20px;padding-left:10px;border-left:5px solid #333}
  67. .game-section-title a{color:#333;text-decoration:none}
  68. .game-section-title a:hover{color:#007bff}
  69. .game-section-layout{display:flex!important;gap:20px;align-items:flex-start}
  70. .game-icon-section{flex:0 0 240px!important;width:240px!important;display:block;position:relative;transition:all .3s;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.2)}
  71. .game-icon-section:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 12px 30px rgba(0,0,0,.3)}
  72. .game-icon-image{width:100%!important;height:auto!important;display:block!important;border-radius:12px!important}
  73. .game-products-section{flex:1!important;min-width:0!important;overflow:visible!important;position:relative}
  74. .game-products-slider{position:relative;width:100%;padding:0 30px}
  75. .game-products-slider .slick-list{overflow:hidden!important}
  76. .game-products-slider .slick-track{display:flex!important}
  77. .game-products-slider .slick-slide{height:auto!important;float:none!important;margin:0 10px}
  78. .game-products-slider .slick-prev,.game-products-slider .slick-next{width:50px!important;height:50px!important;background:rgba(0,0,0,.7)!important;border-radius:50%!important;z-index:10!important;border:2px solid white!important;box-shadow:0 2px 8px rgba(0,0,0,.3)!important;top:50%!important;transform:translateY(-50%)!important;position:absolute!important}
  79. .game-products-slider .slick-prev:hover,.game-products-slider .slick-next:hover{background:rgba(0,0,0,.9)!important}
  80. .game-products-slider .slick-prev{left:0!important}
  81. .game-products-slider .slick-next{right:0!important}
  82. .game-products-slider .slick-prev:before,.game-products-slider .slick-next:before{content:""!important}
  83. .game-products-slider .slick-disabled{opacity:.3!important}
  84. .no-products{text-align:center;padding:60px 20px;color:#999}
  85. @media(max-width:768px){
  86.     .game-section-layout{gap:15px}
  87.     .game-icon-section{flex:0 0 120px!important;width:120px!important}
  88.     .game-products-slider .slick-prev,.game-products-slider .slick-next{display:none!important}
  89.     .game-products-slider{padding:0}
  90.     .game-section-title{font-size:1.4rem}
  91. }
  92. @media(max-width:480px){
  93.     .game-icon-section{flex:0 0 100px!important;width:100px!important}
  94. }
  95. </style>', false);
  97.             // JS
  98.             $event->addSnippet('<script>
  99. (function(){
  100.     if(typeof eccube==="undefined"||!eccube.productsClassCategories) return;
  101.     
  102.     var gameCategories = ' . $gameCategoriesJson . ';
  103.     var $shelfGrid = $(".ec-shelfGrid");
  104.     var $items = $shelfGrid.find(".ec-shelfGrid__item");
  105.     
  106.     if($items.length === 0) return;
  107.     
  108.     var productsByCategory = {};
  109.     
  110.     $items.each(function(){
  111.         var $item = $(this);
  112.         var categoryIds = $item.attr("data-category-ids");
  113.         if(!categoryIds) return;
  114.         
  115.         var categories = categoryIds.split(",").map(function(id){ return parseInt(id.trim()); });
  116.         
  117.         gameCategories.forEach(function(game){
  118.             if(categories.indexOf(game.id) !== -1){
  119.                 if(!productsByCategory[game.id]) productsByCategory[game.id] = [];
  120.                 productsByCategory[game.id].push($item.clone());
  121.             }
  122.         });
  123.     });
  124.     
  125.     var $newLayout = $("<div class=\"game-category-parent-layout\"></div>");
  126.     
  127.     gameCategories.forEach(function(game){
  128.         var products = productsByCategory[game.id] || [];
  129.         var $section = $("<div class=\"game-section\"></div>");
  130.         var $title = $("<h2 class=\"game-section-title\"><a href=\"?category_id=" + game.id + "\">" + game.name + "</a></h2>");
  131.         var $layout = $("<div class=\"game-section-layout\"></div>");
  132.         
  133.         var iconHtml = game.icon ? "<img src=\"" + game.icon + "\" alt=\"" + game.name + "\" class=\"game-icon-image\">" : "<div style=\"width:100%;height:200px;background:#ccc;display:flex;align-items:center;justify-content:center;\">" + game.name + "</div>";
  134.         var $iconSection = $("<a href=\"?category_id=" + game.id + "\" class=\"game-icon-section\">" + iconHtml + "</a>");
  135.         
  136.         var $productsSection = $("<div class=\"game-products-section\"></div>");
  137.         var $slider = $("<div class=\"game-products-slider slider-" + game.id + "\"></div>");
  138.         
  139.         if(products.length > 0){
  140.             products.forEach(function($product){ $slider.append($product); });
  141.         } else {
  142.             $slider.html("<div class=\"no-products\"><p>商品準備中です</p></div>");
  143.         }
  144.         
  145.         $productsSection.append($slider);
  146.         $layout.append($iconSection);
  147.         $layout.append($productsSection);
  148.         $section.append($title);
  149.         $section.append($layout);
  150.         $newLayout.append($section);
  151.     });
  152.     
  153.     $shelfGrid.replaceWith($newLayout);
  154.     
  155.     // Slick初期化
  156.     setTimeout(function(){
  157.         gameCategories.forEach(function(game){
  158.             var $slider = $(".slider-" + game.id);
  159.             if($slider.find(".ec-shelfGrid__item").length > 0 && typeof $.fn.slick !== "undefined"){
  160.                 $slider.slick({
  161.                     slidesToShow: 4,
  162.                     slidesToScroll: 1,
  163.                     infinite: false,
  164.                     arrows: true,
  165.                     prevArrow: "<button type=\"button\" class=\"slick-prev\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"/></svg></button>",
  166.                     nextArrow: "<button type=\"button\" class=\"slick-next\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z\"/></svg></button>",
  167.                     responsive: [
  168.                         {breakpoint: 1200, settings: {slidesToShow: 3}},
  169.                         {breakpoint: 768, settings: {slidesToShow: 1, arrows: false}},
  170.                         {breakpoint: 480, settings: {slidesToShow: 1, arrows: false}}
  171.                     ]
  172.                 });
  173.             }
  174.         });
  175.     }, 300);
  176. })();
  177. </script>', false);
  179.         } catch (\Exception $e) {
  180.             error_log('NZCategoryLayoutManager42: ' . $e->getMessage());
  181.         }
  182.     }
  183. }