Liquid Weekly #34 - Javascript and the Shopping Cart

Learn how to manipulate the shopping cart 
Shopify Development news and articles
 
Liquid Weekly

Karl Says


This issue builds on the Javascript related content from Issue 33 and focuses on manipulating the shopping cart via the AJAX API!

News & Articles

Custom Cart With Shopify Storefront API
As part of Jamstack Conf, Jason is building a swag app with experts from around the community. This episode of the 5-part series features building a full featured shopping cart with Kelly Vaughn of the Tap Room.
10 Books Shopify’s Tech Talent Think You Should Read
We have a book bar of the company’s favorite reads and make sure any employee who wants a copy of any title can get one. So we thought we’d flip the script and ask 10 of our technical minds to tell us the books they think everyone in tech should read this year.
How We Built the Add to Favorite Animation in Shop
The team working on Shop, our digital shopping assistant, recently released a new feature. By pressing a heart button on a product, buyers can save those products for later. When they do, the product image drops into the heart icon (containing a list of favorite products) in the navigation tab at the bottom. In this post, I’ll show you how I approached implementing the Add to Favorite animation in Shopify’s Shop app. Specifically, we can look at the animation of the product image thumbnail appearing, then moving into the favorites tab bar icon:
Understanding Shopify Cart Structure
This video, which is part of a series on the Shopify Cart, explores the shopping cart structure.
Metafield syncing got you down?

Drop the namespace and key in Gadget, and we’ll sync the data to any resource. Mutate or query the metafields all you want. No rate limits.

Learn more on the Gadget blog

Code & Tools

A Javascript Library to Power your Shopify Theme's Cart.
Cart.js is a very small open source Javascript library that makes the addition of powerful Ajax cart functionality to your Shopify theme a breeze. It's designed to be simple to use, while providing some really powerful and nifty features
Add an Item to the Shopify Cart Using the JavaScript Fetch API
Since usage of the Fetch API is growing I’ve started to see a few people having issue with POSTing to the AJAX add.js endpoint. If you’re running into 400 (Bad Request) errors you might not have set the correct headers. I’ve put together a very basic example of a Fetch POST so you can check the X-Requested-With headers used and then adapt it to your own code.
Using JavaScript to Manage a Shopify Cart
I've gone spelunking through the jQuery functions and network calls, and then compared them to the somewhat sparse documentation Shopify has already published. I've documented all of the cart management endpoints on this page, and I've added examples for all of them using plain old JavaScript
Shopify Ajax Add To Cart with Fetch API and Alpine.js
See how easy it is to use Javascript's fetch API with the Shopify Ajax API and Alpine.js

Changelog

There is nothing new under the sun. At least, not this week.

Events

April 20 - Women Coding the Future
Women Coding the Future is a one-hour talk celebrating women in development. We’re partnering with SheSharp, whose mission is '“making it easier for all women and gender nonconforming people to enter, stay, and grow in the tech industry.” Join our discussions with the incredible women building and contributing code, helping to shape the future of developer communities.

Jobs

Partner Marketing Manager, remote
Own the partner-facing communication project management that aligns with and accomplishes deadlines, goals, and outcomes. These projects will be a key driver of relationship development and mutual value from a brand building and demand generation perspective for mutual growth.
Freelance Shopify Developer, PT (Remote)
We're looking for someone to join our team as a Freelance Shopify Developer to build, edit and customize Shopify themes. The ideal candidate will have experience building custom Shopify themes.

Tip of the Week

Timezone Fix for Datetime Metafields

Has anyone else noticed that a metafield of type datetime, when used as a dynamic data source, renders in the wrong timezone?

ENGAGE QUIRKS MODE

IF a Metafield of type DATETIME is used as a Dynamic Data Source
AND the DATETIME has a Timezone offset
AND when that value is rendered as HTML
THEN the displayed Time will be rendered in ? UTC, not the store's local Timezone.

But don't worry - there's a workaround: capture the metafield as a string and manually format the date

                                      
﹛% capture start_date %﹜
  ﹛﹛ product.metafields.rbb.event_start_time ﹜﹜
﹛% endcapture %﹜
﹛% assign nice_start = start_date | date: '%b %d, %Y, %-I:%M %P' %﹜


Thanks to Gary Thompson for the excellent tip!

 

Older messages

Liquid Weekly #33 - Fetching with Javascript

Tuesday, April 12, 2022

Learn how to fetch data with Javascript Shopify Development news and articles Issue #33 - 4/12/2022 Read Online Liquid Weekly Karl Says This issue is a two parter - lots of JS fetch fundamentals this

Liquid Weekly #32 - Create an Accessible FAQ Section

Tuesday, April 5, 2022

Create an accessible and SEO friendly FAQ section Shopify Development news and articles Issue #32 - 4/5/2022 Read Online Liquid Weekly Karl Says What's going on in your neck of the woods? Drop by

Liquid Weekly #31 - Using Shopify CLI for continuous integration

Tuesday, March 29, 2022

Did you know that Shopify now has built in support for CI workflows? Shopify Development news and articles Issue #31 - 3/29/2022 Read Online Liquid Weekly Karl Says I'm currently enjoying "

Liquid Weekly #30 - Achieve Maximum Performance with Laziness

Tuesday, March 22, 2022

Achieve Maximum Performance with Laziness Shopify Development news and articles Issue #30 - 3/22/2022 Read Online Liquid Weekly Karl Says Sometimes being lazy is good - at least for improving theme

Liquid Weekly #29 - Don't Lose Your App Store Listing, Ditch EASDK!

Tuesday, March 15, 2022

Don't Lose your Apps Store Listing - Switch From EASDK To App Bridge! Shopify Development news and articles Issue #29 - 3/15/2022 Read Online Liquid Weekly Karl Says Lots of great content this week

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your