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!