Create/Update Commerce API documentation with Axios examples

[Stalex89]

What are you trying to do?
I have a project which uses decoupled frontend on Nuxt.js and headless Craft as backend/api.
My task is to implement cart logic on the frontend (get cart, add items, remove items, checkout procedure etc.), so I have to use GraphQL/axios calls.
However I find it a little bit challenging to implement all Axios calls for cart, as currently GraphQL supports only product/variant, but not cart/order/checkout; And there are no examples of handling Commerce API with Axios on decoupled frontend (only twig template code examples) in documentation.

What's your proposed solution?
It would be really great to have documentation with the way of handling API with Axios independently from twig code
(with available methods, query parameters, body parameters etc.), at least until Commerce is fully manageable by GraphQL

[mattstein]

Hey @Stalex89, we’ve got a Controller Actions page for the Commerce documentation that’ll be launching alongside Commerce 3.3. It’s modeled after Craft’s own Controller Actions page and it should help in this case. Take a peek here if you’d like: https://github.com/craftcms/docs/blob/next/commerce/docs/commerce/3.x/dev/controller-actions.md

There aren’t Axios-specific examples, but that would look similar to the jQuery example here: https://craftcms.com/docs/commerce/3.x/orders-carts.html#fetching-a-cart

[Stalex89]

Hi @mattstein, thank you very much for the information, I will check it 😃

[360adaptive001]

@Stalex89
Please let me know how you have manage this. I am also using Headless Craft CMS and React JS for frontend development. Currently I am able to POST any request to The cart/update-cart using axios. Checking the doc from here https://craftcms.com/docs/commerce/3.x/dev/controller-actions.html#post-cart-complete

[mattstein]

Also snuck in an Axios example here just for good measure: https://craftcms.com/docs/commerce/3.x/orders-carts.html#fetching-a-cart

🤫

[AugustMiller]

For anyone joining late—we've overhauled the Controller Actions page. In the process, we opted to purge library-specific examples from Craft and Commerce documentation, preferring to teach only concepts that apply to all requests (like how to work with CSRF, headers, etc.) in the context of the widely-supported fetch() API.

Cart management follows the same patterns, so any params sent via Twig examples can also be sent via Ajax as FormData or a JSON payload! The core principles (covered in the Ajax section) all apply to Craft 3.x and Commerce 3.x, as well.

I encourage everyone to review the new pages and let us know how you do with your headless applications! 💞