Shopify dynamic metafields for product when it's a 404 (Liquid nested in Liquid?) without Shopify API

Whenever a URL results in a 404, I have a javascript that fires that redirects conditionally to a relevant URL. This has worked great for some time. But now I want to be able to redirect specific products that have been Drafted... to specific redirect URLs using metafields... and without utilizing Shopify API. WHAT I HAVE DONE : I have successfully allowed administrators to enter a URL in a metafield (redirect_url). And I have been able to output that to the product page : {{ product.metafields.custom.redirect_url.value }} And I have been able to pass that to javascript : const redirect_url = "{{ product.metafields.custom.redirect_url.value }}"; console.log(redirect_url); // output : the correct redirect URL BUT... the metafields are NOT available when the product is Drafted and results in a 404... BUT I have discovered you can access metafields even when not on that product page... like this : {{ product['example-product-handle'].metafields.custom.redirect_url.value }} but I need something dynamic... {{handle}} is available and valid... and this would be golden : const redirect_url = "{{ product['{{ handle }}'].metafields.custom.redirect_url.value }}"; but that breaks and the result is a mangled string :( so i'm up against the wall with this and seeking help... I would really appreciate any solutions anyone has to offer! To reiterate the goal : I need to be able to access the metafields of a product even when it's a 404. Normally, Shopify provides access to the metafileds easily, but NOT when it's a 404. So I want to be able to take the available data {{ handle }} and use it to access the metafields I also want to avoid using Shopify Redirects because I want to make it easier and convenient for content administrators by being able to change the redirect URL themselves inline on the Edit Product screen.

Given that direct Liquid template interpolation (like nesting {{ handle }} inside another Liquid object reference) won't work as expected, and considering the constraint of accessing drafted product metafields from the 404 page, you'll need to employ a more programmatic approach, typically involving Shopify's Admin API or Storefront API, combined with some server-side or client-side logic. Here's a strategy to consider: Use Shopify's APIs Admin API: This can access any product's metafields, regardless of its publication state. However, it requires server-side logic and is not directly accessible from the storefront due to security reasons (API key and password needed). Storefront API: Less privileged than the Admin API but can be used directly from the storefront with storefront access tokens. It might have limitations regarding accessing unpublished products' data directly. Create a Custom Endpoint or Webhook Since accessing unpublished product metafields directly on the storefront isn't straightforward, consider creating a custom server-side endpoint or a webhook that: Can be called from your JavaScript code on the 404 page. Takes the product handle as input. Uses the Admin API to fetch the metafield data for the given handle. Returns the redirect URL to the client-side JavaScript for redirection. Implementation Steps: Backend Setup: Implement a server-side script (using Node.js, PHP, Ruby, etc.) that listens to requests from your Shopify store. This script should accept the product handle, use it to call the Shopify Admin API, fetch the redirect_url metafield for the product, and then respond with this URL. Frontend Integration: On the 404 page, modify your JavaScript to make an AJAX/fetch request to your custom backend endpoint, passing the product handle from the available data. On receiving the response (the redirect URL), use window.location to redirect the user accordingly. Sample JavaScript (Client-Side): document.addEventListener('DOMContentLoaded', function() { const productHandle = "{{ handle }}"; // Assume this is available or extracted from the URL const endpoint = "https://yourserver.com/fetch-redirect-url"; // Your custom endpoint fetch(`${endpoint}?handle=${productHandle}`) .then(response => response.json()) .then(data => { if (data.redirect_url) { window.location.href = data.redirect_url; } }) .catch(error => console.error('Error fetching redirect URL:', error)); }); Hope it helps.

February 13, 2024

I discovered through experimentation that using routine Shopify Redirects can manage this (Online Store -> Navigation -> View Redirects). If you make a redirect for a product... and it is Status -> Active... the redirect will NOT fire. But... if it is Status -> Draft... the redirect WILL fire. In other words... Shopify Redirects will only fire if the request results in a 404. Therefore, you can manage temporary public products simply by toggling the Status. My "Use Case Scenario" : A Livestream Promo that is live for a 1-hour window 2-3 times per week. This allows a non-code-savvy admin to easily manage the livestream status... therefore it is "good enough". In the future... I will use metafields to allow an admin to enter a livestream schedule and a redirect URL... and the product will simply remain Status -> Active (therefore allowing access to all the usual metafields). Then Javascript will handle the redirection based on the schedule.

February 13, 2024