API Request

document.addEventListener('DOMContentLoaded', function() {
    /*
        When the checkout button is clicked:
            1. Collect info from all products in the wishlist.
                1.1. data-product-id
                1.2. name
                1.3. regular price (sale price if the product is on sale)
                1.4. quantity
                1.5. thumbnail
            2. Turn the collection into an object.
            3. Convert the object into JSON.
            4. Add JSON object as products to the cart.
    */
    // add-to-cart button
    const chekcout = document.querySelector('.wishlist-footer #wishlist-checkout');

    //Listings
    const w_item_ids = document.querySelectorAll(".wishlist-item");
    const w_item_images = document.querySelectorAll(".wishlist-item-image");
    const w_item_names = document.querySelectorAll(".wishlist-item-link .wishlist-item-title");
    const w_item_prices = document.querySelectorAll(".wishlist-item-price-container #wishlist-item-price");
    const w_item_qties = document.querySelectorAll(".wishlist-item-price-container #wishlist-item-quantity");

    if (chekcout) {
        chekcout.addEventListener('click', function() {

            // ***Get product information***
            for (let i = 0; i < w_item_ids.length; i++) {
                const w_item_ID = w_item_ids[i].getAttribute("data-product-id");
                const w_item_name = w_item_names[i].textContent.trim();
                const w_item_price = w_item_prices[i].textContent.trim();
                const w_item_qty = w_item_qties[i].textContent.trim();

                const wishlist_product = {
                    _id: w_item_ID,
                    _name: w_item_name,
                    _price: w_item_price,
                    _quantity: w_item_qty
                }

                let listing =
                    {
                        "path": "/wc/store/v1/cart/add-item",
                        "method": "POST",
                        "cache": "no-store",
                        "body": {
                            "id": wishlist_product._id,
                            "name": wishlist_product._name,
                            "price": wishlist_product._price,
                            "quantity": wishlist_product._quantity
                        },
                        "headers": {
                            "credentials": "same-origin",
                            "Nonce": `${ajaxInfo.security.security_code}`
                        }
                    };

                    const listings =
                        {
                            "requests": []
                        };

                    listings["requests"] = listing;

                    const data = JSON.stringify(listings);

                    // ***Send the data to the server using Fetch API***

                    // Request Headers
                    const infoHeaders = new Headers();
                        infoHeaders.append("Content-Type", "application/json");
                        infoHeaders.append("X-WP-Nonce", ajaxInfo.security.security_code);

                    // Request Body
                    const infoRequest = new Request(
                    ajaxInfo.root_url + "/wp-json/wc/store/batch/v1" , {
                        method: "POST",
                        headers: infoHeaders,
                        credentials: "same-origin",
                        body: JSON.stringify({
                            action: ajaxInfo.action_url,
                            listing: listings,
                            security: ajaxInfo.security.security_code
                        })
                    });

                    // Send Request
                    fetch(infoRequest)
                    .then(response => {
                        if (response.ok) {
                            return response.json();
                        } else {
                            throw new Error('Network response was not ok');
                        }
                    })
                    .then(data => {
                        console.log("Raw response text:", decodeURIComponent(data));
                        alert("Data saved and sent successfully:", data);
                    })
                    .catch(error => {
                        alert("Failed to send data: " + error.message);
                    });
            }
        });
    }
});