Custom Types for Custom Fields - Answers needed!

[eddast]

Hi! I was wondering whether it's possible to use custom types for custom fields ?

In my case I want to add a tabbed additional information section to the Product Detail view, so I'd like to add list of an object with two fields, one that specifies the tab label and another that is a rich text or something for whatever content is associated with the current tab.

I've not found a way to make this happen yet, What I currently have is the following config:

customFields: {
  Product: [
    {
      name: 'infoTabs',
      type: 'text',
      ui: { component: 'rich-text-form-input' },
      list: true,
      public: true,
    },
  ],
}

But using this method, I only manage to offer the rich text editor for the content but I'd like to add a label field for each info tab.

Is this at all possible? I couldn't find anything on this subject in the Vendure documentation.

Thank you so much!

[michaelbromley]

Hi Edda,
So I can think of a couple of ways to implement this:

1. Create a new Entity representing, e.g. InfoTab. Then use a custom field with type 'relation' and list: true as covered here: https://www.vendure.io/docs/developer-guide/customizing-models/#relations. This is the more complex option and might be overkill.
2. Use a text field and store a JSON stringified object with eg label and content properties.

In both cases, you'll need to implement a custom UI form input component to manipulate these values. E.g. in option 2, the component would do JSON.parse() on the stored value, and upon saving would do JSON.stringify().

Personally I would probably prefer option 2 because it is much simpler. I hope that helps!

[eddast]

Thank you so much Michael for the quick and detailed response :) We love your product!