Solved

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

Posted on 2016-11-21
4
129 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 110

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article discusses four methods for overlaying images in a container on a web page
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

688 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