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:

node_modules/@scandipwa/scandipwa/src/route/ProductPage/ProductPage.component.js

    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.

src/route/ProductPage/ProductPage.component.js

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: