As a shopper, I can access a specific product thanks to a direct link

[RachL]

When working on this use clokify code #10879 - Product Modal Links

Description

- As a: potential shopper
- On page: new dedicate URL per shop
- I want to be able to do:

I can access a direct link to a product.

these questions need to be answer before starting developing this feature:

• where do other products appear in the shop once the shopper ask to see the full store?
• does the product open on a modal in mobile as well or a new page?

Design links

They can be found here: https://www.figma.com/proto/v2tzhoSc7U5pcdurI2tRcD/Engineering-Delivery---Front-Shop?page-id=1%3A9&node-id=1-43&viewport=548%2C492%2C0.1&t=SYSOQYUK0Nbn3Uh5-1&scaling=min-zoom&starting-point-node-id=1%3A43

⚠️ 2 changes from this prototype:

• in case of several OC we would keep the current behavior of going straight to the shop after selecting the OC in the dropdown.

• when there is no open OC accessible, the background page must be the shopfront closed page, not the product list

Acceptance Criteria & Tests

1. if the product is not linked to an open OC (with or without stock) or the visitor does not have access to the OC, this is the display they land on (background should be the shop closed page):

2. If the product becomes out of stock but there is an open OC, a message states the product is unavailable:
   

3a. When the shopper has access to an open OC and there is stock, this OC is pre-selected in the blue dropdown and a "shop for this product" appears

3b. When the shopper has access to several OC, the red dropdown appears; When selecting an OC, the shopper gets straight to step 4 (same behavior than on the shopfront)

4. When lading on the shop, the shopper sees the product and all its variants and can choose to add to cart but has also a button to view all products (step 5)

5. When viewing all products we need to decide where we put the linked products