I have been trying to update the cart drawer using my upsell product button. I have added product variant add to cart button in the cart drawer liquid code, which is using ajax cart to add the item to cart drawer but i am not sure what to put in success of the ajax request i am making.
here's my example code, please let me know what should I put in the success so it refreshes the cart drawer contents upon success. website address is: https://sailpak.myshopify.com/
$('#cart-btn-2').click(function(){
addItemToCart2( 41162793713847, 1);
});
function addItemToCart2(variant_id, qty) {
jQuery.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
id: variant_id,
quantity: qty
},
dataType: 'json',
success: // what to put here so cart contents refresh with newly added item
})
}
thanks
Some premium themes have a refresh cart object that you can call to, but most themes don't.
Try to check your theme's script if it has one, if not, then you have to get content from the cart using their API and re-render contents to the DOM.
Related
Display buy now button on product page which redirects to checkout page. Cart is automatically empty. I Want just that product in the checkout cart on which "Buy Now" button is clicked.
function check()
{
console.log("hi");
$( ".dropdown-menu .previewCart .previewCartItem .mini-cart-item-actions .cart-remove" ).each(function() {
console.log("product-id",$(this).attr('data-cart-itemid'));
$.ajax({url: "/cart.php?action=remove&item="+$(this).attr('data-cart-itemid'),async: false, success: function(result){
console.log("success");
}});
});
});
}
It looks like you are calling the URL to remove a product from the cart (/cart.php?action=remove), which would explain why the cart is empty. I'd recommend using the Add-to-Cart URLs documented here:
https://developer.bigcommerce.com/api-docs/cart-and-checkout/add-to-cart-url#add-cart-url_add-specific-sku-cart
For example, this URL will add a specific URL to the cart and redirect to the cart page:
/cart.php?action=add&sku=INSERT-SKU-HERE
Is it possible to simply run the knp paginator with ajax? Is it possible at all and what is the best way to do it ?
Greetings Michael
Not sure if this is best solution, but I did it this way:
$(function(){ $('#dish-select-component-canvas').on('click', "ul.pagination a" , function(e){
$.ajax({
type: "GET",
url: $(this).attr('href'),
})
.done(function( msg ) {
$('#dish-select-component-items').html(msg);
});
e.preventDefault();
});
});
#dish-select-component-canvas is container for page. When somebody click on this canvas on link in ul.pagination (pagination is class used by knpPaginator by default as wrapper for pagination), I take href attribute of that link, and send it with ajax GET request.
Result of that request goes to appropriate div (here to #dish-select-component-items). Of course you must remember to add e.preventDefault() to prevent browser from reloading the page.
Created plugin, which showing form on shopping cart page after submit i am sending value to third party server.
jQuery.ajax({
type: 'POST',
url: 'http://www.yoursitename.com/wp-content/plugin/my-ajax.php',
How can i call woocommerce data on 'my-ajax.php'?
$subtotal = $woocommerce->cart->subtotal;
$shipping = $woocommerce->cart->shipping_total;
$orderTotal = $woocommerce->cart->total;
Above value i want to first call on my.ajax.php and then redirect page to shopping cart with some message etc.
Please help me i am really stuck here.
You'll need to start by using the $woocommerce global! You're on the right track.
function () {
global $woocommerce;
$subtotal = $woocommerce->cart->subtotal;
$shipping = $woocommerce->cart->shipping_total;
$orderTotal = $woocommerce->cart->total;
}
I have opencart. function addToCart() that adds products to cart works normal on normal pages.
I made custom page where I have just button that triggers function addtoCart(). Just normal button..
On normal page(where it works) I get normal response.
Please look at this link of images:
http://imgur.com/7M1AR1B,FKjiU05,9ggmiMR#2
Third image is actually post that works OK, second picture is RESPONSE that works OK.
First picture is empty response which I get in custom page in open cart.
Do you have an idea why is this happening?
I use function addToCart() and use hard variable FOR TEST in that custom page, which means variables are always there to pass. I use hard variables so I don't have to explain how do I pass variables back in code(it works the same, it passes everything in debug). Problem is I get that "empty" response back only on custom made page. Response: [] ...
function addToCart() {
var product_id = 79;
var quantity = 1;
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: 'product_id=' + product_id + '&quantity=' + quantity,
dataType: 'json',
success: function (json) {
$('.success, .warning, .attention, .information, .error').remove();
if (json['redirect']) {
location = json['redirect'];
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart-total').html(json['total']);
$('html, body').animate({
scrollTop: 0
}, 'slow');
}
}
});
}
Possibilities to try
Using HTTPS to NON HTTPS or vice versa
Using www to non www domain or vice versa
Using a domain that isn't the same one as the one you're using to render the page
If none of the above are the issue, you'll need to work out what the exact differences are between the requests, though my guess is it's one of the three possibilities I've listed
The problem was, that I was adding a product without 1 needed attribute, therefore I always got empty response. There is an attribute in opencart where you have to setup to which store your product belongs. If you don't set that attribute if you are programatically adding a product into the store, you will add product, but you won't be able to add it to cart.
i am making a simple site in php. I have a product page and there is a link on product page that says add to wishlist so when a user clicks on that link the product is posted to the server and the page is redirected from the backend. but I want to do it using jquery ajax so that my page is not reloaded. can somebody please provide a snippet of code on how to do that ?
$('#anchorId').click(function(){
$.ajax({
url:"foo",
data : "the query string",
...
...
success: function(result){
// success code.
}
});
return false; // prevents the default behavior of anchor click.
});
The best way to learn jQuery, is to visit the API site. (Which seems to be down at the moment)
The ajax category
Update:
$('body').on('click', 'a.foo', function(){
// What you want here.
return false;
}
This will catch any click on anchors with the foo class under <body> no matter when they were created("runtime" or with the page load) .