A custom template must be wrapped into a single root element

Support
#1

Hello,

I’m trying to add 2 fields on the billing form (one for VAT number and the other for the Society name).

I think I’ve correctly followed instructions from this topic and from the documentation, however I’m still getting a warning and both fields are not displayed.

I’m developing on Gatsby, with gatsby-plugin-snipcart-advanced, and I’m passing this HTML (as a template literal) that is injected as dangerouslySetInnerHtml into <div id="snipcart" /> by the plugin

<billing section="bottom">
    <div>
      <fieldset class="snipcart-form__set">
        <div class="snipcart-form__field">
            <snipcart-label class="snipcart__font--tiny" for="society">
            {{ $localize('address_form.society') }}
            </snipcart-label>
            <snipcart-input name="society"></snipcart-input>
        </div>
      </fieldset>
      <fieldset class="snipcart-form__set">
        <div class="snipcart-form__field">
          <snipcart-label class="snipcart__font--tiny" for="vatNumber">
            {{ $localize('address_form.vat') }}
          </snipcart-label>
          <snipcart-input name="vatNumber"></snipcart-input>
        </div>
      </fieldset>
    </div>
  </billing>

I do put a single wrapping div as a child of the overridable component, so I don’t understand why it does not work :thinking:

Everything works fine if I add only one fieldset. I’m using v3.3.0.

Thanks for any assistance,

Regards,
Pierre

#2

Hi @Artimon, thanks for reaching out.

I copied and pasted your code into a simple Snipcart setup, and it worked as expected, adding the two form fields, so the problem might be somewhere else.

Does any error show up on console? Can you show us the generated HTML?
Have you checked this specific section of the doc?

Thank you.

#3

Hi @nelitow ,

Thanks you for your answer. It must be related to the implementation in the Gatsby plugin then. I’ve tried with the static HTML page and it works that way, so it’s fine.

Thank you!

1 Like