Adding a new page

A new page can be easily added to a store using the theme engine.
The page can be added to a B2B (since version 10.0) or B2C store (since version 13.1).
In a B2C store you'd be able to decide whether the new page requires to log in.
Pages in the theme can be constructed from a class component or a functional component. Choose the appropriate component type according to the capabilities that you wish the component to have.

Let’s create a new “Contact us” page for the theme and add a link to it from another page in the application.

Create a new file in the src/routes folder and name it ContactUs.js. Ensure the file name uses Pascal case format.
Add the following content to the file:

import Layout from '../components/layout'

const ContactUs = (props) => {
    return (
      <Layout {...props} className="contact-us">
        <div className="container-fluid">
          <h2 className="text-center">CONTACT US</h2>
          <div className="row">
            <div className="col-sm-5">
              <p>Contact us and we will get back to you within 24 hours.</p>
              <p>5000 S Major Ave, Chicago, IL 60638, USA </p>
              <p>Chicago, US</p>
              <p>+00 1515151515</p>
              <p>[email protected]</p> 
            </div>
            <div className="col-sm-7">
              <div className="row">
                <div className="col-sm-6 form-group">
                  <input className="form-control" id="name" name="name" placeholder="Name" type="text" required />
                </div>
                <div className="col-sm-6 form-group">
                  <input className="form-control" id="email" name="email" placeholder="Email" type="email" required />
                </div>
              </div>
              <textarea className="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br />
              <div className="row">
                <div className="col-sm-12 form-group">
                  <button className="btn btn-default pull-right" type="submit">Send</button>
                </div>
              </div> 
            </div>
          </div>
        </div>
      </Layout>
    )
}
  
export default ContactUs

You may have noticed that the code uses the Layout component supplied with the theme, which receives the props of the component, passed using the spread operator. The purpose of the Layout component is to wrap the content of the new page with the header and footer which are used in all other pages of the application.

All pages in the application receive by default the state object in the form of the props supplied to the page component. The props from the state should be passed to the Layout component in full in order to be able to load data, such as store categories displayed in the header.

Create a new file in the src/routes folder and name it ContactUs.scss
Add to it the following content:

.contact-us{
    .main-content{
        width: 1160px;
        margin: 0 auto;
        padding: 30px 0px;
    }
}

Import the ContactUs.scss file into the ContactUs.js file:

import './ContactUs.scss'

Open the src\routes\index.js file and add the following:

…
import ContactUs from './ContactUs'
…
Export default {
…
ContactUs,
}

Supporting custom pages that do not require login in a B2C storefront

In order to support custom pages that do not require login, an additional change is required: In src\src\generic.js file, go to the render method and change the following command from this:

const pageComponentName = camelToPascal(dashToCamel(params.page))

To this:

const pageComponentName = camelToPascal(dashToCamel(params.page === 'pages'? params.id : params.page))

Configuring a custom page to not require login in a B2C storefront

In order to create a page in a B2C storefront which does not require login, you will need to add the following code to the config.json file:

"customConfigurations": {
    "nonSecuredPages": [
      {
        "url": "/pages/contact-us"
      }
    ]
  },

Without this definition, the page will be accessible only to logged in users even though the store type is B2C. (All pages in a B2B store are accessible only to logged in users.)

Add a link to the new page

Now that the "Contact us" page is ready, let’s add a link to it from another page.

Open the component or page in the application where you’d like to place the link.
Add a link to the new page as in the following example:

In src\components\Layout\Header\index.js, add a div with a link immediately after the className=”right-icons” div:

<div className="right-icons">
  <div style={{marginRight: '20px', width: '90px'}}>
    <Link to={urlGenerator.get({page:'pages', id:'contact-us'})}>
      <a>CONTACT US</a>
    </Link>
  </div>
…

This will create a link to /pages/contact-us.
Note that if the page does not require log in, it must be in a subfolder named "pages".
If the page requires log in, you can omit it.

A link is a component which is used to redirect to an internal route in the application.
It is imported into the theme from the $routes path. The following is the import which already exists in the index.js component:

import {Router, Link} from '$routes'

The link component expects the attribute with the value of the URL to the required route.
Read more about the link component in the next-routes page.

The route to a specific page in the application can be automatically generated using the urlGenerator uStore service, which is supplied with the theme. The page name to supply is the compatible name of the page in kebab-case (in this example - contact-us will lead to the page named ContactUs in the ContactUs.js file). You can read more about the urlGenerator service and its capabilities in Supplementary services.

If you now check your browser, you will see in the header that a "Contact us" link has been added to the header strip:

Click the link to redirect the application to the route given in the link tag above.