VTEX Product Details

Description

The VTEX Category Menu app shows the details of a product like image, name and price. 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-lifeDreamstore Compatibility
1.xCurrent Release2018-11-282.x
0.xMaintenance LTS2018-05-292018-11-28March 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.

We add the product-details as a block in our Store Header.

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

1
2
3
  dependencies: {
    "vtex.product-details": "1.x"
  }

Then, add product-details block into your app theme, like we do in our Store theme app.

Now, you can change the behavior of the product-details block that is in the store header. 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
29
30
31
32
33
34
35
36
37
  "product-details": {
      "blocks": [
        "breadcrumb",
        "product-name",
        "product-images",
        "product-price",
        "product-description",
        "product-specifications",
        "buy-button",
        "sku-selector",
        "shipping-simulator",
        "availability-subscriber",
        "share"
      ],
      "props": {
        "displayVertically": true,
        "share": {
          "social": {
            "Facebook": true,
            "WhatsApp": true,
            "Twitter": false
          }
        },
        "price": {
          "labelSellingPrice": null,
          "showListPrice": true,
          "showLabels": true,
          "showInstallments": true,
          "showSavings": true
        },
        "name": {
          "showBrandName": false,
          "showSku": false,
          "showProductReference": false
        }
      }
    }

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within product-details and describes if they are required or optional.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "product-details": {
    "required": [
      "product-images",
      "product-name",
      "product-price",
      "sku-selector",
      "buy-button",
      "product-description",
      "product-specifications"
    ],
    "allowed": [
      "breadcrumb",
      "shipping-simulator",
      "availability-subscriber",
      "share",
      "addon-details-btn"
    ],
    "component": "ProductDetails"
  },
  "addon-details-btn": {
    "component": "*"
  }
}

The ProductDetails has the required blocks: product-images, product-name, product-price, sku-selector, buy-button, product-description and product-specifications. So, any ProductDetails block implementation created must add these blocks.

Configuration

Through the Storefront you can change the behavior and interface of ProductDetails. But, you can also make adjusts in your theme app, like Store does.

Prop nameTypeDescriptionDefault Value
priceObjectConfigures the product price area (More info on the table bellow)false
nameObjectConfigures the product name area (More info on the table bellow)false
displayVerticallyBooleanWhether to display the preview images on the vertical or notfalse
showSpecificationsTabBooleanWhether to display the product specification on tab mode or notfalse

Price:

Prop nameTypeDescription
showListPriceBooleanShows the list pricestrue
showLabelsBooleanShows the labels in the price and installmentstrue
showInstallmentsBooleanShows the installments informationtrue
showSavingsBooleanShows the savings informationtrue
labelSellingPriceStringText of the label before the pricenull

Name:

Prop nameTypeDescription
showProductReferenceBooleanShows the product referencefalse
showBrandNameBooleanShows the brand name of the productfalse
showSkuBooleanShows the sku value for this productfalse

Highlight:

Prop nameTypeDescription
defaultHighlightbooleanIndicates whether the group chosen as the highlight will contain all the properties in product or a group typed entry.
true
showHighlightsBooleanShows the highlights of the producttrue
highlightGroup

Specification:

Prop nameTypeDescription
showSpecificationsbooleanShow the specifications of the product
specificationGroupsobjectDefine if will be displayed all the specifications of the product or a set of this specifications.
viewModestringDefine what is the current view mode for the specifications.
typeSpecificationsstringindicates which specifications will be displayed

Also, you can configure the share that is defined on ProductDetails. See here the Share API.

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.product-details.css inside the styles/css folder. Add your custom styles:
1
2
3
.container {
  margin-top: 10px;
}

CSS namespaces

Below, we describe the namespaces that is define in the ProductDetails.

Class nameDescriptionComponent Source
containerThe main container of Product DetailsproductDetails
nameContainerThe container of the name areaproductDetails
detailsContainerThe container of the details areaproductDetails
priceContainerThe container of the price areaproductDetails
informationsContainerThe container of the information areaproductDetails
fixedButtonThe product buy buttonFixedButton/index
highlightsContainerThe container of product highlights areaproductDetails

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