Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Filtering products
We have already learned how to add products from an array to a page. Now we are ready to start filtering. The developers have already added filters to the catalog.php script and to the components/products_list.php template.
Our assignment is to expand the loop that displays product listings on the page so that it does not add all of the products from the array to the page, but only the products from the selected category. For example, the user selects the “Furniture” filter, and only products of this type appear on the page.
How can we implement this? First, you need to find out which filter is currently selected. Each filter has its own address with the product_type query parameter:
catalog.php?product_type=furnitureTo find out which filter the user has selected, all we need to do is get the value of the query parameter using the $_GET command that we have already been introduced to.
Senior developers have already created the variable $type with the value $_GET['product_type'] in the script.
Good, we now know how to use the active filter. Now, how do we find products belonging to the corresponding category in the array? The developers took care of this.
Each product in the $items array has a 'type' key. This is the product category.
[
'title' => 'Asusmer hanging bed',
'type' => 'furniture' ,
'colors' => ['blue']
]All we need to do is to compare the active filter from $type inside our foreach loop with the value 'type' for each product in the array. If they match, the verification will be successful, and the product will appear on the page.
We will use a condition to perform the comparison. Write the following in parentheses:
$item['type'] === $typeLet’s use the comparison operator ===. It is called strict equality, and it checks whether the values to the left and right are equal. If they are equal, then the condition is true.
Let’s try all of this out in practice.
Files
<?php
require('products_db.php');
require('components/header.php');
$items = get_products();
$filters = get_filters();
$type = $_GET['product_type'];
require('components/products_list.php');
require('components/footer.php');
?>
<footer class="site-footer">
<div class="container">
<p class="copyright">© Muffin, 2019</p>
<ul class="navigation-list">
<li><a href="catalog.php">Catalog</a></li>
<li><a href="delivery.html">Delivery</a></li>
<li><a href="contacts.html">Contact us</a></li>
</ul>
<ul class="social-list">
<li>
<a class="social-link-twitter" href="https://twitter.com">
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li>
<a class="social-link-instagram" href="https://instagram.com">
<span class="visually-hidden">Instagram</span>
</a>
</li>
<li>
<a class="social-link-facebook" href="https://facebook.com">
<span class="visually-hidden">Facebook</span>
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Online store for home furnishings</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="site-header">
<nav class="site-navigation">
<a class="logo-link" href="index.php">
<img src="img/logo-full.svg" width="62" height="17" alt="Gloevk store logo">
</a>
<ul class="navigation-list">
<li><a href="catalog.php">Catalog</a></li>
<li><a href="delivery.html">Delivery</a></li>
<li><a href="contacts.html">Contact us</a></li>
</ul>
</nav>
</header>
<section class="catalog">
<div class="container">
<h1 class="catalog-title">Product catalog</h1>
<ul class="filters">
<?php foreach($filters as $filter): ?>
<?php $filter_class = 'filter'; ?>
<?php if($type === $filter['url']): {
$filter_class = $filter_class . ' filter-current';
} ?>
<?php endif; ?>
<li>
<a class="<?= $filter_class ?>" href="catalog.php?product_type=<?= $filter['url'] ?>"><?= $filter['name'] ?></a>
</li>
<?php endforeach; ?>
</ul>
<ul class="products-list">
<?php foreach($items as $item): ?>
<li>
<a class="product-card" href="#">
<h3><?= $item['title'] ?></h3>
<img src="<?= $item['img_url'] ?>" width="156" height="120" alt="<?= $item['title'] ?>">
<div class="product-options">
<span class="price"><?= $item['price'] ?></span>
<ul class="colors-list">
<?php foreach ($item['colors'] as $color): ?>
<li class="color-<?= $color ?>"></li>
<?php endforeach;?>
</ul>
</div>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
</section>
<?php
function get_products() {
return [
'1' => [
'title' => 'Asusmer hanging bed',
'img_url' => 'img/item-asusmer.jpg',
'price' => 10000,
'discount' => 1000,
'is_new' => true,
'is_last' => false,
'type' => 'furniture',
'colors' => ['blue'],
'features' => ['Pleases cats', 'Inspires envy', 'Hangs firmly', 'Soft', 'Stylish', 'Yours', 'Doesn’t swing like a baby’s cradle', 'Waits for you at home']
],
'2' => [
'title' => 'Badeta armchair',
'img_url' => 'img/item-badeta.jpg',
'price' => 3500,
'discount' => 0,
'is_new' => false,
'is_last' => false,
'type' => 'furniture',
'colors' => ['blue', 'black'],
'features' => ['Shakes the apartment', 'Cozy', 'Hangs firmly', 'It’s just as if grandma knitted it']
],
'3' => [
'title' => 'Blempere stickers',
'img_url' => 'img/item-blempere.jpg',
'price' => 500,
'discount' => 0,
'is_new' => false,
'is_last' => true,
'type' => 'other',
'colors' => ['blue', 'black', 'red'],
'features' => ['Adhere permanently', 'Bright', 'Funny', 'Stylish', 'Do not launder']
],
'4' => [
'title' => 'Bletub chandelier',
'img_url' => 'img/item-bletub.jpg',
'price' => 4000,
'discount' => 0,
'is_new' => true,
'is_last' => true,
'type' => 'lighting',
'colors' => ['red'],
'features' => ['The cat cannot reach it', 'It hangs firmly in place', 'Shines brightly']
],
'5' => [
'title' => 'Breirbury organizer',
'img_url' => 'img/item-breirberi.jpg',
'price' => 5000,
'discount' => 3000,
'is_new' => true,
'is_last' => true,
'type' => 'other',
'colors' => ['yellow'],
'features' => ['So that your junk is always an arm’s reach away', 'Convenient', 'You can cook and watch a movie at the same time']
],
'6' => [
'title' => 'Mseyulida lamp',
'img_url' => 'img/item-mseyulida.jpg',
'price' => 4000,
'discount' => 500,
'is_new' => true,
'is_last' => false,
'type' => 'lighting',
'colors' => ['orange', 'green', 'yellow', 'blue', 'black'],
'features' => ['Suitable for any interior', 'Sturdy']
],
'7' => [
'title' => 'Rmaeribi sofa',
'img_url' => 'img/item-rmaeribi.jpg',
'price' => 15000,
'discount' => 4500,
'is_new' => true,
'is_last' => true,
'type' => 'furniture',
'colors' => ['green', 'black', 'red', 'blue'],
'features' => ['Soft', 'Cozy', 'Cats and children love it', 'Hides stains', 'Easy to clean']
],
'8' => [
'title' => 'Nnulm desk',
'img_url' => 'img/item-nnulm.jpg',
'price' => 5000,
'discount' => 0,
'is_new' => true,
'is_last' => false,
'type' => 'furniture',
'colors' => ['green'],
'features' => ['Eco-friendly', 'Lots of drawers', 'It has room for a mug and a pile of papers']
],
'9' => [
'title' => 'Tre furniture set',
'img_url' => 'img/item-tre.jpg',
'price' => 20000,
'discount' => 3000,
'is_new' => true,
'is_last' => true,
'type' => 'furniture',
'colors' => ['yellow', 'black'],
'features' => ['Relaxes', 'Doesn’t creak', 'Looks cool']
],
'10' => [
'title' => 'Granny style chandelier',
'img_url' => 'img/item-default-old-lamp.jpg',
'price' => 7000,
'discount' => 2000,
'is_new' => false,
'is_last' => true,
'type' => 'lighting',
'colors' => ['blue', 'black'],
'features' => ['Nostalgic', 'Fits into any interior', 'Your neighbors will envy it', 'Stylish']
],
'11' => [
'title' => 'Do lamp',
'img_url' => 'img/item-do.jpg',
'price' => 3500,
'discount' => 500,
'is_new' => true,
'is_last' => false,
'type' => 'lighting',
'colors' => ['black'],
'features' => ['Looks beautiful', 'Shines']
],
'12' => [
'title' => 'Tueta panel',
'img_url' => 'img/item-tueta.jpg',
'price' => 5000,
'discount' => 20,
'is_new' => true,
'is_last' => true,
'type' => 'textile',
'colors' => ['red'],
'features' => ['Will surprise your guests', 'It makes you want to touch it', 'Eye-catching']
],
'13' => [
'title' => 'Nmiao pillow',
'img_url' => 'img/item-nmyao.jpg',
'price' => 1500,
'discount' => 0,
'is_new' => false,
'is_last' => false,
'type' => 'textile',
'colors' => ['orange'],
'features' => ['Cozy for the cat', 'Comfortable for you', 'Fun for your kid']
],
'14' => [
'title' => 'Kel lamp',
'img_url' => 'img/item-kel.jpg',
'price' => 3000,
'discount' => 20,
'is_new' => true,
'is_last' => false,
'type' => 'lighting',
'colors' => ['orange', 'blue'],
'features' => ['Helps you read at night', 'Small', 'Exudes a cozy glow', 'Doesn’t bother others']
],
'15' => [
'title' => 'Omase pillow',
'img_url' => 'img/item-omase.jpg',
'price' => 2000,
'discount' => 100,
'is_new' => true,
'is_last' => true,
'type' => 'textile',
'colors' => ['grey', 'black'],
'features' => ['Brightly colored', 'Square', 'Soft']
],
'16' => [
'title' => 'Ormu basket',
'img_url' => 'img/item-ormu.jpg',
'price' => 2200,
'discount' => 20,
'is_new' => true,
'is_last' => false,
'type' => 'other',
'colors' => ['blue'],
'features' => ['Everything fits', 'You can plant a flower in it', 'Hides the cat']
],
'17' => [
'title' => 'Pinas paperclips',
'img_url' => 'img/item-pinas.jpg',
'price' => 100,
'discount' => 0,
'is_new' => true,
'is_last' => true,
'type' => 'other',
'colors' => ['blue', 'black'],
'features' => ['Do not rust', 'Strong', 'You get a bunch of them', 'There is enough to last a long time']
],
'18' => [
'title' => 'Preum compact cassette',
'img_url' => 'img/item-preum.jpg',
'price' => 200,
'discount' => 20,
'is_new' => true,
'is_last' => false,
'type' => 'other',
'colors' => ['blue', 'black'],
'features' => ['Soothing', 'Surprise your teen', 'You can rewind the tape with a pencil']
],
'19' => [
'title' => 'Rmob souvenir',
'img_url' => 'img/item-rmob.jpg',
'price' => 1500,
'discount' => 20,
'is_new' => false,
'is_last' => false,
'type' => 'other',
'colors' => ['green', 'orange', 'yellow'],
'features' => ['For the Marvel fan', 'You can plant a flower', 'Glorious', 'Makes you smile']
],
'20' => [
'title' => 'Tkuoko chandelier',
'img_url' => 'img/item-tkuoko.jpg',
'price' => 2100,
'discount' => 1000,
'is_new' => false,
'is_last' => false,
'type' => 'lighting',
'colors' => ['green', 'orange'],
'features' => ['Glitters', 'Shines', 'Looks expensive', 'Can be hung']
],
'21' => [
'title' => 'Briatuo armchairs',
'img_url' => 'img/item-briatuo.jpg',
'price' => 7000,
'discount' => 5500,
'is_new' => false,
'is_last' => true,
'type' => 'furniture',
'colors' => ['blue'],
'features' => ['Vivid', 'Deep', 'Beautiful', 'Relaxing', 'Comfortable for your back']
]
];
}
function get_filters() {
return [
0 => [
'url' => 'all',
'name' => 'All products',
],
1 => [
'url' => 'lighting',
'name' => 'Lighting',
],
2 => [
'url' => 'furniture',
'name' => 'Furniture',
],
3 => [
'url' => 'textile',
'name' => 'Textile',
],
4 => [
'url' => 'other',
'name' => 'Other',
]
];
}
function get_product_attribute($id, $attr) {
$products = get_products();
$result = $products[$id][$attr] ?? null;
return $result;
}
function get_product_price($id) {
return get_product_attribute($id, 'price');
}
function get_product_title($id) {
return get_product_attribute($id, 'title');
}
function get_img_url($id) {
return get_product_attribute($id, 'img_url');
}
function get_product_discount($id) {
return get_product_attribute($id, 'discount');
}
function get_product_is_new($id) {
return get_product_attribute($id, 'is_new');
}
function get_product_is_last($id) {
return get_product_attribute($id, 'is_last');
}
function get_product_features($id) {
return get_product_attribute($id, 'features');
}
.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
body {
min-width: 550px;
padding: 0;
margin: 0;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 13px;
line-height: 18px;
}
a {
text-decoration: none;
color: inherit;
}
.container {
width: 510px;
padding: 0 20px;
margin: 0 auto;
}
.site-navigation {
display: flex;
width: 510px;
padding: 0 20px;
margin: 0 auto;
justify-content: space-between;
}
.site-header {
position: relative;
z-index: 2;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.logo-link:hover,
.logo-link:focus {
opacity: 0.5;
}
.logo-link:active {
opacity: 0.3;
}
.logo-link img {
margin: 10px 0;
}
.navigation-list {
display: flex;
margin: 0 -15px 0 0;
padding: 0;
list-style: none;
flex-wrap: wrap;
justify-content: flex-end;
}
.navigation-list a:hover,
.navigation-list a:focus {
opacity: 0.5;
}
.navigation-list a:active {
color: #ff8a00;
}
.navigation-list a {
display: block;
padding: 12px 15px 11px;
color: #845927;
}
.intro .container {
z-index: -1;
min-height: 160px;
margin-bottom: 0;
padding: 20px 0 0;
box-sizing: border-box;
background-image: url("img/index-background.jpg");
background-repeat: no-repeat;
background-position: top right;
}
.intro-title {
width: 240px;
padding: 0;
margin: 0;
font-family: "Georgia", "Times", serif;
font-size: 28px;
line-height: 36px;
font-weight: 400;
}
.brands-title b,
.intro-title b,
.features-title b,
.delivery-text b {
font-weight: 400;
color: #ff8a00;
}
.intro p {
width: 210px;
margin: 8px 0 10px;
padding: 0;
line-height: 20px;
}
.quote {
display: block;
position: relative;
padding: 0 0 0 33px;
margin: 20px 0 20px;
font-family: "Georgia", "Times", serif;
font-style: italic;
}
.quote p {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 24px;
quotes: none;
}
.quote::before {
position: absolute;
content: "«";
top: 0;
left: 0;
font-size: 36px;
color: #ff8a00;
}
.author {
display: block;
padding: 0;
margin: 4px 0;
}
.popular-products {
margin: 0;
background-color: #fff3e5;
}
.delivery,
.custom,
.contacts,
.catalog,
.item,
.order {
padding-top: 15px;
padding-bottom: 10px;
}
.delivery-title,
.custom-title,
.contacts-title,
.catalog-title,
.order-title {
padding: 0;
margin: 5px 0;
font-family: "Georgia", "Times", serif;
font-size: 28px;
line-height: 36px;
font-weight: 400;
}
.filters {
display: flex;
flex-wrap: wrap;
margin: 10px -10px -10px 0;
padding: 0;
list-style: none;
}
.filter {
display: flex;
padding: 8px 16px;
margin: 0 10px 10px 0;
color: #ff8a00;
border: 1px solid #ff8a00;
border-radius: 4px;
cursor: pointer;
}
.filter:focus,
.filter:hover {
color: #ffffff;
background-color: #ff8a00;
}
.filter:active {
box-shadow: inset 0 2px 10px #c86c00;
}
.filter.filter-current {
color: #ffffff;
background-color: #ff8a00;
box-shadow: inset 0 2px 10px #c86c00;
cursor: default;
}
.custom-columns {
display: flex;
flex-grow: 0;
}
.custom-columns img {
display: flex;
flex-shrink: 0;
align-items: center;
margin: 20px 20px 20px 0;
min-height: 200px;
}
.custom-columns div {
margin: 5px 0 20px;
}
.products-list {
display: flex;
padding: 20px 0 0;
margin: 0 0 0 -20px;
flex-wrap: wrap;
flex-shrink: 0;
list-style: none;
}
.products-list li {
display: flex;
}
.product-card {
position: relative;
display: flex;
width: 132px;
margin-bottom: 20px;
margin-left: 20px;
padding: 124px 12px 12px;
flex-direction: column;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.product-card-new {
position: relative;
}
.product-card-new::after {
position: absolute;
content: "new";
width: 34px;
height: 15px;
top: 8px;
right: -2px;
font-weight: 700;
line-height: 14px;
color: #ffffff;
text-align: center;
background-color: #ff8a00;
border-radius: 4px 0 0 4px;
}
.product-card:hover,
.product-card:focus {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.product-card:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.product-card img {
position: absolute;
top: 0;
left: 0;
order: -1;
}
.product-card h3 {
margin: 0 0 2px 0;
padding: 0;
font-family: "Georgia", "Times", serif;
font-size: 15px;
line-height: 18px;
font-weight: 400;
}
.product-card p {
margin: 0 0 8px 0;
padding: 0;
font-family: "Georgia", "Times", serif;
font-style: italic;
font-size: 13px;
line-height: 16px;
}
.product-options {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: auto;
}
.price {
margin-right: 10px;
flex-shrink: 1;
font-weight: 700;
font-size: 15px;
color: #ff8a00;
}
.colors-list {
display: flex;
margin: 4px 0 0 -4px;
padding: 0;
list-style: none;
}
.colors-list li {
box-sizing: border-box;
width: 10px;
height: 10px;
margin-left: 4px;
border-radius: 50%;
}
.color-orange {
background-color: orange;
}
.color-yellow {
background-color: yellow;
}
.color-green {
background-color: green;
}
.color-blue {
background-color: blue;
}
.color-black {
background-color: black;
}
.color-white {
background-color: white;
border: 1px solid #c0c0c0;
}
.price del {
margin-right: 2px;
font-weight: 400;
font-size: 13px;
color: #000000;
text-decoration: line-through;
}
.map-link {
display: block;
margin-top: -20px;
margin-bottom: 30px;
color: #845927;
}
.map-link:hover,
.map-link:focus {
opacity: 0.5;
}
.map-link:active {
color: #ff8a00;
}
.contacts img {
display: flex;
flex-shrink: 0;
align-items: center;
margin: 20px 0 30px;
min-height: 200px;
}
.item-title {
display: inline-block;
vertical-align: baseline;
padding-right: 50px;
margin: 5px 0 0;
font-family: "Georgia", "Times", serif;
font-size: 28px;
line-height: 36px;
font-weight: 400;
}
.item-new .item-title {
position: relative;
}
.item-new .item-title::after {
position: absolute;
content: "new";
width: 38px;
height: 16px;
top: 13px;
right: 0;
font-family: "Arial", "Helvetica", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 14px;
color: #ffffff;
text-align: center;
background-color: #ff8a00;
border-radius: 4px;
}
.item-container {
display: flex;
}
.item-img {
display: flex;
flex-shrink: 0;
margin: 20px 0;
}
.item-hot .item-img {
position: relative;
padding-top: 36px;
}
.item-hot .item-img::before {
position: absolute;
content: "";
width: 290px;
height: 36px;
top: 0;
left: 0;
background-color: #fff3e5;
background-image: url("img/icon-hot.svg");
background-repeat: no-repeat;
background-size: 11px 14px;
background-position: 62px 10px;
}
.item-hot .item-img::after {
position: absolute;
content: "The product will soon sell out!";
top: 10px;
left: 80px;
}
.item-info {
margin: 8px 0 10px 20px;
flex-grow: 1;
}
.title-advantages {
margin: 10px 0 8px;
font-family: "Georgia", "Times", serif;
font-size: 15px;
line-height: 22px;
font-weight: 400;
}
.item-advantages {
margin: 0;
padding-left: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #e2e2e2;
font-family: "Georgia", "Times", serif;
font-style: italic;
list-style: none;
}
.item-advantages li {
position: relative;
margin-bottom: 6px;
}
.item-advantages li::before {
position: absolute;
content: "";
width: 6px;
height: 6px;
top: 6px;
left: -14px;
background-color: #000000;
border-radius: 50%;
}
.item-buy {
display: flex;
flex-wrap: wrap;
margin: 16px 0 0;
}
.item-buy .price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
position: relative;
max-width: 510px;
margin-top: -2px;
margin-bottom: 10px;
flex-shrink: 0;
}
.item-buy p {
margin: 0 30px 10px 0;
word-wrap: break-word;
}
.item-buy i {
display: block;
margin-bottom: 2px;
font-family: "Georgia", "Times", serif;
font-style: italic;
font-size: 13px;
font-weight: 400;
color: #000000;
}
.price-old i {
margin-bottom: 3px;
}
p.price-new {
margin-right: 0;
font-weight: 700;
font-size: 18px;
color: #ff8a00;
}
.button {
display: flex;
flex-shrink: 0;
max-width: 462px;
padding: 8px 24px 7px;
margin-bottom: 40px;
text-align: center;
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
background-color: #ff8a00;
border-radius: 4px;
box-shadow: 0 4px 4px rgba(255, 138, 0, 0.4);
}
.button:hover,
.button:focus {
background-color: #ff9900;
box-shadow: 0 6px 8px rgba(255, 138, 0, 0.4);
}
.button:active {
background-color: #ff8a00;
box-shadow: 0 2px 2px rgba(255, 138, 0, 0.6);
}
.order-list {
width: 100%;
margin: 10px 0 20px;
border-collapse: collapse;
text-align: left;
}
.order-list img {
width: 68px;
height: 52px;
margin-bottom: -5px;
}
.order-list tr {
border-bottom: 1px solid #e2e2e2;
}
.order-list td {
padding: 10px 20px 10px 0;
}
.order-list th:last-child {
width: 140px;
}
.order-list th {
padding: 10px 20px 10px 0;
font-family: "Georgia", "Times", serif;
font-style: italic;
font-weight: 400;
vertical-align: bottom;
}
.order-list td:last-child,
.order-list th:last-child {
padding-right: 0;
}
.contacts-info {
margin: -10px 0 20px;
}
.contacts-info p {
position: relative;
padding-left: 16px;
margin: 12px 0;
}
.contact-phone::before {
position: absolute;
content: "";
width: 10px;
height: 13px;
top: 2px;
left: 0;
background-image: url("img/icon-phone.svg");
}
.contact-address::before {
position: absolute;
content: "";
width: 9px;
height: 13px;
top: 2px;
left: 0;
background-image: url("img/icon-pin.svg");
}
.delivery-background {
display: flex;
flex-shrink: 0;
align-items: center;
margin: 20px 0 20px;
min-height: 200px;
background-image: url("img/delivery-background.jpg");
background-repeat: no-repeat;
background-position: center left;
}
.delivery-text {
width: 210px;
margin-left: auto;
padding: 16px 20px 20px;
background-color: #ffffff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.delivery-text p {
margin: 8px;
padding: 0;
}
.brands {
padding-top: 20px;
padding-bottom: 4px;
background-color: #f8f8f8;
}
.brands-list {
display: flex;
padding: 0;
margin: 16px -20px 0 0;
flex-wrap: wrap;
list-style: none;
}
.brands-list li {
position: relative;
width: 112px;
margin: 0 20px 16px 0;
padding-top: 58px;
}
.brands-list li::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 112px;
height: 50px;
background-repeat: no-repeat;
}
.brands-ehm::before {
background-image: url("img/brands-ehm-grey.svg");
}
.brands-cubic::before {
background-image: url("img/brands-cubic-grey.svg");
}
.brands-tehnodom::before {
background-image: url("img/brands-tehnodom-grey.svg");
}
.brands-dg::before {
background-image: url("img/brands-dg-grey.svg");
}
.brands-ehm:hover::before {
background-image: url("img/brands-ehm.svg");
}
.brands-cubic:hover::before {
background-image: url("img/brands-cubic.svg");
}
.brands-tehnodom:hover::before {
background-image: url("img/brands-tehnodom.svg");
}
.brands-dg:hover::before {
background-image: url("img/brands-dg.svg");
}
.features {
padding-top: 20px;
padding-bottom: 10px;
}
.brands-title,
.features-title,
.services-title,
.products-title {
margin: 0;
padding: 0;
font-family: "Georgia", "Times", serif;
font-size: 20px;
line-height: 24px;
font-weight: 400;
}
.features-list {
display: flex;
padding: 0;
margin: 14px 0 0;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
}
.features-list li {
position: relative;
width: 142px;
margin-bottom: 10px;
}
.features-list li::before {
position: absolute;
content: "";
top: 2px;
left: 0;
}
.feature-unique {
padding-left: 22px;
}
.feature-unique::before {
width: 16px;
height: 12px;
background-image: url("img/feature-unique.svg");
}
.feature-organic {
padding-left: 25px;
}
.feature-organic::before {
width: 19px;
height: 12px;
background-image: url("img/feature-organic.svg");
}
.feature-protected {
padding-left: 16px;
}
.feature-protected::before {
width: 10px;
height: 12px;
background-image: url("img/feature-protected.svg");
}
.site-footer {
background-color: #847462;
}
.site-footer .container {
display: flex;
flex-grow: 1;
justify-content: space-between;
}
.copyright {
margin: auto 0;
flex-shrink: 0;
color: #ffffff;
}
.site-footer .navigation-list {
margin-right: 15px;
margin-left: -15px;
justify-content: left;
}
.copyright + .navigation-list {
justify-content: center;
margin-left: 15px;
}
.site-footer a {
display: block;
margin: 0;
padding: 14px 15px;
color: #ffffff;
}
.social-list {
display: flex;
width: 110px;
padding: 0;
margin: 0 -10px 2px;
justify-content: end;
flex-shrink: 0;
flex-wrap: wrap;
align-items: center;
list-style: none;
}
.social-list a {
display: block;
width: 14px;
height: 14px;
padding: 10px;
background-repeat: no-repeat;
background-position: center;
}
.social-link-twitter {
background-image: url("img/icon-twitter.svg");
}
.social-link-instagram {
background-image: url("img/icon-instagram.svg");
}
.social-link-facebook {
background-image: url("img/icon-facebook.svg");
}
.social-list a:hover,
.social-list a:focus {
opacity: 0.5;
}
.social-list a:active {
opacity: 0.3;
}
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
An error has occurred
due to a lack of resources or an error in the program, try to fix the code to restart it
100%
Console
Console
- On line 19 write the start of the
<?php if ($item['type'] === $type): ?>condition. - On line 34 write the end of the condition
<?php endif; ?>. - Instead of the
othercategory writelightingin the address bar. Make sure that the page displays products from this category. - Now click on the “Furniture” category on the catalog page. Only products that belong to this category should be displayed on the page.
Comments