Help Section Guide - Ordering Website 2021 – Ordering

With this new section, you can add up to 3 personalized guides to help the customer. Can set this up with Static Pages Manager, like this:

Go to Admin Area - More

Then on the right menu, select -Static Pages Manager

Now you are on the Static Pages Manager, to create a new page just need to click on Add page button

In here you can create the page, can put the name and content that you like, but you need to use our slugs for this to work, like this:

Help with an order - helpOrder
Account and Payment Options - helpAccountAndPayment
Guide to Ordering - helpOrderingGuide

Put the content that you want and don't forget to click Save at the end

To change the title of the current 3 pages, you can also do that from the Language Manager

Add/modify the following language variables.

HELP_WITH_AN_ORDER
ACCOUNT_AND_PAYMENT_OPTIONS
GUIDE_TO_ORDERING

Create new pages in the Help Section

In builder on RW product, add the following in Search and Replace section

Path: src/pages/Help/index.js

Search:

import React from 'react'
import { Help as HelpController } from 'ordering-ui'
import { HelmetTags } from '../../components/HelmetTags'

export const Help = (props) => {
  return (
    <>
      <HelmetTags page='help' />
      <HelpController {...props} />
    </>
  )
}

Replace:

import React from 'react'
import { Help as HelpController } from '../../components/Help'
import { HelmetTags } from '../../components/HelmetTags'

export const Help = (props) => {
  return (
    <>
      <HelmetTags page='help' />
      <HelpController {...props} />
    </>
  )
}

Once you have added this. Download the following file:

Download Zip: https://www.dropbox.com/sh/cq12xdh2jetf80e/AADcHAvbnPXP8jp87_0tggLFa/RWFiles.zip?dl=0

Open the file index.js and modify the following code sections:

const menuList = [
 { id: 1, title: t('HELP_WITH_AN_ORDER', 'Help with an order') },
 { id: 2, title: t('ACCOUNT_AND_PAYMENT_OPTIONS', 'Account and Payment Options') },
 { id: 3, title: t('GUIDE_TO_ORDERING', 'Guide to Ordering') }
 ]

{selectedPage?.id === 1 && <HelpStaticPage slug='helpOrder' />}
        {selectedPage?.id === 2 && <HelpStaticPage slug='helpAccountAndPayment' />}
        {selectedPage?.id === 3 && <HelpStaticPage slug='helpOrderingGuide' />}

Add as many pages you would like.

Example:

const menuList = [
 { id: 1, title: t('HELP_WITH_AN_ORDER', 'Help with an order') },
 { id: 2, title: t('ACCOUNT_AND_PAYMENT_OPTIONS', 'Account and Payment Options') },
 { id: 3, title: t('GUIDE_TO_ORDERING', 'Guide to Ordering') },
 { id: 4, title: 'ADD_YOUR_TITLE' }
 ]

{selectedPage?.id === 1 && <HelpStaticPage slug='helpOrder' />}
        {selectedPage?.id === 2 && <HelpStaticPage slug='helpAccountAndPayment' />}
        {selectedPage?.id === 3 && <HelpStaticPage slug='helpOrderingGuide' />}
        {selectedPage?.id === 4 && <HelpStaticPage slug='addslugPage' />}

After you have added the code, save the file.

In the Custom section in Developers, add the following files. (index.js, styles.js)

Type: JavaScript

For the file index.js use the following path.