# v1.3.0 release notes

# Introduction

In this release, we:

  • updated a Product model (see Product reference),
  • added scripts for load testing with k6 to the repository,
  • fixed the bug with the missing position attribute of the SfSidebar component,
  • removed the @nuxtjs/google-fonts module and instead added fonts directly to the project,
  • updated caching headers for demo.

# Migration guide

# Fixing sidebars

We added the position="right" to <SfSidebar> components used for cart and wishlist sidebars to fix their opening animations.

# components/CartSidebar.vue

  <SfSidebar
    v-e2e="'sidebar-cart'"
    :visible="isCartSidebarOpen"
    title="My Cart"
    class="sf-sidebar--right"
    @close="toggleCartSidebar"
+   position="right"
  >

# ...

  <div class="empty-cart__banner">
    <SfImage
      alt="Empty bag"
      class="empty-cart__image"
-     src="/icons/empty-cart.svg"
+     src="/icons/empty-cart.webp"
      :width="256"
      :height="173"
    />

# components/WishlistSidebar.vue

  <SfSidebar
    :visible="isWishlistSidebarOpen"
    :button="false"
    title="My Wishlist"
    @close="toggleWishlistSidebar"
    class="sidebar sf-sidebar--right"
+   position="right"
  >

# ...

  <div class="empty-wishlist__banner">
    <SfImage
-     src="/icons/empty-cart.svg"
+     src="/icons/empty-cart.webp"
      alt="Empty bag"
      class="empty-wishlist__icon"
      :width="256"
      :height="173"
    />

# Using fonts locally

To improve performance and reduce the number of dependencies, we removed the @nuxtjs/google-fonts module and instead added fonts directly to the project. You can download the files from the this folder in the repository (opens new window).

# nuxt.config.js

  buildModules: [
    '@pinia/nuxt',
    // to core
    '@nuxtjs/composition-api/module',
    '@nuxt/typescript-build',
-   '@nuxtjs/google-fonts',
    '@nuxtjs/pwa',
#   ...    
  ]

- googleFonts: {
-   families: {
-     Raleway: {
-       wght: [300, 400, 500, 600, 700],
-       ital: [400]
-     },
-     Roboto: {
-       wght: [300, 400, 500, 700],
-       ital: [300, 400]
-     }
-   },
-   display: 'swap'
- },

# layouts/default.vue

+ head: {
+   link: [
+     { rel: 'preload', href: '/fonts/fonts.css', as: 'style'},
+     { rel: 'stylesheet', href: '/fonts/fonts.css' }
+   ]
+ }

# static/fonts/fonts.css

