brianmcdo / vsf-klaviyo

A Vue-storefront module for sending ecommerce data to Klaviyo

Vue Storefront Klaviyo Module

The Klaviyo integration module for vue-storefront.

Installation

By hand (preferer):

git clone [e-mail]:AbsoluteWebServices/vsf-klaviyo.git ./vue-storefront/src/modules/vsf-klaviyo

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

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

export function registerClientModules () {
  ...
  registerModule(KlaviyoModule)
}

Add settings from local.json to your config file. If you want to use different lists for multistore you need to add all list ids to multistoreListIds.

Usage

Add Subscribe/Unsubscripe components as mixins

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

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

Simple subscribe

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

Advanced

klaviyoSubscribeAdvanced - allow custom profile properties and custom list ID

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

Example request data

{
  '$source': 'Source',
  first_name: 'Name',
  last_name: 'Last Name',
  email: 'Email',
  'Custom Property': 'Custom property 1',
  'Custom Property 2': 'Custom property 2',
  listId: '__XXXX__'
}

Klaviyo API extension

Install additional extension for vue-storefront-api: vsf-api-klaviyo.