Custom routing

By default, Product Fruits reads or sets URLs by using the native window.location.href variable. This works typically for all applications but it can bring unwanted reloads in single-page applications.

For example, if you have a tour in the Life Ring Button it typically starts on a particular URL. We have to redirect the user to that URL to start the tour. In the standard setup, we do it by setting window.location.href.

You bypass the default method and use your in app functions to pass URLs to Product Fruits and to navigate to URLs in your application when Product Fruits needs (such as when redirecting to a different URL where a tour is intended to start). 

Custom routing options

To use the custom routing system, you have to pass the following configuration to the init function call or to the config prop of the Product Fruits React component.

Example for the NPM package:

import { productFruits } from 'product-fruits';


productFruits.init(
	'<<workspacecode>>', 
	'<<languagecode>>', 
	{ username: '<<replace>>' },
	{
	    // Pass the custom routing config here
	    
	    customNavigation: {
            use: true, // Don't forget to set this to true to enable the feature
            
            
// this function will be called by Product Fruits when it needs to navigate somewhere
            navigate: (url) => yourCustomRouter.navigate(url),
            
            
// this callback is called when Product Fruits needs to read the current URL
            onGet() {
                // Always must start with https:// !!!
                return 'https://example.com/route'
            },
        }
	});

For the React component, pass it like this:

<ProductFruits language='<<lng_code>>' workspaceCode='<<ws_code>>' user={{username: '<<test>>'}} config={{
        customNavigation: {
            use: true,
            navigate: (url) => yourRouter.navigate(url),
            onGet() {
            	// Always must start with https:// !!!
                return 'https://example.com/route'
            },
        }
      }} />

As you can see in the example code, you have to set use to true and then you have to provide two functions.

The navigate function will be called every time Product Fruits needs to navigate somewhere. It gets a one string parameter holding the target URL. This is usually the exact string entered in various URL fields in the Product Fruits administration. It is up to your code to check the format and use it properly.

For example, if you have a Life Ring Button Link item with a URL starting with https://, you might want to open the URL differently than if it is just a relative or absolute URL.

The onGet function callback is called every time Product Fruits needs to get the current URL. It always must start with https://. Do not return relative URLs, always return the fully qualified URL. In the standard SPA applications, it is enough to return just  window.location.href as it is always the current URL and it is in sync with the router.

Special use cases

Some applications manage their navigation and state internally without changing the URL in the browser. These can be Shopify applications or various add-ons usually loaded in iframes. 

You can use this custom routing feature to handle these use cases. You can just use any string identifier in the URL fields in Product Fruits (e.g. URL template in tour cards). Then just return this identifier in the onGet callback. Just do not forget to include https:// too with your custom identifier.