Getting homepage rocking

composer.json

@@ -24,6 +24,7 @@
         "symfony/validator": "5.2.*",
         "symfony/yaml": "5.2.*",
         "twig/extra-bundle": "^2.12|^3.0",
+        "twig/intl-extra": "^3.2",
         "twig/twig": "^2.12|^3.0"
     },
     "config": {

public/styles/app.css

@@ -8,10 +8,14 @@ a, a:hover  {
     color: #000;
 }
 
+h1 {
+    font-size: 1.7rem;
+}
+
 .header {
     background-color: #343a40;
     margin-bottom: 30px;
-    border-bottom: 2px solid #efefee;
+    border-bottom: 2px solid #BA1414;
     padding: 0;
 }
 
@@ -46,13 +50,30 @@ a, a:hover  {
     border: 1px solid #efefee;
     box-shadow: 0 0 7px 4px #efefee;
     border-radius: 5px;
-    margin-top: 25px;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
+}
+
+.component-light ul li a:hover {
+    background: #add8e6;
+}
+.component-light ul li a.selected {
+    background: #efefee;
 }
 
 .aside-collapsed {
     padding: 0 15px;
 }
 
+/**
+ * Products
+ */
+.product-image img {
+    width: 100%;
+    height: auto;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+
+.product-image h3 {
+    font-size: 1.2rem;
+}
+

src/Controller/ProductController.php

@@ -5,6 +5,7 @@
 use App\Entity\Category;
 use App\Entity\Product;
 use App\Repository\CategoryRepository;
+use App\Repository\ProductRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\Routing\Annotation\Route;
 use Symfony\Component\HttpFoundation\Response;
@@ -14,10 +15,11 @@ class ProductController extends AbstractController
     /**
      * @Route("/", name="app_homepage")
      */
-    public function index(CategoryRepository $categoryRepository): Response
+    public function index(CategoryRepository $categoryRepository, ProductRepository $productRepository): Response
     {
         return $this->render('product/index.html.twig', [
             'categories' => $categoryRepository->findAll(),
+            'products' => $productRepository->findAllMostPopular(),
         ]);
     }
 

src/Repository/ProductRepository.php

@@ -19,32 +19,16 @@ public function __construct(ManagerRegistry $registry)
         parent::__construct($registry, Product::class);
     }
 
-    // /**
-    //  * @return Product[] Returns an array of Product objects
-    //  */
-    /*
-    public function findByExampleField($value)
+    /**
+     * Fake "most popular" method
+     *
+     * @return Product[]
+     */
+    public function findAllMostPopular()
     {
-        return $this->createQueryBuilder('p')
-            ->andWhere('p.exampleField = :val')
-            ->setParameter('val', $value)
-            ->orderBy('p.id', 'ASC')
-            ->setMaxResults(10)
+        return $this->createQueryBuilder('product')
+            ->setMaxResults(15)
             ->getQuery()
-            ->getResult()
-        ;
+            ->execute();
     }
-    */
-
-    /*
-    public function findOneBySomeField($value): ?Product
-    {
-        return $this->createQueryBuilder('p')
-            ->andWhere('p.exampleField = :val')
-            ->setParameter('val', $value)
-            ->getQuery()
-            ->getOneOrNullResult()
-        ;
-    }
-    */
 }

symfony.lock

@@ -420,6 +420,9 @@
     "twig/extra-bundle": {
         "version": "v3.2.1"
     },
+    "twig/intl-extra": {
+        "version": "v3.2.1"
+    },
     "twig/twig": {
         "version": "v3.2.1"
     }

templates/product/index.html.twig

@@ -1,5 +1,103 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-    <div id="app"></div>
+    <div class="container-fluid">
+        <div class="row">
+            <aside class="col-xs-12 col-3">
+                <div class="p-3 mb-5 component-light">
+                    <h5 class="text-center">
+                        Categories
+                    </h5>
+                    <ul class="nav flex-column mb4">
+                        <li class="nav-item">
+                            <a href="{{ path('app_homepage') }}" class="nav-link {{ app.request.attributes.get('_route') == 'app_homepage' ? 'selected' : null }}">
+                                All Products
+                            </a>
+                        </li>
+                        {% for category in categories %}
+                            <li class="nav-item">
+                                <a
+                                    href="{{ path('app_category', { id: category.id }) }}"
+                                    class="nav-link"
+                                >
+                                    {{ category.name }}
+                                </a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                    <hr>
+
+                    <div class="d-flex justify-content-end">
+                        <button class="btn btn-secondary btn-sm">
+                            Collapse
+                        </button>
+                    </div>
+                </div>
+            </aside>
+
+            <div class="col-xs-12 col-9">
+
+                <div class="row">
+                    <div class="col-3">
+                        <h1>
+                            All Products
+                        </h1>
+                    </div>
+                    <div class="col-9">
+                        <div class="input-group">
+                            <input
+                                placeholder="Search products..."
+                                type="search" class="form-control"
+                            >
+                        </div>
+                    </div>
+                </div>
+                <div class="row mt-4">
+                    {% for product in products %}
+                        <div class="col-xs-12 col-6 mb-2 pb-2">
+                            <div class="component-light">
+                                <div class="product-image">
+                                    <a href="{{ path('app_product', { id: product.id }) }}">
+                                        <img
+                                            alt="{{ product.name }}"
+                                            src="{{ asset('/uploads/products/'~product.imageFilename) }}"
+                                            class="d-block mb-2"
+                                        >
+                                    </a>
+                                    <h3 class="font-weight-bold mb-2 px-2">
+                                        <a href="{{ path('app_product', { id: product.id }) }}">
+                                            {{ product.name }}
+                                        </a>
+                                    </h3>
+                                </div>
+                                <div
+                                    class="p-2 my-3 d-md-flex justify-content-between">
+                                    <p class="p-0 d-inline">
+                                        <strong>{{ product.price|format_currency('USD') }}</strong></p>
+                                    <button class="btn btn-info btn-sm">
+                                        View Product
+                                    </button>
+                                </div>
+                            </div>
+                            <hr>
+                            <div class="px-2 pb-2"><small>brought to you by Rest
+                                    at Work</small></div>
+                        </div>
+                    {% else %}
+                        <div class="col-12">
+                            <h5 class="ml-4 mt-4" >
+                                Whoopsie Daisy, no products found!
+                            </h5>
+                        </div>
+                    {% endfor %}
+                </div>
+
+                <div class="row">
+                    <span class="p-3">
+                        Shipping takes 10-13 weeks, and products probably won't work
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
 {% endblock %}