Call to Action

The STYLE PTTRNS front-end flow has a Call-to-Action button which functionality is dynamic and has 3 different settings:

PDP

If the CTA button is set to Product Detail Page functionality, the CTA button will open the unique PDP link of that frame on a new tab.
The PDP link will have to be provided for each frame, potentially in multiple languages for multiple locations. More information on how to set up PDPs on multiple locations can be found here.

Static URL

This option is a static base URL for every product but will be amended with some URL query parameters so the landing page can optionally be designed to handle these.

E.g., the base URL you provide can be https://www.thisismyshop.com/checkout. STYLE PTTRNS will amend the URL with information on the page where the CTA button was, the selected frame and the favourites. These URL query parameters can be used to e.g., add the list of favourites to the shopping cart etc.

The data that is sent through the URL as query parameters are called "page", "selectedGlassesSku", and "favourites". Page is either "home" or "favourites"; the SKU is the SKU as we have it. Favorites is a list of comma-separated SKUs, e.g.: "123456,myframename,thisismyframe123456".

An example of a URL including query parameters therefore can be:
https://www.thisismyshop.com/checkout/?page=home&selectedGlassesSku=123456&favorites=123456,myframename,thisismyframe123456

Event based

The event-based option is much more flexible since this option hands over full control to the website containing the STYLE frame. The event is called "onCtaPressed" and it has the same type of data as described for the static URL option, but instead of sending it through the URL, it is sent through an event:

window.addEventListener(
  "message",
  (event) => {
    if (event.data.type === "onCtaPressed") {
      console.log(event.data);

	// Open a new tab with the event data in the url.
      window
        .open(
          `/favorites?page=${event.data.page}&selectedGlassesSku=${event.data.selectedGlassesSku}&favorites=${event.data.favorites}`,
          "_blank"
        )
        .focus();
    }
  },
  false
);