I am working on my first liquid block in a theme app extension. The end goal is to build a product form that handles subscription selection, as per Shopify’s docs: https://shopify.dev/themes/pricing-payments/subscriptions/selling-plans
The idea is that the liquid template exposes the product object to related JavaScript as JSON. The product is turned into JSON using the “| json” liquid filter, then attached to a custom data attribute on a element.
{% form 'product', product %}
{% endform %}
This is the exact code from the docs page linked above.
Then, the related JavaScript file queries for the fieldset element, accesses the product object and parses it using JSON.parse() to be used in dynamic operations.
var sellingPlanContainer = document.querySelector('.selling-plan-fieldset')
console.log('product object as unparsed JSON: ', sellingPlanContainer.dataset.product)
var product = JSON.parse(sellingPlanContainer.dataset.product)
console.log('product object parsed into Javascript: ', product)
This is also exact code from the docs, minus the logs.
Then something really strange and frustrating happens, as you can see from the logs. The JSON output from the liquid code to the data attribute stops at the first space character. This obviously throws an error when the browser attempts to parse it because there’s no closing curly brace on the object string. As you can see, I even changed the title of the product to a string without any spaces just to see what would happen, but the error happened at the next space.
Any ideas on why this could be happening/possible solutions? Thanks in advance!