Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Using the gate OR in PHP
Cool, we learned how to tag new products! Now the developers decided to create another label to designate which goods are “hot.” If a product only has one item left in stock or it has a discount of more than 1400, then the item-hot class must be added to it, and the “hot” label appears on the page.
We currently have several conditions, and we can only execute the action if one or more of them is true. For these situations, we need the logical operator IF. It is called logical because it helps execute operations with logical values.
It is indicated as follows: ||.
For example:
$mark = 3;
$clean = true;
if ($mark > 4 || $clean) {
muffin_log('Mom, please buy me an ice cream!');
// We will ask for an ice cream if we receive an "A" or clean up our room.
}Commands in the condition body will be executed only when one or both conditions in parentheses are true.
Before adding a class to the page markup, let’s see how the OR operator works in practice. Write a condition and output a message about a big discount to the console. In order to store information that the product has only one left in stock, the developers created the variable $is_last.
Files
<?php
require('products_db.php');
require('components/header.php');
$id = $_GET['product_id'];
$title = get_product_title($id);
$img_url = get_img_url($id);
$price = 2000;
$discount = 100;
$is_new = false;
$is_last = false;
if ($discount > 0) {
$price_with_discount = $price - $discount;
}
// Write the condition here
require('components/product_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.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="item">
<div class="container">
<h1 class="item-title"><?= $title ?></h1>
<div class="item-img">
<img src="<?= $img_url ?>" width="510" height="392" alt="<?= $title ?>">
</div>
<div class="item-buy">
<div class="price">
<p class="price-old"><i>Price </i>$<?= $price ?></p>
<?php if ($discount > 0): ?>
<p class="price-new"><i>New price </i>$<?= $price_with_discount ?></p>
<?php endif; ?>
</div>
</div>
</div>
</section>
.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: 150px;
margin-bottom: 20px;
padding: 15px 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;
}
.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: 0;
font-family: "Georgia", "Times", serif;
font-size: 28px;
line-height: 36px;
font-weight: 400;
}
.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;
}
.price {
margin-top: auto;
font-weight: 700;
font-size: 15px;
color: #ff8a00;
}
.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,
.item-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: 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-hot .item-img {
position: relative;
padding-top: 36px;
}
.item-hot .item-img::before {
position: absolute;
content: "";
width: 510px;
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: 122px 10px;
}
.item-hot .item-img::after {
position: absolute;
content: "Buy now before it's too late! The product will soon sell out!";
top: 10px;
left: 140px;
}
.item-buy {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
margin: 20px 0 -10px;
}
.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 25px 10px 0;
word-wrap: break-word;
color: #000000;
font-weight: 400;
}
.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 {
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;
}
.features {
padding-top: 20px;
padding-bottom: 10px;
}
.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;
}
/* Additional styles for the product promotion page */
.violet-tuesday {
margin: 0;
padding: 16px 0 18px;
text-align: center;
color: #ffffff;
background-color: #4626a1;
background-image: url("img/violet-tuesday-bg.png");
background-size: 550px auto;
background-repeat: no-repeat;
background-position: center center;
}
.violet-tuesday b {
display: block;
margin-bottom: 8px;
font-size: 32px;
line-height: 32px;
}
.violet-tuesday p {
margin: 0;
font-size: 15px;
line-height: 18px;
}
.item-violet {
min-height: 240px;
color: #ffffff;
background-color: #6f55d5;
}
.item-violet .container {
position: relative;
padding-top: 20px;
}
.item-violet .container::before {
position: absolute;
content: "";
width: 58px;
height: 34px;
top: -9px;
left: 180px;
background-image: url("img/dots-short.svg");
background-repeat: no-repeat;
opacity: 0.3;
}
.item-violet .container::after {
position: absolute;
content: "";
width: 154px;
height: 42px;
top: 184px;
left: 254px;
background-image: url("img/dots-wide.svg");
background-repeat: no-repeat;
}
.item-violet .item-img {
position: absolute;
margin: 0;
padding-top: 0;
top: 15px;
right: 20px;
color: #000000;
}
.item-violet img {
width: 255px;
height: auto;
}
.item-violet .item-title {
width: 230px;
margin-bottom: 24px;
word-wrap: break-word;
font-size: 36px;
line-height: 44px;
font-weight: 700;
}
.item-violet .item-title::after,
.item-violet .item-img::before,
.item-violet .item-img::after {
content: none;
}
.item-violet.item-new .item-img::after {
position: absolute;
content: "new";
width: 34px;
height: 15px;
top: 8px;
left: auto;
right: -2px;
font-weight: 700;
line-height: 14px;
color: #ffffff;
text-align: center;
background-color: #ff8a00;
border-radius: 4px 0 0 4px;
}
.item-violet .item-buy {
margin-top: 0;
flex-direction: column;
}
.item-violet .price {
width: 230px;
margin-top: 0;
margin-bottom: 12px;
padding-bottom: 4px;
font-size: 24px;
}
.item-violet .price i {
display: none;
}
.item-violet .price-old {
font-size: 18px;
color: #ffffff;
}
.item-violet .price-new {
font-size: 24px;
}
.item-violet p {
margin: 0 10px 12px 0;
min-width: 0;
line-height: 24px;
}
.item-violet .button {
max-width: 177px;
margin-bottom: 40px;
}
.item-violet.item-hot .price {
margin-bottom: 44px;
}
.item-violet.item-hot .price::after {
position: absolute;
content: "The product will soon sell out!";
font-size: 13px;
font-weight: 400;
color: #ffffff;
top: auto;
bottom: -25px;
left: 16px;
}
.item-violet.item-hot .price::before {
position: absolute;
content: "";
width: 11px;
height: 14px;
top: auto;
bottom: -22px;
left: 0;
background-image: url("img/icon-hot.svg");
}
<?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
],
'2' => [
'title' => 'Badeta armchair',
'img_url' => 'img/item-badeta.jpg',
'price' => 3500,
'discount' => 0,
'is_new' => false,
'is_last' => false
],
'3' => [
'title' => 'Blempere stickers',
'img_url' => 'img/item-blempere.jpg',
'price' => 500,
'discount' => 0,
'is_new' => false,
'is_last' => true
],
'4' => [
'title' => 'Bletub chandelier',
'img_url' => 'img/item-bletub.jpg',
'price' => 4000,
'discount' => 0,
'is_new' => true,
'is_last' => true
],
'5' => [
'title' => 'Breirberi organizer',
'img_url' => 'img/item-breirberi.jpg',
'price' => 5000,
'discount' => 3000,
'is_new' => true,
'is_last' => true
],
'6' => [
'title' => 'Mseyulida lamp',
'img_url' => 'img/item-mseyulida.jpg',
'price' => 4000,
'discount' => 500,
'is_new' => true,
'is_last' => false
],
'7' => [
'title' => 'Rmaeribi sofa',
'img_url' => 'img/item-rmaeribi.jpg',
'price' => 15000,
'discount' => 4500,
'is_new' => true,
'is_last' => true
],
'8' => [
'title' => 'Nnulm desk',
'img_url' => 'img/item-nnulm.jpg',
'price' => 5000,
'discount' => 0,
'is_new' => true,
'is_last' => false
],
'9' => [
'title' => 'Tre furniture set',
'img_url' => 'img/item-tre.jpg',
'price' => 20000,
'discount' => 3000,
'is_new' => true,
'is_last' => true
],
'10' => [
'title' => 'Granny style chandelier',
'img_url' => 'img/item-default-old-lamp.jpg',
'price' => 7000,
'discount' => 2000,
'is_new' => false,
'is_last' => true
],
'11' => [
'title' => 'Do lamp',
'img_url' => 'img/item-do.jpg',
'price' => 3500,
'discount' => 500,
'is_new' => true,
'is_last' => false
],
'12' => [
'title' => 'Tueta panel',
'img_url' => 'img/item-tueta.jpg',
'price' => 5000,
'discount' => 20,
'is_new' => true,
'is_last' => true
],
'13' => [
'title' => 'Nmyao pillow',
'img_url' => 'img/item-nmyao.jpg',
'price' => 1500,
'discount' => 0,
'is_new' => false,
'is_last' => false
],
'14' => [
'title' => 'Kel lamp',
'img_url' => 'img/item-kel.jpg',
'price' => 3000,
'discount' => 20,
'is_new' => true,
'is_last' => false
],
'15' => [
'title' => 'Omase pillow',
'img_url' => 'img/item-omase.jpg',
'price' => 2000,
'discount' => 100,
'is_new' => true,
'is_last' => true
],
'16' => [
'title' => 'Ormu basket',
'img_url' => 'img/item-ormu.jpg',
'price' => 2200,
'discount' => 20,
'is_new' => true,
'is_last' => false
],
'17' => [
'title' => 'Pinas paperclips',
'img_url' => 'img/item-pinas.jpg',
'price' => 100,
'discount' => 0,
'is_new' => true,
'is_last' => true
],
'18' => [
'title' => 'Preum compact cassette',
'img_url' => 'img/item-preum.jpg',
'price' => 200,
'discount' => 20,
'is_new' => true,
'is_last' => false
],
'19' => [
'title' => 'Rmob souvenir',
'img_url' => 'img/item-rmob.jpg',
'price' => 1500,
'discount' => 20,
'is_new' => false,
'is_last' => false
],
'20' => [
'title' => 'Tkuoko chandelier',
'img_url' => 'img/item-tkuoko.jpg',
'price' => 2100,
'discount' => 1000,
'is_new' => false,
'is_last' => false
],
'21' => [
'title' => 'Breirberi organizer',
'img_url' => 'img/item-breirberi.jpg',
'price' => 5000,
'discount' => 20,
'is_new' => true,
'is_last' => false
],
'22' => [
'title' => 'Briatuo armchairs',
'img_url' => 'img/item-briatuo.jpg',
'price' => 7000,
'discount' => 5500,
'is_new' => false,
'is_last' => true
]
];
}
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');
}
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
- Write the following condition in the script
product.phpon line 17:if () {}. - Add a condition with the gate OR in parentheses:
$discount > 1400 || $is_last. - In the condition body output the following to the console:
'Buy now before it’s too late!'. - Change the value of the variable
$discountto1500and see what happens in the console.
Comments