• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 180
  • Last Modified:

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

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
James Allan
Asked:
James Allan
  • 2
2 Solutions
 
Ray PaseurCommented:
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
 
Marco GasiFreelancerCommented:
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
 
James AllanAuthor Commented:
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
 
Marco GasiFreelancerCommented:
You're welcome!
1

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now