CODEWITHSUNDEEP
javascriptonchangesplice
Mat
Mat

Reputation: 1

Push quantity value to href query string on change event

I need to update an add to cart url every time the user selects an option from 4 select elements and push a quantity value at a specific index that matches an ID. The select elements all contain the same option values and I have to create a combination of those 4 values with quantities.

Every option as a data attribute data-uid that matches a value in the query string.

How can I update the quantity value in the url and increment if the value id is selected more than once?

HTML

<div class="pick-flavor-wrapper">

    <h2>PICK 4 FLAVORS</h2>

    <select class="dropdown_1">
        <option value="none" selected disabled hidden>Select an Option</option>
        <option value="1" data-uid="689992">Thca 1</option>
        <option value="2" data-uid="689994">Thca 2</option>
        <option value="3" data-uid="690667">Thca 3</option>
        <option value="4" data-uid="690669">Thca 4</option>
    </select>
    
    <select class="dropdown_2">
        <option value="none" selected disabled hidden>Select an Option</option>
        <option value="1" data-uid="689992">Thca 1</option>
        <option value="2" data-uid="689994">Thca 2</option>
        <option value="3" data-uid="690667">Thca 3</option>
        <option value="4" data-uid="690669">Thca 4</option>
    </select>
    
    <select class="dropdown_3">
        <option value="none" selected disabled hidden>Select an Option</option>
        <option value="1" data-uid="689992">Thca 1</option>
        <option value="2" data-uid="689994">Thca 2</option>
        <option value="3" data-uid="690667">Thca 3</option>
        <option value="4" data-uid="690669">Thca 4</option>
    </select>
    
    <select class="dropdown_4">
        <option value="none" selected disabled hidden>Select an Option</option>
        <option value="1" data-uid="689992">Thca 1</option>
        <option value="2" data-uid="689994">Thca 2</option>
        <option value="3" data-uid="690667">Thca 3</option>
        <option value="4" data-uid="690669">Thca 4</option>
    </select>

</div>

<a class="add_to_cart_grouped" href="https://example.com/?add-to-cart=689991&quantity[689992]=0&quantity[689994]=0&quantity[690667]=0&quantity[690669]=0">Add to cart</a>

Javascript

    // Get product ID
    document.querySelectorAll("select").forEach(dropdown => {
            let prodID;
        
            dropdown.addEventListener("change", () => {
               let selectedOptionID = dropdown.selectedIndex;
               prodID = dropdown.options[selectedOptionID].dataset.uid;
               updateURL(prodID);
            })
    })
    
    function updateURL(prodID) {
        let href = document.querySelector(".add_to_cart_grouped").getAttribute("href");
        let urlIndex = href.indexOf(prodID);
        let arr = [...href];         
        arr.splice(urlIndex + 8, 1, "1");
        href = arr.join("");
        console.log(href)
    }

I tried writing a function that fires when selecting an option and it updates the url at a specific index using the splice method, but it doesn't save the previous value in the href.

Upvotes: 0

Views: 28

Answers (0)

Related Questions