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

WP Weekly 226 - Launches - New Elementor Theme, WP 6.8 in April 2025, Automattic Scale Back

Monday, January 13, 2025

Read on Website WP Weekly 226 / Launches 2025 has just started, and there is a slew of new launches like Hello Biz Theme, Meta Box Lite, FooConvert, Affililink, and more. Also, the next WordPress 6.8

SRE Weekly Issue #459

Monday, January 13, 2025

View on sreweekly.com A message from our sponsor, incident.io: Effective incident management demands coordination and collaboration to minimize disruptions. This guide by incident.io covers the full

Saving One Screen At A Time 🖥️

Monday, January 13, 2025

Why the screen saver stopped being so in-your-face. Here's a version for your browser. Hunting for the end of the long tail • January 12, 2025 Today in Tedium: Having seen a lot of pipes, wavy

Software Testing Weekly - Issue 253

Monday, January 13, 2025

Software Testing Weekly turns 5! 🥳 View on the Web Archives ISSUE 253 January 13th 2025 COMMENT Welcome to the 253rd issue! Oh my, time flies! It's hard to believe this week marks 5 years since I

CES 2025 - Sync #501

Sunday, January 12, 2025

Plus: Sam Altman reflects on the last two years; Anthropic reportedly in talks to raise $2B at $60B valuation; e-tattoo decodes brainwaves; anthrobots; top 25 biotech companies for 2025; and more! ͏ ͏

PD#608 Mistakes engineers make in large established codebases

Sunday, January 12, 2025

You can't practice it beforehand ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

C#539 A detailed look at EF Core’s JSON Columns feature

Sunday, January 12, 2025

Comparing it with the traditional tables with indexes ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

RD#488 How to avoid issues with custom Hooks

Sunday, January 12, 2025

Using them carelessly can lead to many problems ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Daily Coding Problem: Problem #1666 [Easy]

Sunday, January 12, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Amazon. Given n numbers, find the greatest common denominator between them. For example,

🛜 Here's What Happens to Old Websites — Features the Pixel Should Copy From Samsung's One UI 7

Sunday, January 12, 2025

Also: What Instagram Needs to Compete With TikTok, and More! How-To Geek Logo January 12, 2025 Did You Know Mount Wingen, located near Wingen, New South Wales in Australia, is better known as Burning