Utils

Check the snipcart products documentation for more information about custom fields.

CustomFields

You will have access to the $snipcart.customfields function in your project. It will help you bind custom fields from your product.

We are transforming the data for v-bind. We are not performing any tests. You have to handle the transformation of your data in respect to the snipcart documentation.

Usage

You can check out our example.

You can access the utils functions anywhere in your app. For example, asyncData, mounted, vuex, etc.

<template>
  <div>
    <button
      class="snipcart-add-item"
      v-bind="$snipcart.customfields(product.customFields)"
    >
      Add to cart
    </button>
  </div>
</template>

<script>
export default {
  data: () => ({
    product: {
      customFields: [
        // dropdown
        {
          name: 'Frame color',
          options: 'Black|Brown|Gold'
        },
        // text note
        {
          name: 'Gift note'
        },
        // checkbox
        {
          name: 'Gift',
          type: 'checkbox'
        },
        // textarea
        {
          name: 'Long message',
          type: 'textarea'
        },
        // readonly
        {
          name: 'Readonly information',
          type: 'readonly',
          value: 'This is a readonly custom field'
        },
        // default value
        {
          name: 'awesome default value',
          options: 'Black|Brown[+100.00]|Gold[+300.00]',
          value: 'Brown'
        },
        // required
        {
          name: 'Special comments',
          type: 'textarea',
          required: 'true'
        },
        // placeholder
        {
          name: 'Engraving',
          placeholder: 'ex: John Doe'
        }
      ]
    }
  })
  asyncData(context) {
    console.log(context.app.$snipcart)
  }
}
</script>

setLanguage

See more about localization in our customization part.

By default snipcart will check for html lang variable so please consider to use it instead before using this utils.

You have access to $snipcart.setLanguage. It should be only executed on front. You will have an error if you try to execute it from the server.

Usage

<template>
  <div>
    <button class="switch-lang" @click="switchLang">
      switch Lang
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    switchLang () {
      this.lang = this.lang === 'fr' ? 'en' : 'fr'
      this.$snipcart.setLanguage(this.lang)
    }
  }
}
</script>

checkout our example repo for more informations

setCurrency

Change currency based on snipcart api. https://docs.snipcart.com/v1/javascript-api/public-api.

Usage

<template>
  <div>
    <button class="switch-currency" @click="switchCurrency">
      switch currency
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    switchCurrency (currency) {
      this.$snipcart.setCurrency(currency)
    }
  }
}
</script>

bindProduct

You can add informations by default with snipcart by yourself.

<button
  class="snipcart-add-item"
  v-bind="$snipcart.customfields(product.customFields)"
  :data-item-id="product.id"
  :data-item-price="product.price"
  :data-item-url="product.storeUrl"
  :data-item-description="product.description"
  :data-item-name="product.title"
>
  Add to cart
</button>

Or you can use the utils do the job for you.

We are transforming the data for `v-bind`. We are not performing any tests. You have to handle the transformation of your data in respect to the snipcart documentation.

Usage

<button
  class="snipcart-add-item"
  v-bind="{
    ...$snipcart.customfields(product.customFields),
    ...$snipcart.bindProduct(product)
  }"
>
  Add to cart
</button>

or without custom fields

<button
  class="snipcart-add-item"
  v-bind="$snipcart.bindProduct(product)"
>
  Add to cart
</button>