CODEWITHSUNDEEP
reaction-commerce
jmu
jmu

Reputation: 203

how to rewrite footer in the custom plugin Reaction Commerce

Right now, I am using Reaction Commerce 1.10. I would like to create a custom plugin and rewrite the footer but have no idea how to do that.

Here is the footer code:

import React from "react";
import { registerComponent } from "/imports/plugins/core/components/lib";

const Footer = () => (
  <div className="reaction-navigation-footer footer-default">
    <nav className="navbar-bottom">
      <div className="row">
        {/* Footer content */}
      </div>
    </nav>
  </div>
);

registerComponent("Footer", Footer);

export default Footer;

Upvotes: 1

Views: 148

Answers (1)

Loan Laux
Loan Laux

Reputation: 71

You would do that by first creating your custom plugin:

reaction plugins create --name your-footer-plugin

Then, create a components directory under /imports/plugins/custom/your-footer-plugin/client.

In /imports/plugins/custom/your-footer-plugin/client/components, create a Footer.jsx file.

In this file, use the Component API to replace the Footer component with the component you'd like:

import React from "react";
import { replaceComponent } from "@reactioncommerce/reaction-components";

const Footer = () => (
  <footer>
    <p>This is your new, custom footer.</p>
  </footer>
);

replaceComponent("Footer", Footer);

Finally, make sure that you create an index.js files in /imports/plugins/custom/your-footer-plugin/client/components to import your component:

import "./Footer";

And another index.js in /imports/plugins/custom/your-footer-plugin/client to import your component directory's index:

import "./components";

Make sure that you restart Reaction with reaction reset -n && reaction for these changes to take effect.

Upvotes: 1

Related Questions