Product page layout is a page containing the above-mentioned dependencies, product actions, product gallery, product attributes, product reviews, product details, and j.

<aside> ℹ️ Usually, styling this element takes from-to: 4**-6h**

</aside>

Where this element can be seen?

This element can be seen after clicking on any product.

How should this element be designed?

Design option #1

Design option #2

Issues with the design

• Was not correctly defined where is such product attributes as description and short description.

What are the dependencies?

• Product list. How to theme product list?
• Rating display. How to theme a rating display?
• Product price. How to theme a product price?
• Product organisms. How to style product organisms?

How to develop styles for this element?

Theme the ProductPage route.

<aside> ➡️ Additionally, adjustments for smaller elements may be needed.

</aside>

To style a component, override its .style.scss file. You can also customize how it is rendered by overriding the .component.js file.

How to override JavaScript classes?

How to override styles?

Some fixing to the spacing between some of the actions might be necessary when styling the product page. Might be necessary to remove some components as well.

• The tabMap object inside ProductPage.component.js is responsible for mapping which tabs should be rendered on the product page. Override it to remove a tab that is not necessary.

The example above is a real implementation. There, the about tab was removed and a new tab called “Questions” was added.

<aside> ➡️ Note that the render attribute for the “Questions” tab is not receiving a render method. Usually implementing the content of this that is out of the scope of this task.

</aside>

For each attribute of the tabMap object, the key is a constant that is defined in the ProductPage.config.js file. When creating a new tab:

1. Override the ProductPage.config.js.
2. Export * from the source file.
3. Add the new constant.

• A real example would look like this:

Even though the breadcrumbs are styled on a separate task, check on their placement and display. Also, check if it is necessary to add breadcrumbs to the mobile page. By default, the product page breadcrumbs are hidden on mobile.

Implementation example #1

Implementation example #2