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

Code Inspire

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!

John from Jotting

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!

Jenn Newton

Imagery: powering Shopify's content delivery network

Ever wonder how Shopify handles image assets? Check out this interactive demonstration of how they do it.

Shopify Engineering

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!

SpaceX

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.

Shopify

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.

Sara Vieira

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.

Joe Pichardo

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.

Katsiaryna (Kate) Lupachova

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.

4/4/2022

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.

4/4/2022

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!

Shopify Engineering

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.

Liam Griffin

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.

Gift Egwuenu

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.

Underwater Pistol

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.

Stay Tuned

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!

first entirely private group AlpineJS Code Inspire sticky permanent header highest severity level Jenn Newton Imagery content delivery network Crew Dragon Vehicle Dawn Sticky Header Shopify Development news Bug Bounty Program JS fetch fundamentals Articles Collection filter

Liquid Weekly #33 - Fetching with Javascript

Karl Says

News & Articles

Code & Tools

Changelog

API

Events

Jobs

Tip of the Week

Key phrases

Older messages

Liquid Weekly #32 - Create an Accessible FAQ Section

Liquid Weekly #31 - Using Shopify CLI for continuous integration

Liquid Weekly #30 - Achieve Maximum Performance with Laziness

Liquid Weekly #29 - Don't Lose Your App Store Listing, Ditch EASDK!

Liquid Weekly #28 - Dawn Theme Transparent Header

You Might Also Like

LW 129 - Checkout Branding and Extensions

Invitation: AI Demo Day (3rd and final)

📢 .NET 8 Series Soon!

Samsung is, once again, shipping the most phones in the world

Intel and Lenovo BMCs Contain Unpatched Lighttpd Server Flaw

Post from Syncfusion Blogs on 04/16/2024

Issue 154.5

Edge 387: Tool Learning in Autonomous Agents

Tesla layoffs 🚗, OpenAI Batch API 🤖, tech jobs leaving California 💼

Introducing our new mobile app! 🥁📱