"i only speak liquid" #65: What I love (and hate) about the AJAX API

Hey everyone,

New writer alert 😁 The next 4 edits of “i only speak liquid” will be authored by none other than Rob Clark (a Storetasker Member)

Rob is a highly experienced Shopify developer based in Wiltshire, UK, who has worked with brands like ThruDark and Pangaia. He specializes in theme development and UX design.

Make a friend and connect with him here. 

First edit of 4, let’s goooo!

What I’ve been thinking about: 

“What I love (and hate) about the AJAX API”

What is the AJAX API

Shopify’s AJAX API is a lightweight REST API that provides a quick and efficient way to add useful functionality to a theme without needing to install an app or set up authentication for the REST or GraphQL APIs.

What can the API be used for

The AJAX API’s primary strength lies in its ability to interact with the cart. For example, it enables front-end interactivity on a Shopify store, allowing users to add, update, or remove products from the cart—functionality that can be implemented anywhere on the site.

Additionally, the API can be used to retrieve product data, generate product recommendations, or power predictive search. With its versatility, the AJAX API offers an easy way to implement advanced functionality that enhances the theme and elevates the user experience.

How to use it

Even though it's called the AJAX API, using jQuery is not a requirement. Native JavaScript is a great alternative for leveraging its functionality.

For instance, retrieving product information requires only the product handle, enabling you to gather various data about a product without reloading the page. Here's a simple example:

fetch(window.Shopify.routes.root + 'products/red-rain-coat.js')
.then(response => response.json())
.then(product => console.log('The title of this product is ' + product.title));

This example fetches the product data and logs the product's title to the JavaScript console. By tweaking the code, you can display other product details. For example, the following snippet retrieves the product ID and formats the price in US dollars:

let USDollar = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});

fetch(window.Shopify.routes.root + 'products/red-rain-coat.js')
.then(response => response.json())
.then(product => console.log(product.id + ' ' + USDollar.format(product.price)));

These examples demonstrate how flexible the AJAX API is for integrating product data into your Shopify theme. For more detailed guidance, visit the official documentation: Shopify AJAX API.

What I love about the AJAX API

As mentioned earlier, the AJAX API allows you to add items to the cart or retrieve product data from anywhere on the website through front-end interactions. This is particularly useful for implementing features like bundle builders or selecting multiple options before finalizing a product variant.

The setup for the AJAX API is lightweight and does not require authentication, making it quick to implement. However, this simplicity comes with a trade-off in terms of security, which may be a concern in some cases.

Another powerful feature of the AJAX API is its integration with the Section Rendering API. This enables you to rebuild specific sections of a page dynamically using JavaScript or jQuery, based on front-end interactions, without requiring a full-page reload.

What I dislike about the AJAX API

The AJAX API is a versatile tool but does come with limitations. While it enables excellent use cases, such as building bundle builders, its scope is restricted by the data it can access. For more complex applications that require access to a wider range of store data, you’ll likely need to use Shopify’s REST or GraphQL APIs.

One key aspect to consider is that no authentication is required to set up the AJAX API. While this simplifies implementation, it also poses potential security risks, so caution is advised when using it.

Another notable limitation is the restriction on the number of product variants that can be retrieved at once, which could affect certain use cases.

Summary

I love using the AJAX API for setting up bundle builders or variant choosers. However, it's crucial to establish client requirements upfront before committing to its use. There's nothing more frustrating than investing time into building a solution, only for the client to later request features—like adjusting customer details as part of the bundle builder—that the AJAX API cannot access.

3 links you can’t miss:

• Awwwards: Although it can sometimes feel like a User Experience Designer's nightmare, Awwwards is an unparalleled source of inspiration for design and interaction. The sites showcased here are legendary and can spark fresh ideas for any project.

• GSAP: When it comes to tools for web interactions, GreenSock.js (GSAP) is my favorite. With its extensive plugins and powerful features, it elevates website interactivity to an entirely new level.

• Shopify UI Elements Generator: Whether you’re looking to add cart attributes for capturing extra order information or need to create specialized line items for cart products, this tool is a fantastic starting point for building out customized fields in Shopify.

1 app I like:

Klevu

Search functionality on a Shopify store is a powerful tool for keeping users engaged, boosting conversion rates, and building trust. When implemented effectively, it can help your site stand out from the competition.

In my experience, Klevu is one of the best search apps available for Shopify. It offers extensive customization options, allowing you to tailor search results to meet the specific needs or preferences of individual users. If you're aiming for a smooth, user-friendly search experience, Klevu is definitely worth considering.

One learning as a freelancer:

Dealing with Imposter Syndrome

Imposter Syndrome is the feeling that you’re not capable of or don’t deserve the success or praise for your achievements, accompanied by a persistent fear that your lack of abilities will be “found out.”

This common struggle affects many professionals and can lead to unnecessary anxiety or even depression. British comedian Troy Hawke summed it up humorously: “Do you know who does not get imposter syndrome? Imposters. An imposter with imposter syndrome is simply self-aware.”

For freelancers, imposter syndrome can significantly hinder progress. I personally find myself questioning whether I’m truly capable of handling projects I’m fully qualified for, often missing out on opportunities as a result.

But can imposter syndrome be overcome? Absolutely. By shifting your mindset and adopting healthier practices, you can remind yourself that you are more than capable of handling the roles you’re pursuing.

Steps to Overcome Imposter Syndrome

1. Acknowledge Your Feelings
   Recognize when you’re experiencing imposter syndrome and remind yourself that it’s a common feeling among high achievers.

2. Challenge Negative Self-Talk
   Replace self-doubt with constructive thoughts. Focus on your strengths and achievements instead of perceived shortcomings.

3. Practice Self-Compassion
   Treat yourself with kindness. Perfection isn’t a requirement for success.

4. Share Your Experiences
   Talk to others about how you’re feeling. You’ll often find that you’re not alone, and shared experiences can be comforting.

5. Seek Support
   Surround yourself with mentors, colleagues, or friends who can validate your abilities and provide encouragement.

6. Accept Positive Feedback
   Learn to accept compliments and praise without downplaying your efforts.

7. Take Steps to Overcome Perfectionism
   Strive for progress, not perfection. Celebrate small wins along the way.

8. Reassess Your Perceived Gaps
   Identify the skills or knowledge you feel you lack, and take proactive steps to bridge those gaps.

A Final Thought

If you’re dealing with mental health challenges, consider seeking help from a professional. And remember, if you’re part of the Storetasker network, you’ve already been vetted as highly qualified and capable. Trust in that validation and in yourself.

-Rob