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

The worst of the VC fund performance may be behind us

Friday, May 10, 2024

Plus: Zeekr's shares pop and Dell's data breach did include personal data View this email online in your browser By Christine Hall Friday, May 10, 2024 Good afternoon, and welcome to TechCrunch

DeepMind releases AlphaFold 3 - Weekly News Roundup - Issue #466

Friday, May 10, 2024

Plus: OpenAI releases Model Spec; Neuralink publishes progress update; Tesla shares new video of Optimus; growing meat with Gatorade; and more! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Issue #540: Jam winners, AGILE, and game of life in 3D

Friday, May 10, 2024

Weekly newsletter about HTML5 Game Development. Is this email not displaying correctly? View it in your browser. Issue #540 - May 10th 2024 If you have anything you want to share with the HTML5 game

🕹️ The Future of Game Emulators — We Tried Browsing the Web With Safari 1.0

Friday, May 10, 2024

Also: How Linux Got Its Name, and More! How-To Geek Logo May 10, 2024 Did You Know Honey crisp apples were developed by the Minnesota Agricultural Experiment Station's Horticultural Research Center

JSK Daily for May 10, 2024

Friday, May 10, 2024

JSK Daily for May 10, 2024 View this email in your browser A community curated daily e-mail of JavaScript news How to Create Objects in JavaScript In programming, objects are fundamental building

iOS Dev Weekly - Issue 660

Friday, May 10, 2024

Happy Birthday to … the Worldwide Developers Conference! 🎂 View on the Web Archives ISSUE 660 May 10th 2024 Comment Reading this post from Jim Luther wishing WWDC a happy 35th birthday set me thinking

Startups Weekly: Trouble in EV land and Peloton is circling the drain

Friday, May 10, 2024

Plus: The quirky rabbit R1 and Tesla's relationship with lidar View this email online in your browser By Haje Jan Kamps Friday, May 10, 2024 Welcome to Startups Weekly — Haje's weekly recap of

Daily Coding Problem: Problem #1437 [Hard]

Friday, May 10, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Microsoft. Given an array of numbers, find the length of the longest increasing

A Crushing Blow

Friday, May 10, 2024

Apple needs to read the room in which they find themselves... A Crushing Blow By MG Siegler • 10 May 2024 View in browser View in browser What came first, the quip or the commercial? What a silly

Charted | How Americans Feel About Federal Government Agencies 💸

Friday, May 10, 2024

Americans love the National Park Service. They hate the IRS. But what about the ones in between? View Online | Subscribe Presented by Voronoi: The App Where Data Tells the Story FEATURED STORY How