I'm currently trying to create my own shopping cart for a client using JQuery. I was just wondering if the best way to store information for a custom cart is using cookies?
I have a product page that adds information via JQuery to Cookies and then a check out page that grabs the information from the cookies and display it on a check out page.
Is this the way to go about it, is there a better way?
Any help would be greatly apprecaited!
In my opinion, the best to save a shopping card is server side:
Each time someone add a product send an AJAX request and store it (account if logged or use sessions).
It's a bit heavier but it's more secured, and more user friendly, if someone is shopping and don't have the time to checkout on his computer, he can grab his phone login and checkout with the same cart.
AJAX is not really hard as far as you know a bit about request. jQuery provide an AJAX function to send request you should start by this documentation.
An AJAX request is nothing more than a call to a page but instead of being synchron and then display the page to the user, it will asynchron, and just return a status and (in most case) a JSON object as response, to say how were the request if there was any errors or things like this. The backend wont be heavy so the request will be fast enough to be smooth to the user.
jQuery provide callback on error or success that allow you to easily manage to warn user or to update a cart preview without any page reloading or something.
Cookies is also fine but LocalStorage is way to go to store cart related information on client side
Example
// Store
localStorage.setItem("lastname", "Smith");
//Get
localStorage.getItem("lastname");
//Remove
localStorage.removeItem("lastname");
Related
I have a website where logged in users can follow other users, each user is stored in a MySQL database, in this database there is a table that has each user session, when a user logs in, it generates a unique session ID for that device and stores it in the users browser as a cookie.
When a user clicks the HTML button on a webpage to follow another user, I want it to send a javascript XMLHttpRequest to this PHP file I'm making, however I'm not sure what kind of security measures to take, currently I require the ID of the user to follow/unfollow and the unique session id cookie value of the logged in user.
Basically, this "cookie"/session with the unique id, I want to know if it's good enough for doing ajax calls, it's kinda like a REST API, however, it can make changes to the database via PHP when the method is POST.
If you can think of any possible issues with this please let me know, I would sure appreciate it, and if anyone has any tips on making these kinds of Ajax API's please let me know.
Cheers!
While ajax request have session id, and user login in session, its secure to accept that request to make changes what regular user may do. Keep in mind all other security issues as for usual request or ajax, no matter, like changes to db, or other, so everything is limited to user functionality, then it secure.
I am creating a custom checkout page for my Shopify store in order to handle custom integrations with stripe and my own API. I'm able to send data from the Shopify cart.js API to my custom checkout through query params, but this string is rather ugly and very long. There is some concern over whether this will cause problems, or if there is a better way.
For reference, here's the default cart json encoded into a query string. Yowza!
/?cart=%7B%22token%22%3A%22f57b4a11a31e5daaa3fae1c4cfcb0676%22%2C%22note%22%3Anull%2C%22attributes%22%3A%7B%7D%2C%22original_total_price%22%3A119495%2C%22total_price%22%3A119495%2C%22total_discount%22%3A0%2C%22total_weight%22%3A9072%2C%22item_count%22%3A3%2C%22items%22%3A%5B%7B%22id%22%3A22480473539%2C%22properties%22%3Anull%2C%22quantity%22%3A2%2C%22variant_id%22%3A22480473539%2C%22key%22%3A%2222480473539%3Adf55503d6a89267ddc2b2d67afcc9bac%22%2C%22title%22%3A%22White%22%2C%22price%22%3A59500%2C%22original_price%22%3A59500%2C%22discounted_price%22%3A59500%2C%22line_price%22%3A119000%2C%22original_line_price%22%3A119000%2C%22total_discount%22%3A0%2C%22discounts%22%3A%5B%5D%2C%22sku%22%3A%220002%22%2C%22grams%22%3A4536%2C%22vendor%22%3A%22Meural%22%2C%22product_id%22%3A7214792579%2C%22gift_card%22%3Afalse%2C%22url%22%3A%22%2Fproducts%2Fwhite%3Fvariant%3D22480473539%22%2C%22image%22%3A%22https%3A%2F%2Fcdn.shopify.com%2Fs%2Ffiles%2F1%2F1348%2F6411%2Fproducts%2Fwhite-front.png%3Fv%3D1468709138%22%2C%22handle%22%3A%22white%22%2C%22requires_shipping%22%3Atrue%2C%22product_type%22%3A%22%22%2C%22product_title%22%3A%22White%22%2C%22product_description%22%3A%22%5CnIncludes%20free%20white%C2%A0power%20cable.%C2%A0%5CnDimensions%3A%2032in%20x%2021in%20x%201.5in%22%2C%22variant_title%22%3Anull%2C%22variant_options%22%3A%5B%22Default%20Title%22%5D%7D%2C%7B%22id%22%3A284391014424%2C%22properties%22%3Anull%2C%22quantity%22%3A1%2C%22variant_id%22%3A284391014424%2C%22key%22%3A%22284391014424%3A0d9cdd833041859ad41f895bf59cb17a%22%2C%22title%22%3A%22Meural%20Membership%22%2C%22price%22%3A%22%244.95%2Fmo%22%2C%22original_price%22%3A495%2C%22discounted_price%22%3A495%2C%22line_price%22%3A495%2C%22original_line_price%22%3A495%2C%22total_discount%22%3A0%2C%22discounts%22%3A%5B%5D%2C%22sku%22%3A%22%22%2C%22grams%22%3A0%2C%22vendor%22%3A%22Meural%22%2C%22product_id%22%3A52034633752%2C%22gift_card%22%3Afalse%2C%22url%22%3A%22%2Fproducts%2Fsubscription%3Fvariant%3D284391014424%22%2C%22image%22%3A%22https%3A%2F%2Fcdn.shopify.com%2Fs%2Ffiles%2F1%2F1348%2F6411%2Fproducts%2Fcollage.jpg%3Fv%3D1503795405%22%2C%22handle%22%3A%22subscription%22%2C%22requires_shipping%22%3Afalse%2C%22product_type%22%3A%22subscription%22%2C%22product_title%22%3A%22Meural%20Membership%22%2C%22product_description%22%3A%22%22%2C%22variant_title%22%3Anull%2C%22variant_options%22%3A%5B%22Default%20Title%22%5D%7D%5D%2C%22requires_shipping%22%3Atrue%7D
I'll obviously try to trim this down if necessary, but it's not ideal. As far as I understand it, there is no way to get the Shopify cart through an API from an external website (which seems a little silly, but oh well). Does anyone know a better way?
I think this should be your flow to access cart data to your custom checkout page.
Maintain cart webhook. Keep data of cart of your store in some database.
You need to use cart token and session as point of communication and authentication between shopify and your custom checkout.
Put a customized button(ex. My Checkout) on shopify cart page to proceed for your custom checkout option.
On the click of your customized button get the cart token to your custom checkout page and retrieve the cart data using it. You can use session for authentication.
After retrieving the particulate cart data, you can do necessary manipulation in your checkout page.
I discovered that you can easily pull cart data from an external site using the same ajax request that you would internally. Here's how to use it.
It doesn't work if user isn't allowing cookies, so isn't perfect, but works well for now.
Say I have a java/spring/jsf/jsp web application. User fills all required fields, chooses all the options, clicks generate report, spring beans do their job, database is queried for information, and user is directed to a "report" page generated according to entered information. I am looking for a way to save that page to be accessed later by link - kind of a share current page link. One example of this might be jsfiddle.net where you can enter information, save it and get a shareable link.
What i thought of, having my current knowledge, is saving some kind of url extension hash along with currently displayed page properties to database and query database for that information when someone accesses www.websiteUrl.com/extensionHash but making a query everytime someone accesses the extension seems kind of heavy on performance. Another way could be saving whole html page or just the content part on the server and serve later on request.
What is the most simple/productive way of doing this?
This is one option instead of link :
What you can do is you can load the required data for that report from database when your application starts, put the data in Application Context ( ServletContext in Java ) and whenever you want to get the information, instead of making a database call, you get that from Application Context.( so basically its like you are loading from cache) this way your perfomance is improved.
in java, You can achieve that by implementing a listner class.
Downvoters : please specify the reason.
I am developing an ecommerce site with angularjs.. Whenever a user add, change quantity or delete product from cart a local array of products will be updated(I am not pushing to server because that would mean a lot of requests) and I listened for window.onbeforeunload to push changes to server. It worked great on my local machine. But when I tested this on server it didn't work as expected.
Is there another way to do this? Maybe saying before leaving page wait a second to send a successful request then leave? Or do I have to push changes every time the cart is updated..
I also want to leave managing cart for the server, meaning I can't manipulate cookies. Because on server I am using external classes that handle cart on it's way e.g. creating encrypted item identifier for each item.
I found a solution, not sure if it's best practice but after testing it in many situations. It seems to work very nice...
When user modifies the cart the items are saved using javascript(no requests needed) in a cookie as json array.
Before each request I check if there were items saved in the cookies to do the following:
a. Destroy the cart.
b. Retrieve and json_decode items saved in the cookies.
c. Insert these new items in the empty cart.
d. Unset this cookie.
The good thing about this approach, there aren't any overhead requests to push local changes to server
But the bad thing it makes using a cart on the server that saves items in different cookie look silly and I might refactor that with my own cart class to share the same items cookie ....
Can anybody give me a direction, I want to know how to do auto updating pages like facebook have for new status updates, new likes etc. Ie., if you have a status open in a window and a user click "like", the +1 like automatically appears.
Thanks in advance.
These are done using a PUSH model (subscribe / publish).
The client side first subscribes by issuing an AJAX request. This AJAX request stays alive indefinitely. When the server receives a new like / comment, it publishes this update to the client side thereby ending the AJAX request. The client receives this update and isntantly issues another AJAX request.
It is broadly categorized as Comet.
Once before, I had implemented a Comet web chat application and wrote a somewhat technical write up of what went into it. You can read it here, if interested.
Comet Web Chat Application
Edit:
A heartbeat mechanism (PULL model) is definitely easier to implement, but a PUSH model is far more efficient.
You'll need to use ajax, which is a way to communicate with the database without reloading the web page : you could for example use the
$ajax
function of jQuery framework : here's the doc
im not posting code, but here's a quick overview of what you might wanna do:
have the "like" image
create a script that binds a click handler to the image.
once clicked, the script sends an AJAX request to the server to increment the like
if that request succeeds, return data to the script indicating that it was a success. you might also want to return the number of likes and so on.
once the script knows the success, have it change your "like" image.
as for counting likes, well, its up to you. for a very broad question, this is a broad answer that will point you to the right path.