Upgrade to 17.0.0

Why you should upgrade

This upgrade includes a new market selector panel and product review component.

See release notes for more information

Pre-requisites

Before upgrading to 17, make sure you have already upgraded to 16. See guide here

Steps

Update .env

Update your .env file. Here is an outline of what variables your local .env-file should contain.

Important

Note that FALLBACK_MARKET_ALIAS is used instead of FALLBACK_MARKET_ID:

.env.example
  // Always needed
  IMAGE_SERVER= *** (URL)
  API_KEY= *** (STRING)
  API_ENDPOINT= *** (URL)
  AUTH_ENDPOINT= *** (URL)
  SIGN_ENDPOINT= *** (URL)
  BASE_URL= *** (URL including http)
  FALLBACK_CHANNEL_ID= *** (STRING in format "number|countryCode", e.g. "1|se")
  FALLBACK_MARKET_ALIAS= *** (STRING in format "countryCode", e.g. "se")
  DEFAULT_LOCALE= *** (STRING in format "langCode", e.g. "sv")
  APPINSIGHTS_INSTRUMENTATION_KEY= *** (STRING)

  // Only needed when using "diffrentDomains", with one tld per language or
  // add only one domain here to leave market and language out of path
  DOMAINS= *** (STRING in format "langCode|urlWithoutHttp,langCode|urlWithoutHttp", e.g. "sv|www.site.se,fi|www.site.fi")

  // Only needed when you want to use GTM
  GTM_ID= *** (STRING)

  // Only needed to use Nosto integration
  NOST_API_APPS_KEY= *** (STRING)
  NOSTO_ACCOUNT_ID= *** (STRING)

Update Dockerfile

Update Dockerfile to use DOMAINS and FALLBACK_MARKET_ALIAS. Remove previous used DOMAIN variables:

Dockerfile
...
// Remove this, no longer needed
  ARG DOMAIN_SV=#{DomainSv}#
  ARG DOMAIN_EN=#{DomainEn}#

// Add this
  ARG FALLBACK_MARKET_ALIAS=#{FallbackMarketAlias}#
  ARG DOMAINS=#{Domains}#
...
// Remove this, no longer needed
ARG DOMAIN_SV
ARG DOMAIN_EN

// Add this
  ARG FALLBACK_MARKET_ALIAS
  ARG DOMAINS
...
// Remove this, no longer needed
  ENV DOMAIN_SV=${DOMAIN_SV}
  ENV DOMAIN_EN=${DOMAIN_EN}

// Add this
  ENV FALLBACK_MARKET_ALIAS=${FALLBACK_MARKET_ALIAS}
  ENV DOMAINS=${DOMAINS}
...

Update nuxt.config.js

Replace the fallbackMarketId with fallbackMarketAlias:

replace:

nuxt.config.js
const fallbackMarketId = process.env.FALLBACK_MARKET_ID;

with:

nuxt.config.js
const fallbackMarketAlias = process.env.FALLBACK_MARKET_ALIAS;

Add domain settings like this:

nuxt.config.js
// Set the domain settings and market settings based on if env-variable DOMAINS exists
// Default settings for multi market / multi language

let domainSettings = {
  differentDomains: false,
  strategy: "prefix",
};
let domainUrls = null;

// Default settings for market for publicRuntimeConfig
let marketSettings = {
  isMultiLanguage: true,
  marketInPath: true,
};

if (process.env.DOMAINS) {
  const domains = process.env.DOMAINS.split(",");

  domainUrls = domains
    ?.map((domain) => {
      const domainArr = domain?.split("|");
      return {
        [domainArr[0]]: domainArr[1] || "",
      };
    })
    .reduce((result, item) => {
      const key = Object.keys(item)[0];
      result[key] = item[key];
      return result;
    }, {});

  // If using DOMAINS, turn off multilang and marketInPath
  marketSettings = {
    isMultiLanguage: false,
    marketInPath: false,
  };

  // If site should have only language prefix and no market prefix, remove the following declaration
  domainSettings = {
    differentDomains: false,
    strategy: "no_prefix",
  };

  if (domains.length > 1) {
    // If more than one domain, set diffrentDomains to true
    domainSettings = {
      differentDomains: true,
    };
  }
}

Add the fallbackMarketAlias to the listPageInfo query:

nuxt.config.js
    ...
      query listPageInfo {
        listPageInfo(
          alias: "frontpage",
          channelId: "${fallbackChannelId}",
          marketId: "${fallbackMarketAlias}"
          ) {
            meta {
              description
            title
          }
        }
      }
    ...

