@geins/ralph-module-voyado-elevate v5.5.1

Ralph Module for Voyado Elevate

Component library for Voyado Elevate integrations with Ralph Storefront

We use Voyado's helper library @apptus/esales-api for API requests.

A helper library for making requests to the eSales 4 Storefront API v3. It includes type definitions for all HTTPS responses and the library API.

Requirements

This package require Nuxt2 to be installed in your project. Also it requires @ralph/ralph-ui 19.2.0 or higher.

Installation

To use the Ralph Module for Voyado Elevate in your Nuxt2 app, you can install it from npm using the following command:

# Install the package using npm:
npm install @geins/ralph-module-voyado-elevate

Once installed, you can add the module to your Nuxt2 app by updating the modules array in the nuxt.config.js file. You can then configure the module by adding options to the @geins/ralph-module-voyado-elevate object:

// nuxt.config.js

module.exports = {
  modules: [
    [
      '@geins/ralph-module-voyado-elevate',
      // Configuration defaults for the module
      {
        // Set to true to enable debug mode
        debug: false,
        // Set to false to disable the module
        enabled: true,
        // Your Voyado Elevate cluster ID, this is required
        clusterId: '',
        // Limit of products to fetch for the product page recommendations
        pdpRecommendationLimit: 8
      }
    ]
  ]
};

After installing the module, make sure to add the @apptus/esales-api package to the transpile array so that it can be transpiled correctly. And add the configuration to support CommonJS files for @apptus/esales-api by pushing a new rule to the config.module.rules array in the build.extend method. Here's an example configuration:

// nuxt.config.js

export default {
  // ...

  transpile: ['@apptus/esales-api'],

  build: {
    // You can extend webpack config here
    extend(config, { isDev }) {
      // Support CommonJS files for @apptus/esales-api
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      });
    }
  }
};

Using components

After installing the module, you can use its components in your Nuxt2 app like this:

<template>
  <div>
    <VoyadoSearch
      :is-visible="isVisible"
      @voyadoSearchOnClose="onSearchClose"
      @voyadoSearchOnRouteChange="onSearchRouteChange"
    />
  </div>
</template>

<script>
export default {
  data: () => ({
    isVisible: true
  }),
  methods: {
    onSearchClose() {
      console.log('Search closed');
    },
    onSearchRouteChange() {
      console.log('Search route changed');
    }
  }
};
</script>

Props

For the

// pages/product/_alias.vue
<template>
  <div>
    <VoyadoRecommendations
      :product-key="product.articleNumber"
      :random-titles="3"
      @voyadoProductData="setVoyadoData"
    />
  </div>
</template>

<script>
import { VoyadoProductPage } from '@geins/ralph-module-voyado-elevate';
export default {
  mixins: [VoyadoProductPage]
};
</script>

Props

Notifications

For the Voyado notifications to work properly, you will need to use the voyadoProduct object in your product page, passing it to CaToggleFavorite and making sure that this is the product object that gets sent to your addToCart function. This object will be available through the VoyadoProductPage mixin.

Translations

Available translations:

NOTE: Replace <PIPE> with the "|" character

Development

To contribute to this module, clone this repository and run the following commands:

# Install dependencies
npm install

# Run development server with test fixture
npm run dev

# Run unit tests
npm run test:unit

# Run system tests
npm run test:system

# Run test coverage
npm run test:coverage

# Format code
npm run format

# Lint code
npm run lint

Commits

We enforce conventional commits using @commitlint/config-conventional combined with @husky.

License

MIT

Note

This module requires Nuxt2 to work properly.