Is it possible to do this? jQuery cart

Question

Alright this is what I'm wondering. I have a page with products, it's just product name + a checkbox. Is it possible to display: none; pre-written code that applies to the cart if the user checks the checkbox? Let's say this user wants a Basic standby overlay and he checks the checkbox, this code gets added to the cart and it applies to the total price. I.E like this.

I got a jsFiddle here with the full page or you can check the live version here.

<table cellspacing="2" cellpadding="0" border="0" width="320">
  <tr>
    <td width="170" valign="top" align="left">
      <div class="product_name">Basic standby overlay</div>
    </td>
    <td width="30" valign="top" align="center">
      <input type="text" class="quantity" value="1" maxlength="2" />
    </td>
    <td width="70" valign="top" align="center">
      <div class="product_total_cost price" data-val="10">10 €</div>
    </td>
    <td width="9" valign="top" align="right">
      <div class="remove_product">X</div>
    </td>
  </tr>
</table>

<tr>
  <td width="250">1x Basic standby overlay:</td>
  <td width="15" align="left"><input class="test" type="checkbox" name="basic_standby" value="0" data-val="10" /></td>
</tr>

Also, this is not the same issue with the previous question this is a new question I'm wondering.

No, I'm trying to make a cart system. If you check the check box that specific item gets added to the cart on the right and the price of that item applies to the total price. @Dagon — Tweath, Aug 12 '14 at 22:03
well that makes sense (and is doable) but the `display: none;` bit is confusing. — , Aug 12 '14 at 22:05
Well I'm trying to figure it out how to make it work. It isn't going well tho, need a push or something. @Dagon — Tweath, Aug 12 '14 at 22:14

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

Break this down into two simpler problems...

Firstly, detect when a checkbox has been changed and use the events to maintain a list of checked items.

Then, any time the list of checked items changes, rebuild the side panel entirely. Output a row (or div) for each item in the list and total up the prices as you go so you can output a total row.

This way, you don't need to worry about dynamically adding/hiding/showing rows.

Sample code (untested):

Full code Fiddle

$('input[type=checkbox]').click(function () {
    var checked = [];
    // Get a list of all currently checked items
    $('input[type=checkbox]').each(function () {
        if ($(this).is(":checked")) {
            checked.push($(this).attr('name'));
        }
    });
    buildCart(checked);
});

function buildCart(checked) {
    // This one just builds the sidebar on demand. Quite useful if cart contents can be
    // updated many ways (eg in another tab).

    $("#cart_items").empty();
    //For each checked item, add a sidebar element
    for (var i = 0; i < checked.length; i++) {
        //build cart item as appropriate.
        var newItem = $("<div>");

        /*Messy code to extract values from html and build element*/

        $("#cart_items").append(newItem);

    }
}

edited May 23 '17 at 10:33

Community

1
1

answered Aug 12 '14 at 22:26

Basic

26,321
24
115
201

Right... Fixed some issues with the sample code (still untested). I've given 2 examples of how to do it. Obviously, as you're iterating through in either version, you can read the data value for the price and total it up. I personally prefer the 2nd version as it is much less tightly coupled with the html. – Basic Aug 12 '14 at 22:57
I've made it work kind of http://jsfiddle.net/mpcL2fcr/ but if you uncheck the box and check it again the same item gets added to the cart also the price isn't showing up either, even if you adjust the quantity. – Tweath Aug 12 '14 at 22:58
The problem you're seeing in the jsfiddle (unticking doesn't remove row) is the reason I build an intermediate list of everything that's checked and then reset the state of the cart, either by hiding everything in the first example and then only showing the checked items, or completely deleting the cart and recreating it correctly every time in the 2nd example – Basic Aug 12 '14 at 23:00
I'm not sure if I added the code correctly, but from what I'm seeing the code did not work, the quantity stopped working. I need coffee.. http://jsfiddle.net/e2p51y8j/ @Basic – Tweath Aug 12 '14 at 23:10
Tested: http://jsfiddle.net/e2p51y8j/5/ Do pay particular attention to the comments as the code you've got at the moment is very hard to read and maintain. – Basic Aug 13 '14 at 00:01
One last clarification... Because the rows are being deleted/recreated every time a checkbox is clicked, you need to store the quantity and restore it. I'll edit the example – Basic Aug 13 '14 at 00:08
Can you point me in to the right directions with the quanitity and the total price? I'm going to take a good look on this situation tomorrow and I will get back to you. @Basic – Tweath Aug 13 '14 at 00:22
1

http://jsfiddle.net/e2p51y8j/7/ is about as far as I'm willing to go into your code. It keeps the quantities and shows you where to do the totals. If you need more help, ask a new question. I'd strongly suggest you try to tidy up the code a bit first. all the best – Basic Aug 13 '14 at 00:41

Is it possible to do this? jQuery cart

1 Answers1