Vue Storefront Klaviyo Extension

The Klaviyo integration module for vue-storefront.

Installation

By hand (preferer):

git clone git@github.com:AbsoluteWebServices/vsf-klaviyo.git ./vue-storefront/src/modules/

Registration the Klaviyo module. Go to ./vue-storefront/src/modules/index.ts

...
import { Klaviyo } from './vsf-klaviyo';

export const registerModules: VueStorefrontModule[] = [
  ...
  Klaviyo
]

Add following settings to your config file.

  "klaviyo": {
    "public_key": "__YOUR_PUBLIC_KEY__",
    "endpoint": {
      "api": "https://a.klaviyo.com/api",
      "subscribe": "http://localhost:8080/api/ext/klaviyo/subscribe",
      "backInStock": "https://a.klaviyo.com/onsite/components/back-in-stock/subscribe"
    },
    "listId": "__NEWSLETTER_LIST_ID__",
    "platform": "magento_two"
  },

Add Subscribe/Unsubscripe components as mixins

...
import { Subscribe } from 'src/modules/vsf-klaviyo/components/Subscribe'

export default {
  ...
  mixins: [Subscribe],
  ...
}

<form @submit.prevent="klaviyoSubscribe(onSuccess, onFailure)">
<!-- Your subscribe form -->
</form>

Klaviyo API extension

Install additional extension for vue-storefront-api:

cp -f ./vue-storefront/src/modules/vsf-klaviyo/API/klaviyo ./vue-storefront-api/src/api/extensions/

Add the config to your api config.

  "extensions":{
    "klaviyo": {
      "apiKey": "__YOUR_PRIVATE_KEY__",
      "apiUrl": "https://a.klaviyo.com/api",
      "listId": "__NEWSLETTER_LIST_ID__"
    },
    ...
  },
  "registeredExtensions": [
    "klaviyo",
    ...
  ],