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

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

Hide file tree

Showing 2 changed files with 16 additions and 4 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/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 {