chore: release 1.1.0

.env.example

@@ -1,8 +1,11 @@
 VSF_NUXT_APP_ENV=development
 VSF_NUXT_APP_PORT=3000
+VSF_NUXT_APP_HOST=localhost
 
 VSF_STORE_URL=https://localhost:3000
 VSF_MIDDLEWARE_URL=https://localhost:3000/api/
+VSF_SSR_MIDDLEWARE_URL=http://localhost:3000/api/
+
 VSF_MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
 VSF_MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql
 
@@ -28,4 +31,9 @@ VSF_RECAPTCHA_SIZE=invisible
 VSF_RECAPTCHA_MIN_SCORE=0.5
 VSF_RECAPTCHA_VERSION=3
 
+VSF_COOKIE_HTTP_ONLY=
+VSF_COOKIE_SECURE=
+VSF_COOKIE_SAME_SITE=
+VSF_COOKIE_PATH=
+
 NODE_TLS_REJECT_UNAUTHORIZED=0

components/Header/SearchBar/SearchResults.vue

@@ -55,13 +55,7 @@
                   }"
                   :alt="productGetters.getName(product)"
                   :title="productGetters.getName(product)"
-                  :link="
-                    localePath(
-                      `/p/${productGetters.getProductSku(
-                        product
-                      )}${productGetters.getSlug(product, product.categories[0])}`
-                    )
-                  "
+                  :link="localePath(getProductPath(product))"
                   :wishlist-icon="false"
                 />
               </div>
@@ -88,13 +82,7 @@
                 }"
                 :alt="productGetters.getName(product)"
                 :title="productGetters.getName(product)"
-                :link="
-                  localePath(
-                    `/p/${productGetters.getProductSku(
-                      product
-                    )}${productGetters.getSlug(product, product.categories[0])}`
-                  )
-                "
+                :link="localePath(getProductPath(product))"
                 :wishlist-icon="false"
               />
             </div>
@@ -148,7 +136,7 @@ import {
 import { defineComponent } from '@nuxtjs/composition-api';
 import type { PropType } from '@nuxtjs/composition-api';
 import productGetters from '~/modules/catalog/product/getters/productGetters';
-import { useImage } from '~/composables';
+import { useImage, useProduct } from '~/composables';
 import SvgImage from '~/components/General/SvgImage.vue';
 import type { Product } from '~/modules/catalog/product/types';
 
@@ -174,11 +162,13 @@ export default defineComponent({
   },
   setup() {
     const { getMagentoImage, imageSizes } = useImage();
+    const { getProductPath } = useProduct();
 
     return {
       productGetters,
       getMagentoImage,
       imageSizes,
+      getProductPath,
     };
   },
 });

components/NewProducts.vue

@@ -34,13 +34,7 @@
             productGetters.getPrice(product).special &&
               $fc(productGetters.getPrice(product).special)
           "
-          :link="
-            localePath(
-              `/p/${productGetters.getProductSku(
-                product
-              )}${productGetters.getSlug(product, product.categories[0])}`
-            )
-          "
+          :link="localePath(getProductPath(product))"
           :max-rating="5"
           :score-rating="productGetters.getAverageRating(product)"
           :reviews-count="productGetters.getTotalReviews(product)"
@@ -65,7 +59,8 @@ import {
   computed, defineComponent, onMounted, ref,
 } from '@nuxtjs/composition-api';
 import {
-  useImage, useProduct,
+  useImage,
+  useProduct,
 } from '~/composables';
 import useWishlist from '~/modules/wishlist/composables/useWishlist';
 import productGetters from '~/modules/catalog/product/getters/productGetters';
@@ -97,7 +92,11 @@ export default defineComponent({
   },
   setup() {
     const { isAuthenticated } = useUser();
-    const { getProductList, loading } = useProduct();
+    const {
+      getProductList,
+      loading,
+      getProductPath,
+    } = useProduct();
     const { isInWishlist, addOrRemoveItem } = useWishlist();
     const { addItemToCart, isInCart } = useAddToCart();
     const products = ref([]);
@@ -138,6 +137,7 @@ export default defineComponent({
       productGetters,
       getMagentoImage,
       imageSizes,
+      getProductPath,
     };
   },
 });

