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.
Related
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.
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'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 want to access the admin/products.json and admin/metafields.json within my theme's javascript, so that I can display certain data outside of the product's page. Is it possible to do this within my theme files, or is it required that I create an external API application?
https://docs.shopify.com/api/product
https://docs.shopify.com/api/metafield
(example URL: https://apikey:password#hostname/admin/resource.json)
I have created a "Private App" API Key/Password through Shopify dashboard. How can I authenticate a GET request within a javascript file that is part of my theme, so I can create variables from the data?
What I'm actually trying to accomplish is showing data (metafields) from certain products on a related product pages. All the info I need is in these 2 JSON files
Creating and external app seems a bit overkill for obtaining data within my shop, but if this is required, how should I go about this? I'm not an expert with APIs or creating apps and I've been reading everything to find a best course of action.
Thanks!
You don't need to make app to fetch data through API within store itself. Just do a ajax request having url "/admin/products.json" and it will return data.
I develop mobile websites for my clients. This particular client would like some facebook wall activity to be displayed on the website. I have looked into the facebook graph api and am getting confused on authentication.
I need the blah in https://graphs.facebook.com/clientsfacebookid/feed?access_token=blah
in order to grab the info i want. I read about authentication and all of that but it doesn't seem to serve my purposes.. For example a lot of the stuff I read about getting a token is related to creating apps and stuff - which is not what I'm trying to do. A lot of ways to authenticate redirect users to log in or grant access to the information but this also doesn't seem like it fits my scenario.
Should I just talk to my client and get them to send me an access code or set up some stream so I can grab an updated access code anytime I need it OR is there some built in functionality in the API that I could benefit from using.
Any thoughts?
P.S. I am trying to implement this via an ajax call in javascript.
Thanks!
What you'll need to do is create a Facebook App and have your client add this to their page. You can then get an OAuth token for this app and use it to query the client's feed. See the Facebook documentation for authenticating as an app for details.
It's actually far simpler if you just want to grab the data from the page. Create an App, but you don't need to add it to the actual page. You can generate an App Access Token by following the instruction on the Facebook Developer Website.
Then, all you need to do is call the Graph API with the generated access_token. E.g.:
https://graph.facebook.com/{page_id}/feed?access_token={app_access_token}
You can then use the data returned by Facebook to display selected posts from the page.
The Page Admin doesn't need to add the app to the page, and this method can be used to scrape any published page. The posts on Pages is public anyway, you just need an access_token to access the page.
If you want a simple way to learn and have an example of a working model try out fourgefeed.com its a simple framework with a simple to implement example kinda like jquery.