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!