John Davidson

Message:

Amateur web dev here working on some old legacy web app for a client.

A customer has a curated list of items they can order, and instead of an "add to cart", there is simply an input field you type a valid number into. As soon as you click off of the input field, it updates.

'<input type="number" class="quantity form-control" name="material'.$material->id.'" id="material'.$material->id.'" value="'.$value.'" />'

Could I please get some guidance or wisdom on some keywords to search for to find where this web app is detecting input field changes, checks if they are valid, and automatically adds it to the cart without refreshing the page?

I can't for the life of me find where it is happening.

What's throwing me off even more is this Twig add-on template engine that I'm not really familiar with.

It's a case where I am simply not knowledgeable enough to understand how all of these elements are communicating with each other.

If anyone needs more to post up more code, I'll gladly do it.

I figured I'd ask on here incase this question could be helpful for anyone in the future.

Thanks!

        var materialbox = $(this).closest(".material");

        var field = $(".form-control",materialbox);

        var summaryContainer = $("#summaryContainer");

        var summaryList = $(".summary-list",summaryContainer);

        var materialid = field.attr("name");

        var summaryElement = $("#summary_"+materialid);



        // Select elements.

        var theValue = ensureNumber(field);



        // Create or update the Summary.

        if ( theValue > 0 ) {

            // Show summary.

            summaryContainer.not(":visible").show();

            $("button", summaryContainer).prop("disabled", false);



            // Append item to cart.

            if ( summaryElement.length == 0 ) {

                var deleteButton = '<button type="button" class="btn btn-default btn-sm" title="Remove item from cart" onclick="removeCartItem(\'' + materialid + '\')"><span class="glyphicon glyphicon-trash"></span></button>';

                var description = deleteButton + ' ' + $(".description", materialbox).html() + " -- " + $(".matcode",materialbox).text();

                summaryElement = $(".list-group-item:first-child", summaryList).clone()

                    .append(description)

                    .attr("id", "summary_" + materialid)

                    .hide()

                    .appendTo(summaryList)

                    .show(500, function(){

                        $("#cartcontainer").affix('checkPosition');

                    })

                    .find('.quantity')

                    .text(theValue);

            } else {

                summaryElement.not(":visible").show(500);

                $(".quantity",summaryElement).text(theValue);

            }

        } else if ( summaryElement.length > 0 ) {

            // Remove existing summary because it's no longer needed.

            summaryElement.hide(500, function() {

                if ( $(this).siblings().filter(":visible").length == 0 ) {

                    summaryContainer.hide();

                }

            });

        }

Edit: Added js code above that may be the event listener Jan was speaking of.

---

My Answer:
Add to Cart button, they want the shopping cart to update automatically whenever a user changes the quantity of an item in the input field.

To achieve this, you will need to look for the code that is detecting input changes and updating the shopping cart. Here are some places where you can start looking:

1. **JavaScript**: Look for any JavaScript code that is handling input changes and updating the shopping cart. This could be done using event listeners on the input fields or using AJAX requests to update the cart in the background.

2. **PHP**: If the shopping cart is being updated on the server side, you will need to look for the PHP code that is handling the form submissions or AJAX requests from the client side. This code will likely be updating the cart in the database or session variables.

3. **HTML/TWIG**: Check the HTML or TWIG templates for the input fields that are being used to change the quantity of items in the cart. Look for any data attributes or event handlers that might be triggering the cart update.

Once you have identified the code responsible for detecting input changes and updating the shopping cart, you can modify it to meet the client's requirements. Make sure to test your changes thoroughly to ensure that the cart is updating correctly in response to user input.