Skip to main content

Upgrade to 19.0.0

Why you should upgrade​

This upgrade includes a new powerfull event system for your storefront. Read more about the events here.

See release notes for more information

Pre-requisites​

Before upgrading to 19, make sure you have already upgraded to 18. See guide here

Steps​

Update CaProductCard​

Update Component CaProductCard with new click handlers to catch click events properly.

To do so, you need to:

  • Remove @click="productClickHandler" from wrapper "component" tag
  • Add @click.native="productClickHandler" to both NuxtLinks

Example:

/components/organisms/CaProductCard/CaProductCard.vue
<template>
// Remove @click="productClickHandler" from wrapper "component" tag so you get this:
<component :is="baseTag" class="ca-product-card">
...
// Add @click.native="productClickHandler" to both NuxtLinks like so:
  <NuxtLink
    class="ca-product-card__image-link"
    tabindex="-1"
    :to="product.canonicalUrl"
    :data-alias="product.alias"
    @click.native="productClickHandler"
  >
...
  <NuxtLink
    v-if="productPopulated"
    :to="product.canonicalUrl"
    @click.native="productClickHandler"
  >
...
</component>
</template>
...

Update nuxt.config.js file with new plugins​

The get-path.js plugin has been replaced with ralph.js. Wich means you need to update your nuxt.config.js file to use the new plugin.

To do so, you need to:

  • Update the get-path.js plugin to ralph.js in nuxt.config.js under plugins:

Example:

nuxt.config.js
  ...
  plugins: [
      {
        src: '~/node_modules/@ralph/ralph-ui/plugins/ralph.js'
      }
  ]
  ...

Add events.js file to store folder​

RalphUI now uses a new event system to handle events. To use it, you need to add a new file to your store folder.

  • Add a file named events.js to the store folder.

The file should look like this:

/store/events.js
import { state, getters, mutations, actions } from 'ralphevents';

export default {
  state,
  getters,
  mutations,
  actions
};