Repeating HTML element with php variables passed to a function in PHP

Question

I am trying to create a simple products catalog website I want to display cards for each product. I am trying to show cards through a PHP template variable and pass name, img src, price etc as parameters to the function that prints the card.

Here is my index.php code:

<?php
require('./php/product_card.php');
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- index.css link ref -->
    <link rel="stylesheet" href="css/index.css">
    <!-- Bootstrap Link Tag -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <!-- FontAwesome Link Tag -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/brands.min.css" integrity="sha512-AMDXrE+qaoUHsd0DXQJr5dL4m5xmpkGLxXZQik2TvR2VCVKT/XRPQ4e/LTnwl84mCv+eFm92UG6ErWDtGM/Q5Q==" crossorigin="anonymous" />
    <title>Emmaarz</title>
</head>

<body>
    <div class="container">
        <div class="row text-center py-6 mt-5">
            <?php
                product_card("Bed Cover 1", "img_bc/1.jpeg", "Product Description in less than 100 characters (optional)", "399", "299");
                product_card("Bed Cover 2", "img_bc/2.jpeg", "Product Description in less than 100 characters (optional)", "599", "399");
            ?>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

</html>

And here is the product_card.php code:

<?php

function product_card($prod_name, $prod_img, $prod_desc, $prod_price, $prod_price_disc) {
    $prod_card = '
    <div class="col-md-3 col-sm-6 my-3 my-md-1">
        <form action="index.php" method="get">
            <div class="card">
                <div>
                    <img src="$prod_img" alt="error" class=" img-fluid card-img-top">
                </div>
                <div class="card-body">
                    <h5 class="card-title">
                    $prod_name
                    </h5>
                <p class="card-text">
                    $prod_desc
                </p>
                <h5><s class="text-secondary">$prod_price_disc</s><span class="mx-2"></span><span class="price">$prod_price</span></h5>
                </div>
            </div>
        </form>
    </div>
    
    ';
    echo $prod_card;
}
?>

When I just echo $prod_name; It shows the name of the product that I pass however it doesn't work in the $prod_card variable. What seems to be the issue? How can achieve this?

Thank You :)

Chilarai · Accepted Answer · 2020-08-08T17:46:03.887

There you go. Your variables were treated as normal text characters. You need to append the PHP variables inside HTML string

<?php

function product_card($prod_name, $prod_img, $prod_desc, $prod_price, $prod_price_disc) {
    $prod_card = '
    <div class="col-md-3 col-sm-6 my-3 my-md-1">
        <form action="index.php" method="get">
            <div class="card">
                <div>
                    <img src="$prod_img" alt="error" class=" img-fluid card-img-top">
                </div>
                <div class="card-body">
                    <h5 class="card-title">'.
                    $prod_name.'
                    </h5>
                <p class="card-text">'.
                    $prod_desc.'
                </p>
                <h5><s class="text-secondary">'.$prod_price_disc.'</s><span class="mx-2"></span><span class="price">'.$prod_price.'</span></h5>
                </div>
            </div>
        </form>
    </div>
    
    ';
    echo $prod_card;
}
?>

score 0 · Answer 2 · answered Aug 08 '20 at 17:37

0

You must concatenate strings an variabiles like this Echo 'fix string'.$var; In your case before every var $prod_img, $prod_name close with ' and add .

In your case <img src="'.$prod_img.'" And so on

answered Aug 08 '20 at 17:37

user11113880

63
7

score -1 · Answer 3 · answered Aug 08 '20 at 17:30

<div class="col-md-3 col-sm-6 my-3 my-md-1">
    <form action="index.php" method="get">
        <div class="card">
            <div>
                <img src="$prod_img" alt="error" class=" img-fluid card-img-top">
            </div>
            <div class="card-body">
                <h5 class="card-title">'. 
                $prod_name.' 
                </h5>
            <p class="card-text">'. 
                $prod_desc.' 
            </p>
            <h5><s class="text-secondary">$prod_price_disc</s><span class="mx-2"></span><span class="price">$prod_price</span></h5>
            </div>
        </div>
    </form>
</div>

Maybe? I am Not sure but

Repeating HTML element with php variables passed to a function in PHP

3 Answers3