dataiads-nuxt-layer

Generic layer for building Dataïads landing pages

installation

First install package using yarn add dataiads-nuxt-layer.

Update your ts config to use the layer.

``
export default defineNuxtConfig({
ssr: false,

typescript: {
strict: true,
},

extends: [
"dataiads-nuxt-layer"
],

runtimeConfig: {
public: {
mirroredDomain: "https://shop.dataiads.io",
}
}
})
`

Available composables

- useLpoConfig in production: loads the config provided by the backend. In dev: loads the config found in runtimeConfig.public.devLpoConfig.
- useProduct a shortcut to access the main product data stored inside a global state. data is automatically fetched on application startup.
- useCollectorData a shortcut to access the global collector data stored inside a global state. data is automatically fetched on application startup.
- getCustomAttr, getCustomAttrInt, getCustomAttrFloat, getCustomAttrJSON to access product custom attributes
- salePriceDifference to get a products regular/sale price difference as a percentage
- mask a utility function to extract parts of a string using a regular expression
- itemPart a utility that splits a string and returns the requested part based on an index

Plugins

$3

Handles loading the LPOConfig available for use in the composable useLpoConfig.
This currently allows you to modify only the locale and variation for the time being, but will soon be open to any field, allowing you to make your app configurable via the backoffice.

Other plugins may rely on this for execution, it should therefore never be disabled.

$3

Handles page initialization, error handling configuration and initial page data load.
Provides the following functions:

- $fetchProductRecommendations to retrieve product recommendations from Dataïads api
- $errorRedirect to fallback on mirrored domain product page when a critical error occurs
- $reportError to report an error to Dataïads api

These plugins cannot be disabled.

$3

Exposes URL related functions

- oriUrl(link: string, query?: Record): string forces mirrored domain from runtime configuration on a link, with optional extra query paramaeters.
- isSafeLink(link: string): boolean a utility function to check that a links redirects to the mirrored domain
- addToCartUrl(searchParams?: Record): string

$3

Loads Google Fonts on the page. The requested fonts must be listed in the runtime configuration using googleFonts attribute.

`
export default defineNuxtConfig({
runtimeConfig: {
public: {
googleFonts: [
{ family: "Roboto", weights: ["600", "800"] }
]
}
}
})
`

$3

Enable internationalization using vue-i18n package.
Translation data must be available inside locales/ directory. When adding a new locale data file, dont forget to import it inside locales/index.ts.
Set a locale value to enable this plugin, using the locale key in LPO Config

Provides $t() helper in templates

$3

Inject GTM snippet in the page. Configure using gtm key in LPO config.

`
{ "id": "FOOBAR" }
`

Multiple GTM instances are supported by providing an array instead of a string.

`
{ "id": ["GTM-1", "GTM-2"] }
`

$3

Inject Onetrust snippet in the page. Configure using onetyrust key in LPO config.

`
{"dataDomainScript": "123456-1234-1234-4321-654321"}
`

$3

Inject Axeptio snippet in the page. clientId is mandatory. All other attributes are also injected in the configuration object.

`
export default defineNuxtConfig({
runtimeConfig: {
public: {
axeptio: { clientId: "123", otherSetting: "value" }
}
}
})
`

Components

$3

Display images from remote sources using Dataïads caching proxy servers and CDN.

`

`

Can be disabled using runtimeConfig.public.optimizeImageLoad flag in nuxt options.

$3

Main product image display. Shows the product primary image and any other additional images on the side.
Style can be customized using the two image slots or using class props

`
class="flex flex-row"
aside-class="hidden md:flex flex-col flex-nowrap overflow-y-scroll scrollbar-hide"
>




`

$3

Horizontal or vertical slider with next / previous buttons on large screens. Can be toggled to autoscroll.
Buttons and items can be configured using slots and class props

`





`

$3

Display pagination for Filter system. Style can be customized using class props on top level element or props for buttons.

`





`

$3

A search input that redirects to the mirrored website search page with the value as a parameter. A custom input can be provided as a slot

`





`

$3

Display a a product review as starts. Use slots to customize displayed stars

`
:value="getCustomAttrFloat(product, 'review-value')"
:max-value="10"
:count="getCustomAttr(product, 'review-count')"
class="flex space-x-1 items-center mt-2 my-3 w-full"
>




`

$3

Display product price. Handles sale prices and collected data.

`





`

$3

This enables the opening of filters or any other component in a drawer.
When opened, the scroll on the document body is disabled.

`vue

`

$3

This component is an accessible component to use accordion behavior it's highly inspired by nuxtui accordion component

`vue



``