TQLG-277: Message and button when cart is empty (#97)

basecom · Dec 20, 2024 · 7eba104 · 7eba104
1 parent 177ce3e
commit 7eba104
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/components/Layout/Header/LayoutHeaderCart.vue b/components/Layout/Header/LayoutHeaderCart.vue
@@ -41,14 +41,34 @@ const { cartItemsWithProduct, cartItemsCount } = storeToRefs(cartItemsStore);
                 </ul>
                 <CheckoutSummary :reduced-display="true" />
             </div>
+            <template v-else>
+                <UtilityStaticNotification
+                    id="empty-cart"
+                    type="info"
+                    :message="$t('checkout.cart.emptyCartMessage')"
+                    class="mt-4"
+                />
+            </template>
 
             <LocaleLink
+                v-if="!isEmpty"
                 to="/checkout/cart"
                 class="mt-4 flex items-center justify-center rounded-md bg-brand-primary px-6 py-3 text-white"
                 @click="offcanvasCartController.close()"
             >
                 {{ $t('checkout.offcanvasCart.toCartButtonLabel') }}
             </LocaleLink>
+            <FormKit
+                v-else
+                type="submit"
+                ignore
+                :classes="{
+                    'outer': 'mt-4'
+                }"
+                @click="offcanvasCartController.close()"
+            >
+                {{ $t('checkout.offcanvasCart.continueShopping') }}
+            </FormKit>
         </template>
     </LazyLayoutSidebar>
 </template>
diff --git a/i18n/de-DE/checkout.json b/i18n/de-DE/checkout.json
@@ -6,7 +6,8 @@
             "emptyCartMessage": "Ihr Warenkorb ist leer."
         },
         "offcanvasCart": {
-            "toCartButtonLabel": "Zum Warenkorb"
+            "toCartButtonLabel": "Zum Warenkorb",
+            "continueShopping": "Weiter einkaufen"
         },
         "confirm": {
             "heading": "Kasse",

diff --git a/i18n/en-GB/checkout.json b/i18n/en-GB/checkout.json
@@ -6,7 +6,8 @@
             "emptyCartMessage": "Your cart is empty."
         },
         "offcanvasCart": {
-            "toCartButtonLabel": "Go to cart"
+            "toCartButtonLabel": "Go to cart",
+            "continueShopping": "Continue shopping"
         },
         "confirm": {
             "heading": "Checkout",