composables/index.ts

@@ -42,6 +42,7 @@ export * from '../modules/customer/composables/useUserAddress';
 export * from '../modules/customer/composables/useUserOrder';
 export * from '../modules/wishlist/composables/useWishlist';
 export * from './useMagentoConfiguration';
+export * from '../modules/checkout/composables/useCartView';
 
 export * from './types';
 export * from '../modules/GraphQL/types';

composables/types.ts

@@ -3,13 +3,14 @@ import type {
   CountriesListQuery,
 } from '~/modules/GraphQL/types';
 
-import type { CustomQuery } from '~/types/core';
+import type { CustomQuery, CustomHeaders } from '~/types/core';
 
 export declare type AvailableStores = AvailableStoresQuery['availableStores'];
 export declare type Countries = CountriesListQuery['countries'][0];
 
 export declare type ComposableFunctionArgs<T> = T & {
   customQuery?: CustomQuery;
+  customHeaders?: CustomHeaders;
 };
 
 export interface Totals {

composables/useConfig/index.ts

@@ -24,7 +24,7 @@ export function useConfig(): UseConfigInterface {
     Logger.debug('useConfig/load');
 
     try {
-      const { data } = await app.$vsf.$magento.api.storeConfig(params?.customQuery ?? null);
+      const { data } = await app.$vsf.$magento.api.storeConfig(params?.customQuery ?? null, params?.customHeaders);
       configStore.$patch((state) => {
         state.storeConfig = data.storeConfig || {};
       });

composables/useContent/commands/loadBlocksCommand.ts

@@ -5,7 +5,7 @@ export const loadBlocksCommand = {
   execute: async (context: VsfContext, params) => {
     Logger.debug('[Magento]: Load CMS Blocks content', { params });
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    const { data } = await context.$magento.api.cmsBlocks(params.identifiers, params.customQuery ?? null);
+    const { data } = await context.$magento.api.cmsBlocks(params.identifiers, params.customQuery ?? null, params?.customHeaders);
 
     Logger.debug('[Result]:', { data });
 

composables/useContent/commands/loadContentCommand.ts

@@ -5,7 +5,7 @@ export const loadContentCommand = {
   execute: async (context: VsfContext, params) => {
     Logger.debug('[Magento]: Load CMS Page content', { params });
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    const { data } = await context.$magento.api.cmsPage(params.identifier, params.customQuery ?? null);
+    const { data } = await context.$magento.api.cmsPage(params.identifier, params.customQuery ?? null, params?.customHeaders);
 
     Logger.debug('[Result]:', { data });
 

composables/useCountrySearch/index.ts

@@ -25,7 +25,7 @@ export function useCountrySearch(): UseCountrySearchInterface {
 
       Logger.debug('[Magento]: Search country information based on', { params });
 
-      const { data } = await app.$vsf.$magento.api.country(params.id, params?.customQuery ?? null);
+      const { data } = await app.$vsf.$magento.api.country(params.id, params?.customQuery ?? null, params?.customHeaders ?? null);
 
       Logger.debug('[Result]:', { data });
 

composables/useCurrency/__tests__/useCurrency.spec.ts

@@ -61,6 +61,6 @@ describe('useCurrency', () => {
 
     // then
     expect(appMock.app.$vsf.$magento.api.currency)
-      .toHaveBeenCalledWith({ currency: 'custom-currency-query' });
+      .toHaveBeenCalledWith({ currency: 'custom-currency-query' }, null);
   });
 });

composables/useCurrency/index.ts

@@ -32,7 +32,7 @@ export function useCurrency(): UseCurrencyInterface {
     Logger.debug('useCurrency/load');
 
     try {
-      const { data } = await app.$vsf.$magento.api.currency(params?.customQuery ?? null);
+      const { data } = await app.$vsf.$magento.api.currency(params?.customQuery ?? null, params?.customHeaders ?? null);
       configStore.$patch((state) => {
         state.currency = data?.currency ?? {};
       });

composables/useImage/index.ts

@@ -36,11 +36,13 @@ export function useImage(): UseImageInterface {
   /**
    * Extract image path from Magento URL.
    *
-   * @param fullImageUrl {string}
+   * @param fullImageUrl {string | null}
    *
    * @return {string}
    */
-  const getMagentoImage = (fullImageUrl: string) => {
+  const getMagentoImage = (fullImageUrl: string | null) => {
+    if (!fullImageUrl) return '';
+
     // @ts-ignore
     const { imageProvider, magentoBaseUrl } = context.$vsf.$magento.config;
 

composables/useNewsletter/commands/updateSubscriptionCommand.ts

@@ -6,7 +6,7 @@ export const updateSubscriptionCommand = {
   execute: async (context: UseContextReturn, params: UseNewsletterUpdateSubscriptionParams): Promise<SubscriptionStatusesEnum | null> => {
     const { data } = await context.app.$vsf.$magento.api.subscribeEmailToNewsletter({
       email: params.email,
-    }, params?.customQuery ?? null);
+    }, params?.customQuery ?? null, params?.customHeaders ?? null);
 
     return data?.subscribeEmailToNewsletter?.status ?? null;
   },

composables/useStore/index.ts

@@ -24,13 +24,13 @@ export function useStore(): UseStoreInterface {
   const configStore = useConfigStore();
   const { app } = useContext();
 
-  const load = async (customQuery = { availableStores: 'availableStores' }): Promise<void> => {
+  const load = async (customQuery = { availableStores: 'availableStores' }, customHeaders = {}): Promise<void> => {
     Logger.debug('useStoreFactory.load');
     error.value.load = null;
 
     try {
       loading.value = true;
-      const { data } = await app.$vsf.$magento.api.availableStores(customQuery);
+      const { data } = await app.$vsf.$magento.api.availableStores(customQuery, customHeaders);
 
       configStore.$patch((state) => {
         state.stores = data?.availableStores ?? [];

composables/useUiHelpers/index.ts

@@ -72,7 +72,7 @@ export function useUiHelpers(): UseUiHelpersInterface {
     };
   };
 
-  const getCatLink = (category: CategoryTree): string => `/c/${category.url_path}${category.url_suffix || ''}`;
+  const getCatLink = (category: CategoryTree): string => `/${category.url_path}${category.url_suffix || ''}`;
 
   /**
    * Force push for a backward compatibility in other places, should be removed

composables/useUrlResolver/index.ts

@@ -31,7 +31,7 @@ export function useUrlResolver(): UseUrlResolverInterface {
     try {
       const clearUrl = path.replace(/[a-z]+\/[cp|]\//gi, '');
       Logger.debug('[Magento] Find information based on URL', { clearUrl });
-      const { data } = await context.$magento.api.route(clearUrl, params?.customQuery ?? null);
+      const { data } = await context.$magento.api.route(clearUrl, params?.customQuery ?? null, params?.customHeaders ?? null);
       results = data?.route ?? null;
 
       if (!results) nuxtError({ statusCode: 404 });

helpers/cart/addToCart.ts

@@ -1,7 +1,7 @@
 import { useRouter, useContext } from '@nuxtjs/composition-api';
 import type { Product } from '~/modules/catalog/product/types';
-import productGetters from '~/modules/catalog/product/getters/productGetters';
 import useCart from '~/modules/checkout/composables/useCart';
+import { useProduct } from '~/modules/catalog/product/composables/useProduct';
 
 export const useAddToCart = () => {
   const {
@@ -10,6 +10,7 @@ export const useAddToCart = () => {
   } = useCart();
   const router = useRouter();
   const { app } = useContext();
+  const { getProductPath } = useProduct();
   const addItemToCart = async (params: { product: Product, quantity: number }) => {
     const { product, quantity } = params;
     // @ts-ignore
@@ -26,16 +27,7 @@ export const useAddToCart = () => {
       case 'BundleProduct':
       case 'ConfigurableProduct':
       case 'GroupedProduct':
-        const sku = productGetters.getProductSku(product);
-        const slug = productGetters.getSlug(product).replace(/^\//, ''); // remove leading slash from getSlug
-
-        const path = app.localeRoute({
-          name: 'product',
-          params: {
-            id: sku,
-            slug,
-          },
-        });
+        const path = app.localeRoute(getProductPath(product));
 
         await router.push(path);
         break;

helpers/getMetaInfo.ts

@@ -0,0 +1,37 @@
+import type { MetaInfo } from 'vue-meta';
+
+export const getMetaInfo = (page: any, isNoIndex: boolean = false): MetaInfo => {
+  if (!page) {
+    return null;
+  }
+
+  const seoTags: MetaInfo = {
+    meta: [],
+  };
+
+  if (page?.meta_title || page?.title || page?.name) {
+    seoTags.title = page?.meta_title || page?.title || page?.name;
+  }
+  if (page?.meta_description) {
+    seoTags.meta.push({
+      hid: 'description',
+      name: 'description',
+      content: page.meta_description,
+    });
+  }
+  if (page?.meta_keyword || page?.meta_keywords) {
+    seoTags.meta.push({
+      hid: 'keywords',
+      name: 'keywords',
+      content: page?.meta_keyword || page?.meta_keywords,
+    });
+  }
+  if (isNoIndex) {
+    seoTags.meta.push({
+      name: 'robots',
+      content: 'noindex, nofollow',
+    });
+  }
+
+  return seoTags;
+};

lang/de.js

@@ -66,6 +66,7 @@ export default {
   "Go back shopping": "Zurück einkaufen",
   "Go back to shop": "Zurück zum Einkaufen",
   "Go to checkout": "Zur Kasse gehen",
+  "Go to cart": "Zur Warenkorb gehen",
   "Guarantee": "Garantie",
   "Help": "Hilfe",
   "Help & FAQs": "Hilfe & FAQs",
@@ -305,4 +306,6 @@ export default {
   "Payment date":"Zahlungsdatum",
   "The user password was changed successfully updated!":"Das Benutzerpasswort wurde erfolgreich geändert aktualisiert!",
   "The user account data was successfully updated!":"Die Benutzerkontodaten wurden erfolgreich aktualisiert!",
+  "You submitted your review for moderation.": "Sie haben Ihre Bewertung zur Moderation eingereicht.",
+  "Starting at": "Beginnt um",
 };

lang/en.js

@@ -64,6 +64,7 @@ export default {
   "Go back shopping": "Go back shopping",
   "Go back to shop": "Go back to shop",
   "Go to checkout": "Go to checkout",
+  "Go to cart": "Go to cart",
   "Guarantee": "Guarantee",
   "Help": "Help",
   "Help & FAQs": "Help & FAQs",
@@ -303,4 +304,6 @@ export default {
   "Payment date":"Payment date",
   "The user password was changed successfully updated!":"The user password was changed successfully updated!",
   "The user account data was successfully updated!":"The user account data was successfully updated!",
+  "You submitted your review for moderation.": "You submitted your review for moderation.",
+  "Starting at": "Starting at",
 };

layouts/default.vue

@@ -42,7 +42,7 @@ export default defineComponent({
     IconSprite,
     TopBar,
     AppFooter: () => import(/* webpackPrefetch: true */ '~/components/AppFooter.vue'),
-    CartSidebar: () => import(/* webpackPrefetch: true */ '~/components/CartSidebar.vue'),
+    CartSidebar: () => import(/* webpackPrefetch: true */ '~/modules/checkout/components/CartSidebar.vue'),
     WishlistSidebar: () => import(/* webpackPrefetch: true */ '~/modules/wishlist/components/WishlistSidebar.vue'),
     LoginModal: () => import(/* webpackPrefetch: true */ '~/modules/customer/components/LoginModal/LoginModal.vue'),
     Notification: () => import(/* webpackPrefetch: true */ '~/components/Notification.vue'),

middleware.config.js

@@ -29,10 +29,10 @@ module.exports = {
           ...cookieNames,
         },
         cookiesDefaultOpts: {
-          httpOnly: false,
-          secure: true,
-          sameSite: 'Strict',
-          path: '/',
+          httpOnly: process.env.VSF_COOKIE_HTTP_ONLY || false,
+          secure: process.env.VSF_COOKIE_SECURE || false,
+          sameSite: process.env.VSF_COOKIE_SAME_SITE || 'Strict',
+          path: process.env.VSF_COOKIE_PATH || '/',
         },
         defaultStore: 'default',
         externalCheckout: {