Liquid Weekly #33 - Fetching with Javascript

Learn how to fetch data with Javascript 
Shopify Development news and articles
 
Liquid Weekly

Karl Says


This issue is a two parter - lots of JS fetch fundamentals this week in preparation for next week which will focus on manipulating the Shopping Cart via the AJAX API!

News & Articles

Collection filter with Ajax (Fetch) and Alpine.js
See how to implement a filter on the collection page with Ajax (Fetch) and Alpine.JS
How To Make Dawn Sticky Header Permanent
Looking to make sticky permanent header for your newly installed Dawn theme? Look no further and follow this guide!
Shopify’s Bug Bounty Program Raises Maximum Payout in 2022
2021 was a busy year that saw thousands of reports submitted to our program and bounty payouts totaling $1 million (including a maximum bounty that can be paid). This year, we're doubling that maximum amount and moving a few key services into our highest severity level. Read on for a deeper look at insights from the past year, as well as details on new changes, and what’s in store for 2022!
Imagery: powering Shopify's content delivery network
Ever wonder how Shopify handles image assets? Check out this interactive demonstration of how they do it.
SpaceX ISS Docking Simulator
I love space! I thought I was gonna be an astronaut when I was a kid. If any of you follow space news you'll have read that this past week was a historic event. Axiom launched the first entirely private group of astronauts to the ISS on SpaceX's Crew Dragon Vehicle. Here's a fun way to join in the excitement by trying to dock with the ISS yourself!
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

The New App Liquid Object
Announced last week, the new app object is defined only in the context of a theme app extension or app proxy.
How To Use the JavaScript Fetch API to Get Data
There was a time when XMLHttpRequest was used to make API requests. It didn’t include Promises, and it didn’t make for clean JavaScript code. Using jQuery, you could use the cleaner syntax of jQuery.ajax(). Now, JavaScript has its own built-in way to make API requests. This is the Fetch API, a new standard to make server requests with Promises, but which also includes additional features. In this tutorial, you will create both GET and POST requests using the Fetch API.
Conditional statements in Liquid
The foundation of conditional statements can be boiled down to this: if this is true then run this code. You can also expand on that: if this is true then run this code, if not run a different code. You can get carried away on different ways to mold a statement.
How to access the return value of a Promise object
A Promise is an object representing the eventual completion or failure of an asynchronous operation. Let's see how we can use them and access the returned data.
Saving fetched JSON into variable (SO)
A Stack Overflow discussion showing how to use either callbacks or async/await with fetch in order to store JSON into a variable for use later in the codepath.

Changelog

API

Theme app extensions now support conditional app blocks
The visibility of an app block, or app embed block, of a theme app extension can now be controlled based on a custom condition. The condition can be included in the block's schema with the available_if attribute, and the state of the condition is stored in an app-owned metafield. The metafield can be accessed through the Liquid app object.
New app Liquid object
A new Liquid app object is available for use within the context of theme app extensions and app proxies. The app object can be used to access an app's metafields.

Events

April 12 - Shopify Ruby Office Hours
Join staff from Shopify Engineering for a discussion on security and open source in the context of Ruby!
April 13 - Introduction to Working With Shopify Themes
Following this practical workshop you’ll be able to set up a local development environment and edit theme code to customize an example storefront. We’ll also explore Shopify’s Liquid templating language and learn how it can be leveraged to display dynamic store content.
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

Design Lead, UK remote
We’re a fully remote digital agency consisting of around 40 employees. We’re data-driven and passion-fuelled. We use our unique mix of expertise to design, build and grow best-in-class ecommerce brands – because their success is our success.
Marketing Web Developer, India / SE Asia (Remote)
You’ll work with the Marketing Lead to develop our robust marketing ecosystem of websites, landing pages, integrations, analytics, and more. As a part of this team, you will be a key part of our app integration, and app growth efforts.

Tip of the Week

Auto Apply Discount Codes

Here's a technique for auto applying discounts and having them reflected in the cart that doesn't require Shopify Plus.

Call fetch(‘/discount/YOUR-CODE’).

That will create a discount_code cookie for the site. Shopify reads that at the checkout screen. On the front end you can use this snippet to pull the current discount.

Once you read the discount code do some logic to show the correct pricing in the cart. This is Hardcoded but the user won’t know the difference and will feel like they applied the discount before checkout.


Thanks to Celso White for the excellent tip!

 

Older messages

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

Liquid Weekly #28 - Dawn Theme Transparent Header

Tuesday, March 8, 2022

Learn How to Add a Transparent Header to Dawn Shopify Development news and articles Issue #28 - 3/8/2022 Read Online Liquid Weekly Karl Says Got any plans for Spring Break 2022? What's one new

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