Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Functional Apps
Badges
Official extension
Version: 3.10.3
Latest version: 3.10.3

This app is no longer maintained by VTEX. This means it will not be updated, and support and maintenance are no longer provided.

This app allows you to add content badges to an ecommerce. In the Admin panel, you can create, edit, and remove badges. There is also a storefront component that allows these badges to be added to your store theme.

Configuration

In order to set up the Badges app in your store, follow these steps:

  1. Install the app. You can do this by going to the Badges app page in the VTEX app store or by running this command in your terminal:

_10
vtex install vtex.badges@3.x

  1. Add Badges to the peerDependencies in your manifest.json file:

_10
"peerDependencies": {
_10
"vtex.badges": "3.x"
_10
}

With this, you should be able to start using the app.

Managing badges

After installing the app, you will be able to access it by going to the OTHER section of the Admin panel and clicking Badge Management.

{"base64":"  ","img":{"width":1366,"height":768,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":60934,"url":"https://user-images.githubusercontent.com/47991446/176534387-6ce7a70c-3c75-4e19-acf6-3211cfa69555.PNG"}}

Creating badges

The Add badges tab allows you to create new badges by following these steps:

  1. Fill in the name of the badge.
  2. Select the badge type, which can be IMAGE, TEXT, or HTML.
  3. Insert the badge content according to the selected type.
  4. Select the badge priority level, where 1 is the maximum priority and 5 is the minimum.
  5. Set up the activation rule, which is composed of one or more conditions.
  6. Click SAVE.

See below a badge creation example.

{"base64":"  ","img":{"width":768,"height":721,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":28674,"url":"https://user-images.githubusercontent.com/47991446/176534433-be56d30d-bdf3-4c30-a933-235aba6b1115.PNG"}}

Note that each badge must contain at least one activation rule condition with the verb is. The app will not work properly if all activation rules conditions use is not.

Editing badges

To edit an existing badge, go to the Edit badges tab and follow these steps:

  1. Click the menu icon in the row corresponding to the badge you wish to edit.
  2. Click Edit.
  3. Edit the badge attributes.
  4. Click EDIT.

{"base64":"  ","img":{"width":870,"height":377,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":18900,"url":"https://user-images.githubusercontent.com/47991446/176534410-67fac67e-3ae5-40ef-96a0-e8fabb09f2bb.PNG"}}

Deleting badges

If you wish to delete an existing badge from your store, go to the Edit badges tab and follow these steps:

  1. Click the menu icon in the row corresponding to the badge you wish to edit.
  2. Click Delete.
  3. In the prompt that will be displayed, click DELETE.

Filtering badges

To improve the search for badges, it is possible to select which fields you want the search for them to be filtered. This makes searching the Database simpler and more efficient when returning badges to your website. To configure it, just enter the My Applications area. Then choose App Badges and select which fields you want the search to be related to.

{"base64":"  ","img":{"width":1870,"height":1478,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":174631,"url":"https://user-images.githubusercontent.com/80836180/203373595-aef6bf9b-de00-43a5-b2fd-0636b97c2fb5.png"}}

Remember that by default, all fields are used as a filter.

Displaying badges in your store

In order to display the created badges in your store, you must add the store-badges component to a product page (store.product) or a product-summary. See an example of how to add badges to a product page below.


_32
"store.product": {
_32
"children": [
_32
+ "store-badges",
_32
"stack-layout",
_32
"breadcrumb",
_32
"flex-layout.row#main",
_32
"condition-layout.product"
_32
]
_32
},
_32
_32
+ "store-badges":{
_32
+ "props": {
_32
+ "numberOfBadges": 1,
_32
+ "text":{
_32
+ "font": "t-heading-5",
_32
+ "textColor": "blue",
_32
+ "textAlignment": "CENTER",
_32
+ "textPosition": "CENTER",
_32
+ "htmlId": "teste1"
_32
+ },
_32
+ "image":{
_32
+ "blockClass": "container",
_32
+ "height": 500,
_32
+ "width": 500,
_32
+ "minWidth": 25,
_32
+ "minHeight": 25,
_32
+ "alt": "teste",
_32
+ "title": "title",
_32
+ "preload": true
_32
+ }
_32
+ }
_32
+ }

Component props

These are the props available for customization of the badge component.

Prop nameTypeDescription
numberOfBadgesnumberNumber of badges that will be rendered.
textarrayDefines values that will be used when rendering a badge. To learn more about this prop, see Rich text.
imagearrayDefines values that will be used when rendering image badges. To learn more about this prop, see Store image

Final result

After finishing all the steps, you can check the result in your store. The order of the badges is set according to the priority defined when creating them. See the image below that corresponds to the badge setup in this tutorial's examples.

{"base64":"  ","img":{"width":798,"height":533,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":115953,"url":"https://user-images.githubusercontent.com/47991446/176911546-14dd3e5b-2af7-4f66-bd9e-2cd2c154cd09.PNG"}}

See also
VTEX App Store
VTEX IO Apps
README_pt
VTEX IO Apps