/product-details

VTEX Product Details app

Primary LanguageJavaScript

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

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

Build Status