🚨 Disclaimer - Template Application

⚠️ This project is not maintained by VTEX, and this app is provided as a working example on how this feature can be implemented. Improvements and fixes will be on the implementation team side.

All template applications provided are developed by the VTEX community, you can use them freely.

 

VTEX Product Specification DOM

Description

This is a small helper app to render HTML content from a specification field.

WARNING: Use at own risk. The app does not prevent broken HTML from being renderd. If you have broken content here, this can kill your website.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Table of Contents

• Usage
• CSS Handles

Usage

First of all, install the app on your VTEX toolbelt:

vtex install vtex.product-specification-dom@0.x

To use this app, you need to import in your dependencies on manifest.json.

  "dependencies": {
    "vtex.product-specification-dom": "0.x"
  }

Then, you can add a component block into your app theme on your product detail page. You can use props to define both the fallback video as well as the specification name to look into for videos.

"productspecificationdom":{
    "props":{
      "specification": "MyFieldName",
      "group": "Technical Fields",
      "blockClass": "ExplodingHTML"
      
    }
  }

Be aware: a specification needs to be set to display for the module to pick it up. It listens to the "show specification" attribute of each field.

CSS handles

The following CSS handles can be used for styling:

  'containerEmpty',
  'specificationDomContainer'
  'specificationDomValue'