add component classes

category.html.twig

@@ -5,10 +5,9 @@
 
 {% block body %}
 	{% set products = resources('/api/front/products', {'productCategories.category.id': attr('category', 'id'), itemsPerPage:9, page: page}) %}
-	{% set totalProducts = resources('/api/front/products', {'productCategories.category.id': attr('category', 'id'), itemsPerPage:9, page: page}) %}
 
-	{% include '@components/Layout/SimilarContent/SimilarContent.html.twig' with {title: attr('category', 'title'), description: attr('category', 'description'), nbProducts: products|length}  %}
-  {% include '@components/Layout/CategoryProduct/CategoryProduct.html.twig' with {products: products, totalProducts:totalProducts} %}
+	{% include '@components/Layout/Subheader/Category/SubheaderCategory.html.twig' with {title: attr('category', 'title'), description: attr('category', 'description'), nbProducts: products|length}  %}
+  {{ component('Flexy:Layout:CategoryProduct', {categoryId: attr('category', 'id'), page}) }}
 
 	{% include '@components/Layout/Reinsurance/Reinsurance.html.twig' with { data: [
       {

components/Layout/CategoryProduct/CategoryProduct.html.twig

@@ -1,5 +1,4 @@
 {% set products = products|default([]) %}
-{% set totalProducts = totalProducts|default("") %}
 
 <section class="px-6 lg:px-[120px] py-6 lg:flex lg:gap-[115px] lg:justify-between">
   <div class="w-[310px] lg:block hidden mt-[44px] sticky top-20">

components/Layout/SimilarContent/SimilarContent.html.twig

@@ -1,8 +1,9 @@
 {% set title = title|default('') %}
-{% set similarContents = similarContents|default([]) %}
+{% set similarContents = similarContents|default(this.similarContents|default([])) %}
 {% set button = button|default(null) %}
 
 <div class="px-6 py-20 mx-auto md:px-12 md:pr-0 lg:px-0 lg:container">
+
 	<div class='pb-6 text-black h4'>{{ title }}</div>
 
 	<div class='SimilarContents slider'>

components/Organisms/SimilarContentCard/SimilarContentCard.html.twig

@@ -16,7 +16,7 @@
     <a href="{{ url }}" class="SimilarContentCard-title">{{ title }}</a>
 
     <div class="SimilarContentCard-footer">
-      {{ date }}
+      {{ date|date("d/m/Y") }}
     </div>
   </div>
 </div>

index.html.twig

@@ -1,7 +1,6 @@
 {%  extends 'base.html.twig' %}
 
-{% block title %}index
-{% endblock %}
+{% block title %}index{% endblock %}
 
 {% block body %}
 
@@ -60,18 +59,10 @@
 		{% include '@components/Layout/Review/Review.html.twig' with {title: 'Our customers speak about us' | trans, reviews: reviews, button: {label: "See all reviews" | trans, href: "#"}}  %}
 	</div>
 
-	{% set news = resources('/api/front/contents', {itemsPerPage:3}) %}
-
-	{% set newsFiltered = news|map((n) => ({
-    title: n.i18ns.title,
-    date: n.createdAt|date("d/m/Y"),
-    url: '#',
-    img: {url: '/images/placeholder.webp', alt: n.i18ns.title}
-  }))
-  %}
 	<div class="bg-theme-lighter">
-		{% include '@components/Layout/SimilarContent/SimilarContent.html.twig' with {title: 'Our news' | trans, similarContents: newsFiltered, button: {label: "See all news" | trans, href: "#"}}  %}
+    {{ component('Flexy:Layout:SimilarContent', {title: 'Our news' | trans, button: {label: "See all news" | trans, href: "#"}}) }}
 	</div>
+
 {% endblock %}
 
 {#<div class="font-bold sm:w-7/12">{{ format_money(number={$TOTAL_TAXED_AMOUNT}, currency_id=$CURRENCY) }}</div>#}

src/Twig/Layout/CategoryProduct.php

@@ -0,0 +1,44 @@
+<?php
+
+/*
+ * This file is part of the Thelia package.
+ * http://www.thelia.net
+ *
+ * (c) OpenStudio <info@thelia.net>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace FlexyBundle\Twig\Layout;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
+use TwigEngine\Service\DataAccess\DataAccessService;
+
+#[AsTwigComponent(template: 'components/Layout/CategoryProduct/CategoryProduct.html.twig')]
+class CategoryProduct
+{
+    private DataAccessService $dataAccessService;
+    public string $categoryId;
+    public string $page;
+
+    #[ExposeInTemplate]
+    private array $products;
+
+    public function __construct(DataAccessService $dataAccessService)
+    {
+        $this->dataAccessService = $dataAccessService;
+    }
+
+    public function getProducts(): array
+    {
+        $this->products = $this->dataAccessService->resources('/api/front/products', [
+            'productCategories.category.id' => $this->categoryId,
+            'itemsPerPage' => 9,
+            'page' => $this->page,
+        ]);
+
+        return $this->products;
+    }
+}

src/Twig/Layout/SimilarContent.php

@@ -0,0 +1,52 @@
+<?php
+
+/*
+ * This file is part of the Thelia package.
+ * http://www.thelia.net
+ *
+ * (c) OpenStudio <info@thelia.net>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace FlexyBundle\Twig\Layout;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use TwigEngine\Service\DataAccess\DataAccessService;
+
+#[AsTwigComponent(template: '@components/Layout/SimilarContent/SimilarContent.html.twig')]
+class SimilarContent
+{
+    public array $similarContents;
+
+    public function __construct(private DataAccessService $dataAccessService)
+    {
+    }
+
+    public function mount(array $similarContents = []): void
+    {
+        if (\count($similarContents) > 0) {
+            $this->similarContents = $similarContents;
+        }
+    }
+
+    public function similarContents(): array
+    {
+        $contents = $this->dataAccessService->resources('/api/front/contents', [
+            'itemsPerPage' => 3,
+        ]);
+
+        return array_map(function ($item) {
+            return [
+                'title' => $item['i18ns']['title'],
+                'date' => $item['createdAt'],
+                'url' => '#',
+                'img' => [
+                    'url' => '/images/placeholder.webp',
+                    'alt' => $item['i18ns']['title'],
+                ],
+            ];
+        }, $contents);
+    }
+}