Chapter 8: Exploring the Shopify Ajax API

In the previous chapters, we learned about the basics of Shopify and Liquid, which provided us with some solid groundwork for future development. After setting up a proper foundation for our future learning, we learned how Liquid core works. By learning about objects, tags, and filters, we have learned how to create complex functionalities using a somewhat simple and insignificant set of features. Lastly, we learned how to create easily configurable elements throughout the store using various input type settings, combined with the sections and blocks attributes.

Throughout these chapters, we have learned how to create elements with static content. However, what if we were looking to update the content of our pages dynamically? This is where the Shopify Ajax API comes to help. In this final chapter, we will go over the Shopify Ajax API, explain its requirements and limitations, as well as its possible use cases.

In this chapter, we will...

Technical requirements

While we will explain each topic and present it with the accompanying graphics, we will need an internet connection to follow the steps outlined in this chapter, considering that Shopify is a hosted service.

The code for this chapter is available on GitHub at https://github.com/PacktPublishing/Shopify-Theme-Customization-with-Liquid/tree/main/Chapter08.

While this chapter will contain several real-life examples and use cases for each topic, we will need a basic understanding and knowledge of Ajax to be able to follow this chapter thoroughly.

Note that we will only show examples and work on projects related to the Shopify API and not Ajax in general. For detailed information on Ajax, we can consult https://www.w3schools.com/js/js_ajax_intro.asp, which provides a great introduction to Ajax.

The Code in Action video for the chapter can be found here: https://bit.ly/2VUZ7Qp

Introduction to the Shopify Ajax API

Ajax, or Asynchronous JavaScript and XML, is a method that we can use to exchange small amounts of data with the server and update the parts of any page, without the need to reload it in its entirety. So, what exactly is the Shopify Ajax API?

The Shopify Ajax API is a REST API endpoint through which we can send out requests to read or update certain information. For example, we can use a GET request to read the product or even the current cart data, or we can use a POST request to update the current content session of the cart.

Shopify Ajax is an unauthenticated API, which means that it does not require any tokens or API keys to gain access to store information. Shopify also provides us with an authenticated API named the Shopify Admin API, which apps and services use to communicate with Shopify servers.

Through the Shopify API, we can access most of our store data, whose responses will return JSON-formatted data, though we can't read...

Updating the cart session with a POST request

Previously, we mentioned that we can use a POST request to update the current cart session. Depending on the type of action we are looking to perform, we can pair the POST request with the following cart endpoints:

• /cart/add.js
• /cart/update.js
• /cart/change.js
• /cart/clear.js

While this might sound trivial, it is an essential aspect of today's e-commerce stores, where we expect to perform an action without refreshing an entire page.

The /cart/add.js endpoint

As its name suggests, the /cart/add.js endpoint allows us to add one or multiple product variants to the cart, without the need to refresh the cart. To perform this action, we need to create an array named items with an object inside containing the following two keys:

• The id key, whose value should contain the number type value of the variant ID we are adding to the cart.
• The quantity key, whose value should contain the number type value...

Retrieving data with a GET request

As we mentioned previously, using a GET request, we can pull all types of data from Shopify servers, except for customer and order information, which can only be accessed using an authenticated Shopify Admin API. Depending on the type of action we are looking to perform, we can pair the GET request with the following endpoints:

• /cart.js
• /products/{product-handle}.js
• /recommendations/products.json
• /search/suggest.json

The GET request is a pretty powerful method that we will commonly use in combination with a POST request to retrieve data after making changes to the current cart session. However, we can also use a GET request to retrieve and create complex functionalities, as we are about to learn.

The /cart.js endpoint

The /cart.js endpoint, as its name suggests, allows us to access the current cart session and retrieve all the information about the cart, as well as products inside the cart. We can use it to dynamically...

Summary

Throughout this final chapter, we have familiarized ourselves with the Shopify Ajax API and learned about different types of use cases. First, we learned how to upgrade the current purchase flow using the /cart/add.js endpoint, through which we can add any number of products, quantities, and line item customizations, whether they are public or private, directly to the current cart session.

By learning how to handle the /cart/change.js endpoint, we gained the necessary knowledge to create a feature that includes a specific product and quantity, such as an automatic gift or upsells feature. Using /cart/update.js in combination with the /cart.js endpoint, we learned how to update the cart's content dynamically and retrieve it. We can then use this to create a cart drawer feature.

Additionally, we learned how to use the /products/{product-handle}.js endpoint to retrieve an automatic list of recommended products and render their content into a section of our choice.

...

Further reading

• Shopify official documentation: https://shopify.dev/
• Shopify cheat sheet: http://cheat.markdunkley.com/
• Developer changelog: https://shopify.dev/changelog
• Official community: https://community.shopify.com/
• Twitter announcements: https://twitter.com/shopifydevs
• Shopify Developer YouTube channel: https://www.youtube.com/channel/UCcYsEEKJtpxoO9T-keJZrEw
• Shopify official blog for all the latest information about the world of Shopify: https://www.shopify.com/partners/blog