Bazaarvoice

Description

This is a Bazaarvoice first party integration app that is responsible for showing the components related to Bazaarvoice Reviews in your store.

📢 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
[1.x]	Current Release	2019-06-14			2.x

See our LTS policy for more information.

Table of Contents

• Usage
  • Configuration
  • Styles API
    • CSS namespaces
• Troubleshooting
• Contributing
• Tests

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.

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

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

2. Add vtex.bazaarvoice to peerDependencies in your manifest.json:

  "peerDependencies": {
    "vtex.bazaarvoice": "1.x"
  }

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

.container {
  margin-top: 10px;
}

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.

Contributing

Take a look at these guidelines: how to contribute.

Tests

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

Travis CI