Make it possible to personalize products. Adds input fields for text, image, etc.
The script is divided into several parts to make it possible to load only what is necessary for the product. This results in several different javascript files that can be loaded. Read each to see which fields can be used and their properties.
Install the dependencies by running:
yarnor
yarn buildThis, internally, runs rollup and builds the public/index.js from the src/main.ts file.
The built files is hosted on a webserver and imported in the Shopify stores.
Three different Liquid blocks are used:
<amea-fields></amea-fields>
{%- if product.metafields.amea.preview_render != blank and product.metafields.amea.preview_templates != blank -%}
<amea-preview></amea-preview>
{%- endif -%}
{% assign random_number = "now" | date: "%N" | modulo: 10000 | plus: min %}
<script src="https://cdn.ameaab.se/amea-shopify.js?v={{random_number}}" defer="defer"></script>
<script id="amea-fields-settings" type="application/json">
{{ product.metafields.amea.fields }}
</script>
{%- if product.metafields.amea.preview_render != blank and product.metafields.amea.preview_templates != blank -%}
<script id="amea-preview-render-settings" type="application/json">
{{ product.metafields.amea.preview_render }}
</script>
<script id="amea-preview-template-settings" type="application/json">
{{ product.metafields.amea.preview_templates }}
</script>
{%- endif -%}
A random number is generated and appended as a query parameter, this is just so we always fetch the latest version of the app.
Three metafields are used by this script, none of them are required. All of them are on product level.
amea.fields- Define fields that the customer can/needs to fill in for the productamea.preview_templates- Define which of the different rendering methods the different product variants should use.amea.preview_render- Define how the preview should be rendered, where the various elements are placed, etc.