Dynamic Products Section

[PoroUsedSnax]

Hi All,

I'm currently designing a website for my business and would like to have a system that pulls products from my database via PHP and adds them to my products section, but I'm unable to find anything that explains how to do it for the kind of setup I have.

I'm using Material Design Bootstrap and have my products section set up as so http://www.codeply.com/go/Jahfr26KUQ. I've searched around enough that I have a good idea of how I would do this if I wanted all my products viewable without a tab/page system, but I cannot find any tutorials that explain how I would make something dynamic over multiple tabs/pages (a system like amazon/ebay/other large ecommerce sites use where their products span multiple pages).

If someone could provide an example or explaination as to how I would create a dynamic system for this kind of setup that would be greatly appreciated

perhaps if you included a screenshot of a mockup explaining how you expect it to work.

[PoroUsedSnax]

Basically I want my products section to have pagination, with only 6 products on each page displayed on a card: https://gyazo.com/57ca8ef6498874fc5221c6a88255abc5, I have my pagination set up using a tab system from MDB/bootstrap (so that it doesn't actually require multiple pages) What I would like the system to be able to do is pull my products from my database, and be able to put them into the product cards and then put them cards onto my pagination system, with only 6 cards per page, so after every 6 cards it would add a page, here is a picture to show how it would be set up: https://gyazo.com/24c0c887ed23fecc13e2a443cfa686e8.

Hopefully that explains it a bit better.

Ok, that's fine. Have a look at my tutorial for pagination: https://www.daniweb.com/programming/web-development/tutorials/499320/common-issues-with-mysql-and-php item #6

Anyhow, the key here is using the LIMIT clause of the SQL statement.

LIMIT x, y

x denotes the start record (or "offset") and y denotes the number of records from the offset. So having a dynamic query or preferably a prepared statement (mysqli or PDO) would do the job:

$start = isset($_GET['page']) ? intval($_GET['page']) : 1; //get offset - if not passed in url, then start from 1
$ppp = 6; //products per page

$stmt = $pdo->prepare("SELECT `title`, `img`, `price` FROM `products` ORDER BY `id` DESC LIMIT ?,?");
$stmt->bindParam(1, $start, PDO::PARAM_INT);
$stmt->bindParam(2, $ppp, PDO::PARAM_INT);
$stmt->execute();

You most likely have a card template file or html snippet. Simply set up a loop (foreach or while, whatever) and inject the data into your placeholders.

Then include your paginator.

