Implemented color filters to navbar

This commit is contained in:
Kevin Frantz 2018-07-15 08:53:15 +02:00
parent d480467615
commit ae7c8b9278
7 changed files with 83 additions and 47 deletions

View File

@ -21,9 +21,10 @@ class AbstractDefaultController extends AbstractController
private function addMenuItems(array $variables): array private function addMenuItems(array $variables): array
{ {
if (array_key_exists('menu_items', $variables)) { if (array_key_exists('menu_items', $variables)) {
throw new \Exception('You aren\'t allowed to define this key!'); $variables['menu_items'] = array_merge($this->getMenuItems(),$variables['menu_items']);
} }else{
$variables['menu_items'] = $this->getMenuItems(); $variables['menu_items'] = $this->getMenuItems();
}
return $variables; return $variables;
} }

View File

@ -5,6 +5,8 @@ use repository\product\Product as ProductRepository;
use core\Core; use core\Core;
use router\link\Link; use router\link\Link;
use controller\AbstractDefaultController; use controller\AbstractDefaultController;
use Doctrine\Common\Collections\ArrayCollection;
use router\link\LinkCollection;
/** /**
* *
@ -35,17 +37,18 @@ final class Product extends AbstractDefaultController implements ProductInterfac
} }
$this->render('product/list.html.twig', [ $this->render('product/list.html.twig', [
'products' => $products, 'products' => $products,
'colors' => $this->getColors() 'colors' => $this->getColors(),
'menu_items'=>[$this->getColors()]
]); ]);
} }
private function getColors(): array private function getColors(): ArrayCollection
{ {
$colors = []; $colors = new LinkCollection('color filter');
foreach ($this->productRepository->getColors() as $color) { foreach ($this->productRepository->getColors() as $color) {
$parameters = $_GET; $parameters = $_GET;
$parameters['color'] = $color['color']; $parameters['color'] = $color['color'];
$colors[] = new Link($parameters, $color['color']); $colors->add(new Link($parameters, $color['color']));
} }
return $colors; return $colors;
} }

View File

@ -0,0 +1,27 @@
<?php
namespace router\link;
use Doctrine\Common\Collections\ArrayCollection;
/**
*
* @author kevinfrantz
*
*/
final class LinkCollection extends ArrayCollection implements LinkCollectionInterface
{
/**
* @var string
*/
private $name;
public function __construct(string $name){
$this->name = $name;
}
public function getName(): string
{
return $this->name;
}
}

View File

@ -0,0 +1,13 @@
<?php
namespace router\link;
/**
*
* @author kevinfrantz
*
*/
interface LinkCollectionInterface
{
public function getName():string;
}

View File

@ -1,6 +1,7 @@
{% extends "base.html.twig" %} {% extends "base.html.twig" %}
{% block body %} {% block body %}
{% include 'frames/structure/navbar.html.twig' with menu_items %} {% include 'frames/structure/navbar.html.twig' with menu_items %}
<br />
<div class="container"> <div class="container">
{% block content %} {% block content %}
{% endblock %} {% endblock %}

View File

@ -1,31 +1,33 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">Online Shop</a> <a class="navbar-brand" href="/">Online Shop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
{% for item in menu_items %} {% for item in menu_items %}
<!--<li class="nav-item active"> {% if item.name %}
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> {% if item.url %}
</li> <li class="nav-item {% if item.active %}active{% endif %}"><a
--> class="nav-link" href="{{ item.url }}"> {{ item.name }}
<li class="nav-item {% if item.active %}active{% endif %}"> </a></li>
<a class="nav-link" href="{{ item.url }}">{{ item.name }}</a> {% elseif item.toArray %}
</li> <li class="nav-item dropdown"><a
<!-- class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
<li class="nav-item dropdown"> role="button" data-toggle="dropdown" aria-haspopup="true"
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> aria-expanded="false"> {{ item.name }}
Dropdown
</a> </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a> {%for link in item %}
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item {% if link.active %}active{% endif %}" href="{{ link.url }}">{{ link.name }}</a>
<div class="dropdown-divider"></div> {% endfor %}
<a class="dropdown-item" href="#">Something else here</a> </div></li>
</div> {% endif %}
</li> {% endif %}
-->
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>

View File

@ -1,17 +1,6 @@
{% extends 'frames/default.html.twig' %} {% extends 'frames/default.html.twig' %}
{% block title %}product overview{% endblock %} {% block title %}product overview{% endblock %}
{% block content %} {% block content %}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
filter by color:
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{% for color in colors %}
<a class="dropdown-item" href="{{ color.getUrl }}">{{ color.getName }}</a>
{% endfor %}
</div>
</div>
<hr />
<div class="card-columns"> <div class="card-columns">
{% for product in products %} {% for product in products %}
<div class="card" style="width: 18rem;"> <div class="card" style="width: 18rem;">