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

Overcoming Perfectionism: How to Break Free from the Enemy of Progress

Wednesday, November 27, 2024

Discover how perfectionism hinders progress and learn practical strategies to overcome the fear of imperfection, boost productivity, and achieve your goals without getting stuck in the pursuit of

🖤 Laravel Black Friday Deals!

Wednesday, November 27, 2024

The biggest deals of the year Laravel Black Friday Deals View in browser Laravel News Editor Note: We are sending this outside the regular Sunday newsletter schedule because some of these specials end

BetterDev #271 - Memory: The Forgotten History and Why did Windows 95 setup use three operating systems?

Wednesday, November 27, 2024

Better Dev #271 Nov 26, 2024 Hi all, Welcome to thanksgiving issue of BetterDev. Hope everyone had a safe and warm thanksgiving. It's getting so cold these days. If you are in warzone such as

Mapped | Unemployment Rate By U.S. State in 2024 💼

Tuesday, November 26, 2024

As of October 2024, DC and Nevada tied for the highest unemployment rate in the US at 5.7%. Which states saw the lowest rates? View Online | Subscribe | Download Our App FINAL CHANCE - ENDS TONIGHT!

🔊 7 DIY Tips for Soundproofing a Room — Why I Switched to Xfce for Linux Mint

Tuesday, November 26, 2024

Also: Home Theater Sound Terms Explained, and More! How-To Geek Logo November 26, 2024 Did You Know The shiny layer of a CD doesn't contain the data; the plastic polycarbonate layer does. The shiny

JSK Daily for Nov 26, 2024

Tuesday, November 26, 2024

JSK Daily for Nov 26, 2024 View this email in your browser A community curated daily e-mail of JavaScript news JavaScript Certification Black Friday Offer – Up to 54% Off! Certificates.dev, the trusted

NumPy, Loop Targets, Vector Animation, and More

Tuesday, November 26, 2024

NumPy Practical Examples: Useful Techniques #657 – NOVEMBER 26, 2024 VIEW IN BROWSER The PyCoder's Weekly Logo NumPy Practical Examples: Useful Techniques In this tutorial, you'll learn how to

Your Games Quarterly newsletter has arrived

Tuesday, November 26, 2024

What's new for games in Google Play and Android Email not displaying correctly? View it online November 2024 The First Developer Preview of Android 16 The First Developer Preview of Android 16

Daily Coding Problem: Problem #1620 [Hard]

Tuesday, November 26, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Dropbox. Sudoku is a puzzle where you're given a partially-filled 9 by 9 grid with

Final Hours: Help Save "The Art of Data" From Falling Short 🙏

Tuesday, November 26, 2024

Will Visual Capitalist end up revealing the secrets behind data storytelling? There are 12 hours left to change the fate of "The Art of Data". View Online | Subscribe | Download Our App Help