?
Solved

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

Posted on 2016-11-21
4
Medium Priority
?
163 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 1000 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 1000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

649 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