Links
Links are special kinds of components responsible for page transitions. Obviously you want your website to be accessible and crawlable by Google so all the links should display as <a href>
.
Shopstory comes with a single built-in link action called "Basic Link". Basic Link has 2 parameters ("url" and "open in new window") and displays the link as standard <a>
tag:
Custom routing
Basic Link might be OK for external links but in case of internal links most of the modern React frameworks (next, Gatsby) have their own custom routing strategy. Good news is that it's easy to connect any routing strategy to Shopstory.
Let's see the example. We'll create new link action called "Internal Link" and connect it to next/link
. We start by adding a new link to the config:
As you can see it's very similar to custom actions, components, etc. However, in the ShopstoryProvider
it becomes a bit different:
Shopstory link must be compatible with ShopstoryLink
type. It's a React component that takes 3 properties:
Component
-> an instance ofShopstoryButton
. It can be your custom button or a button built directly in Shopstory.componentProps
-> those are properties that you must pass to theComponent
. If you don't do it you'll break compatibility and Shopstory might behave in an unpredictable way.values
-> values populated by the editor in the sidebar
In order to stay compatible with Shopstory, custom ShopstoryLink
must render Component
with componentProps
passed to it. <Component {...componentProps} />
always renders as an a
component. Depending on your needs you might need to wrap it with another component (like next.js Link
) or pass some extra properties to Component
(like href
or target
).
Connecting links to CMS entries
It's very common to manage page URLs in a headless CMS. Usually a page URL is represented by a content type called URL
, Page path
, URL Route
, etc. With Shopstory it's very easy to connect a link action to CMS entry. All you need to do is to provide user with a CMS entry field instead of a text field for URL. Contentful example:
Your custom ShopstoryLink
can access the URLRoute
entry via values.url
property.
Last updated