Hi!
Last week, I started to develop a new block from scratch that adds to cart products under a chosen Category.
Started developing using Gutenberg blocks, and everything is fine. Everything is compiling under every save, did the edit.js, the render.php to build the frontend, and now I’m testing the add-to-cart process.
At the end of my render.php made a script that listens a specific click on a button class and then fires everything using a custom ajax add to cart.
Render.php
<script>
jQuery(document).ready(function($) {
$('.carmo-add-to-cart').off('click').on('click', function(e) {
e.preventDefault();var productId = $(this).data('product-id');
var quantity = $(this).closest('tr').find('input[type="number"]').val();
//console.log("ProductID: " + productId + " Quantity: " + quantity);
$.ajax({
url: wc_add_to_cart_params.ajax_url,
method: 'POST',
data: {
action: 'carmo_single_add_to_cart_hook',
product_id: productId,
quantity: quantity,
},
success: function(response) {
console.log(response);
},
error: function(error) {
console.log(error);
}
});
});
});
</script>
Block PHP File
add_action( 'init', 'create_block_carmo_order_form_to_cart_block_init' );// Add a custom Hook
add_action( 'wp_ajax_carmo_single_add_to_cart_hook', 'carmo_add_to_cart_ajax' );
function carmo_add_to_cart_ajax() {
// Get product ID and quantity from AJAX request
$product_id = isset( $_POST['product_id'] ) ? intval( $_POST['product_id'] ) : 0;
$quantity = isset( $_POST['quantity'] ) ? intval( $_POST['quantity'] ) : 1;
// Check if WooCommerce is active
if ( class_exists( 'WooCommerce' ) ) {
// Add product to cart
$cart_added = WC()->cart->add_to_cart( $product_id, $quantity );
// Update mini cart
ob_start();
woocommerce_mini_cart();
$mini_cart = ob_get_clean();
wp_send_json_success( array(
'mini_cart' => $mini_cart,
'message' => 'Product added to cart successfully.'
) );
if ( $cart_added ) {
wp_send_json_success( 'Product added to cart successfully.' );
} else {
wp_send_json_error( 'Failed to add product to cart.');
}
} else {
wp_send_json_error( 'WooCommerce is not active.' );
}
// echo "Id: " . $product_id . " Quantity: " . $quantity;
}
Problem:
Mini cart does not update automatically
Facts:
– Blank WP dev install
– Twenty Twenty-Four theme without any customization
– no plugins besides WooCommerce and my block plugin.
– I can add products without any errors.
– No minicart update.
– Whether I have the //Update mini cart code or not when I add a product the mini-cart updates when I pass the mouse hover. (only in the first add to cart button pressed tho)
– If I refresh the page, the mini cart (and the right flyout cart) gets the right information
Questions:
Is there a new other way to manipulate cart without using php (or its still the thing to do)?
What am I missing?
thanks,