Merge pull request #994 from w3bdesign/develop

Stock status

README.md

@@ -75,7 +75,7 @@ The current release has been tested and is confirmed working with the following
 
 ## Features
 
--   Next.js version 13.0.3
+-   Next.js version 13.1.6
 -   React 18
 -   Connect to Woocommerce GraphQL API and list name, price and display image for products
 -   Support for simple products and variable products
@@ -90,6 +90,7 @@ The current release has been tested and is confirmed working with the following
 -   Shows page load progress with Nprogress during navigation
 -   Fully responsive design
 -   Category and product listings
+-   Show stock status
 -   Pretty URLs with builtin Nextjs functionality
 -   Tailwind 3 for styling
 -   JSDoc comments

components/Product/SingleProduct.component.jsx

@@ -91,24 +91,32 @@ const SingleProduct = ({ product }) => {
               <p className="pt-1 mt-4 text-2xl text-gray-900">
                 {DESCRIPTION_WITHOUT_HTML}
               </p>
+              {product.stockQuantity && (
+                <p
+                  v-if="data.product.stockQuantity"
+                  class="pt-1 mt-4 mb-4 text-2xl text-gray-900"
+                >
+                  {product.stockQuantity} på lager
+                </p>
+              )}
               {product.variations && (
                 <p className="pt-1 mt-4 text-xl text-gray-900">
                   <span className="py-2">Varianter</span>
                   <select
                     id="variant"
                     name="variant"
-                    className="block w-64 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
+                    className="block w-80 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
                     onChange={(e) => {
                       setselectedVariation(e.target.value);
                     }}
                   >
                     {product.variations.nodes.map(
-                      ({ id, name, databaseId }) => {
+                      ({ id, name, databaseId, stockQuantity }) => {
                         // Remove product name from variation name
                         const filteredName = name.split('- ').pop();
                         return (
                           <option key={id} value={databaseId}>
-                            {filteredName}
+                            {filteredName} - ({stockQuantity} på lager)
                           </option>
                         );
                       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-woocommerce",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Next.js WooCommerce webshop",
   "main": "index.js",
   "scripts": {

utils/gql/GQL_QUERIES.js

@@ -22,6 +22,7 @@ export const GET_SINGLE_PRODUCT = gql`
         regularPrice
         price
         id
+        stockQuantity
       }
       ... on VariableProduct {
         salePrice