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

ReleaseStatusInitial ReleaseMaintenance LTS StartEnd-of-lifeStore Compatibility
2.xCurrent Release2018-11-212.x
1.xMaintenance LTS2018-09-202018-11-21March 20191.x

See our LTS policy for more information.

Table of Contents

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.

1
2
3
  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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
"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.

1
2
3
  "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 nameTypeDescriptionDefault Value
socialNetworksArray(Social Network)Array of social networks[{socialNetwork: 'Facebook', url: '#'},]
sectionLinksArray(Section Link)Array of section links[]
storeInformationsArray(String)Array of informations about the store[]
badgesArray(Badge)Array of badges[]
paymentFormsArray(Payment Form)Array of payment forms[{title: `Payment Form/Forma de pago/Forma de pagamento`, paymentTypes: ['MasterCard']}]
showPaymentFormsInColorBooleanSet color of payment formsfalse
showSocialNetworksInColorBooleanSet color of social networksfalse
showVtexLogoInColorBooleanSet color of VTEX logofalse
logoStringLink of Store logo-

Social Network:

Prop nameTypeDescription
linksArray(Link)Array of links

Section Link:

Prop nameTypeDescription
titleString!Title of the section
linksArray(Link)Array of links

Link:

Prop nameTypeDescription
urlStringURL
titleStringTitle of the link
targetEnumTarget of the link. (values: _self or _blank)

Badge:

Prop nameTypeDescription
imageStringURL of the badge

Payment Form:

Prop nameTypeDescription
titleString!Title of payment form
paymentTypesArray(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:
1
2
3
  "builders": {
    "styles": "1.x"
  }
  1. Create a file called vtex.store-footer.css inside the styles/css folder. Add your custom styles:
1
2
3
.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 nameDescriptionComponent Source
footerThe main content of the footerindex
containerThe generical container of the footerindex
linksContainerThe wrapper containing the matrices of linksindex
matrixContainerThe container that holds all the listContainersFooterLinksMatrix
matrixItemThe wrapper for an item of the matrix. (e.g, listContainer)FooterLinksMatrix
listContainerThe wrapper containing the listTitle and a listfooterList
listContainerHorizontalThe properties to be applied when the listContainer is horizontalfooterList
listContainerRightAlignedThe properties to be applied when the listContainer is right alignedfooterList
listTitleThe title of a item list. (e.g, Institutional)footerList
listThe container for a list of listItemfooterList
listHorizontalThe properties to be applied to the list when the horizontal props is truefooterList
listItemThe item of a listfooterList
listLinkThe link inside a listfooterList
listItemHorizontalThe properties to be applied to the item list when the horizontal props is truefooterList
socialNetworkContainerThe social networks containerindex
socialNetworkItemThe image of a social networkFooterSocialNetworkList
paymentMatrixThe wrapper that holds all the paymentMatrixItemsFooterPaymentFormMatrix
paymentMatrixItemThe image of a social networkFooterPaymentFormMatrix
paymentFormItemThe image of the payment formFooterPaymentFormList
textContainerThe container for the text informations of the storeindex
badgeListThe wrapper for all the bagdesFooterVtexLogo
badgeOne store badgeFooterVtexLogo
vtexLogoItemThe 'Powered by VTEX' logoFooterVtexLogo
logoImageThe image of one logo of the storeFooterVtexLogo
textInformationInformation at the footer's bottomindex
linksThe wrapper for FooterLinksMatrixindex
socialNetworkContainerThe wrapper for the FooterSocialNetworkListindex
textContainerThe wrapper for all the information at the footer's bottomindex
navigationThe wrapper for the navigation area in footerindex
paymentThe wrapper for FooterPaymentFormMatrixindex

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 nameDescriptionComponent Source
matrixItemSmallThe item of the matrixFooterLinksMatrix
accordionTitleThe accordion titleAccordion
accordionThe accordion container for a list of accordionItemAccordion
accordionItemThe item inside the accordion (e.g, listLink)FooterLinksMatrix
accordionIconThe accordion iconAccordion

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

Build Status
Coverage Status