I’m working on a custom WooCommerce product page where the user can select product variations (like size, color, etc.) and then add the product to the cart. Everything is functioning correctly, including the variation selection and the dynamic price update based on the selected variation.
However, I’ve encountered a problem. When a user selects a variation and clicks the ‘Add to Cart’ button, a fake alert appears, saying “Please select a variation,” even though a valid variation has already been selected. After closing this fake alert, the product is successfully added to the cart, and a success message appears.
I want to prevent this fake alert from showing when the product is added to the cart successfully. How can I modify the event handling to ensure only the success alert is shown, and the fake alert doesn’t appear?
Any help or suggestions are appreciated!
global $product;
// Get the product's default price HTML
$default_price_html = $product->get_price_html();
// Get available variations
$available_variations = $product->get_available_variations();
$product_id = $product->get_id();
echo '<div class="custom-product-price" style="text-align:center;">';
echo '<p id="product-price-' . $product_id . '" style="font-size:18px;font-weight:bold;">Price: ' . $default_price_html . ' </p>';
echo '</div>';
echo '<div class="custom-product-variations" style="text-align:center;">';
$attributes = $product->get_variation_attributes();
foreach ($attributes as $attribute_name => $options) {
echo '<div class="variation-group">';
foreach ($options as $index => $option) {
$input_id = 'attribute_' . sanitize_title($attribute_name) . '_' . $product_id . '_' . $index;
echo '<input type="radio" id="' . $input_id . '" class="variation-option" name="attribute_' . sanitize_title($attribute_name) . '_' . $product_id . '" value="' . esc_attr($option) . '" data-attribute_name="' . sanitize_title($attribute_name) . '" data-product_id="' . $product_id . '">';
echo '<label for="' . $input_id . '">' . esc_html($option) . '</label>';
}
echo '</div>';
}
echo '</div>';
echo '<div class="custom-add-to-cart">';
echo '<button id="add-to-cart-button-' . $product_id . '" disabled>Add to Cart</button>';
echo '</div>';
echo '<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var productID = "' . $product_id . '";
var variationOptions = document.querySelectorAll(".variation-option[data-product_id='" + productID + "']");
var priceElement = document.getElementById("product-price-" + productID);
var addToCartButton = document.getElementById("add-to-cart-button-" + productID);
var selectedVariationId = null;
var availableVariations = ' . json_encode($available_variations, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) . ';
var defaultPriceHtml = ' . json_encode($default_price_html) . ';
// Function to update the price display
function updatePrice(priceHtml) {
priceElement.innerHTML = "Price: " + priceHtml;
}
// Function to find and set the matching variation
function findMatchingVariation(selectedAttributes) {
return availableVariations.find(function (variation) {
return Object.keys(selectedAttributes).every(function (key) {
return variation.attributes[key] === selectedAttributes[key];
});
});
}
// Function to gather selected attributes
function getSelectedAttributes() {
var selectedAttributes = {};
variationOptions.forEach(function (opt) {
if (opt.checked) {
var attrName = "attribute_" + opt.getAttribute("data-attribute_name");
selectedAttributes[attrName] = opt.value;
}
});
return selectedAttributes;
}
// Event listener for option changes
variationOptions.forEach(function (option) {
option.addEventListener("change", function () {
var selectedAttributes = getSelectedAttributes();
// Find matching variation
var matchingVariation = findMatchingVariation(selectedAttributes);
// Update the price and enable the Add to Cart button if a matching variation is found
if (matchingVariation) {
var priceHtml = "<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>" + matchingVariation.display_price.toFixed(2) + "</bdi></span>";
updatePrice(priceHtml);
selectedVariationId = matchingVariation.variation_id;
addToCartButton.disabled = false; // Enable the Add to Cart button
} else {
updatePrice(defaultPriceHtml);
selectedVariationId = null;
addToCartButton.disabled = true; // Disable the Add to Cart button
}
});
});
// Add to Cart button click event
addToCartButton.addEventListener("click", function (event) {
// Before proceeding, check if any variation is selected and valid
if (!selectedVariationId) {
// Stop the function from proceeding and show the appropriate alert
event.preventDefault();
alert("Please select a variation before adding to cart.");
return;
}
// If variation is selected, proceed with the add-to-cart functionality
var formData = new FormData();
formData.append("action", "woocommerce_add_to_cart");
formData.append("product_id", selectedVariationId); // Use the selected variation ID
formData.append("variation_id", selectedVariationId);
formData.append("quantity", 1);
// Include selected attributes in the form data
var selectedAttributes = getSelectedAttributes();
for (var key in selectedAttributes) {
if (selectedAttributes.hasOwnProperty(key)) {
formData.append(key, selectedAttributes[key]);
}
}
fetch("' . admin_url('admin-ajax.php') . '", {
method: "POST",
body: formData,
credentials: "same-origin"
})
.then(function (response) {
return response.json();
})
.then(function (data) {
if (data.error) {
alert("Error adding to cart: " + data.error);
} else {
alert("Product added to cart successfully!");
// Optionally, update the cart count or show a success message
var cartCountElement = document.querySelector(".cart-count");
if (cartCountElement) {
cartCountElement.textContent = data.cart_count;
}
}
})
.catch(function (error) {
alert("There was an error processing your request. Please try again.");
});
});
});
</script>'; ```
