diff --git a/.env.example b/.env.example index 490c29f..78b9d8a 100644 --- a/.env.example +++ b/.env.example @@ -37,3 +37,4 @@ NEXT_PUBLIC_DEFAULT_REVALIDATE_TARGET=3600 # Klaviyo Public Key can be found in your Account API Keys: https://www.klaviyo.com/settings/account/api-keys NEXT_PUBLIC_KLAVIYO_PUBLIC_KEY=YourPublicKey +NEXT_PUBLIC_KLAVIYO_FORM_ID=YourFormID \ No newline at end of file diff --git a/README.md b/README.md index 3234d3a..3435a63 100644 --- a/README.md +++ b/README.md @@ -14,13 +14,16 @@ git clone git@github.com:bigcommerce-labs/catalyst-klaviyo.git && cd catalyst-kl pnpm create @bigcommerce/catalyst@latest init ``` -3. The `.env.local` file created by the `init` command above will not create the `NEXT_PUBLIC_KLAVIYO_PUBLIC_KEY` variable, so we'll need to add that. To create a public key, [install and configure the Klaviyo application for BigCommerce](https://help.klaviyo.com/hc/en-us/articles/115005082547). +3. The `.env.local` file created by the `init` command above will not create the `NEXT_PUBLIC_KLAVIYO_PUBLIC_KEY` or `NEXT_PUBLIC_KLAVIYO_FORM_ID` variables, so we'll need to add them. To create a public key, [install and configure the Klaviyo application for BigCommerce](https://help.klaviyo.com/hc/en-us/articles/115005082547). > [!NOTE] > For Step 5 in the Klaviyo help article above, you most likely want to uncheck the **Onsite Tracking** box; onsite tracking scripts are taken care of for you by the files contained in the `integrations/klaviyo` directory at the root of this repository. -4. Now that your Klaviyo account is linked to your BigCommerce store, grab your Klaviyo Public Key from your Klaviyo account: [https://www.klaviyo.com/settings/account/api-keys](https://www.klaviyo.com/settings/account/api-keys), and then run the command below replacing `YOUR_PUBLIC_KEY` with the value retrieved from your account +4. Now that your Klaviyo account is linked to your BigCommerce store, grab your Klaviyo Public Key from your Klaviyo account: [https://www.klaviyo.com/settings/account/api-keys](https://www.klaviyo.com/settings/account/api-keys), and then run the command below replacing `YOUR_PUBLIC_KEY` with the value retrieved from your account. + +5. To fetch your form ID, follow the instructions in the Klaviyo help article [here](https://help.klaviyo.com/hc/en-us/articles/360006897412#01H7ZC0C6Q5HPPB0DQKTNBHGRX). Once you have your form ID, run the command below replacing `YOUR_FORM_ID` with the value retrieved from your account. ```bash echo "\nNEXT_PUBLIC_KLAVIYO_PUBLIC_KEY=YOUR_PUBLIC_KEY" >> .env.local +echo "\nNEXT_PUBLIC_KLAVIYO_FORM_ID=YOUR_FORM_ID" >> .env.local ``` diff --git a/app/[locale]/(default)/page.tsx b/app/[locale]/(default)/page.tsx index 44f0ace..c5a49fc 100644 --- a/app/[locale]/(default)/page.tsx +++ b/app/[locale]/(default)/page.tsx @@ -14,6 +14,8 @@ interface Props { } export default async function Home({ params: { locale } }: Props) { + const klaviyoFormID = process.env.NEXT_PUBLIC_KLAVIYO_FORM_ID ?? ''; + unstable_setRequestLocale(locale); const t = await getTranslations({ locale, namespace: 'Home' }); @@ -30,7 +32,7 @@ export default async function Home({ params: { locale } }: Props) {