Magento PWA Studio: How to add stock status in product page

When you go to purchase something from a store and they have no stock, it’s so disappointing. Knowing the product is not available and when it will be restocked makes things easier for the shopper. So here we have come up with a blog that will show you how to add stock status on the product page in Magento 2 PWA Studio. This will allow your customers to see stock availability messages on the product page.

Check out our Cenia Pro Theme for Magento 2 PWA, works fast and seamlessly.

Being the fourth blog in the series dedicated to Magento PWA Studio, you can check out our other publications related to PWA studio learnings-

• How to add custom attribute as a swatch
• How to add a newsletter to the footer
• How to add a banner on the category page

Why learn to add product stock status on the product page in Magento 2 PWA Studio?

By learning how to add stock status on the product page in Magento 2 PWA Studio you can assign statuses like in stock and out of stock for an inventory situation and products can be aligned either automatically or manually. This will help to keep your customers informed with precise information about stock availability.

Click to avail a free demo of our Marketplace

How to add stock status in product page in Magento 2 PWA Studio

• Step 1

First, you need to create a Venia project through scaffolding

https://magento.github.io/pwa-studio/pwa-buildpack/scaffolding/

yarn create @magento/pwa

Once you have your scaffolded Venia project Then go inside your project directory

• Step 2:

Then we need to add our custom component for stock status in the Product Detail component

Click to check us out on GitHub

For this we need to add our code in local-intercept.js [YOUR_PROJECT_NAME/local-intercept.js]

function localIntercept(targets) {
const { Targetables } = require('@magento/pwa-buildpack');
const targetables = Targetables.using(targets);
// Create a targetable component linked to the productFullDetail.js file
const ProductDetailsComponent = targetables.reactComponent(
'@magento/venia-ui/lib/components/ProductFullDetail/productFullDetail.js'
);
// Add an import statement to the productFullDetail.js file and
const StockStatus = ProductDetailsComponent.addImport(
"ProductStockStatus from '/src/components/ProductStockStatus'"
);
// Insert the StockStatus component after the product name
ProductDetailsComponent.insertAfterJSX(
'<h1 className={classes.productName}>',
`<${StockStatus} productSku={productDetails.sku} />`
);
}
module.exports = localIntercept;

• Step 3:

We then need to add our component inside the src directory

Interesting reads: Why should you choose PWA Magento for eCommerce website?

Progressive Web App Limitations: Myths Busted

index.js [YOUR_PROJECT_NAME/src/components/ProductStockStatus/index.js]

export { default } from './stockStatus.js';

stockStatus.js [YOUR_PROJECT_NAME/src/components/ProductStockStatus/stockStatus.js]

import React from 'react';
import useProductStockStatus from '../../peregrine/lib/talons/ProductStockStatus/useProductStockStatus.js';
const productStockstatus = props => {
const {productSku} = props;
const {stockStatus} = useProductStockStatus({
sku: productSku,
}); 
return (
<>
{stockStatus && <p>{stockStatus.replace(/_/g,' ')}</p>}
</>
);
};
export default productStockstatus;

• Step 4:

Now add talon to get product stock status

Avail of our Cenia Pro theme user guide

useProductStockStatus.js [YOUR_PROJECT_NAME/src/peregrine/lib/talons/ProductStockStatus/useProductStockStatus.js

import { useMemo } from "react";
import { useQuery } from "@apollo/client";
import GET_PRODUCT_STOCK_STATUS from './productStockStatus.gql.js';
const useProductStockStatus = (props) => {
const { sku } = props;
const { error, loading, data } = useQuery(GET_PRODUCT_STOCK_STATUS, {
fetchPolicy: "cache-and-network",
nextFetchPolicy: "cache-first",
variables: {
sku: sku
}
});
const stockStatus = useMemo(() => {
if (data && data.products.items[0]) {
return data.products.items[0].stock_status;
}
return null;
}, [data]);
return {
error,
isLoading: loading,
stockStatus
};
};
export default useProductStockStatus;

productStockStatus.gql.js [YOUR_PROJECT_NAME/src/peregrine/lib/talons/ProductStockStatus/productStockStatus.gql.js]

import gql from "graphql-tag";
const GET_PRODUCT_STOCK_STATUS = gql`
query getProductStockStatus($sku: String!) {
products(filter: { sku: { eq: $sku } }) {
items {
stock_status
}
}
}
`;
export default GET_PRODUCT_STOCK_STATUS;

Check out the new updates in Cenia Pro Magento 2 PWA Theme

After that run your project

yarn build

yarn start

This is what your end result should look like

Conclusion

This is the procedure that you can follow to add stock status on the product page in Magento 2 PWA Studio. We hope we were able to share it in a simple way and would encourage you to give it a try.

Check out our Magento 2 PWA Theme For ECommerce- an app-like experience at a fraction of the cost

You can expect similar articles as we want to share what we have learned, things that have made Cedcommerce what we are today.

Contact us for any related queries and we will be happy to help!