Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Calculating the shipping cost
We calculated the final cost of each product in the order using the get_final_price function. Now let’s calculate the shipping cost for each product.
We already calculated the cost in a previous chapter. Dumpo copied our old calculations and added them to the script.
// We obtain product data
$price = get_product_price($id);
$discount = get_product_discount($id);
$is_new = get_product_is_new($id);
$final_price = $price - $discount;
// The shipping cost depends on the total price of the product and whether it is a new arrival
if ($is_new && $final_price < 2000) {
$delivery_cost = $final_price;
} else {
$delivery_cost = $final_price / 20;
}Use the function to display the shipping cost for each product in the order on the page. We will do the same thing that we did with the total price.
Create the get_delivery_cost function, which takes the product ID and returns the shipping cost. Move the calculations into the function body, and then call it in the template.
Files
<?php
require('products_db.php');
$order = [2, 7, 15, 16];
function get_final_price($id) {
$price = get_product_price($id);
$discount = get_product_discount($id);
return $price - $discount;
}
$price = get_product_price($id);
$discount = get_product_discount($id);
$is_new = get_product_is_new($id);
$final_price = $price - $discount;
if ($is_new && $final_price < 2000) {
$delivery_cost = $final_price;
} else {
$delivery_cost = $final_price / 20;
}
// Declare a function here
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($id) ?></td>
<td class="cost"><!-- Call the function here --></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 24, declare a function
get_delivery_cost, which takes the$idargument. - Move the code from lines 13–22 to the body of the
get_delivery_costfunction. - Specify that the function returns the shipping cost at the very end of the function body:
$delivery_cost. - Inside the
<td>tag on line 16 of thecomponents/delivery_info.phpfile, call theget_delivery_cost($id)function. Use the shorthand.
Please note how all products now display various shipping costs.
Comments