Solved

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

Posted on 2016-11-21
4
86 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 109

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 31

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 31

Expert Comment

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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
These days socially coordinated efforts have turned into a critical requirement for enterprises.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

831 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