@groupby/elements-product
v0.1.0
Published
```html <gbe-product product="{}"></gbe-product> ```
Downloads
3
Maintainers
Keywords
Readme
GroupBy Elements Product Component
<gbe-product product="{}"></gbe-product>
The product component will display information about a given product.
Functionality
The component takes one product
attribute (refer to the ProductModel
instance for the data format).
{
"title": "Product Name",
"price": 3.55,
"productUrl": "http://example.com/img.jpg",
"imageSrc": "http://example.com/img.jpg",
"imageAlt": "Alternative image text"
}
Customizations
Optionally the product can use variants
to display different information based on what variant is selected (refer to the ProductVariantsModel
instance for the data format).
{
"variants": {
"type": "text" // default, can be either "text", "image", "color"
"items": [
{
"text": "Variant Label",
"product": {
// Data that will be overwritten in the product component
}
}
]
}
}
Any properties that are not identified in the ProductModel, will be rendered as additional <span>
tags in the component.
Testing
The test suite for this component is contained in test
directory.
To run the tests, navigate to this folder and use one of the following commands based on the desired testing flow:
- To run the tests once:
yarn test
- To run the tests and watch the
src
andtest
directories for changes:
yarn tdd