I am changing a users Shopify shopping cart with Ajax, the cart is being changed successfully but in order to display the updated cart the user has to refresh the page. I want to display the cart changes WITHOUT a refresh.
I'm using the ajax api just fine, and I can add and remove items with:
Shopify.addItem();
Shopify.removeItem();
Those work great, but they require the user to reload the page to see the new/changed items in their cart. Do you know of a way to display the updated cart WITHOUT a page reload?
So everyone has the complete picture, here is my code:
function poll(products) {
$.ajax({
url: "/apps/proxy",
data: {products: products},
type: "GET",
dataType: "json",
complete: setTimeout(function()
{cartAdd(); poll(products)}, 15000),
success: function(data) {
$.each(data, function(incoming_key, incoming_value){
Shopify.getCart(function(cart){
$.each(cart.items, function(cart_key, cart_value){
if(cart_value.variant_id == incoming_value.id_to_remove){
Shopify.addItem(incoming_value.variant_id, incoming_value.quantity);
Shopify.removeItem(incoming_value.id_to_remove);
console.log("some reason the incoming id is null or maybe not " + incoming_value.variant_id );
}
else if(cart_value.variant_id == incoming_value.variant_id && cart_value.quantity != incoming_value.quantity){
Shopify.changeItem(cart_value.variant_id, incoming_value.quantity);
}
});
});
});
},
});
}
Do an ajax call to the cart page /cart, get the required elements and replace them on the current page.
Add the code for the above after the first $.each function.
you can use the shopify ajax cart, after insert or update call the GET action:
using-ajax-api#get-cart
Related
I am a designer and have been asked by a client if I can help them with a certain piece of functionality on their store.
They are only selling one type of product on their store, with different bundle options available. Since customers will only ever be purchasing 1 product at any given time from the store, they have asked me if I can have it so that only 1 product can be in the cart at any given time, and if the customer were to go back from the checkout page (or any other page) and select a different bundle of the product, it would remove the other product from their cart.
I don't have any AJAX cart items (drawers, slideout cart etc) on the site so using AJAX would be an option here. My knowledge of anything other than HTML, CSS and some basic JS is very limited.
With my limited knowledge, I was thinking that running a script that clears the cart when the Homepage is loaded would work well, as there are really only 3 pages on the site, the Homepage, Cart page and Checkout page. This is code that I found, but I am not sure how to implement it or if it would even work at all:
$(document).ready(function() {
$('.clear-cart').on('load',function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: '/cart/clear.js',
success: function(){
alert('I cleared the cart!');
},
dataType: 'json'
});
})
});
Your effort to help out this noob in need would be much appreciated!
you need to check the class of the page like on the default debut theme it uses the class template-index for the index page aka homepage.
and add the condition into the code to check it.
$(document).ready(function() {
$(document).on('load',function(e){
if( !$('body').hasClass('template-index') ){
return;
}
e.preventDefault();
$.ajax({
type: "POST",
url: '/cart/clear.js',
success: function(){
alert('I cleared the cart!');
},
dataType: 'json'
});
})
});
So i am building a search on website, and main search form is on home page where user can input information's like, interests, books, movies.
And that form should submit to another page where search will be displayed.
So it's similar like any other search, but on search page, i should keep parameters in url, so it's not going to be POST, it would be GET.
Home page is something like mywebsite.com
And when form is submitted it's posted with GET parameters so user can keep search results in his url. Submitted post should lead to something like.
mywebsite.com/search?interests=sports&books=harry+potter&movies=moviename
And because it can take some time to search and load results i would like to load the page and than do an ajax post to search function and populate search results once ajax responds.
I've built in past some ajax content loading and post and load data with ajax, but all that while keeping on same page, i never built when you submit content from one page to another in wordpress.
Any suggestions how can i do that and make ajax grab the content ?
I found the answer, and it's actually quite easy, instead triggering ajax with function, for example function with button click.
Just trigger ajax on page load, and don't enqueue script anywhere else except on that page, this would help a bit.
if ( is_page_template('template-search.php') ) {
wp_enqueue_script('ajax_search');
}
This will ensure script is loaded only on that template page, and as for script it self, just load ajax on page ready:
jQuery(document).ready(function($) {
jQuery.ajax({
dataType: 'json',
url: search_flight.ajaxurl,
data: {
action: 'search_flight',
},
beforeSend: function() {
},
success: function(data) {
console.log(data);
},
error: function() {
}
});
});
I have been reading and researching how to support the back button on my site while using jquery ajax in wordpress. I have read about implementing hashes but there is still something I am not quite understanding. I am not really sure how implement it into my current code base.
ajax.js
jQuery(document).ready( function ($) {
$(".product-cat").click(function(e) {
e.preventDefault;
$.ajax({
url: ajaxproducts.ajax_url,
type: 'post',
data: {
action: 'ajax_product_load',
datavar: $(this).data( 'id' )
},
success: function ( result ) {
$("#main").empty();
$("#main").html( result );
}
})
})
});
plugin-functions.php
Product Category Name
When a user clicks the link, all data is retrieved through ajax just fine and loads all the products for that selected category. However, if the back button is pressed, it does not go back to the product category's page rather it goes back to the home page. I want it to be able to go back to categories page and if a user wants to bookmark the product page that they selected they should be able to.
Any help trying to figure this out would be appreciated.
I'm adding items to the cart via a custom plugin and everything works as i need it to, however the mini cart does not update and i can't seem to trigger a refresh.
Here is a piece of my code for reference:
javascript: jQuery.ajax({
url: '/result/',
data:{post_title:title, post_content:detail,price:price,quantity:quantity},
success:function (data_rdx) {
jQuery(".fr-loading").hide();
if(data_rdx=='fail') {
alert("Error, Please Try Again");
} else {
jQuery(".orb_custom").html(data_rdx);
//trigger mini-cart refresh
alert('Cart Updated');
}
}});
I've tried adding a small ajax post with wc-ajax=get_refreshed_fragments but it doesn't seem to work. What would be the easiest way to trigger a refresh?
Thank you.
jQuery(document.body).trigger('wc_fragment_refresh');
i am working on jquery and javascript. and is there any way to make the page refresh and to restore the same link which is clicked. for example. in gmail.com when we open sent items which is in the lefthand side of the window and refresh the page. it get reloaded with the same sent items tab's contents, same things work for inbox and drafts when refreshed. is there anyother method or example to acheive this. if yes. please help. it would be appreciated.
here is my code to make the page refresh on refresh:
<script>
$(window).load(function(){
$(function()
{
$('#submit').click(function()
{
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
});
</script>
Here is a sample ajax form submit script.
// this is the id of the submit button
$("#submit").click(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
Presuming that you're using Ajax to change your page states, why not look at something like History.js?