vuestorefront · Frodigo · Feb 3, 2022 · Feb 3, 2022
diff --git a/.env.example b/.env.example
@@ -6,3 +6,22 @@ MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql
 MAGENTO_EXTERNAL_CHECKOUT=false
 MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL}
 MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync
+MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
+IMAGE_PROVIDER={YOUR_IMAGE_PROVIDER}
+IMAGE_PROVIDER_BASE_URL={YOUR_IMAGE_PROVIDER_BASE_URL}
+MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
+IMAGE_PROVIDER={YOUR_IMAGE_PROVIDER}
+IMAGE_PROVIDER_BASE_URL={YOUR_IMAGE_PROVIDER_BASE_URL}
+REDIS__HOST=127.0.0.1
+REDIS__PORT=6379
+REDIS_PASSWORD=
+REDIS__KEY_PREFIX=
+REDIS__CACHE_INVALIDATE_URL=/cache-invalidate
+REDIS__ENABLED=false
+RECAPTCHA_ENABLED=true
+RECAPTCHA_HIDE_BADGE=false
+RECAPTCHA_VERSION=3
+RECAPTCHA_SITE_KEY=
+RECAPTCHA_SECRET_KEY=
+RECAPTCHA_SIZE=invisible
+RECAPTCHA_MIN_SCORE=0.5
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -10,10 +10,12 @@
           :to="localePath('/')"
           class="sf-header__logo"
         >
-          <SfImage
+          <nuxt-img
             src="/icons/logo.svg"
             alt="Vue Storefront Next"
             class="sf-header__logo-image"
+            width="35"
+            height="34"
           />
         </nuxt-link>
       </template>
