dcsimg
Results 1 to 2 of 2

Thread: Best way to keep track of shopping cart count for each item selected?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,922

    Best way to keep track of shopping cart count for each item selected?

    I have a shopping cart that I've developed (nothing elaborate). For each product listed, I've created a "-" and "+" button and a counter field...all three of which are <div> tags. These are created dynamically obviously but where I'm confused is how do I keep track of each separate item count selected. I haven't given the div's ID's rather a class. This is being done using Javascript. Below is my unfinished script.

    Code:
        <script type="text/javascript">
            var cartCount = 0;
            
            function getImages() {
                var folder = "tmp/";
    
                $.ajax({
                    url : folder,
                    success: function (data) {
                        $("artwork").empty();
                        
                        $(data).find("a").attr("href", function (i, val) {
                            
                            if( val.match(/\.(png)$/) ) { 
                                $("body").append( "<div class='art'>" +
                                                     "<div class='container'>" +
                                                          "<a href='" + folder + val + "'><img src='" + folder + val + "' height='300px' width='auto'  alt=" + val + "></a>" +
                                                          "<div class='caption'>This is a test</div>" +
                                                          "<div class='caption' style='height: 35px;'>" + 
                                                              "<div style='width: 108px; margin: auto'>" +
                                                                    "<a href='#'><div id='minus-sign' class='counter' onclick='andOrSubtract('-')'>-</div></a>" +
                                                                    "<div class='digit'>&nbsp;</div>" +
                                                                    "<a href='#'><div id='plus-sign' class='counter' onclick='andOrSubtract('+')'>+</div></a>" +
                                                              "</div>" +
                                                          "</div>" +
                                                     "</div>" +
                                                  "</div>");
                            } 
                        });
                    }
                });
            }
            //
            //
            //
            function addOrsubtract(theSign) {
                var x = theSign;
                
                if (x == '-') {
                    cartCount--;
                }
                else if (x == '+') {
                    cartCount++;
                }
                
                document.getElementById("cartCnt").innerHTML = cartCount;
            }
        </script>
    Thanks,
    Blake

  2. #2
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,177

    Re: Best way to keep track of shopping cart count for each item selected?

    If you don't have a unique identifier tied to the item then you can't.

    If you're willing to pass in 'this' to the element (onclick='andOrSubtract(this, '-')"), you could always work your way up the DOM to find your image and use that as the unique identifier, or alternatively use unobtrusive javascript which would give you the event itself as a parameter.. using an onclick event directly in a href tag is very early 2000s.

    Quick example of an unobtrustive call that uses data attributes to increment each individual count:

    Code:
    <html>
        <head>
            <title>Test</title>
        </head>
        <body>
            <a href="#" class="plus" data-item-id='1234'>Testing1</a><br />
            <a href="#" class="plus" data-item-id='1235'>Testing2</a><br />
            <a href="#" class="plus" data-item-id='1236'>Testing3</a>
    
            <script>
                var counts = {};
    
                function clicked(event) {
                    console.log(event.target);
                    if(counts[event.target.dataset.itemId] == null) {
                        counts[event.target.dataset.itemId] = 0;
                    }
    
                    counts[event.target.dataset.itemId]++;
                    console.log(counts[event.target.dataset.itemId]);
                }
    
                
                var elements = document.getElementsByClassName('plus');
    
                for(var i = 0; i < elements.length; i++) {
                    elements[i].addEventListener('click', clicked);
                }
            </script>
        </body>
    </html>
    Last edited by kfcSmitty; Feb 19th, 2020 at 08:28 AM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width