HTML Academy
Using arithmetic operators in PHP
Conditions in PHP4/15
Back to the list of tasks
  • 1. Change the value of the variable
  • 2. The if condition in PHP
  • 3. Using arithmetic operators in PHP
  • 4. Add the price to the product page
  • 5. Embedding the condition if in the template
  • 6. Using the logical values true and false
  • 7. Using the gate OR in PHP
  • 8. String concatenation in PHP
  • 9. Embedding a variable in a template
  • 10. Check several conditions
  • 11. Using the gate AND in PHP
  • 12. Introduction to else
  • 13. Add the delivery cost to the template
  • 14. Substitute values from the database with variables
  • 15. Summary of “Conditions in PHP”
Embedding the condition if in the template
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Add the price to the product page

Now the script contains two variables: $price_with_discount and $price, which store the old and new prices. To see this data on the product page, you need to embed it in the template. We already know how to do this.

Our web designers just finished the template and added code samples to display the new and old prices.

Replace the static prices in the page markup with the required variables, then change the value of the price and discount in the script to see how the prices change on the page.

We will use shorthand notation:

<p class="price-old"><i>Price </i>$<?= $price ?></p>
<p class="price-new"><i>New price </i>$<?= $price_with_discount ?></p>

For more information on how to add variables to a template, see the chapter “Introduction to PHP”. We have already learned about shorthand notation in one of the previous assignments.

Comments

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 = 1000; $discount = 700; if ($discount > 0) { $price_with_discount = $price - $discount; } 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>$10000</p> <p class="price-new"><i>New price </i>$5000</p> </div> </div> </div> </section>
    <section class="container-inner"> <div class="container"> <h1 class="page-heading">Product catalog</h1> <ul class="items-list"> <li> <a class="item-card" href="product.php?product_id=1"> <h3 class="item-card-heading">Mseyulida</h3> <p class="item-card-description">floor lamp</p> <span class="price">$288</span> <img src="img/item-mseyulida.jpg" width="156" height="120" alt="&quot;Mseyulida&quot; floor lamp"> </a> </li> <li> <a class="item-card" href="product.php?product_id=2"> <h3 class="item-card-heading">Rmaeribi</h3> <p class="item-card-description">three-seat sofa</p> <span class="price">$5870</span> <img src="img/item-rmaeribi.jpg" width="156" height="120" alt="&quot;Rmaeribi&quot; three-seat sofa"> </a> </li> <li> <a class="item-card" href="product.php?product_id=3"> <h3 class="item-card-heading">Bletub</h3> <p class="item-card-description">ceiling chandelier</p> <span class="price">$1360</span> <img src="img/item-bletub.jpg" width="156" height="120" alt="&quot;Bletub&quot; ceiling chandelier"> </a> </li> <li> <a class="item-card" href="product.php?product_id=4"> <h3 class="item-card-heading">Nnulm</h3> <p class="item-card-description">desk</p> <span class="price">$6832</span> <img src="img/item-nnulm.jpg" width="156" height="120" alt="&quot;Nnulm&quot; computer desk"> </a> </li> <li> <a class="item-card" href="product.php?product_id=5"> <h3 class="item-card-heading">Asusmer</h3> <p class="item-card-description">hanging bed</p> <span class="price">$19320</span> <img src="img/item-asusmer.jpg" width="156" height="120" alt="&quot;Asusmer&quot; hanging bed"> </a> </li> <li> <a class="item-card" href="product.php?product_id=6"> <h3 class="item-card-heading">Tre</h3> <p class="item-card-description">furniture set</p> <span class="price">$32560</span> <img src="img/item-tre.jpg" width="156" height="120" alt="&quot;Tre&quot; furniture set"> </a> </li> </ul> </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'); }

    What didn’t you like in this task?

    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
      Goalscompleted
      1. On line 9, change 10000 to <?= $price ?>.
      2. On line 10, change 5000 to the variable $price_with_discount. Remember to wrap the variable in PHP tags.
      3. Go to the product.php tab in the editor.
      4. Change the value of the variable $discount to 100 and the value of $price to 2000. Look at how the prices change on the product page.

      Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

      VISAMastercard

      Log in

      or

      Forgot your password?

      Sign up

      Sign up

      or
      Log in

      Restore access

      Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

      Forgot to connect your email to the profile? Email us and we’ll help.