React Instructions to open front end code

This with guide you will be able to modify the code for Ordering Website 2021 (React).

Objective:  Customer’s guidance to use front-end code

Assumptions:

1. Customer must have experience working with V4 files and search and replace functions from Ordering Platform
2. Customers should be able to work with files and code blocks (using components) in the React website
3. Ordering will provide instructions to execute the code in localhost and our components. Then the customer will be able to change the code according to his needs
4. Consider that Ordering will not provide any support on the code developed by the user. (Review or fix code)
5. If it’s required, Ordering provides custom work under quote requested

Introduction:

The React template has 3 levels of development. 

In Angular (v4 website) you have the option to find parts of the code without any problem, so you can use the “copy and paste” method to add custom files in the developer section. In the React website (Ordering web 2021) you can’t do this, to be able to use the React code, you need to create and export your own components. 

Once you create these components, you need to call them to the React template, this means that using the classes and skeletons, you will be able to make a call to the recently created components to apply the changes using the features: developers or search & replace.

Ordering components

If you have problems creating your components, we provide you an option to make the required changes.

Please take a look at the next instructions:

Step 1

To be able to access to the code (if apply, depending on your plan) please contact our support team, you can create a ticket in here requesting the code.

Step 2

Download the code and take our components from there and modify them as you like.

Step 3

Once completed the modified components, call these components to your own localhost to test the changes.

Please use these instructions and try to make a small change like a color change, this should help you to make it and be sure that the code works correctly.

Take into consideration that you need to have strong knowledge of the React language or development skills to make these changes.

-----------------------------------------------------------------------------------------------------

Mac installation:

To see how to install it and emulate it, please see the next video:

https://d.pr/v/6RNE1F

1-. To install it inside of a folder, you need to run the next command: npm i

2.- To emulate it, use the next command: npm run serve

3.- The server will take some minutes until the localhost is deployed

-----------------------------------------------------------------------------------------------------

Windows installation

Please follow the next instructions:

• Download the Zip file.
• Open the folder and delete the next files:
  • • Node_modules (folder)
    • Package-lock
• Now, open the folder using a code editor, we use visual studio code.
• Open a terminal like you see in the next record: https://drive.google.com/file/d/1jQb3LUXyMZFPMTzI0dCcIR-YJ5DhGscv/view?usp=sharing
• In the terminal, run the next command: npm install
• Wait until the installation ends and then, if a problem appears (red commands) like the image below:

use this command: npm audit fix to solve these problems

• After the install, you can run the next command: npm run serve
• The server will take some minutes to be opened in your browser so don't worry. The localhost will be opened in a Tab in your default browser as localhost: http://localhost:8100/

-----------------------------------------------------------------------------------------------------

To add custom code:

We have three ways to upload custom files to your Ordering React Website, the same as the V4 website. Please take a look at the next articles:

Using the Search & replace tool:

https://support.ordering.co/hc/en-us/articles/360043091492-Search-And-Replace

Uploading custom files replacing the existing ones:

https://support.ordering.co/hc/en-us/articles/360043529011-Custom-Files

Uploading new custom files:

https://support.ordering.co/hc/en-us/articles/360043528931-Editable-Files

-----------------------------------------------------------------------------------------------------

Ordering Components

Inside SRC

Inside Template

React CSS Tutorial

https://youtu.be/IZ34vkfr97s

Note:

We don’t use style pages per se, we use the lib “Styled-components” that allows you to create components based on the rules of CSS, but for REACT.

The styles you will find them in the files called “styles.js”