diff --git a/components/CartItem.vue b/components/CartItem.vue index e558882a..0e96bc4f 100644 --- a/components/CartItem.vue +++ b/components/CartItem.vue @@ -96,6 +96,13 @@ /> + + +
+

+ {{ $t('cart.exceedsStockLevel') }} +

+
@@ -124,6 +131,8 @@ export default { itemEditorIsVisible: false, quantity: 1, maxQuantity: 99, + adjustmentError: false, + validateCartStock: false, } }, @@ -143,6 +152,7 @@ export default { this.maxQuantity = maxQuantity this.quantity = item.quantity + this.validateCartStock = $swell.settings.get('cart.validateStock') }, computed: { diff --git a/components/QuickAdd.vue b/components/QuickAdd.vue index 65752b8f..ff8c9202 100644 --- a/components/QuickAdd.vue +++ b/components/QuickAdd.vue @@ -37,6 +37,26 @@ + +
+
+ {{ + $t('products.preview.quickAdd.outOfStock') + }} +
+
+
= optionInputs.length ) { - this.addToCart() - // Hide options when adding to cart this.quickAddIsActive = false + + // Check if product/variant is in stock before adding to cart + if (!this.checkHasStock()) { + this.addToCartError = 'Out of stock' + return + } + + // Add to cart + this.addToCart() } else { // Move onto next option if available this.quickAddIndex++ @@ -216,19 +244,43 @@ export default { } }, + // Check if current variation has stock + checkHasStock() { + const { product, variation } = this + return ( + !product.stockTracking || + product.stockPurchasable || + ((variation.stockStatus !== 'out_of_stock' || variation.stockStatus) && + variation.stockLevel > 0) + ) + }, + // Add product to cart with selected options - addToCart() { - // Emit event to show updating label - this.$emit('adding-to-cart') - - // Emit event to hide quick add button if keep-alive is active - this.$emit('keep-alive', false) - - this.$store.dispatch('addCartItem', { - productId: this.variation.id, - quantity: 1, - options: this.optionState, - }) + async addToCart() { + try { + await this.$store.dispatch('addCartItem', { + productId: this.variation.id, + quantity: 1, + options: this.optionState, + }) + + // Close popup when product has been added to cart + this.$emit('click-close') + } catch (err) { + let errorMessage + switch (err.message) { + case 'invalid_stock': + errorMessage = this.$t('cart.exceedsStockLevel') + break + default: + break + } + + this.$store.dispatch('showNotification', { + message: errorMessage, + type: 'error', + }) + } }, }, diff --git a/components/QuickViewPopup.vue b/components/QuickViewPopup.vue index 2c731e3a..3b54e149 100644 --- a/components/QuickViewPopup.vue +++ b/components/QuickViewPopup.vue @@ -182,7 +182,6 @@
-
.gradient { - @apply w-full h-12; + @apply w-full absolute top-0 h-6 transform -translate-y-full; background: rgb(255, 255, 255); background: linear-gradient( 0deg, diff --git a/components/StockStatus.vue b/components/StockStatus.vue index 88ee4490..72f24abf 100644 --- a/components/StockStatus.vue +++ b/components/StockStatus.vue @@ -8,6 +8,12 @@ {{ $t(status.label) }} + + • {{ $t('products.slug.stockRemaining', { n: stockLevel }) }} +
{{ @@ -54,6 +60,14 @@ export default { type: String, default: 'out_of_stock', }, + stockLevel: { + type: Number, + default: 0, + }, + showStockLevel: { + type: Boolean, + default: false, + }, }, computed: { diff --git a/components/TheFooter.vue b/components/TheFooter.vue index e6ff026b..099e4d1c 100644 --- a/components/TheFooter.vue +++ b/components/TheFooter.vue @@ -128,7 +128,6 @@ >Swell

-