Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Passing the product ID to the function
We created a function that returns the total price, and we called it in the template. As a result, all of the products on the page are again displayed with the same price. So what is the point of the function that we created? In fact, we didn’t waste our time. In order to show the correct price for each product, all that we have left to do is to pass the correct data to the function.
Up until this point, we have manually passed the full price and discount for the product to the function, but we can tell the function itself to fetch them from the database. Use special commands to find out the price and discount for a specific product.
- get_product_price ($id) is the price;
- get_product_discount ($id) is the discount.
We need a product ID for both commands. Indicate that the get_final_price function takes it as an argument. You no longer need any other arguments:
function get_final_price($id) {
...
}The function body tells us the price and discount for the product whose ID we retrieved. Save them as variables:
$price = get_product_price($id);
$discount = get_product_discount($id);The function will still return the difference between $price and $discount, but now their values will be taken from the database, and not from the arguments.
Product IDs are stored in the $order array. By using foreach in the template, we obtain a new ID for each loop iteration.
<?php foreach($order as $id): ?>Call the get_final_price function inside the loop and pass the product ID to it as an argument. The function will be called again with a new ID at each iteration of the loop. As a result, various total prices will be output for various products.
Have you noticed that the use of database commands is very similar to function calls? They are in fact similar. The get_product_price and get_product_discount commands are the most ordinary functions. They have simply been created by other developers.
The variables that are declared inside the function are available only from within this function. And external variables, on the contrary, cannot be seen inside the function. This is called the scope. You can read more about it in the documentation.
Files
<?php
require('products_db.php');
$order = [2, 7, 15, 16];
function get_final_price($price, $discount) {
// Declare a variable here
return $price - $discount;
}
require('components/header.php');
require('components/delivery_info.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.php">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.php">Delivery</a></li>
<li><a href="contacts.html">Contact us</a></li>
</ul>
</nav>
</header>
<section class="order">
<div class="container">
<h1 class="order-title">Delivery order</h1>
<table class="order-list">
<tr>
<th>Photos</th>
<th>Product name</th>
<th>Price</th>
<th>Delivery price</th>
</tr>
<?php foreach($order as $id): ?>
<tr>
<td><img src="<?= get_img_url($id) ?>" width="68" height="52" alt="<?= get_product_title($id) ?>"></td>
<td><?= get_product_title($id) ?></td>
<td><?= get_final_price(1000, 200) ?></td>
<td class="cost"></td>
</tr>
<?php endforeach; ?>
</table>
</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;
}
.cost,
.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-red {
background-color: red;
}
.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 6, change the
$price, $discountarguments to$id. - In the body of the function on line 7, declare a variable
$priceand assign it the valueget_product_price($id). - On the next line, declare a variable
$discountand assign it the valueget_product_discount($id). - In the
components/delivery_info.phpfile on line 15, change1000, 200to$id.
Please note that now all of the products have different prices.
Comments