Setting up E-commerce Resource Previews
Using preview types, you can configure your page and section model content to display previews of your e-commerce platform's resources while editing in the Visual Editor.
When you open content within the Visual Editor for a model that has a preview field, a searchable list of e-commerce resources appears. Selecting a resource fetches its data from your e-commerce platform and can be used to construct a template string for the editing URL.
For example, you can set your editing URL to a template string that embeds a product's handle, such as http://localhost:3000/products/${product.handle}. You can respond to the request with a dynamic route on your back end by parsing the handle, fetching data from your e-commerce platform, and exposing that data to your content through state or context.
With this technique, you can enable creators to preview what products, collections, and other resources look like on your product detail pages (PDPs) and other content.
Adding the preview type field to your data model
Start by adding a new custom field to your page or section model from the Models page on the dashboard. Select your model, and then select New field.
On the new field form, select the Type drop-down.
Scroll until you find your e-commerce plugin's custom types and select one of the preview types. In our example, we'll select the Shopify product preview type.
Our new custom field is now a Shopify product preview. Rename the field to something more descriptive, such as previewProduct, and select Save.
You now have a field on our model called previewProduct that's a Shopify product preview. You can use this field in the model's editing URL.
On the model's settings page, modify the editing URL to use the field in a JavaScript template string, for example ${space.siteUrl}/product/${previewProduct.handle}.
The parameters in the example template string are interpolated in the following way:
space.siteUrlis the Site URL as set on the Account page, which for most headless Builder sites points to localhost.previewProduct.handleis determined after the user opens the model's content in the Visual Editor and selects a resource from the searchable list. The plugin automatically fetches the associated data from the e-commerce platform and exposes its properties to the editing URL template string on an object with the same name as the field. In this case,previewProduct.handlerepresents the handle of the selected product.
Selecting a resource to preview
You can preview a resource by selecting it from the searchable list that appears when you open your model's content in the Visual Editor.
The searchable list doesn't appear again after making your selection when you reopen your content because your selection is saved across sessions.
You can change the preview selection in the future from the Options pane in the Visual Editor by selecting the preview field's edit button.
Previewing your content
If you've set your model's editing URL to use the preview field's handle or ID, as explained above, you can create a dynamic route on your back end that:
- Parses the URL path to extract the resource's handle or ID.
- Fetches the resource's data from your e-commerce platform using the parsed identifier.
- Exposes the fetched data to your content using state or context.
Once you create the appropriate integration on your back end, you can use data bindings on your blocks to display your resource's data with data bindings.
The annotated screenshot below illustrates how an example page might display a preview for a product in a Shopify store:
- The editing URL, previously set to
${space.siteUrl}/products/${previewProduct.handle}, evaluates tohttp://localhost:3000/product/short-sleeve-t-shirtafter the user selects the Short sleeve t-shirt for the preview field. - A binding for the title of the Product View block, which is a custom component in our example registered by the application, sets the Product View's title to
state.product.title.state.productis passed when rendering the content in our dynamic route on our back end. - The title renders within the Product View block's custom component.
Next steps
For more information on using e-commerce plugins, check out the following articles:
