Product page

The product page is filled with lots of functionality that might not be obvious at a first glance. Here's a walkthrough of the different functionality, and how you can remove it if it's not in use.

Product history

From Jul 1, 2022 EU has new rules for eCommerce merchants that wants to sell to the EU market. Among other things one important issue is that it is required to be able to show historical price information from the last 30 days to the customer.

The historical price functionality is always on and no activation is required. You may use the built in component or create your own based on data provided from our StoreAPI.

Loading state

There's a loading state for the product page that is used when you do client side navigation if you haven't already fetched any product data. In some cases, such as when you're navigating from a category page to a product page, we use the partial data you've already fetched to render parts of the product page. This means it's very important to add null checks. The loading state is rendered from the components in ProductPageLoadingState.js

Package Products

In order to use package products, to start you will have to add isPackage to your routeQuery so that you can render a PackageProduct component instead of the normal AddToCartForm. You can see an example of this here in template-trend. Then create a PackageProduct component following our implementation of package products in template-trend here.

The documentation for the hook usePackageProducts is here.

Breadcrumbs

On the top of the product page we render breadcrumbs to the product. This helps the user with navigation, and is based on the path to the product page. In some cases products live in multiple categories, and by default the product page url will be based on the path of the category you entered the product page from. A product also has a main category (set in the Norce Admin), which is used as the canonical url.

Remove the breadcrumbs by removing the component from ProductPage.js. Note that the breadcrumb data is also used for tracking in gtag and GTM, so if you want to keep that functionality you cannot remove the breadcrumb field from the GraphQL query.

Image gallery

The image gallery uses react-image-gallery under the hood, and renders a swipable image gallery with thumbnails underneath and a full screen mode. If you have a product with variants, it will automatically add the variant specific images and if you enter the page with a variant pre-selected, it will show the variant image on page load.

To replace the image gallery, just delete ImageContainer.js and remove the component from ProductPage.js

Favourite

Press the heart in the top right corner of the product page to add a product to a favourites list. If the user is logged in, this is persisted on the account, otherwise it is stored locally in the browser. When signing in, the local list will be merged with the user's persisted list automatically.

Remove the component to disable this feature.

Details

Product name, subname, article number and the short description is shown on top of the product page.

Variant selection

If your product has variants you can select which variant you want to add to cart. If there's more than 4 options available, it's shown as a dropdown rather than a row of buttons. You can have two levels of variants, e.g. size and color. The Flight framework does validation of variant selection, making sure that you can only add valid combinations that are buyable to the cart.

Stock status

There are many ways to configure stock statuses in Norce and it shows the stock status for your product and/or selected variant on the product page. We can also show stock statuses for different warehouses if you e.g. do both physical and online sales.

The stock statuses are rendered in AddToCartForm.js.

Price and discounts

The current product price is displayed alongside original price (if it's on a discount).

Campaigns and packages

If a product is part of a campaign, or included in a package deal, it's shown on the product page, as a part of AddToCartForm.js.

Add to cart

The Flight framework has basic quantity selection before adding to cart, as well as support for product comments that can be used to e.g. customize products. Comments are set up in the Norce admin.

Configurable products

This is an advanced feature of Norce that is used by very few shops. Talk to your contact at Norce for an introduction to how this works.

Pre-order date selection

This is a nieche feature used mainly in business-to-sales shops, where a user might place an order for products that have not yet been manufactured. The framework allows you to select a delivery date based on a configuration from the Norce admin.

Package products

Package products is basically a placeholder product for a campaign where multiple products are discounted when they are bought together. One example is having a dining table package, where you get a reduction in price when you buy one table and six chairs. These are added as individual products to the cart, but are given a discount. There is full support in the framework for package products.

Pre-selected Variants

The framework automatically selects the variants if the values are passed in the url query. In order to make it work there are a few conditions:

• The parameter name has to be att
• The values have to be separated by |
• The passed values must be base64 encoded
• The order of the values has to be the same as variants order defined in the admin
• There has to be a value for each variant option the product has

Example

We have a product with two variant options. For the first option the Ø 250 should be selected and for the second option Dark rose should be picked. The two values has to be merged into one string: Ø 250|Dark rose. This string has to be base64 encoded: w5ggMjUwfERhcmsgcm9zZQ==. We pass the encoded value with the parameter att to the url query.

?att=w5ggMjUwfERhcmsgcm9zZQ==

Back in stock notifications

You can sign up to get notified when a product is back in stock. This requires the feature to be enabled in the Norce Admin. There's no automatic feature to actually send those emails to the client, but there's an interface in the Norce Admin where you can see and manage all emails signed up to a specific product.

Unique Selling Points (USPs)

Below the add to cart button there's a list of USPs, which is a very common pattern used to encourage the user to make a purchase. Usually this contains information about shipping, returns and other perks that you might have.

This is just regular React components that you change inline.

Product description

The full length description is shown below, on mobile as a collapsable accordion. It is rendered as HTML, and can contain text, images, videos etc.

Product specifications

Using data from Custom fields in Norce (called Malldelar in the Swedish admin), the store renders a table of specifications for this product. This is very customizable in Norce. It is common to use the custom fields to toggle different functionality on a per product basis, and you might not want to render all fields on your product page. In that case you need to manually filter the list using JavaScript, since there's no way to filter what fields we receive from the API.

Related products

In Norce you can connect related products to a product by manually connecting them. This is a feature that needs to be enabled in the admin, so talk to your contact at Norce to have this enabled. Any related products are shown at the bottom of the product page.

Many times you also want to implement product recommendations. Unless using Hello Retail, Findify or Nosto for this, with the help of the extensions available to integrate them, you may use the built in solution Releware, found under product.recommendedProduct in the product graph type.

NB: Releware feature needs to be activated by our Product support.