Hello, new to plasmic, loving it so far. I’ve built a simple online store front end and integrated Swell. The category and product page building has all worked great. But now I’m a bit stuck - What is the best way to do the cart and checkout functionality? I assume I will just build the cart layout manually, since the cart component doesn’t include a nice pre-built layout like the collection components do. Same for checkout, except I don’t see a checkout component, so I’m wondering how best to build in things like shipping, payment, etc. The documentation I can find seems to skip this part of the process of building a store. Would much appreciate any pointers or hints.
Hi @distinct_lizard, welcome aboard, great to hear! You’re exactly right, only the catalog collection components are fully no code. For now, if you need your own cart or check out ux, you would need to implement that part in your code base, or you can use the default to swell hosted UI. We wanted to prioritize the parts that are the most relevant for content pages and that go through the most change. (Cart and check out tend to be more stagnant and have more interactivity/complexity, but we do eventually hope to have let you build even these parts of the site without code.)
Sounds great, where can I find more info on how to “use the default to swell hosted UI”? That sounds perfect for my needs at the moment, I’m new to headless e-commerce so I’m not sure how my plasmic site communicates cart info to the swell hosted cart/checkout flow. I’m guessing I add some code to the add-to-cart button?
Good question, I’m not personally the most familiar with the swell API but here’s what I could find, there should be a checkout URL: https://developers.swell.is/guides/core-concepts/the-order-lifecycle#checkout
Thanks for the suggestion, I’m slightly closer to solving this now. Yep, its checkout_url that I’m after. However, I’m struggling to determine whether to use dynamic values, remote data fetch, or data query to get this field, everything that I try doesn’t work. Once I get this field, I would like to store it as a variable that I can access as a dynamic value in the project, and then assign this to my “cart” button link property.
This is where I’m getting stuck / lack knowledge - When a user clicks on add to cart (I’m using the built-in add-to-cart swell component), it creates a new cart in my swell store. I can see the http request happen in chrome dev tools, where I can see the checkout_url in the json, but how do I get this field within plasmic studio? The data picker for the swell commerce components is constrained to the product model and some select fields under it.
If it helps,my project is https://ore.plasmic.run/collection
I played with this a bit, this should work:
- Insert an HTTP Fetcher component
- Plug in the shown settings to query the cart API
- Add a link inside of it
- Set the destination of the link to a dynamic value that is the checkout_url
The api call works now! Unfortunately it links a checkout_url that is an empty cart. Instead of the cart from the current user session. When i add items to the cart, then go to the linked checkout_url, it goes to an empty cart.
Link is set to this dynamic value: $ctx.fetchedData.checkout_url
Does that look correct?
That’s surprising!
I’m sorry, that question’s beyond my depth of Swell API knowledge… I would have expected the checkout_url to be right.
Hello!
I’m also not familiar with Swell, but I think you skipped a step. You first need to create a cart, then add items to it, then it properly generates a checkout_url for you once the required fields have been set for the “cart” type.
This is a useful area of the docs to browse: Backend API: The cart model | Swell
You need to handle users adding items to cart and filling out shipping & billing details client-side. And when the user clicks checkout, that’s when you call the API to send the completed cart model so you get a proper checkout_url response.
Here’s an example I quickly put together that stores all items added to cart to a page state variable if you get confused with states: Plasmic
Hope this helps!