Modify tutor open edx mfe indigo footer

Site Operators Tutor Help
, ,
1

Hello everyone, I need some help in modifying the mfe footer in tutor open edx. I am currently using the indigo theme. My current step is as follow:

  1. clone from GitHub - openedx/frontend-component-footer: Site footer component for edX frontend apps.
  2. made some changes
  3. add “prepare”: “npm run build” into footer package.json
  4. push changes to branch ‘custom’
  5. return to tutor I create the following plugins:
from tutor import hooks

hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-dockerfile-post-npm-install",
        """
# npm package
RUN npm install '@edx/frontend-component-header@npm:@edx/frontend-component-header-edx@latest'
# git repository
RUN npm install '@edx/frontend-component-footer@git+https://github.com/my-github/frontend-component-footer.git#custom'
"""
    )
)
  1. enable the plugin
  2. run tutor config save
  3. run tutor images build mfe
  4. run tutor local launch

Expected:
The mfe footer changes according to my code

Reality:
The footer remains the same as the images

image
image1785×315 22.7 KB

Any help would be appreciated, thank you !

2

Hi @quanuminh and welcome!

What version of Tutor are you using? Have you investigated using plugin slots (search the forums for many posts on using slots, as well as Use A Frontend Plugin Framework Slot — Latest documentation

3

Thank you for your help @sarina . I am using tutor version 19.0.2. I have enabled the plugin slots like the link you have sent me. However it gives me this result:

image
image1845×401 29.1 KB

I see that it still shows 2 footers, the default one in indigo and my footer. However I want to replace the footer from indigo with mine footer only. The plugin code I have used is as follow:

from tutormfe.hooks import PLUGIN_SLOTS

PLUGIN_SLOTS.add_items([
    # Hide the default footer
    (
        "all",
        "footer_slot",
        """
        {
          op: PLUGIN_OPERATIONS.Hide,
          widgetId: 'default_contents',
        }"""
    ),
    # Insert a custom footer
    (
        "all",
        "footer_slot",
        """
        {
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
            id: 'custom_footer',
            type: DIRECT_PLUGIN,
            RenderWidget: () => (
              <h1>This is the footer.</h1>
            ),
          },
        }"""
    )
])
4

I don’t know much about Indigo - maybe @tutor-maintainers can help with your Indigo question.

5

Hi @quanuminh,

Thank you for raising this.

The reason you’re seeing two footers is due to how the plugin_slots are being defined and used. In the Indigo theme, plugin_slots is already configured to hide the default footer and display the Indigo footer, which uses the ID custom_footer.

From your message, it seems like your plugin is also calling plugin_slots.add_items, instructing the system again to hide the default footer and insert your custom footer into the custom_footer slot. If this is the case, there’s a conflict because:

Summary of the issue:

  • Both Indigo and your plugin are instructing the system to hide the default footer.
  • The custom_footer ID is already used by Indigo’s footer.
  • Your plugin is injecting another footer into the same custom_footer ID, which results in both being rendered there — hence the duplication.

Suggested Solution:

  • You don’t need to hide the default footer again — Indigo already does that.
  • Instead, consider hiding or replacing the custom_footer if you want to fully override Indigo’s footer.
  • Alternatively, you can define your own slot with a unique ID like my_custom_footer, and inject your content there. This will avoid any overlap with Indigo’s implementation.

Also, if possible, could you share where exactly you’re defining plugin_slots.add_items — whether it’s in a separate plugin or within the Indigo plugin itself? A link to your GitHub changes would be helpful for a more accurate solution.

6

For future questions, just tag the forum topic with tutor-indigo :slight_smile: Current Indigo maintainers have subscribed to that tag and will get the notifications.