1

Bazaar – php example code – part 9 – cart and other notification icons

|

Article will focus on implementation user cart icon with display of number and total price for items in main menu page. For further visual improvement we use graphical icon with text. Also sell icon with link to sellitem page is added.

Expectation from cart icon display

Cart notification icon is small graphic remainder of number of items added into a cart and actual total price for pay.

Our implementation will offer these functionalities:

  • contain graphic depiction of cart
  • show total number of items in a cart
  • show total price that will be paid for all items in a cart
  • must be includable into a other bazaar pages
  • cart must be visible only for registered and loged in users

Visual implementations of cart icon

Next part provide further depiction of cart icon shown in upper part of logged in user pages.

Cart icon implemented in upper part of cart page (gray block)

Code of the cart icon and including into a page

In a next rows you can look at way how cart icon is implemented in script named cart_icon.php.

<!– *************************************************************** –>
<!– PHP included code for cart icon with number of items displaing      –>
<!– *************************************************************** –>
<!– Vrsion: 1.0        Date: 17. – 18.10.2020 by CDesigner.eu                          –>
<!– *************************************************************** –>
<?php
   $_user_id = $_SESSION[‚users_id‘];
   $_number_of_items_in_cart =“-„;
   $_total_price =“0″;
   /*********************************************************
    * Count mumber of items in cart and total item price
    */
    /* Attempt MySQL server connection. Assuming you are running MySQL
             */
            $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PW, DB_NAME);
            // Check connection
            if($dbc === false){
                die(„ERROR: Could not connect to database – stage of article listing. “ . mysqli_connect_error());
            }
            
                        
            // read all rows (data) from guestbook table in „test“ database
                
            $sql = „SELECT * FROM bazaar_item WHERE cart_number=“.“‚$_user_id'“.“ ORDER BY item_id ASC „;  // read items marked in cart_number with appropriate users_id
            /****************************************************************/
            /*  Output in Table – solution 1 – for debuging data from database    */
            /****************************************************************/
            // if data properly selected 
                        
            if($output = mysqli_query($dbc, $sql)){
                   if(mysqli_num_rows($output) > 0){  // if any record obtained from SELECT query
                    // create table output
                    
                    $_total_price = 0; // initialize cariable calculating total price for items in cart
                    $_number_of_items_in_cart =0;
                    while($row = mysqli_fetch_array($output)){ //next rows outputed in while loop
                        
                            $_total_price += $row[‚price_eur‘];
                            $_number_of_items_in_cart += 1;

              

                    }
                    
                    // Free result set
                    mysqli_free_result($output);
                } else {
                    echo „“; // if no records in table
                }
            } else {
                echo „ERROR: Could not able to execute $sql. “ . mysqli_error($dbc); // if database query problem
            }
            // Close connection
            mysqli_close($dbc); 
   //debug
   echo ‚&nbsp;  &nbsp; &nbsp; &nbsp;  <span class=“cart“> <a class=“navbar-brand“ href=“cart.php“> <img id=“cart“ src=“./images/small_cart.png“ alt=“cart small icon“ width=“35″ height=“35″><strong>(‚ .$_number_of_items_in_cart .‘)  ‚ .$_total_price .‘ €</strong></a> </span>‘;
   // add some space with &nbsp;
?>

Our code obtain users_id of currently logged in user from session variable, then go through all rows in bazaar_item table that are marked by users_id (they are added into a cart). If current row id marked by users_id of currently logged user then increment number of items and accumulate price of items by price of that item.

In next part of code snippet is cart_icon.php included in headermenu.php and header menu is included (required_once) in all pages that in some way implement menu. In this way we created decomposition and make our code much more modular.

<!– **************************************************************** –>
<!– PHP header menu  of bazaar for including                                               –>
<!– **************************************************************** –>
<!– Vrsion: 1.0        Date: 22. – 22.11.2020 by CDesigner.eu                            –>
<!– **************************************************************** –>
<?php
   // generate menu if user is loged in or not
         // old solution with cookies if(isset($_COOKIE[‚username‘])) { // loged in user
            require_once(‚headerlogo.php‘);
            
            if(isset($_SESSION[‚username‘])) { // loged in user
                 
                echo ‚<div id=“menu“>‘;
                echo ‚<a class=“navbar-brand“ href=“index.php“><img width=“150″ src=“./images/bazaarheader.png“> Bazaar – best items for a best prices!</a>‘;
                echo ‚<a class=“navbar-brand“ href=“editprofile.php“><img id=“menuimage“ src=“./images/menu_profile.png“> Edit profile </a>‘;
                                
                if(isset($_SESSION[‚user_role‘])==’admin‘) { // if loged user is admin role
                   echo ‚<a class=“navbar-brand“ href=“admin.php“><img id=“menuimage“ src=“./images/menu_admin.png“> Manage your page </a>‘;
               };
               echo ‚<a class=“navbar-brand“ href=“logout.php“><img id=“menuimage“ src=“./images/menu_logout.png“> Logout <b><span id=“username“>‘ .$_SESSION[‚username‘] .'</span></b></a>‘;
               echo ‚</div >‘;
               require_once(‚sell_icon.php‘); // graphic menu item for selling your items
               echo ‚<a class=“navbar-brand“ href=“rss.php“><img src=“./images/rss.png“ width=“45″></a>‘; //rss feed link
               require_once(‚cart_icon.php‘); // small cart icon in menu
               
              } else { // visitor without login
               echo ‚<div id=“menu“>‘;
               echo ‚<a class=“navbar-brand“ href=“login.php“><img id=“menuimage“ src=“./images/menu_login.png“> Log In </a>‘;
               echo ‚<a class=“navbar-brand“ href=“signup.php“><img id=“menuimage“ src=“./images/menu_signup.png“> Sign Up for better membership! </a>‘;
   
               echo ‚<a class=“navbar-brand“ href=“index.php“><img width=“150″ src=“./images/bazaarheader.png“> Bazaar – best items for a best prices!</a>‘;
               echo ‚</div >‘;
             };
             
?>

And final way how headermenu.php is called in our bazaar pages

… code omitted …
<body>
    <nav class=“navbar „>
      <div id=“header_container_1060″>
        <div class=“navbar-header“>   
        <?php 
           require_once(‚headermenu.php‚); // including menu items
        ?>   
         
        </div>
      </div>
    </nav>
    <div class=“container“ id=“container_1060″> 
… code omitted …

Conclusion

Cart_icon.php fulfill our expectation for good way how to constantly inform our customer about all items added to buy. Problem decomposition by implementing them into a headermenu.php and text to all pages is solution for further code maintainability.

Full code of bazaar app can be obtained from github here.