Theme tips and tricks

Making sure the data in the Redux state is ready

Upon the first loading of the application, the population of the Redux state takes place a-synchronously. As a result, when accessing data from the state or the custom state, the data may not yet be available, thus component rendering may fail. Note that while developing the theme it can work properly; however, when publishing the theme it may fail on the production environment. Therefore, it is important to write safer code and make sure the data already exists in the state and is ready for use.

For example, if you wish to add a welcome message with the name of the current user, add the following code to the homepage:

…
return (
      <Layout {...this.props} className="home">
        <div className="welcome-text">
          {currentUser && currentUser.FirstName}, welcome to the online store
        </div>
        <div className="promotion-wrapper">
…

Notice that the existence of the currentUser in the state is verified before accessing it’s FirstName property.

Adding a link using the link component

When adding a link in the code that directs to an internal page in the theme (for example when clicking a button or a link), the link should be added using the link component from next-routes library. The Link component is imported into the theme using the alias name $routes:

import {Link} from '$routes'

It can then be used in the code as follows:

<Link to={urlGenerator.get({page:'contact-us'})}>
   <a>CONTACT US</a>
</Link>

For a detailed example, see "Adding a link to the new page" in Adding a new page.

Use the link component to wrap a regular anchor tag, along with the urlGenerator service that supplies the route to direct to, as described in General services. The reason for using the Link component is to enable the next Router to handle the URL in the theme application in all environments. If directing to an external site, a regular anchor tag with href can be used.

Using urlGenerator in a component

The urlGenerator service helps to construct the internal application URL for the requested page. This service accesses the Redux state in order to know the current culture of the application. Therefore, if you add a code that requires using the urlGenerator, always place this code inside the component code and not outside, so that the data in the state will be available for the urlGenerator when needed.

withRouter

It is occasionally needed to extract information from the URL of the application, such as query params, current page, etc. The components and pages in the theme can use the withRouter HOC from next/Router, which makes the router object available in the component scope via its props. See the use of this HOC in the src\components\Layout\Header\Search.js component, when the router from the props is used for getting the relative URL (asPath parameter) and extracting the search term from the query params:

…
setSearchValue() {
    const {router: {asPath, query}} = this.props
    const searchValue = asPath.indexOf('/search/') > -1 ? query.id : ''
    this.setState({searchValue})
  }
…

export default withRouter(withState(Search))

Notice that this component is also uses the withState HOC explained in the accessing uStore data section.

Line ellipsis

When developing new sections in the application, new text is often added. The text may be longer than its designated space in the UI. In this case, it is possible to limit the text length so that it will appear cut and show 3 dots at the end denoting that the full text is not shown (ellipsis). To limit the text of a single line, simply add the className truncate to the element containing the text. Example for the use of this class can be seen in the src\components\Layout\Header\SignOut.js component:

…
return (
    <div className="signout">
      <div className="info">
        <div className="title">{t('Profile.My_Account')}</div>
        <div className="greeting truncate">{t('SignOut.Hello_Message', {FirstName})}</div>
      </div>
      …
    </div>
  )
…

If the user’s first name is too long, it will truncate:

Populating <head>

If you want to populate the head tag, use the Head component:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

For more information regarding the Head component, read the following documentation.