CODEWITHSUNDEEP
meteorreaction-commerce
Wade73
Wade73

Reputation: 4509

Create Route to Simple Page Reaction Commerce

I am trying to setup a simple static page for about us, based on this tutorial (https://docs.reactioncommerce.com/reaction-docs/master/plugin-routes-6). The problem is that there is no real explanation on what I need to do outside adding an entry to the registry.js file. While they do have the plugin example that I could copy, I would like to know what I need to just add a simple static page to Reaction Commerce. Thanks.

Wade

Upvotes: 0

Views: 483

Answers (1)

Harshal Yeole
Harshal Yeole

Reputation: 4993

To create the simple route for the page, given tutorial is what we all got.

To Create route for a page: I will break it down for you in following steps:

I will assume that you know we have to add our code in the /imports/plugin/custom directory only. You can override all the core functionality from here.

Let's get started:

  1. You need to add route details in the registry under register.js file.

    registry:[
    {
        route:"/about",
        name:"about",
        template:"aboutUs",
        workflow:"coreWorkflow"
    }
],

  2. Create the component for a new page as

    /imports/plugin/custom/YOUR_PLUGIN/client/components/about.js in your plugin.

    import React, { Component } from "react";
import { registerComponent } from "/imports/plugins/core/components/lib";
import { Meteor } from "meteor/meteor";
import { Col } from 'reactstrap';

class About extends Component {

  render() {
    return (
      <div className="container-main">
        About Us Page
      </div>
    );
  }
}

registerComponent("about", About);

  3. Add the button to route to the new page, in any component, from where you can give link to About page.

    <Components.Button
    label="About"
    onClick={handleClick}
/>

  4. Add function to handle the click.

    handleClick() {
    return Reaction.Router.go("/about");
}

Hope this solves your query!

PS: I know this code can be shortened, I have written it in this way so that beginners can understand it faster. Please don't hesitate to correct the answer if I am wrong. :)

Upvotes: 1

Related Questions