Add getMarketsQuery and fetch markets in the export default function:

nuxt.config.js
export default async () => {
  ...
      // Get fallback markets
      const getMarketsQuery = await apolloClient.query({
        query: gql`
            query channel {
              channel(channelId: "${fallbackChannelId}") {
                defaultMarketId
                markets {
                  id
                  defaultLanguageId
                  alias
                  virtual
                  onlyDisplayInCheckout
                  groupKey
                  allowedLanguages {
                    id
                    name
                    code
                  }
                  country {
                    name
                    code
                  }
                  currency {
                    name
                    code
                  }
                }
              }
            }
          `,
        context: {
          headers: {
            "X-ApiKey": process.env.API_KEY,
          },
        },
      });
      const markets = await getMarketsQuery.data.channel.markets;
    ...
    }

In the @nuxtjs/i18n module:
- Remove the strategy and the differentDomains properties, and add the domainSettings instead.
- In the locales array, remove the flag and currency properties from each object.
- Add the domain property to each object.
- Update the objects in the pages object.
Should look something like this:

nuxt.config.js
modules: [
  // Doc: https://github.com/nuxt-community/pwa-module
      '@nuxtjs/pwa',
      [
        // Doc: https://github.com/nuxt-community/i18n-module
        '@nuxtjs/i18n',
        {
          baseUrl: process.env.BASE_URL,
          seo: false,
          locales: [
            {
              code: 'en',
              iso: 'en-US',
              file: 'en-US.js',
              name: 'English',
              domain: domainUrls?.en || '' // Only matters if diffrentDomains are used
            },
            {
              code: 'sv',
              iso: 'sv-SE',
              file: 'sv-SE.js',
              name: 'Swedish',
              domain: domainUrls?.sv || '' // Only matters if diffrentDomains are used
            },
            {
              code: 'nb',
              iso: 'nb-NO',
              file: 'nb-NO.js',
              name: 'Norsk',
              domain: domainUrls?.nb || '' // Only matters if diffrentDomains are used
            },
            {
              code: 'nn',
              iso: 'nn-NO',
              file: 'nb-NO.js',
              name: 'Norsk',
              domain: domainUrls?.nn || '' // Only matters if diffrentDomains are used
            },
            {
              code: 'da',
              iso: 'da-DK',
              file: 'da-DK.js',
              name: 'Dansk',
              domain: domainUrls?.da || '' // Only matters if diffrentDomains are used
            },
            {
              code: 'fi',
              iso: 'fi-FI',
              file: 'fi-FI.js',
              name: 'Finska',
              domain: domainUrls?.fi || '' // Only matters if diffrentDomains are used
            }
          ],
          langDir: 'languages/',
          defaultLocale: process.env.DEFAULT_LOCALE,
          lazy: true,
          vueI18n: {
            fallbackLocale: process.env.DEFAULT_LOCALE
          },
          detectBrowserLanguage: false,
          parsePages: false,
          pages: {
            'checkout/index': {
              sv: '/kassan',
              en: '/checkout',
              da: '/kassen',
              fi: '/kassa',
              nb: '/kassen'
            },
            'account/orders': {
              sv: '/mina-sidor/ordrar',
              en: '/my-account/orders',
              da: '/min-konto/bestillinger',
              fi: '/tilini/tilaukset',
              nb: '/min-konto/bestillinger'
            },
            'account/settings': {
              sv: '/mina-sidor/installningar',
              en: '/my-account/settings',
              da: '/min-konto/indstillinger',
              fi: '/tilini/asetukset',
              nb: '/min-konto/innstillinger'
            },
            'account/balance': {
              sv: '/mina-sidor/saldo',
              en: '/my-account/balance',
              da: '/min-konto/saldo',
              fi: '/tilini/saldo',
              nb: '/min-konto/saldo'
            },
            'favorites/index': {
              sv: '/favoriter',
              en: '/favorites',
              da: '/favoritter',
              fi: '/suosikkeja',
              nb: '/favoritter'
            },
            'brands/index': {
              sv: '/varumarken',
              en: '/brands',
              da: '/varemaerker',
              fi: '/tavaramerkkeja',
              nb: '/varemerker'
            }
          },
          ...domainSettings // Instead of 'strategy' and 'differentDomains'
        }
      ]

In publicRuntimeConfig: Remove the isMultiLanguage and marketInPath properties. Replace the fallbackMarketId with fallbackMarketAlias, and Add the markets settings:

nuxt.config.js
publicRuntimeConfig: {
  ...
  // isMultiLanguage remove this
  // marketInPath remove this

  fallbackMarketAlias, // Instead of fallbackMarketId
  ...marketSettings, // Add this
  markets, // Add this ... }

Also add the showProductReviewSectionarketInPath and showStarsInProductReviewForm settings to publicRuntimeConfig:

nuxt.config.js
publicRuntimeConfig {
  ...
    showProductReviewSection: true,
    showStarsInProductReviewForm: true  // it requires showProductReviewSection to be true
  ...
}

Implementation

Note

Changes has been made to following mixins:

MixCheckout.js: (Extensive changes, check out file in Ralph-UI)
MixConfirmPage.js: (added variable checkoutMarket to mutation completeCart and query confirmCartQuery)
MixGlobalInit.js: (Now using getMarketsQuery)
MixListPage.js: (using $store.state.channel.id instead of $store.state.channelId)
MixNostoSection.js: (changed name from CaNostoSection to MixNostoSection)
MixDatalayer.js, MixAddToCart.js, MixNumberFormat.js, MixProductCard.js, MixProductPage.js and MixUpdateCart.js: (Using getters[channel/currentCurrency] instead of getters.getCurrency)
If you have overriden any of these files and run into any problems, try to update the files.

Add new file channel.js to your store folder:

/store/channel.js
import { state, getters, mutations, actions } from "channel";

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

Add @mixin scrollbarStyle to /styles/helpers/_layout.scss:

/styles/helpers/_layout.scss
...
@mixin scrollbarStyle($color: $c-medium-gray, $hover: $c-darkest-gray) {
  scrollbar-color: $color transparent;
  scrollbar-width: thin;

  &::-webkit-scrollbar {
    background-color: transparent;
    width: $px16 * 0.35;
    height: $px16 * 0.35;
  }

  &::-webkit-scrollbar-track {
    border-radius: 100vw;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $color;
    border-radius: 100vw;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: $hover;
  }
}
...

Add CaMarketPanel to /layouts/default.vue

/layouts/default.vue
<template>
  <div class="ca-layout-default" :class="modifiers">
    ...
    <LazyCaMarketPanel
      v-if="$store.state.channel.markets.length > 1"
      mode="advanced"
    />
    ...
  </div>
</template>

Add CaMarketSelectorButton (replaces CaCountrySelectorPanel) in CaSecondaryNav.vue and CaTopBar.vue (or wherever you prefer to place it).

/components/molecules/CaSecondaryNav/CaSecondaryNav.vue
<template>
  <ul class="ca-secondary-nav">
    ...
    <CaSecondaryNavItem>
      <CaMarketSelectorButton />
    </CaSecondaryNavItem>
    ...
  </ul>
</template>

/components/organisms/CaTopBar/CaTopBar.vue
<template>
  <div class="ca-top-bar" :class="{ 'ca-top-bar--undistracted': undistracted }">
    ...
    <CaMarketSelectorButton
      v-show="!undistracted"
      class="ca-top-bar__lang-switcher only-computer"
    />
    ...
  </div>
</template>

Updates to CaCheckout.vue:
- Use selectableMarkets instead of markets.
- Use setCheckoutMarket($event) instead of setmarketId($event).
- Use !currentMarket instead of !marketId.

/components/organisms/CaCheckout/CaCheckout.vue
<template>
  <div>
    ...
    <CaCheckoutSection
      v-if="
      $store.getters['cart/totalQuantity'] &&
        $config.checkout.showMultipleMarkets &&
        selectableMarkets &&
        selectableMarkets.length > 1
    "
      :loading="cartLoading"
    >
      <template #title>{{ $t('CHECKOUT_CHOOSE_COUNTRY') }}</template>
      <CaCountrySelector
        :data="selectableMarkets"
        @input="setCheckoutMarket($event)"
      />
    </CaCheckoutSection>

    <CaCheckoutSection
      v-if="$store.getters['cart/totalQuantity'] > 0"
      :loading="shippingLoading"
      :blocked="$config.checkout.showMultipleMarkets && !currentMarket"
    >
      ...
    </CaCheckoutSection>
  </div>
</template>

Upgrade to 17.0.0

Why you should upgrade​

Pre-requisites​

Steps​

Update .env​

Update Dockerfile​

Update nuxt.config.js​

Implementation​