Adding a Tab on the Product Page
Another example of overriding a tab configuration
In this quick guide, you will learn about adding a tab to the product page. As you'll see, it will be very similar to the previous tutorial, as it uses the same pattern.
Inspecting the Codebase
First, we need to find the code responsible for rendering the product page tabs. You can use the React developer tools extension to find which components are being rendered. Searching the codebase can also be useful.
We find that the ProductPage
route is itself responsible for configuring the tabs:
tabMap = {
[PRODUCT_INFORMATION]: {
name: __('About'),
shouldTabRender: () => {
const { isInformationTabEmpty } = this.props;
return isInformationTabEmpty;
},
render: (key) => this.renderProductInformationTab(key)
},
[PRODUCT_ATTRIBUTES]: {...},
[PRODUCT_REVIEWS]: {...}
};
Now, we want to add our own tab to the mix!
Adding a New Tab
First, let's override the .component
file of the ProductPage
route. You can easily do this using the scandipwa
CLI:
scandipwa override route ProductPage
Make sure to select the ProductPage
class in the .component
file, because this is where we want to make modifications. You can also extend the styles if you intend to update them.
? Choose things to extend in ProductPage.component.js ProductPage
? What would you like to do with styles? Extend
? Choose things to extend in ProductPage.config.js
? Choose things to extend in ProductPage.container.js
NOTE!
The following files have been created:
src/route/ProductPage/ProductPage.component.js
src/route/ProductPage/ProductPage.override.style.scss
Now, jump into the .component
file and update the tabMap
by adding your own tab.
import {
PRODUCT_ATTRIBUTES,
PRODUCT_INFORMATION,
PRODUCT_REVIEWS
} from 'Route/ProductPage/ProductPage.config';
import {
ProductPage as SourceProductPage
} from 'SourceRoute/ProductPage/ProductPage.component';
import './ProductPage.override.style.scss';
/** @namespace TutorialCsaApp/Route/ProductPage/Component/ProductPageComponent */
export class ProductPageComponent extends SourceProductPage {
tabMap = {
[PRODUCT_INFORMATION]: {
name: __('About'),
shouldTabRender: () => {
const { isInformationTabEmpty } = this.props;
return isInformationTabEmpty;
},
render: (key) => this.renderProductInformationTab(key)
},
[PRODUCT_ATTRIBUTES]: {
name: __('Details'),
shouldTabRender: () => {
const { isAttributesTabEmpty } = this.props;
return isAttributesTabEmpty;
},
render: (key) => this.renderProductAttributesTab(key)
},
GUARANTEE_TAB: { // <-- we added a new tab here
name: __('Guarantee'),
shouldTabRender: () => false,
render: (key) => this.renderGuarantee(key)
},
[PRODUCT_REVIEWS]: {
name: __('Reviews'),
shouldTabRender: () => false,
render: (key) => this.renderProductReviewsTab(key)
}
};
// the function responsible for rendering the tab content
renderGuarantee(key) {
console.log(key);
return (
<section block="ProductPage" elem="Guarantee" key={ key }>
<h1>{ __('Our Promise to You') }</h1>
<p>
{ __('Everything we make is guaranteed to work for at least two years. It cannot break. If it'
+ ' breaks it\\'s probably your fault.') }
</p>
</section>
);
}
}
Result
If you check the product page in your app, you'll see that the tabs are now updated, and include our new tab:

Last updated
Was this helpful?