New Product Modals - Direct Links to Products

lin-d-hop commented 1 year ago

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

What is the problem we are solving

For most e-commerce platforms out there in internet land it is standard practice to have Product Descriptions Pages (PDPs). These pages have direct links and include all the detailed information about a product. For historical reasons within the Open Food Network, we use a type of embedded window called a modal to display this information. Our modals do not have URLs and so it is impossible to link to them.

Direct links to products in the shops are very valuable for marketing reasons, allowing food enterprises to share pictures of specific products within social media feeds or newsletters to help attract people to the online shop. They are also very good for search engine optimisation (SEO), helping to boost the prevalence of the shop in search results when people are searching for food items using a search engine.

This feature would make it easier for people using the Open Food Network software platform to market products sold through the platform. It would mean that they could share direct links to products on their social media channels, as well as on their website, in email and SMS marketing and wherever else was relevant.

Potential benefits include:

Increasing the amount of interesting content enterprises can generate in their newsletters and social media, by enabling every product in the shop to be a new and interesting potential piece of content.
Increasingly the network effect of this content as producers will likely also share links to their own produce.
Improving search engine optimisation as each shop will have many more pages that can be scanned and indexed by search engine bots, meaning that shops will land higher in web searches (as will OFN overall).
Easier to create campaigns that target specific groups of shoppers based on specific products or sets of products that might be of interest. A great way to target people that aren’t already engaged in your shop.

List of issues

https://github.com/openfoodfoundation/openfoodnetwork/issues/12638

Success factors = expected outcome

A direct URL for a specific product on a shopfront.
The ability to click through to where the product is available in a specific order cycle

Jess had a look at this and realised that if we can hide specific elements on this page in the case that this page is displayed after a click on the product modal, then the experience would be much more streamlined for users. Specifically, hiding the Search Bar, the 'Search Results' text and the Filters.

Previous links

Discussed previously as a potential funded feature, though it's taken a while to get there. https://openfoodnetwork.org/fundedfeatures2/

Discourse chat: https://community.openfoodnetwork.org/t/direct-links-to-shop-products-for-marketing-seo-and-more-permalink-deep-link/2176

NickIkenma commented 9 months ago

@mariocarabotta, was this covered in the back office UI uplift?

lin-d-hop commented 9 months ago

@NickIkenma nope this is awaiting space in our pipe for a kick off

mariocarabotta commented 9 months ago

designs are ready for dev here - https://www.figma.com/file/v2tzhoSc7U5pcdurI2tRcD/Engineering-Delivery---Front-Shop?type=design&node-id=1%3A9&mode=design&t=o5hvOukn2AwSCDE7-1

removing design-needed label

mariocarabotta commented 1 month ago

flowchart here > https://www.figma.com/board/i9a9fjMjOPy4CiTrJj428h/Product-links?node-id=0-1&t=ungZMexZ2FuRBFEO-1

mariocarabotta commented 1 month ago

prototype 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

RachL commented 1 month ago

Notes for scenarios / might need dev input:

when do we have a direct links? E.g. can a shopper land on a product link with an open OC but an out-of-stock product? In that case, do they land on a empty list?
once the shopper wants to see the full store, where do other products of that store appear? => is the product remaining at the top or do we anchor the product at his "usual" place in the shop list of products?
handle mobile cases: are their cases on mobile we don't want the URL to open in a modal like currently?

openfoodfoundation / openfoodnetwork