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.
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?
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;
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!