Adding a new page - XMPieLab/uStore-NG GitHub Wiki

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.
Write pages as function components. The theme's own pages are function components, and React hooks cannot be used in class components.

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

1. Create a new file in the src/routes folder and name it ContactUs.js. Ensure the file name uses Pascal case format.
2. 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.

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

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

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

import './ContactUs.scss'

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

…
import ContactUs from './ContactUs'
…
const routes = {
…
    ContactUs,
}

export default routes

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. Please make sure to upload the custom theme with this config json before you check the functionality in the DEV env.

"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.)

If you are adding multiple pages which should not be secured, duplicate the section like this:

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

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

1. Open the component or page in the application where you’d like to place the link.
2. 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'}}>
    <LinkAria to={urlGenerator.get({page:'pages', id:'contact-us'})}>
      CONTACT US
    </LinkAria>
  </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 from the $core-components alias. The following import already exists in the index.js component:

import { LinkAria } from '$core-components'

LinkAria expects the to attribute with the value of the URL of the required route, and renders the anchor element itself — do not wrap its children in an <a> tag.

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 General 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.

For a detailed example, watch the Adding additional pages video on XMPie Campus.