如何在自定义插件 Reaction Commerce 中重写页脚

Question

现在，我正在使用 Reaction Commerce 1.10。我想创建一个自定义插件并重写页脚，但不知道该怎么做。

这是页脚代码：

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;

Answer 1

您可以通过首先创建您的自定义插件来做到这一点：

reaction plugins create --name your-footer-plugin

然后，在/imports/plugins/custom/your-footer-plugin/client下创建一个components目录。

在 /imports/plugins/custom/your-footer-plugin/client/components 中创建一个 Footer.jsx 文件。

在此文件中，使用组件 API 将 Footer 组件替换为您想要的组件：

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);

最后，确保在 /imports/plugins/custom/your-footer-plugin/client/components 中创建 index.js 文件以导入组件：

import "./Footer";

/imports/plugins/custom/your-footer-plugin/client 中的另一个 index.js 用于导入您的 component 目录的索引：

import "./components";

确保使用 reaction reset -n && reaction 重新启动 Reaction 以使这些更改生效。

如何在自定义插件 Reaction Commerce 中重写页脚

how to rewrite footer in the custom plugin Reaction Commerce

reaction-commerce