Get products on current page

Retired Boards Appdev Custom Storefronts
1

Hi, I’m building a widget that offers support to customers regarding products. For this, I need to list the products available in a page, that a customer is on.

So far my plan is to:

  1. Turn the application into a sales channel and get access to storefront API
  2. Include the widget to storefront using a script tag
  3. Get the current page’s information using the ShopifyAnalytics global variable (using javascript)
  4. If it’s a Collection page, query for the products in that collection using the storefront API
  5. Display the products on the widget

Is there a better way to get this done? Am I misusing the Sales Channel option?

2

I discovered an alternative method to get the products shown on current page.

You can inject a small piece of code in the liquid files that render a product into view. Code example:

{% if product %}
    <script type="text/javascript" async>
        if(!window.vudoir) window.products = {};
        window.products[{{ product.id }}] = {{product | json}};
    </script>
{% endif %}

The challenge is to inject this code to all template files that render a single product. Right now, I’m thinking of doing a wildcard search and inject the code to all template files that have the substring “product” in their titles.

The injection can be done by the REST API Asset endpoints
https://shopify.dev/docs/admin-api/rest/reference/online-store/asset?api[version]=2020-04

It would be great if someone could give their opinion on this approach.