@@ -155,7 +157,6 @@
 <script>
 import {
   SfHeader,
-  SfImage,
   SfIcon,
   SfButton,
   SfBadge,
@@ -197,7 +198,6 @@ import SearchResults from '~/components/SearchResults.vue';
 export default defineComponent({
   components: {
     SfHeader,
-    SfImage,
     StoreSwitcher,
     SfIcon,
     SfButton,
@@ -213,7 +213,7 @@ export default defineComponent({
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
     const { setTermForUrl, getFacetsFromURL, getAgnosticCatLink } = useUiHelpers();
     const { isAuthenticated, load: loadUser } = useUser();
-    const { cart, load: loadCart } = useCart();
+    const { cart } = useCart();
     const { wishlist } = useWishlist('GlobalWishlist');
     const {
       result: searchResult,
@@ -257,7 +257,6 @@ export default defineComponent({
     onSSR(async () => {
       await Promise.all([
         loadUser(),
-        loadCart(),
         categoriesListSearch({
           pageSize: 20,
         }),

diff --git a/components/BottomNavigation.vue b/components/BottomNavigation.vue
@@ -1,15 +1,13 @@
 <template>
   <!-- TODO: create logic with isActive prop for BottomNavigationItems -->
   <SfBottomNavigation class="navigation-bottom smartphone-only">
-    <nuxt-link to="localePath('/')">
-      <SfBottomNavigationItem
-        :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''"
-        icon="home"
-        size="20px"
-        label="Home"
-        @click="isMobileMenuOpen ? toggleMobileMenu() : false"
-      />
-    </nuxt-link>
+    <SfBottomNavigationItem
+      :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''"
+      icon="home"
+      size="20px"
+      label="Home"
+      @click="$router.push(app.localePath('/')) && (isMobileMenuOpen ? toggleMobileMenu() : false)"
+    />
     <SfBottomNavigationItem
       icon="menu"
       size="20px"
@@ -86,6 +84,7 @@ export default defineComponent({
       toggleCartSidebar,
       toggleMobileMenu,
       handleAccountClick,
+      app,
     };
   },
 });

diff --git a/components/CartSidebar.vue b/components/CartSidebar.vue
@@ -97,12 +97,12 @@
                 :image="cartGetters.getItemImage(product)"
                 :title="cartGetters.getItemName(product)"
                 :regular-price="
-                  $n(cartGetters.getItemPrice(product).regular, 'currency')
+                  $fc(cartGetters.getItemPrice(product).regular)
                 "
                 :special-price="
                   cartGetters.productHasSpecialPrice(product)
                     ? getItemPrice(product).special &&
-                      $n(cartGetters.getItemPrice(product).special, 'currency')
+                      $fc(cartGetters.getItemPrice(product).special)
                     : ''
                 "
                 :link="
@@ -113,7 +113,7 @@
                   )
                 "
                 class="collected-product"
-                @input="updateItemQty({ product, quantity: $event })"
+                @input="delayedUpdateItemQty({ product, quantity: $event })"
                 @click:remove="sendToRemove({ product })"
               >
                 <template #input>
@@ -125,7 +125,7 @@
                       :disabled="loading"
                       :qty="cartGetters.getItemQty(product)"
                       class="sf-collected-product__quantity-selector"
-                      @input="updateItemQty({ product, quantity: $event })"
+                      @input="delayedUpdateItemQty({ product, quantity: $event })"
                     />
                   </div>
                   <SfBadge
@@ -166,10 +166,12 @@
           class="empty-cart"
         >
           <div class="empty-cart__banner">
-            <SfImage
+            <nuxt-img
               alt="Empty bag"
               class="empty-cart__image"
               src="/icons/empty-cart.svg"
+              width="211"
+              height="143"
             />
             <SfHeading
               title="Your cart is empty"
@@ -196,11 +198,11 @@
             >
               <template #value>
                 <SfPrice
-                  :regular="$n(totals.subtotal, 'currency')"
+                  :regular="$fc(totals.subtotal)"
                   :special="
                     totals.subtotal <= totals.special
                       ? ''
-                      : $n(totals.special, 'currency')
+                      : $fc(totals.special)
                   "
                 />
               </template>
@@ -240,7 +242,6 @@ import {
   SfProperty,
   SfPrice,
   SfCollectedProduct,
-  SfImage,
   SfQuantitySelector,
   SfBadge,
 } from '@storefront-ui/vue';
@@ -257,9 +258,10 @@ import {
   cartGetters,
   useExternalCheckout,
 } from '@vue-storefront/magento';
+import _debounce from 'lodash.debounce';
 import { useUiState, useUiNotification } from '~/composables';
-import CouponCode from './CouponCode.vue';
 import stockStatusEnum from '~/enums/stockStatusEnum';
+import CouponCode from './CouponCode.vue';
 
 export default defineComponent({
   name: 'CartSidebar',
@@ -272,7 +274,6 @@ export default defineComponent({
     SfProperty,
     SfPrice,
     SfCollectedProduct,
-    SfImage,
     SfQuantitySelector,
     SfBadge,
     CouponCode,
@@ -292,7 +293,10 @@ export default defineComponent({
     const { isAuthenticated } = useUser();
     const { send: sendNotification, notifications } = useUiNotification();
 
-    const products = computed(() => cartGetters.getItems(cart.value).filter(Boolean));
+    const products = computed(() => cartGetters
+      .getItems(cart.value)
+      .filter(Boolean)
+      .map((item) => ({ ...item, product: { ...item.product, ...item.configured_variant } })));
     const totals = computed(() => cartGetters.getTotals(cart.value));
     const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
     const getAttributes = (product) => product.configurable_options || [];
@@ -339,7 +343,7 @@ export default defineComponent({
         title: 'Product removed',
       });
     };
-
+    const delayedUpdateItemQty = _debounce((params) => updateItemQty(params), 1000);
     const isInStock = (product) => cartGetters.getStockStatus(product) === stockStatusEnum.inStock;
 
     return {
@@ -349,7 +353,7 @@ export default defineComponent({
       isAuthenticated,
       products,
       removeItem,
-      updateItemQty,
+      delayedUpdateItemQty,
       isCartSidebarOpen,
       notifications,
       visible,

diff --git a/components/Checkout/CartPreview.vue b/components/Checkout/CartPreview.vue
@@ -15,24 +15,25 @@
       />
       <SfProperty
         :name="$t('Subtotal')"
-        :value="$n(totals.subtotal, 'currency')"
+        :value="$fc(totals.subtotal)"
         :class="['sf-property--full-width', 'sf-property--large property']"
       />
       <SfProperty
         v-if="hasDiscounts"
         :name="$t('Discount')"
-        :value="$n(discountsAmount, 'currency')"
+        :value="$fc(discountsAmount)"
         class="sf-property--full-width sf-property--small property"
       />
       <SfProperty
         v-if="selectedShippingMethod"
         :name="$t('Shipping')"
-        :value="$n(getShippingMethodPrice(selectedShippingMethod), 'currency')"
+        :value="$fc(getShippingMethodPrice(selectedShippingMethod))"
         class="sf-property--full-width sf-property--large property"
       />
+
       <SfProperty
         :name="$t('Total')"
-        :value="$n(totals.total, 'currency')"
+        :value="$fc(totals.total)"
         class="sf-property--full-width sf-property--large property-total"
       />
     </div>

diff --git a/components/Checkout/VsfShippingProvider.vue b/components/Checkout/VsfShippingProvider.vue
@@ -49,7 +49,7 @@
             <div class="sf-radio__label shipping__label">
               <div>{{ method.carrier_title }}</div>
               <div v-if="method && (method.amount || method.price_incl_tax)">
-                {{ $n(getShippingMethodPrice(method), 'currency') }}
+                {{ $fc(getShippingMethodPrice(method)) }}
               </div>
             </div>
           </template>
@@ -108,10 +108,11 @@ export default defineComponent({
       result: shippingMethods,
       loading: loadingShippingMethods,
       error: errorUseGetShippingMethods,
-    } = useGetShippingMethods('VsfShippingProvider');
+    } = useGetShippingMethods();
     const { cart } = useCart();
     const {
       state,
+      save: saveShippingProvider,
       error: errorShippingProvider,
       loading: loadingShippingProvider,
       setState,
@@ -129,9 +130,14 @@ export default defineComponent({
      * Instead, specify the pickup_location_code attribute in the setShippingAddressesOnCart mutation.
      */
     const selectShippingMethod = async (method) => {
-      await setState({
+      const shippingData = {
         carrier_code: method.carrier_code,
         method_code: method.method_code,
+      };
+
+      setState(shippingData);
+      await saveShippingProvider({
+        shippingMethod: shippingData,
       });
     };
 

diff --git a/components/CurrencySelector.vue b/components/CurrencySelector.vue
@@ -104,7 +104,7 @@ export default defineComponent({
 
     const isCurrencyModalOpen = ref(false);
 
-    const availableCurrencies = computed(() => currencies.value?.available_currency_codes);
+    const availableCurrencies = computed(() => currencies.value?.available_currency_codes || []);
 
     return {
       currentCurrencySymbol,