$localize in custom components gives error in Nuxt project

Support
#1

Hi

I’m using the nuxt plugin https://snipcart.nuxtjs.org/ and want to add a custom component with localized labels (en/nl).

So I’ve added the code below in snipcart/customize.js to override the address fields, but I’m receiving this error whenever I use $localize :

Syntax Error: Missing semicolon. (77:360)                                                                                                                                                                                                    friendly-errors 20:47:17

  75 |   })
  76 |
> 77 |   snipcartHTML.innerHTML = '"\n<address-fields>\n    <div>\n      <fieldset class=\"snipcart-form__set\">\n        <div class=\"snipcart-form__row\">\n          <div class=\"snipcart-form__field snipcart-form__cell--large\">\n            <snipcart-label\n              class=\"snipcart__font--tiny\"\n              for=\"address1\"\n            >{{ $localize('address_form.address1') }}</snipcart-label>\n            <snipcart-input name=\"address1\"></snipcart-input>\n            <snipcart-error-message name=\"address1\"></snipcart-error-message>\n          </div>\n\n          <div class=\"snipcart-form__field snipcart-form__cell--tidy\">\n            <snipcart-label\n              class=\"snipcart__font--tiny\"\n              for=\"address2\"\n            >{{ $localize('address_form.address2') }}</snipcart-label>\n            <snipcart-input name=\"address2\"></snipcart-input>\n            <snipcart-error-message name=\"address2\"></snipcart-error-message>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n  </address-fields>\n"'
     |                                                                                                                                                                                                                                                                                                                                                                         ^
  78 |   document.body.appendChild(snipcartHTML)
  79 | }
  80 |

module.exports = `
<address-fields>
    <div>
      <fieldset class="snipcart-form__set">
        <div class="snipcart-form__row">
          <div class="snipcart-form__field snipcart-form__cell--large">
            <snipcart-label
              class="snipcart__font--tiny"
              for="address1"
            >{{ $localize('address_form.address1') }}</snipcart-label>
            <snipcart-input name="address1"></snipcart-input>
            <snipcart-error-message name="address1"></snipcart-error-message>
          </div>

          <div class="snipcart-form__field snipcart-form__cell--tidy">
            <snipcart-label
              class="snipcart__font--tiny"
              for="address2"
            >{{ $localize('address_form.address2') }}</snipcart-label>
            <snipcart-input name="address2"></snipcart-input>
            <snipcart-error-message name="address2"></snipcart-error-message>
          </div>
        </div>
      </fieldset>
    </div>
  </address-fields>
`;

It works fine when I replace the {{ $localize('address_form.address1') }} with static text.

I’ve added the following to nuxt.config.js, but this also doesn’t seem to do the trick. Where should I add translations in a Nuxt project for this to work?

snipcart: {
    key: SNIPCART_KEY,
    locales: {
      en: {
        address_form: {
          address1: 'Street',
          address2: 'Box'
        }
      },
      nl: {
        address_form: {
          address1: 'Straat',
          address2: 'Bus'
        }
      }
    }
  },

Would really appreciate some help!

Kind regards
Woet

Override components with Nuxt not working
#2

It might be that you have to escape the apostrophe in the $localize method call, as you are adding it in JS code with the Nuxt Snipcart module:

$localize(\'address_form.address2\')

#3

double curly braces are polish notation (as far as I’m aware / in my experience)

also $localize would seem to indicate that it’s a variable because of the $ but you are calling it like a function.

so it might be more like this

{{localize ‘address_form.address2’}}

or i mean, you can set it as a variable first

{{ $localized = localize ‘address_form.address2’}}{{$localized}}

I’m assuming the notation is the same in different languages, so forgive me if I’m off-base here

#4

Hi there,

You could use an external HTML file for your custom templates.
Here is a working example : Nuxt - Customization (external templates) - CodeSandbox

Here is the documentation entry on this feature: Customization – Snipcart Documentation

#5

Thanks! This works perfectly :slight_smile:

#6