Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add order custom fields in this example? #1

Open
baermathias opened this issue May 30, 2022 · 0 comments
Open

How to add order custom fields in this example? #1

baermathias opened this issue May 30, 2022 · 0 comments

Comments

@baermathias
Copy link

baermathias commented May 30, 2022

If I add custom elements to the hidden div like this (example from https://docs.snipcart.com/v3/setup/order-custom-fields):

<div
  hidden
  id="snipcart"
  data-api-key="my-key-here"
>
  <billing section="top">
    <fieldset class="snipcart-form__set">
      <div class="snipcart-form__field">
        <snipcart-label for="storeToPickUpFrom" class="snipcart__font--tiny">
          Store to pick-up from
        </snipcart-label>
        <snipcart-select name="storeToPickUpFrom" class="snipcart-form__select  snipcart__font--secondary snipcart__font--bold">
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3"> Three</option>
          <option value="4">Four</option>
        </snipcart-select>
      </div>
    </fieldset>
  </billing>
</div>

I get errors:

Failed to resolve component: snipcart-label If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Failed to resolve component: snipcart-select If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Failed to resolve component: billing If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

This can be solved by adding the tag names to isCustomElement:

vue: {
  compilerOptions: {
    isCustomElement: tag => ['snipcart-label', 'snipcart-select', 'billing'].includes(tag)
  }
},

But there is still this problem with billing:

Hydration node mismatch:
- Client vnode: billing 
- Server rendered DOM: <!---->  
  at <NuxtPage> 
  at <VMain> 
  at <VApp> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous name="default" > 
  at <App key=1 > 
  at <NuxtRoot>

How could this be solved? @ludovic-armand
Here is a tiny reproduction of the problem: https://stackblitz.com/edit/github-rytvwm?file=layouts/default.vue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant