Footer

The Footer component can be used on any page.

Example image

footer-with-highlights.png

Code samples

{
"tasticType": "commercetools/ui/footer",
"name": "commercetools UI footer",
"icon": "menu",
"category": "Header and footer",
"schema": [
{
"name": "Nav Column 1",
"fields": [
{
"type": "description",
"text": "Ideally 3-6 links"
},
{
"label": "Header",
"field": "headerCol1",
"translatable": true,
"required": true,
"type": "string"
},
{
"label": "Links",
"field": "linksCol1",
"type": "group",
"itemLabelField": "name",
"fields": [
{
"label": "Name",
"field": "name",
"translatable": true,
"required": true,
"type": "string"
},
{
"label": "Link",
"field": "reference",
"required": true,
"type": "reference"
}
]
},
{
"label": "Icon",
"field": "icon",
"type": "enum",
"default": "rocket",
"values": [
{
"name": "Rocket",
"value": "rocket"
},
{
"name": "Loop",
"value": "loop"
},
{
"name": "Lock",
"value": "lock"
},
{
"name": "Question Mark",
"value": "question"
},
{
"name": "Inbox",
"value": "inbox"
},
{
"name": "Speaker",
"value": "speaker"
}
]
}
]
},
{
"name": "Nav Column 2",
"fields": [
{
"type": "description",
"text": "Ideally 3-6 links"
},
{
"label": "Header",
"field": "headerCol2",
"translatable": true,
"required": true,
"type": "string"
},
{
"label": "Links",
"field": "linksCol2",
"type": "group",
"itemLabelField": "name",
"fields": [
{
"label": "Name",
"field": "name",
"translatable": true,
"required": true,
"type": "string"
},
{
"label": "Link",
"field": "reference",
"required": true,
"type": "reference"
}
]
},
{
"label": "Icon",
"field": "icon",
"type": "enum",
"default": "rocket",
"values": [
{
"name": "Rocket",
"value": "rocket"
},
{
"name": "Loop",
"value": "loop"
},
{
"name": "Lock",
"value": "lock"
},
{
"name": "Question Mark",
"value": "question"
},
{
"name": "Inbox",
"value": "inbox"
},
{
"name": "Speaker",
"value": "speaker"
}
]
}
]
},
{
"name": "Nav Column 3",
"fields": [
{
"type": "description",
"text": "Ideally 3-6 links"
},
{
"label": "Header",
"field": "headerCol3",
"translatable": true,
"required": true,
"type": "string"
},
{
"label": "Links",
"field": "linksCol3",
"type": "group",
"itemLabelField": "name",
"fields": [
{
"label": "Name",
"field": "name",
"translatable": true,
"required": true,
"type": "string"
},
{
"label": "Link",
"field": "reference",
"required": true,
"type": "reference"
}
]
},
{
"label": "Icon",
"field": "icon",
"type": "enum",
"default": "rocket",
"values": [
{
"name": "Rocket",
"value": "rocket"
},
{
"name": "Loop",
"value": "loop"
},
{
"name": "Lock",
"value": "lock"
},
{
"name": "Question Mark",
"value": "question"
},
{
"name": "Inbox",
"value": "inbox"
},
{
"name": "Speaker",
"value": "speaker"
}
]
}
]
},
{
"name": "Nav Column 4",
"fields": [
{
"type": "description",
"text": "Ideally 3-6 links"
},
{
"label": "Header",
"field": "headerCol4",
"translatable": true,
"required": true,
"type": "string"
},
{
"label": "Links",
"field": "linksCol4",
"type": "group",
"itemLabelField": "name",
"fields": [
{
"label": "Name",
"field": "name",
"translatable": true,
"required": true,
"type": "string"
},
{
"label": "Link",
"field": "reference",
"required": true,
"type": "reference"
}
]
},
{
"label": "Icon",
"field": "icon",
"type": "enum",
"default": "rocket",
"values": [
{
"name": "Rocket",
"value": "rocket"
},
{
"name": "Loop",
"value": "loop"
},
{
"name": "Lock",
"value": "lock"
},
{
"name": "Question Mark",
"value": "question"
},
{
"name": "Inbox",
"value": "inbox"
},
{
"name": "Speaker",
"value": "speaker"
}
]
}
]
},
{
"name": "Copyright",
"fields": [
{
"label": "Copyright",
"field": "copyright",
"translatable": false,
"required": false,
"type": "string"
},
{
"label": "Links",
"field": "copyrightLinks",
"type": "group",
"fields": [
{
"label": "Copyright",
"field": "name",
"translatable": true,
"required": false,
"type": "string"
},
{
"label": "Link",
"field": "reference",
"required": true,
"type": "reference"
}
]
}
]
}
]
}
import React from 'react';
import Footer from 'components/commercetools-ui/footer';
import Highlights from 'components/commercetools-ui/footer/highlights';
const FooterTastic = ({ data }) => {
const columns = [
{
header: data.headerCol1,
links: data.linksCol1,
icon: data.iconCol1,
},
{
header: data.headerCol2,
links: data.linksCol2,
icon: data.iconCol2,
},
{
header: data.headerCol3,
links: data.linksCol3,
icon: data.iconCol3,
},
];
return (
<div className="fixed-screen-width lg:relative-width">
<Highlights />
<Footer
columns={columns}
copyright={data.copyright}
copyrightLinks={data.copyrightLinks}
/>
</div>
);
};
export default FooterTastic;