+ /* === Raleway - 300 */
+ @font-face {
+   font-family: 'Raleway';
+   font-style: normal;
+   font-weight: 300;
+   font-display: swap;
+   src: url('./Raleway-Light.eot');
+   src: local('Raleway'), url('./Raleway-Light.eot') format('embedded-opentype'),
+     url('./Raleway-Light.woff') format('woff'),
+     url('./Raleway-Light.woff2') format('woff2'),
+     url('./Raleway-Light.ttf') format('truetype'),
+     url('./Raleway-Light.svg') format('svg');
+ }
+ 
+ /* === Raleway - regular */
+ @font-face {
+   font-family: 'Raleway';
+   font-style: normal;
+   font-weight: 400;
+   font-display: swap;
+   src: url('./Raleway-Regular.eot');
+   src: local('Raleway'),
+     url('./Raleway-Regular.eot') format('embedded-opentype'),
+     url('./Raleway-Regular.woff') format('woff'),
+     url('./Raleway-Regular.woff2') format('woff2'),
+     url('./Raleway-Regular.ttf') format('truetype'),
+     url('./Raleway-Regular.svg') format('svg');
+ }
+ 
+ /* === Raleway - 500 */
+ @font-face {
+   font-family: 'Raleway';
+   font-style: normal;
+   font-weight: 500;
+   font-display: swap;
+   src: url('./Raleway-Medium.eot');
+   src: local('Raleway'), url('./Raleway-Medium.eot') format('embedded-opentype'),
+     url('./Raleway-Medium.woff') format('woff'),
+     url('./Raleway-Medium.woff2') format('woff2'),
+     url('./Raleway-Medium.ttf') format('truetype'),
+     url('./Raleway-Medium.svg') format('svg');
+ }
+ 
+ /* === Raleway - 600 */
+ @font-face {
+   font-family: 'Raleway';
+   font-style: normal;
+   font-weight: 600;
+   font-display: swap;
+   src: url('./Raleway-SemiBold.eot');
+   src: local('Raleway'),
+     url('./Raleway-SemiBold.eot') format('embedded-opentype'),
+     url('./Raleway-SemiBold.woff') format('woff'),
+     url('./Raleway-SemiBold.woff2') format('woff2'),
+     url('./Raleway-SemiBold.ttf') format('truetype'),
+     url('./Raleway-SemiBold.svg') format('svg');
+ }
+ 
+ /* === Raleway - 700 */
+ @font-face {
+   font-family: 'Raleway';
+   font-style: normal;
+   font-weight: 700;
+   font-display: swap;
+   src: url('./Raleway-Bold.eot');
+   src: local('Raleway'), url('./Raleway-Bold.eot') format('embedded-opentype'),
+     url('./Raleway-Bold.woff') format('woff'),
+     url('./Raleway-Bold.woff2') format('woff2'),
+     url('./Raleway-Bold.ttf') format('truetype'),
+     url('./Raleway-Bold.svg') format('svg');
+ }
+ 
+ /* === Raleway - italic */
+ @font-face {
+   font-family: 'Raleway';
+   font-style: italic;
+   font-weight: 400;
+   font-display: swap;
+   src: url('./Raleway-Italic.eot');
+   src: local('Raleway'), url('./Raleway-Italic.eot') format('embedded-opentype'),
+     url('./Raleway-Italic.woff') format('woff'),
+     url('./Raleway-Italic.woff2') format('woff2'),
+     url('./Raleway-Italic.ttf') format('truetype'),
+     url('./Raleway-Italic.svg') format('svg');
+ }
+ 
+ /* === Roboto - 300 */
+ @font-face {
+   font-family: 'Roboto';
+   font-style: normal;
+   font-weight: 300;
+   font-display: swap;
+   src: url('./Roboto-Light.eot');
+   src: local('Roboto'), url('./Roboto-Light.eot') format('embedded-opentype'),
+     url('./Roboto-Light.woff') format('woff'),
+     url('./Roboto-Light.woff2') format('woff2'),
+     url('./Roboto-Light.ttf') format('truetype'),
+     url('./Roboto-Light.svg') format('svg');
+ }
+ 
+ /* === Roboto - regular */
+ @font-face {
+   font-family: 'Roboto';
+   font-style: normal;
+   font-weight: 400;
+   font-display: swap;
+   src: url('./Roboto-Regular.eot');
+   src: local('Roboto'), url('./Roboto-Regular.eot') format('embedded-opentype'),
+     url('./Roboto-Regular.woff') format('woff'),
+     url('./Roboto-Regular.woff2') format('woff2'),
+     url('./Roboto-Regular.ttf') format('truetype'),
+     url('./Roboto-Regular.svg') format('svg');
+ }
+ 
+ /* === Roboto - 500 */
+ @font-face {
+   font-family: 'Roboto';
+   font-style: normal;
+   font-weight: 500;
+   font-display: swap;
+   src: url('./Roboto-Medium.eot');
+   src: local('Roboto'), url('./Roboto-Medium.eot') format('embedded-opentype'),
+     url('./Roboto-Medium.woff') format('woff'),
+     url('./Roboto-Medium.woff2') format('woff2'),
+     url('./Roboto-Medium.ttf') format('truetype'),
+     url('./Roboto-Medium.svg') format('svg');
+ }
+ 
+ /* === Roboto - 700 */
+ @font-face {
+   font-family: 'Roboto';
+   font-style: normal;
+   font-weight: 700;
+   font-display: swap;
+   src: url('./Roboto-Bold.eot');
+   src: local('Roboto'), url('./Roboto-Bold.eot') format('embedded-opentype'),
+     url('./Roboto-Bold.woff') format('woff'),
+     url('./Roboto-Bold.woff2') format('woff2'),
+     url('./Roboto-Bold.ttf') format('truetype'),
+     url('./Roboto-Bold.svg') format('svg');
+ }
+ 
+ /* === Roboto - 300italic */
+ @font-face {
+   font-family: 'Roboto';
+   font-style: italic;
+   font-weight: 300;
+   font-display: swap;
+   src: url('./Roboto-LightItalic.eot');
+   src: local('Roboto'),
+     url('./Roboto-LightItalic.eot') format('embedded-opentype'),
+     url('./Roboto-LightItalic.woff') format('woff'),
+     url('./Roboto-LightItalic.woff2') format('woff2'),
+     url('./Roboto-LightItalic.ttf') format('truetype'),
+     url('./Roboto-LightItalic.svg') format('svg');
+ }
+ 
+ /* === Roboto - italic */
+ @font-face {
+   font-family: 'Roboto';
+   font-style: italic;
+   font-weight: 400;
+   font-display: swap;
+   src: url('./Roboto-Italic.eot');
+   src: local('Roboto'), url('./Roboto-Italic.eot') format('embedded-opentype'),
+     url('./Roboto-Italic.woff') format('woff'),
+     url('./Roboto-Italic.woff2') format('woff2'),
+     url('./Roboto-Italic.ttf') format('truetype'),
+     url('./Roboto-Italic.svg') format('svg');
+ }

# Load tests

Internally we use the k6 (opens new window) tool to perform load testing to ensure the proper scalability of the integration. If you'd like to test your projects, you can use scripts from the tests/load directory, which include the following test scenarios:

# Browsing products

  1. Visit home page
  2. Visit product listing
  3. Sort by Latest, Low to High
  4. Visit Product Display Page

# Search for product

  1. Visit home page
  2. Search by keyword
  3. Visit Product Display Page
  4. Add to cart

# New user registration

  1. Visit home page
  2. Go to Create a New Account
  3. Fill form and press submit
  4. Log out

# Buy product as guest

  1. Visit home page
  2. Visit random Product Display Page
  3. Add to cart
  4. Proceed to checkout as a guest
  5. Fill in the form
  6. Place order

# Buy product as user

  1. Visit home page
  2. Visit random Product Display Page
  3. Add to cart
  4. Log in
  5. Fill in the form
  6. Place order
Test your knowledge →