From the MDB site ( http://mdbootstrap.com/mdb3/sets/e-commerce/ ), I got this:
[Not sure if it's what you're using]...

<div class="card card-product hoverable">
                    <!--Wish list and social share buttons-->
                    <ul class="text-right extra-buttons">
                        <li><a class="btn-floating btn-small waves-effect waves-light blue darken-4 top-btn" data-toggle="tooltip" data-placement="left" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a></li>
                        <li><a class="btn-floating btn-small waves-effect waves-light blue darken-4 top-btn activator" data-toggle="tooltip" data-placement="left" data-original-title="Share"><i class="material-icons">share</i></a></li>
                    </ul>
                    <!--/.Wish list and social share buttons-->

                <!--Image-->
                <div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
                    <!--Discount label-->
                    <h5 class="card-label"> <span class="label rgba-red-strong">-20%</span></h5>
                    <a href=""><img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-card.jpg">
                        <div class="mask"> </div>
                    </a>
                </div>
                <!--/.Image-->

                <!--Rating-->
                <a class="btn blue darken-4 btn-sm waves-effect waves-light rating">
                    <i class="material-icons">star</i>
                    <i class="material-icons">star</i>
                    <i class="material-icons">star</i>
                    <i class="material-icons">star</i>
                    <i class="material-icons">star_border</i>
                </a>
                <!--/.Rating-->

                <!--Card content: Name and price-->
                <div class="card-content text-center">
                    <div class="row">
                        <a href=""><h5 class="product-title">Product name</h5></a>
                    </div>
                    <div class="price">
                        <p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
                    </div>
                </div>
                <!--/.Card content: Name and price-->

                <!--Buttons-->
                <div class="card-btn text-center">
                    <a href="#" class="btn btn-primary btn-sm waves-effect waves-light">Buy now</a>
                    <a href="#" class="btn btn-default btn-sm waves-effect waves-light" data-toggle="modal" data-target="#quick-look">Quick look</a>
                </div>
                <!--/.Buttons-->

                <!--Social buttons-->
                <div class="card-reveal text-center">
                    <span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
                    <hr>
                    <a class="btn-sm fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
                    <a class="btn-sm tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
                    <a class="btn-sm gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
                    <a class="btn-sm li-bg rectangle waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
                    <a class="btn-sm ins-bg rectangle waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
                    <a class="btn-sm pin-bg rectangle waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
                    <a class="btn-sm yt-bg rectangle waves-effect waves-light"><i class="fa fa-youtube"> </i></a>
                    <a class="btn-sm git-bg rectangle waves-effect waves-light"><i class="fa fa-github"> </i></a>
                    <a class="btn-sm email-bg rectangle waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
                </div>
                <!--/.Social buttons-->

            </div>

Some of the above may have been js generated, I don't know, but you may be able to use this as a template, unless there is a js shortcut for creating one.

[PoroUsedSnax]

Thanks for your help so far, I do already have templates for everything, the screenshots I provided were taken from the site I'm currently developing, I was looking for guidence torwards making the PHP work for the plan I explained above, as I'm still a novice in PHP, I will have a crack with the help you've provided and see what I can conjour up.

Just to check, will your solution work for only using a single page? At the moment I'm trying to go for a one page setup, so I'm using a tabbed system so that I get the pagination setup, but it allows me to run it all from one page, this is where I get stuck in regards to coding the PHP, a working example is available here: http://www.codeply.com/go/Jahfr26KUQ (If codeply loads for you that is, I sometimes have trouble with it, I will see what other sites I can use to show a live example and include it in an edit)

UPDATE: Here is better website showing a live example: http://codepen.io/PoroUsedSnax/pen/QpEdZ

codeply doesn't load / codepen doesn't exist

You can run this in a one-page site or multi-page, it make no difference.

[PoroUsedSnax]

Back again, I'm struggling to wrap my head around how I'm going to make this system work using dynamic tabs, once again here is a live example: http://codepen.io/PoroUsedSnax/pen/QpEdZB (It does actually work this time, messed the url up for the last one)

Just to reiterate the functionality I'm looking for: I want to pull my products from my database and put them into cards (which is the part I can do) then I want 6 of these cards to be placed on a page, and a new dynamic page to be added for every 7th card (this is the part I am struggling with) The codepen should hopefully put this into perspective better than I can explain it

Did you read my tutorial (item 6) and try out the LIMIT clause in MySQL as I mentioned in a previous post?

[PoroUsedSnax]

Yes, I've had a read and have tried it out, but that wasn't working for me and I couldn't figure out anything to work with my setup, I'm still fairly new to PHP and PDO so forgive me for my lack of knowledge in the subject

So, break it down to simple steps. Pointless repeating the question - you will get the same answer - so give us the first thing that's causing you issues. We can go from there.

[PoroUsedSnax]

OK, the first thing that's causing me issues is understanding how to write a system in PHP that will be able to create a new panel within the dynamic tabs to add a page to my products section for every 6 products, for reference, here is the base code needed just to create a panel:

<div class="tab-pane fade in show active" id="panel1" role="tabpanel">
        Content here (products)
</div>

To help understand this a bit better maybe, I currently have 28 products, therefore the system would need to make 5 panels to be able to hold them with upto 6 on each panel, also for reference is the page on MDB documenting the panels: https://mdbootstrap.com/components/tabs/

I'm assuming you don't have an MVC setup so you don't have views, nevertheless, you can use the card template in a string and substitute in values for your placeholders. I would suggest using heredoc syntax for this as escaping quotes gets really tedious if you have a large html snippet.

card.php

$card = <<<CARD
<div>
    <div>%s</div>
    <div>£%01.2f</div>
</div>
CARD;

main.php

require "card.php";

//... create PDO object and get resulting PDOStatement $stmt ...

$records = $stmt->fetchAll(PDO::FETCH_ASSOC);

$output = '';
foreach($records as $rec){
    $output .= sprintf($card, $rec['title'], $rec['price']);
}

//then in the appropriate place in your html...

<div class="tab-pane fade in show active" id="panel1" role="tabpanel">
    <?php echo $output;?>
</div>

Something like that.

[PoroUsedSnax]

Great, thanks for your help so far, the other thing that I have an issue with now is having the system create a new one of those panels for every 7th product it needs to put in, then continuing to insert the products from there until it runs out.

Going back the example I laid out earlier, I have 28 products currently, therefore I need 5 panels for it to display all of them with 6 products per panel, and then also the pagination needs to update as it adds a new panel (which I might be able to figure out from your pagination tutorial)

Do not create tabs - use pagination - users will be more comfortable with it (IMO). Anyhow tabs or pagination, makes no difference. The whole point of pagination / tabs is to download a subset of the total number of items - i.e. only the visible ones.
You could then use Ajax to update the product area. So you NEVER use more than ONE empty card template. You get your SIX records (NO MORE THAN THIS) by using the LIMIT clause in MySQL, and loop over the recordset and fill in an empty template each time (see my example where I concatenated the strings in the loop).