VTEX Footer

Description

The VTEX Footer app is a store component that shows information about the store such as address, social networks and payment methods. Furthermore, it is possible to add hyperlinks for privacy policy, FAQ, benefits and attendance. This app is used by store theme.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Release schedule

Release	Status	Initial Release	Maintenance LTS Start	End-of-life	Store Compatibility
[2.x]	Current Release	2018-11-21			2.x
[1.x]	Maintenance LTS	2018-09-20	2018-11-21	March 2019	1.x

See our LTS policy for more information.

Table of Contents

• VTEX Footer
  • Description
  • Release schedule
  • Table of Contents
  • Usage
    • Blocks API
      • Configuration
    • Styles API
      • CSS namespaces
  • Troubleshooting
  • Tests
  • Contributing

Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

To configure or customize this app, you need to import it in your dependencies in manifest.json.

  dependencies: {
    "vtex.store-footer: 2.x"
  }

Then, add footer block into our app theme, like we do in our Store theme app.

Now, you can change the behavior of the footer block. See an example of how to configure:

"footer": {
  "props": {
    "socialNetworks": [
      { "links":[
        { "url":"www.facebook.com", "title":"Facebook" },
        { "url":"www.twitter.com", "title":"Twitter" }
      ]}
    ],
    "sectionLinks": [
      {"title": "About us", "links":[
        { "url":"www.mystore.com/faq", "title":"FAQ", "target": "_blank" },
        { "url":"www.mystore.com/talktous", "title":"Talk to us", "target": "_self" }
      ]}
    ],
    "storeInformations": ["CNPJ n.º 1231132.231.1231/000", "All the rights reserved."],
    "badges": [
      {"image":"https://phots.icons8.com/foo"},
      {"image":"https://phots.icons8.com/xpto"}
    ],
    "paymentForms": [
      {"title": "Payment form", "paymentTypes": ["MasterCard"]}
    ],
    "showPaymentFormsInColor": true,
    "showSocialNetworksInColor": true,
    "showVtexLogoInColor": true,
    "logo": "My store logo",
  }
}

Blocks API

This app has an interface that describes what rules must be implemented by a block when you want to use the footer.

  "footer": {
    "component": "index"
  }

Configuration

Through the Storefront, you can change the footer's behavior and interface. However, you also can make in your theme app, as Store theme does.

Store Footer:

Prop name	Type	Description	Default Value
socialNetworks	Array(Social Network)	Array of social networks	[{socialNetwork: 'Facebook', url: '#'},]
sectionLinks	Array(Section Link)	Array of section links	[]
storeInformations	Array(String)	Array of informations about the store	[]
badges	Array(Badge)	Array of badges	[]
paymentForms	Array(Payment Form)	Array of payment forms	[{title: `Payment Form/Forma de pago/Forma de pagamento`, paymentTypes: ['MasterCard']}]
showPaymentFormsInColor	Boolean	Set color of payment forms	false
showSocialNetworksInColor	Boolean	Set color of social networks	false
showVtexLogoInColor	Boolean	Set color of VTEX logo	false
logo	String	Link of Store logo	-

Social Network:

Prop name	Type	Description
links	Array(Link)	Array of links

Section Link:

Prop name	Type	Description
title	String!	Title of the section
links	Array(Link)	Array of links

Link:

Prop name	Type	Description
url	String	URL
title	String	Title of the link
target	Enum	Target of the link. (values: _self or _blank)

Badge:

Prop name	Type	Description
image	String	URL of the badge

Payment Form:

Prop name	Type	Description
title	String!	Title of payment form
paymentTypes	Array(String)	Array of strings containing the payment types

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

1. Add the styles builder to your manifest.json:

  "builders": {
    "styles": "1.x"
  }

2. Create a file called vtex.footer.css inside the styles/css folder. Add your custom styles:

.container {
  margin-top: 10px;
}

Also, create a vtex.footer.css file in styles/css for your handlers customization.

CSS namespaces

Below, we describe the namespaces that are define in the Footer.

Class name	Description	Component Source
footer	The main content of the footer	index
container	The generical container of the footer	index
linksContainer	The wrapper containing the matrices of links	index
matrixContainer	The container that holds all the listContainers	FooterLinksMatrix
matrixItem	The wrapper for an item of the matrix. (e.g, listContainer)	FooterLinksMatrix
listContainer	The wrapper containing the listTitle and a list	footerList
listContainerHorizontal	The properties to be applied when the listContainer is horizontal	footerList
listContainerRightAligned	The properties to be applied when the listContainer is right aligned	footerList
listTitle	The title of a item list. (e.g, Institutional)	footerList
list	The container for a list of listItem	footerList
listHorizontal	The properties to be applied to the list when the horizontal props is true	footerList
listItem	The item of a list	footerList
listLink	The link inside a list	footerList
listItemHorizontal	The properties to be applied to the item list when the horizontal props is true	footerList
socialNetworkContainer	The social networks container	index
socialNetworkItem	The image of a social network	FooterSocialNetworkList
paymentMatrix	The wrapper that holds all the paymentMatrixItems	FooterPaymentFormMatrix
paymentMatrixItem	The image of a social network	FooterPaymentFormMatrix
paymentFormItem	The image of the payment form	FooterPaymentFormList
textContainer	The container for the text informations of the store	index
badgeList	The wrapper for all the bagdes	FooterVtexLogo
badge	One store badge	FooterVtexLogo
vtexLogoItem	The 'Powered by VTEX' logo	FooterVtexLogo
logoImage	The image of one logo of the store	FooterVtexLogo
textInformation	Information at the footer's bottom	index
links	The wrapper for FooterLinksMatrix	index
socialNetworkContainer	The wrapper for the FooterSocialNetworkList	index
textContainer	The wrapper for all the information at the footer's bottom	index
navigation	The wrapper for the navigation area in footer	index
payment	The wrapper for FooterPaymentFormMatrix	index

When the footer is displayed in mobile view, the matrixContainer constricts itself and displays a list of matrixItemSmall, each one containing an accordion. Below, we describe the tokens, their explanation and the component where it is located.

Class name	Description	Component Source
matrixItemSmall	The item of the matrix	FooterLinksMatrix
accordionTitle	The accordion title	Accordion
accordion	The accordion container for a list of accordionItem	Accordion
accordionItem	The item inside the accordion (e.g, listLink)	FooterLinksMatrix
accordionIcon	The accordion icon	Accordion

Troubleshooting

You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.

Contributing

Check it out how to contribute with this project.

Tests

To execute our tests go to react/ folder and run yarn test

Travis CI