I have a shopping website and I am using javascript to add items to cart. Every time I click on add to cart, it puts the name of the item in a div that represents the cart. I would like to keep the content of the cart on each page, so what I did is:
$("#cartlink").attr("href", "cart.php?app="+tab+"")
Where "tab" is an array containing all the items in the cart. I then use a GET to retrieve the elements of the cart on the cart.php page. But my problem is since I add items in the cart using JS, if the user changes page without clicking on the cart.php?app link, tab will be erased and I have no way to recover "tab". If the user clicks on the cart.php link, I can use a GET and store the content into a session and then use it on every page.
So I would need a way to memorize the cart content if the user decides not to click cart.php.
Thanks!
You can use localStorage to store the cart status in JavaScript, and submit it to the server when the user confirms the order.
I would recommend using a plugin such as http://www.jstorage.info/
it will give you an easy way to store/retrieve your data on the client side
I'm not sure I totally understand what you're doing, but it sounds like you could just bind a listener to the window's beforeunload event, which is called before the page is unloaded (location changes). This is how websites (pop-up ads) achieve the "are you sure you want to leave" dialog.
An example:
window.document.addEventListener('beforeunload', function(event) {
$.ajax({ url: '/saveCart.php', data: tab,
success: function(){
},
error: function(data) {
}
});
}, false);
Note that since you can't cancel a beforeunload event, it might be safer to just update cookies instead of making an ajax call, since if the HTTP request fails for some reason, the page will still continue to unload. Here's a really good primer on setting cookies.
A really really simple solution would just be to return a string in the beforeunload listener, which would create a confirm dialog that could say something like "your cart will not be saved. Please save by clicking 'save cart'", etc. Not the best UX though.
Related
I have this "add to cart" link that sends getdata and adding +1 when it's submitted/isset.
The problem is that when I refresh the page, and when I go back and forth, it will add again because the data is still there in the url. How can I prevent this? Im open to different solutions.
I did find something about PRG method. This method uses a redirect. But if I redirect won't it still add if I go back and forth?
Take care
Make "add to cart" into a pseudo-link, which appears as a link, but when clicked it handles it differently. For example in jQuery:
$('.add-to-card').on('click', function (e) {
e.preventDefault();
$.post({
id: put the product id here,
}).then(function () {
increase the counter in the button
})
});
This way your link will not make it into the browser history and traversing it (using back and forward buttons in the browser) will not affect your cart's state.
I have custom cart and checkout process, so the sales_quote_* is not used at all. Just like Magento default cart form, there are 3 submit buttons: Update Cart, Continue Shopping and Checkout. Whilst the Continue Shopping button is easy, I have a problem with Update Cart and Checkout buttons.
If a user clicks Update Cart, then there is no problem because I can capture all the form values into sessions. The problem is when the user directly clicks on Checkout button. That because one form cannot have 2 submit buttons. So, I simply redirect the Checkout button to a controller.
So, if a user directly clicks on Checkout button, I won't be able to capture some of the form values (like User Note, Custom PO, etc). Is there a magic method that will be automatically executed when someone leaves a Magento page (something like __contruct()) ? If yes, I want to use this magic method to capture the form values.
In JQuery (I see you asked for a solltion in the comments), you can bind on this:
$(window).bind('beforeunload', ...
I have some code here, that I dont remember where came from:
http://jsfiddle.net/Olavxxx/K4NCM/
A solution uses jQuery would be as follows:
$(window).bind('beforeunload',function() {
var var1 = $("#element1").val();//maybe .text() depends on the element type and so on..
$.post('setSession.php',{var1:var1, var2:var2, var3:var3});
});
Ofcourse you can use $.get() if you'd like to. You can also use the $.ajax(), This is just the basic structure.
Good luck!
I am new to Jquery. I have a doubt:
For example, in a web page as voting, if you click a button, a counter is incremented by +1. Now, how to draw the url of the button on a website? Therefore, if we provide the url to others, and just click on the URL, the counter should increase by 1 on the website.
Best example of this is FaceBook LIKE.
I prefer to use jQuery, PHP and MySQL
It's a little bit difficult to understand what you're trying to ask but here's my take on it.
Scenario
You have a page at http://mywebsite.com/rating which contains 5 items you can rate on.
Solution
There are two events here that point to the same server side code.
What you need to do is assign an identifier to your button/product/whatever you're trying to rate. So you might have something like this <button ratingname="button1">Rate me!</button>
Now you will have a jQuery function that will use AJAX to communicate with your server and store the increment in the database. This jQuery function will be invoked via an event handler for the button and by going to this url: http://mywebsite.com/rating#button1.
Once your page loads you should check the hash for a value and if one is found then invoke the original jQuery function. You may want to additionally check if the value for the hash is a valid rating button value. (Note you could also use a query string).
I would do it using ajax, and a server side program to record votes.
You could design the page with any look-and-feel. Then add the ajax code to talk to your server-side program and maybe show the user the current votes.
?id=642&point=1
It’s a POST, not a GET, so it could only be done from a form or AJAX, not a simple URL.
//Vote update
$.post(
"http://example.com/folder/vote.php", // url
{ id: 642, point : 1 }, // post-data
function(data){ // response
$("#resultBox").addClass("done"); // show msg
}
);
More reading at http://api.jquery.com/jQuery.ajax/
Is it possible to use JQuery & PHP to create a "like" button that a user could click and it would add +1 to a "number of likes" database (or even text file) and disable the "like" button for that user so that the user could only click it once? I was browsing around and found some information about writing cookies with JQuery:
http://jquery-howto.blogspot.com/2010/09/jquery-cookies-getsetdelete-plugin.html
Perhaps, when a like button is clicked, it could write a cookie to the user's computer that would prevent them from future clicks? It just basically needs to be that the user could click the like button, it adds a count to some type of database, and it disables the button for the user. Pretty simple I would imagine - there may already be some type of plugin for this, but I haven't found any. Any ideas?
Thanks!
jquery:
$("button").click(function(){
$(this).remove();
$.post('count.php');
});
though the user can just reload the page, so any real validation needs to happen on the php side.
You may want to look at jQuery's one() function. It allows you to bind an event for only one invocation. Here's an example I'd run on page load.
if (likedBefore) {
$("button").addClass("liked");
}
else {
$("button").one("click", function() {
$(this).addClass("liked");
$.post("count.php");
});
}
Validating server side is a bit more difficult. It really depends on how secure you need this to be.
I've created a page using JQuery and Ajax that helps a user filter through a series of options and ultimately displays a filtered list of products meeting their specification.
This all works fine.
The problem i'm having is the "Back Button" problem with Ajax, i know how to get around this with anchors on static content (i.e. Filter.php#Step2).
However, the page works by returning a list of product specifications, when a spec link is clicked, Ajax loads the same page again applying the links parameters, this is repeated up to six times, after which, the user is redirected to the filtered product URL.
If the user then clicks "Back", then of course, the filter page reloads from step 1 rather than the last step (step 6).
Does anyone know if this is even possible?
Every time you want to be able to go back to the previous step, change window.location.hash.
Ie.
window.location.hash = 'step1';
This changes the #foo part in the URL. You will also need a timer in JavaScript which checks if the hash was changed, as there is no way to reliably detect hitting the back button. Something along the lines of...
var oldHash = window.location.hash;
setInterval(function(){
if(window.location.hash != oldHash) {
//the hash was changed, do something
}
}, 50);
I hope this helps
I can't say I've implemented this before personally, but I remember the jQuery Tools tab component doing something similar. I'm not sure if it will work for your particular situation, but it may be worth looking at their approach as a starting point.
jQuery Tools AJAX:ed tabs with History support