feat(theme): add sorting select in the navbar on the mobile category …

…view
vuestorefront · Feb 23, 2022 · 375a1f7 · 375a1f7
1 parent 659db4e
commit 375a1f7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/composables/src/composables/useCart/index.ts b/packages/composables/src/composables/useCart/index.ts
@@ -386,9 +386,13 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
   ) => !!currentCart?.items.find((cartItem) => cartItem?.product?.uid === product.uid),
   loadTotalQty: async (context: Context) => {
     const apiState = context.$magento.config.state;
-    const { data } : any = await context.$magento.api.cartTotalQty(apiState.getCartId());
+    if (apiState.getCartId()) {
+      const { data } : any = await context.$magento.api.cartTotalQty(apiState.getCartId());
 
-    return data?.cart?.total_quantity ?? 0;
+      return data?.cart?.total_quantity ?? 0;
+    }
+
+    return 0;
   },
 };
 

diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js
@@ -107,7 +107,7 @@ export default () => {
       '@vue-storefront/middleware/nuxt',
       '@nuxt/image',
       ['@vue-storefront/cache/nuxt', {
-        enabled: process.env.REDIS__ENABLED,
+        enabled: false,
         invalidation: {
           endpoint: process.env.REDIS__CACHE_INVALIDATE_URL,
           key: process.env.REDIS__CACHE_INVALIDATE_KEY,

diff --git a/packages/theme/pages/Category.vue b/packages/theme/pages/Category.vue
@@ -32,8 +32,8 @@
           </SfButton>
         </LazyHydrate>
 
-        <div class="navbar__sort desktop-only">
-          <span class="navbar__label">{{ $t('Sort by') }}:</span>
+        <div class="navbar__sort">
+          <span class="navbar__label desktop-only">{{ $t('Sort by') }}:</span>
           <LazyHydrate when-visible>
             <SfSelect
               :value="sortBy.selected"
@@ -814,12 +814,20 @@ export default defineComponent({
     ::v-deep .sf-select__placeholder {
       --select-option-font-size: var(--font-size-sm);
     }
+
+    @include for-mobile {
+      --select-width: 135px;
+    }
   }
 
   &__sort {
     display: flex;
     align-items: center;
     margin: 0 auto 0 var(--spacer-2xl);
+    @include for-mobile {
+      margin: 0;
+      order: 1;
+    }
   }
 
   &__counter {