Skip to main content

Upgrade to 18.0.0

Why you should upgrade​

This upgrade includes new globally controlled sort options for product lists including the new sort option RELEVANCE for search pages.

[See release notes for more information][link-to-release-notes]

Pre-requisites​

Before upgrading to 18, make sure you have already upgraded to 17.0.0.

See guide here

Steps​

Update Component: CaListSettings​

  • Update yor CaListSettings to use the new MixProductListSort mixin and remove currentSort prop, the sortOptions data, the watchers and the assignment in mounted.
/components/organisms/CaListSettings/CaListSettings.vue

<script>
import MixProductListSort from 'MixProductListSort';

export default {
  ...
  mixins: [MixProductListSort],
  props: {
    // Remove this since it exists in the mixin
    currentSort: {
      type: String,
      required: true
    },
  },
  // Remove all this since it exists in the mixin
  data: vm => ({
      sortOptions: [
        {
          label: vm.$t('SORT_LABEL_LATEST'),
          value: 'LATEST'
        },
        {
          label: vm.$t('SORT_LABEL_BESTSELLERS'),
          value: 'MOST_SOLD'
        },
        {
          label: vm.$t('SORT_LABEL_LOWEST_PRICE'),
          value: 'PRICE'
        },
        {
          label: vm.$t('SORT_LABEL_HIGHEST_PRICE'),
          value: 'PRICE_DESC'
        }
      ],
      sort: null
  }),
  // Remove all this since it exists in the mixin
  watch: {
    sort(newVal, oldVal) {
      if (oldVal !== null) {
        this.$emit('sortchange', newVal);
      }
    },
    currentSort() {
      this.sort = this.currentSort;
    }
  },
  mounted() {
    // Remove this since it exists in the mixin
    this.sort = this.currentSort;
  },
  ...
}
</script>

Update lang files​

Update language files to include the new sort options. We have added a new sort option for search pages called RELEVANCE.

  • Update all sorting label lang keys. They will now be named SORT_LABEL_<sortOption>. For example SORT_LABEL_RELEVANCE

Example:

/languages/en-US.js
export default {
  ...
  SORT_LABEL_LATEST: 'New in',
  SORT_LABEL_BESTSELLERS: 'Bestsellers',
  SORT_LABEL_MOST_SOLD: 'Bestsellers',
  SORT_LABEL_PRICE: 'Lowest price',
  SORT_LABEL_PRICE_DESC: 'Highest price',
  SORT_LABEL_RELEVANCE: 'Relevance',
  ...
}

[link-to-release-notes][/release-notes/lp-ui/2023/03/24/rn]