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.

Table of Contents

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

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

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

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

Travis CI