1

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;
jmu
  • 203
  • 2
  • 10

1 Answers1

1

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.

Loan Laux
  • 71
  • 4
  • Thank you very much for all these detail information. Just one thing, I think I should import the original footer into the Footer.jsx first. Otherwise, I got some error message. – jmu Jul 27 '18 at 19:46
  • There shouldn't be a need to import the default Footer component. What error are you getting? – Loan Laux Jul 28 '18 at 20:46
  • I am sorry. It was my mistake. The error message is not for the Footer component. Your code works perfectly. Thank you~ – jmu Jul 30 '18 at 16:20