I'm in the process of writing a simple shop for my business, and I'm currently implementing the
cart logic. I use vanilla JS in the client side and communicate with the server via JSON API, I
render everything in the client side.
From my research online, I discovered that some online shops maintain the user cart in their database, so to add/remove/modify an item, you need to send an HTTP request to the server. I don't want to do that, because of the overhead and my idea is to maintain the cart in localStorage and on checkout, send the whole cart at once.
Is this a good idea? What issues can occur when managing a shopping cart in the client side?
I am asking that because I assume there is a reason many online shops manage the user cart in
their database (apart from collecting data on users)
Thanks.
Related
I'm fairly new to web development and I am trying to build a fashion ecommerce site for a project.
I would like a user to be able to chose a product e.g a dress which has associated details like product name, product price, image and size in a page called product.html. I have been able using a separate javascript, to ensure that when a user presses 'add to cart' that the details are logged.
However, how do I then transfer these details to a separate basket.html page and display them?
I'm struggling to understand if I need to use local storage and if so how do I show the details if I'm using a separate javascript file and a another html file.
Essentially, if a user picks a product, how do I get that specific product and details to appear in my separate basket page?
Apologies if this is badly worded or made little sense !
Thank you :)
There are several options to this, depending on how your ecommerce site is built and what parts you have control over.
You could
Submit it to a server and have it respected in the response of the next page.
Hold it locally using webstorage (localStorage or sessionStorage). Keep in mind, that 3rd-party-scripts on your website will be able to read it, too!
Share it with a server by setting a cookie (can be read by 3rd-party-scripts). Keep in mind the limited size of a cookie.
Pass the information along as query parameters. This can have affects on SEO (duplicated content because similiar pages are indexed by a search engine).
Pass information along as hash parameter. Those aren't transmitted to a server, but can be read from JavaScript (yours and 3rd party). It was a hack applied in the early days of Single Page Applications.
You can build REST API which will be used to
store item into cart (called when pressed Add to cart button)
read items from cart (called on Basket page)
The API will persist it in some sort of DB and return when needed.
REST API should be secured (e.g. by OAuth2) so you can distinguish actions for individual users.
I am developing a website in HTML, JS, and CSS. My result is a PWA (Progressive Web App). It works really great. I am hosting and serving it via the Firebase Hosting and enjoy many functions of firebase. To let the user feel the full power of a PWA I need to manage Push Notifications. For that, I want to use Firebase Cloud Messaging. I already know how to send push notifications and so on. On my webpage, the users can subscribe to topics. And here we go. I do not know how to subscribe/unsubscribe a user to a topic via the javascript without the admins SDK. Can please provide somebody a clear and simple example for subscribe/unsubscribe users? From the documentation, I will not be smart.
Thanks in advance,
Filip.
I would do it like that:
(I assume you have users tokens stored somwhere in the database ordered by users id)
Create table 'topics' - store users ids there.
Create form - let the user add its id to the 'topic' table.
Then, before sending FCM, store every token, from owners which ids are assigned to the specific topic in the 'topic' table.
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.
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");
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 ....