How to pass product properties to non-product page

Solved
jasoncarousel
Excursionist
16 2 2

Hello,

We have modified our product section to include the following link:

 

<a href="https://[ourstore]/pages/[ourpage]/{{ product.selected_or_first_available_variant.barcode }}">Launch App</a>

 

This is a link to a page we created to display a custom app. The custom app is delivered through an iframe. Here is the liquid code for the page that displays the custom app:

 

<div class="container cf">
<iframe id="incontent" frameborder="0" src="https://[ourstore]/apps/[ourapp]/[productidentifier]" width="100%" height="900px"></iframe>
</div>

 

The issue is how we access the product identifier from the URL. I've read a few threads here on the topic, such as:

https://community.shopify.com/c/Shopify-Discussion/Access-querystring-in-Liquid/td-p/75151

But none of the threads are recent (that one is 12 years old), so I have a hard time imagining they are still relevant.

Can anyone recommend how we should pass this product identifier to our page, and then use the identifier in the iframe source to our custom app?

Thanks for any help

0 Likes
MUTANGA
Tourist
9 1 3

This is an accepted solution.

You could maybe do something with localStorage

  • Get product identifier from product page
  • Create a localstorage entry and store the identifier
  • Retrieve the identifier when in app page
  • Inject value on URL. 

 

0 Likes
jasoncarousel
Excursionist
16 2 2

That would work, but to keep it transactional, we'd have to set the local storage variable only when the app link is clicked. So javascript onclick to local storage and then reading and clearing local storage on the app page.

That seems like a very convoluted way to rebuild what would be trivial if you could just read query string variables with liquid.

0 Likes