From 9c35e45d7a40f14479971cda4bdfd5d62faae4e0 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Wed, 23 Feb 2022 08:35:42 +0100
Subject: [PATCH] feat(theme): add sorting select in the navbar on the mobile
 category view

---
 .../composables/src/composables/useCart/index.ts     |  8 ++++++--
 packages/theme/pages/Category.vue                    | 12 ++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/composables/src/composables/useCart/index.ts b/packages/composables/src/composables/useCart/index.ts
index 27a7d1be8..414ff787d 100644
--- 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
index d32679f2a..497266b5d 100644
--- 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 {