Merge pull request #1022 from w3bdesign/1021-show-stock-status-in-product

1021 show stock status in product

Author: w3bdesign

apollo/queries/GET_SINGLE_PRODUCT_QUERY.gql

@@ -18,6 +18,7 @@ query Product($id: ID!) {
       salePrice
       regularPrice
       databaseId
+      stockQuantity
     }
     ... on VariableProduct {
       price

components/Products/ProductsSingleProduct.vue

@@ -44,6 +44,12 @@
             <p class="pt-1 mt-4 text-2xl text-gray-900">
               {{ stripHTML(data.product.description) }}
             </p>
+            <p
+              v-if="data.product.stockQuantity"
+              class="pt-1 mt-4 text-2xl text-gray-900"
+            >
+              {{ data.product.stockQuantity }} in stock
+            </p>
             <p
               v-if="data.product.variations"
               class="pt-1 mt-4 text-xl text-gray-900"
@@ -60,7 +66,8 @@
                   :value="variation.databaseId"
                   :selected="index === 0"
                 >
-                  {{ variation.name }}
+                  {{ filteredVariantName(data.product.name, variation.name) }}
+                  ({{ variation.stockQuantity }} in stock)
                 </option>
               </select>
             </p>
@@ -83,7 +90,11 @@
 import GET_SINGLE_PRODUCT_QUERY from "@/apollo/queries/GET_SINGLE_PRODUCT_QUERY.gql";
 import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
 
-import { stripHTML, filteredVariantPrice } from "@/utils/functions";
+import {
+  stripHTML,
+  filteredVariantPrice,
+  filteredVariantName,
+} from "@/utils/functions";
 
 import { useCart } from "@/store/useCart";
 

utils/functions.js

@@ -20,6 +20,15 @@ export const filteredVariantPrice = (price, side) => {
   return price.substring(0, price.indexOf("-")).replace("-", "");
 };
 
+/**
+ * Strips product name from variant name
+ * @param {String} productName Text to strip out
+ * @param {String} input Input text to strip product name from
+ */
+export function filteredVariantName(productName, input) {
+  return input.replace(`${productName} -`, "");
+}
+
 /**
  * Prepares the checkout object based on the input data from the checkout form
  * @param {Object} form Form data to process