index.md

Update Site Footer

Overview

In this tutorial we are going to override the Main and Footer components so that we can add a custom link to our site.

Add a link to the Footer

Copy the Main and Footer components from the @magento/venia-ui package.

cp -R node_modules/@magento/venia-ui/lib/components/Main src/components/
cp -R node_modules/@magento/venia-ui/lib/components/Footer src/components/

Then update the import statements for these components to be something like:

src/components/Footer/footer.js

import React from 'react';
import { shape, string } from 'prop-types';
import { useFooter } from '@magento/peregrine/lib/talons/Footer/useFooter';

import { mergeClasses } from '@magento/venia-ui/lib/classify';
import defaultClasses from './footer.css';
import GET_STORE_CONFIG_DATA from '@magento/venia-ui/lib/queries/getStoreConfigData.graphql';

src/components/Main/main.js

import React from 'react';
import { bool, shape, string } from 'prop-types';
import { useScrollLock } from '@magento/peregrine';

import { mergeClasses } from '@magento/venia-ui/lib/classify';
import Footer from '../Footer';
import Header from '@magento/venia-ui/lib/components/Header';
import defaultClasses from './main.css';

In src/components/App/app.js change:

import Main from '@magento/venia-ui/lib/components/Main';

To:

import Main from '../Main';

Now the Project should load our new Footer component. To add a link to the footer, we need to add React's Link element which we get via venia-ui/lib/drivers:

import { Link } from '@magento/venia-ui/lib/drivers';

Finally add the below JSX to render the Link for the foo.html static route:

<div className={classes.tile}>
    <p className={classes.tileBody}>
        <Link to="/foo.html">Foo Demo Page</Link>
    </p>
</div>

---

• > see other topics