Bazaarvoice
This is a Bazaarvoice first party integration app that is responsible for showing the components related to Bazaarvoice Reviews in your store.
Release schedule
| Release | Status | Initial Release | Maintenance LTS Start | End-of-life | Store Compatibility |
|---|---|---|---|---|---|
| [1.x] | Current Release | 2019-06-14 | 2.x |
Table of Contents
Usage
To use the bazaarvoice components add the product reviews blocks into your theme as you would with any other block.
Configuration
You can set some options of the Reviews component in the CMS:
| Prop name | Type | Description | Default value |
|---|---|---|---|
Quantity of reviews per page | number | the number of reviews that a review page will have | 10 |
Quantity of reviews on the first page | number | the number of reviews that the first review page will have | Same as the value above |
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 and add vtex.bazaarvoice to your theme peerDependencies.
- Add the
stylesbuilder to yourmanifest.json:
_10 "builders": {_10 "styles": "1.x"_10 }
- Add
vtex.bazaarvoicetopeerDependenciesin yourmanifest.json:
_10 "peerDependencies": {_10 "vtex.bazaarvoice": "1.x"_10 }
- Create a file called
vtex.bazaarvoice.cssinside thestyles/cssfolder. Add your custom styles:
_10.container {_10 margin-top: 10px;_10}
CSS namespaces
Below, we describe the namespaces that are defined in the bazaarvoice.
| Token name | Description | Component Source |
|---|---|---|
| reviews | The reviews component | NoReviews, Reviews |
| reviewsTitle | The reviews title | NoReviews, Reviews |
| ratingSummary | Rating Summary | RatingSummary |
| ratingSummaryContainer | Main container of the Rating Summary | RatingSummary |
| ratingSummaryStars | Stars of the Rating Summary | RatingSummary |
| ratingSummaryStars--loading | Style of the Stars of the Rating Summary when they are loading | RatingSummary |
| ratingSummaryWrite | 'Write Review' link next to the stars of the Summary Container | RatingSummary |
| ratingInline | Rating in Line | RatingInLine |
| reviewForm | Review Form | ReviewForm |
| ratingStars | Container of the rating stars | Stars |
| ratingStarsInactive | Style of the Stars when they are inactive | Stars |
| ratingStarsActive | Style of the Stars when they are active | Stars |
| histogramStarContainer | Histogram Star Container | Histogram |
| histogramOuterContainer | Histogram most external container | Histogram |
| histogramContainer | Histogram main container | Histogram |
| histogramLine | Histogram line containing the data of a certain amount of star | Histogram |
| histogramStar | Histogram Star | Histogram |
| histogramBar | Histogram Bar | Histogram |
| histogramBarValue | Histogram Bar filling | Histogram |
| histogramCount | The count at the side of the histogram bar | Histogram |
| secondaryHistogramLine | Histogram line containing the data of the secondary ratings | Histogram |
| secondaryHistogramLabel | The label of a secondary histogram line | Histogram |
| secondaryHistogramBar | Secondary ratings' histogram bar | Histogram |
| secondaryHistogramBarValue | Secondary ratings' histogram bar filling | Histogram |
| secondaryHistogramCount | Secondary ratings' histogram count | Histogram |
| reviewHistogramBar | Review Histogram Bar | Review |
| reviewHistogramBarValue | Review Histogram Bar filling | Review |
| histogramDivisions | Histogram division that separates it in five sections | HistogramBar |
| review | Review | Review |
| reviewRating | Review Rating | Review |
| reviewTitle | Review Title | Review |
| reviewSubmittedField | Review 'submitted' field | Review |
| reviewByField | Review 'by' field | Review |
| reviewFromField | Review 'from' field | Review |
| reviewText | Review text | Review |
| reviewImagesContainer | Review image container | Review |
| reviewImage | Review image | Review |
| reviewsContainer | Reviews container | ReviewsContainer |
| reviewsContainerHead | Reviews Container head | ReviewsContainer |
| reviewsContainerTitle | Reviews container title | ReviewsContainer |
| reviewsContainerDropdowns | Reviews container dropdown buttons | ReviewsContainer |
| reviewsContainerSortDropdown | Reviews container sort button | ReviewsContainer |
| reviewsContainerStarsDropdown | Reviews container stars button | ReviewsContainer |
| reviewsContainerWriteButton | Reviews container write button | ReviewsContainer |
| noReviewsContainer | Container that appears when there are no reviews | NoReviews |
| writeReviewButton | Write review button | ReviewsContainer, NoReviews |
| activeStar | Active star | Stars |
| activeStarContainer | Active star container | Stars |
| inactiveStar | Inactive star | Stars |
| inactiveStarContainer | Inactive star container | Stars |
Troubleshooting
You can check if others are experiencing similar issues here. Also, feel free to open issues or contribute with a pull request.
Tests
To execute our tests go to react/ folder and run yarn test
Travis CI
