I’m looking to create a new field inside a custom pagebuilder component we created.
The field should include an “add image” input and right underneath a simple input.
I’m using magento with pwa as frontend and we need to implement this new type of field inside the pagebuilder component that will include an image with its own title/name.
I should then be able to fetch both values (image and name) on pwa. Right now i have the example to fetch options inside an input, like this:
const options_cats = node.querySelector('[data-element=options_cats]')?.innerHTML || '';
with the magento code looking like this:
<field name="options_quality_text" sortOrder="112" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="disabledValues" xsi:type="array">
<item name="none" xsi:type="string">0</item>
</item>
<item name="source" xsi:type="string">page</item>
</item>
</argument>
<settings>
<label translate="true">List of cats</label>
<dataType>text</dataType>
<dataScope>options_cats_text</dataScope>
<additionalClasses>
<class name="admin__field-medium">true</class>
</additionalClasses>
<notice translate="true">Use option value comma separated</notice>
<validation>
<rule name="validate-comma-separated-string" xsi:type="boolean">true</rule>
</validation>
</settings>
</field>
<element name="options_cats">
<html name="options_cats_text" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
</element>
This obviously only handles the “name” but with no picture attached:
I was instead looking for something like this:
I’m a beginner with magento frontend, i’d appreciate any heads up on how to achieve this.
If this type of field already exists and has a name please tell me, or if there’s a better option or a guide link, anything is helpful!
Thank you so much!