I'm very new to WooCommerce but I work with JavaScript/React. I am trying to use them as a back end and create my own front end store front. I pull all of my data from WC to display on my store front. Once a user adds items to my cart on my store front, I want them to be able to checkout via WC so that I don't have to handle payment. Is there a way to populate the cart / checkout with a query string?
Related
Good evening everyone. I have one big question which contains others. I hope it's not a problem, it's all connected.
I have implemented stripe to my site and I wouldn't want to create every single stripe product in the stripe dashboard but manage my products and bring them all together to the stripe checkout when the user confirms his purchase. Someone know if it's possible?
If it is I currently have prices created dynamically in js files in the client directory and I know all prices should be kept in the backend so I need to change the whole approach?
And finally if it is possible to have my products redirected to the Stripe checkout page how do I insert in the server.js session the unit_amount in line_items corresponding to the cart total?
I'm trying to create a shopping cart via API and send a shopping cart URL to the customer to check out.
I already tried the VTEX documentation calls (https://developers.vtex.com/docs/api-reference/checkout-api#get-/api/checkout/pub/orderForm), but from what I understand a cart made by API must be terminated by the same.
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.
The story is I have this Shop page that has 4 items in it and they are individually linked to their respective pages then they will all be linked to a cart page to confirm their order.
The problem now is, if say this site is for a client and they have 0 knowledge on coding how can I make it so that I have this page that lets the client put in the info needed and there will be some sort of function to generate pages for that product.
I don't need the whole code for this, I just want someone to tell me the concept of how that's going to work then I can Google the rest myself. Right now, I don't even know what to Google about.
Thx in advance
The concept is you have some sort of database at the background (server) which can be manipulated by the end-user (Create, Read, Update, Delete) from the front-end (client).
You can use MySQL and PHP to achieve this.
Then you will need the following file:
index.php (where the listing of the product appears)
product.php (where the details of the product selected appears)
These 2 files will dynamically show the product according to the data of the products stored in the database.
To add new product, you need to create a form:
add-product.php (where the ADD NEW PRODUCT form appears)
Using PHP and MYSQL, you can manipulate the database from the front-end.
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.