VTEX Product Details [DEPRECATED]

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

Release	Status	Initial Release	Maintenance LTS Start	End-of-life	Dreamstore Compatibility
[1.x]	Current Release	2018-11-28			2.x
[0.x]	Maintenance LTS	2018-05-29	2018-11-28	March 2019	1.x

See our LTS policy for more information.

Usage
- Blocks API
  - Configuration
- Styles API
  - CSS namespaces
Troubleshooting
Contributing
Tests

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.

  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:

  "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.

{
  "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 name	Type	Description	Default Value
`price`	`Object`	Configures the product price area (More info on the table bellow)	false
`name`	`Object`	Configures the product name area (More info on the table bellow)	false
`displayVertically`	`Boolean`	Whether to display the preview images on the vertical or not	false
`showSpecificationsTab`	`Boolean`	Whether to display the product specification on tab mode or not	false

Price:

Prop name	Type	Description
`showListPrice`	`Boolean`	Shows the list prices
`showLabels`	`Boolean`	Shows the labels in the price and installments
`showInstallments`	`Boolean`	Shows the installments information
`showSavings`	`Boolean`	Shows the savings information
`labelSellingPrice`	`String`	Text of the label before the price

Name:

Prop name	Type	Description
`showProductReference`	`Boolean`	Shows the product reference
`showBrandName`	`Boolean`	Shows the brand name of the product
`showSku`	`Boolean`	Shows the sku value for this product

Highlight:

Prop name	Type	Description
`defaultHighlight`	`boolean`	Indicates whether the group chosen as the highlight will contain all the properties in product or a group typed entry.
true
`showHighlights`	`Boolean`	Shows the highlights of the product
`highlightGroup`

Specification:

Prop name	Type	Description
`showSpecifications`	`boolean`	Show the specifications of the product
`specificationGroups`	`object`	Define if will be displayed all the specifications of the product or a set of this specifications.
`viewMode`	`string`	Define what is the current view mode for the specifications.
`typeSpecifications`	`string`	indicates 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.

Add the styles builder to your manifest.json:

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

Create a file called vtex.product-details.css inside the styles/css folder. Add your custom styles:

.container {
  margin-top: 10px;
}

CSS namespaces

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

Class name	Description	Component Source
`container`	The main container of Product Details	productDetails
`nameContainer`	The container of the name area	productDetails
`detailsContainer`	The container of the details area	productDetails
`priceContainer`	The container of the price area	productDetails
`informationsContainer`	The container of the information area	productDetails
`fixedButton`	The product buy button	FixedButton/index
`highlightsContainer`	The container of product highlights area	productDetails

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

vtex-apps/product-details