fix(theme): remove cart load from layout

Author: bartoszherba

packages/composables/src/composables/useCart/index.ts

@@ -383,7 +383,7 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
       currentCart,
       product,
     },
-  ) => !!currentCart?.items.find((cartItem) => cartItem.product.uid === product.uid),
+  ) => !!currentCart?.items.find((cartItem) => cartItem?.product?.uid === product.uid),
 };
 
 export default useCartFactory<Cart, CartItem, Product>(factoryParams);

packages/composables/src/getters/cartGetters.ts

@@ -89,13 +89,7 @@ export const getItemAttributes = (
   return attributes;
 };
 
-export const getItemSku = (product: CartItem): string => {
-  if (!product.product) {
-    return '';
-  }
-
-  return product.product.sku;
-};
+export const getItemSku = (product: CartItem): string => product?.product?.sku || '';
 
 const calculateDiscounts = (discounts: Discount[]): number => discounts.reduce((a, b) => Number.parseFloat(`${a}`) + Number.parseFloat(`${b.amount.value}`), 0);
 

packages/theme/components/CartSidebar.vue

@@ -248,15 +248,14 @@ import {
   defineComponent,
   ref,
   useRouter,
-  useContext,
+  useContext, onMounted,
 } from '@nuxtjs/composition-api';
 import {
   useCart,
   useUser,
   cartGetters,
   useExternalCheckout,
 } from '@vue-storefront/magento';
-import { onSSR } from '@vue-storefront/core';
 import { useUiState, useUiNotification } from '~/composables';
 import CouponCode from './CouponCode.vue';
 import stockStatusEnum from '~/enums/stockStatusEnum';
@@ -301,8 +300,9 @@ export default defineComponent({
     const isLoaderVisible = ref(false);
     const tempProduct = ref();
 
-    onSSR(async () => {
-      await loadCart();
+    onMounted(() => {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      loadCart();
     });
 
     const goToCheckout = async () => {

packages/theme/layouts/default.vue

@@ -26,7 +26,6 @@ import LazyHydrate from 'vue-lazy-hydration';
 import { onSSR } from '@vue-storefront/core';
 import { useRoute, defineComponent } from '@nuxtjs/composition-api';
 import {
-  useCart,
   useUser,
 } from '@vue-storefront/magento';
 import AppHeader from '~/components/AppHeader.vue';
@@ -57,16 +56,12 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const { load: loadUser } = useUser();
-    const { load: loadCart } = useCart();
 
     const { loadConfiguration } = useMagentoConfiguration();
 
     onSSR(async () => {
       await loadConfiguration();
-      await Promise.all([
-        loadUser(),
-        loadCart(),
-      ]);
+      await loadUser();
     });
 
     return {