Custom Field Value Plugin in Preview Template

Is there a way to get a custom plugin’s value (which was saved to the model) in the Preview Template of a component? The documentation says it’s possible, but then only links to the plugin creation documentation which does not mention anywhere on how to do this.

For example, I have a plugin where a content creator selects a product from a list and the plugin saves the “sku” as “sku” on the model. (This all works perfectly.) Now I want to allow content creators to be able to add multiple products to a page (not a product grid, but more like a bundle of products) which means she needs to be able to re-use the plugin multiple times on a single page. So I created a component with the plugin, and then a component that limits the “blocks” to just that plugin component so she can add one or more.

The “plugin component” only shows the default title “Product” on the selected value. I’d like to modify the preview template to show the SKU that was selected from the plugin, but again - the docs don’t give any info on what fields to use or how to access the model/values of a plugin in a preview template.

Help?

Hi @joe ,

You can edit the preview template within the blok configuration. As you mentioned you got a product selection (custom field type plugin) and wrapped it in a component. In the “Config” Tab of this component you can deine a “preview Template” based on the output of you field.

Just created an example. Component wrapped with a product selection as in your scenario.

When editing that blok/component “product” you can head over to the config tab and write in Vue Style or “Squirelly” (however it’s called) to preview a certain attribute of your output:

In my case the component is called “product” and the field for choosing a product is called product too, therefore do not get confused :slight_smile:
And based on the model / output schema I can just write {{product.item.name}} and it’s getting previewed correctly :slight_smile:

{
          "_uid": "17fe34d1-d329-4d29-ab7f-d5d8a68c5f91",
          "product": {
            "_uid": "009b1aef-7961-4955-91de-c5e610296f39",
            "item": {
              "id": "5e5198ce72f5542e005fa4c8",
              "sku": "TV-MM-KBS-BL",
              "cost": null,
              "name": "Moccamaster KBS Black",
            },
            "plugin": "rxs-swell-integration"
          },
          "component": "product",
          "_editable": "<!--#storyblok#{\"name\": \"product\", \"space\": \"156697\", \"uid\": \"17fe34d1-d329-4d29-ab7f-d5d8a68c5f91\", \"id\": \"132483961\"}-->"
        }

image

1 Like