Solved

Adding checkmark icon to product added in cart using PHP/Jquery

Posted on 2016-11-21
4
40 Views
Last Modified: 2016-11-22
I am trying to add a checkmark to the products that have been added to cart. I am using ajax to return. But i know i am doing wrong. I got a bit lost. I made with php first,and it works,but only displays when i refresh the page. My php code...

    if(isset($_SESSION['product'][$id])){
    $added='<a href="" class="badge-corner" product_id="'.$id.'" >
    <span class="fa fa-check"></span></a>';
    }else{
    $added='';
    }

Open in new window


I want to use ajax to display the checkmark.

img
This is where i get my product id and store them to session. My add to cart function and item counter code..(cart_function.php)
<?php header('Content-Type: application/json');

session_start();
 if (isset($_GET['action'])) {

  $action = $_GET['action'];
  $prod   = $_GET['prod_id'];
  $result="";

  switch ($action) {

    case 'add':
        $result = add_prod($prod);
    break;

    default:
        $result = ['result'=>'error'];
    break;
  }



}
// Calculate subtotal here
$result['totals'] = new stdClass;
$total_in_cart=count($_SESSION['product']);  
$_SESSION['products']=$total_in_cart;
if(isset($_SESSION['product'][$prod])){
$added='<a href="" class="badge-corner" product_id="'.$prod.'"  ><span class="fa fa-check"></span></a>';
}else{
    $added='';
}

$result['added'] = $added;
$result['items'] =  $total_in_cart; 

 echo json_encode($result);

function add_prod($prod){
  //add function
$_SESSION['product'][$prod] = 1;
$_SESSION['products']++;

return ['result'=>'success'];
}



?>

Open in new window


And this is the script in my gallery...
$('.actions').click(function(e){ 
  e.preventDefault(e);
  var action = $(this).attr('data-action'); //gets button id
  var id = $(this).attr('product_id');
  console.log("triggered action " + action + " for product " + id); 

  $.ajax({
  url: 'cart_functions2.php',
  type : 'GET',
  data: {action:action,prod_id:id},
  dataType: 'json'

}).done(function(data) {
    console.log("ajax call returned the following: " + JSON.stringify(data));

  if (data.result == "success") {

$("#items").html(data.items);
$(".show").html(data.added) + id;
//some debugging script

Open in new window


i am trying to display in here

<div class="show">'.$added.'</div>

Open in new window

When i click add product, all my products gets checked at once. Why? Please help me.
0
Comment
Question by:James Allan
  • 2
4 Comments
 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 250 total points
ID: 41896451
Suggest you isolate an example that is a little more succinct -- it will help us find the important moving parts.

In the instant case, I believe that the use of the class= attribute may be part of the issue.  Classes do not need to be unique, but id= attributes need to be unique.  So if you only want one of the elements to change, you might want to identify it with an id instead of a class.  in jQuery the class indicator is the dot (like ".item") and the id indicator is the hashtag (like "#item").

If the page is organized correctly, you may be able to use the first() selector.
https://api.jquery.com/first-selector/
0
 
LVL 30

Accepted Solution

by:
Marco Gasi earned 250 total points
ID: 41896548
I suppose your markup for
<div class="show">'.$added.'</div>

Open in new window

be dinamically built. IMHO, you've just to add to each div wiith class 'show' the id attribute set to the id of the product; something like:
<div class="show" id="show_' . $id . '">'.$added.'</div>

Open in new window

Then, when you click 'Add to cart' button, you can use the data returned:
$("#show_" + id).html(data.added) + id;

Open in new window


Personally, I prefer to use something different for these tasks. I would place the markup for the checkmark in each product setting its display property to none. Then, when user add the product to the cart, you just need to get the success result to add class 'visible'.
Somwthing like this:
<div class="show" id="show_' . $id . '"><a href="" id="badge_' . $prod . '" class="badge-corner" product_id="'.$prod.'"  ><span class="fa fa-check"></span></a></div>

Open in new window

In the css
.badge-corner{
    display: none;
    /*other styles*/
}
.badge-visible{
    display: block;
}

Open in new window


In jquery:
$('.actions').click(function(e){ 
  e.preventDefault(e);
  var action = $(this).attr('data-action'); //gets button id
  var id = $(this).attr('product_id');
  console.log("triggered action " + action + " for product " + id); 

  $.ajax({
  url: 'cart_functions2.php',
  type : 'GET',
  data: {action:action,prod_id:id},
  dataType: 'json'

}).done(function(data) {
    console.log("ajax call returned the following: " + JSON.stringify(data));

  if (data.result == "success") {

$("#items").html(data.items);
$("#badge" + id).addClass('badge-visible');
//some debugging script

Open in new window

1
 
LVL 1

Author Comment

by:James Allan
ID: 41897270
Both solution did work, thx for helping, i was almost close but got stuck with all products being selected.
You guys are the best o/
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 41897278
You're welcome!
1

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now