Product Card

The Product Card Component is designed to display a Revenium Product's details dynamically in MuleSoft's portal. In general, we recommend use of the Drop-In Storefront, though this component may be used for specialized use-cases.

1. Component Properties

Look at the component blueprint in the Figure 1 to identify how the properties are displayed in the Product Card. Use the following properties to customize the component display:

1. Organization. The list of Products displayed in the in the Product combobox depends on the organization selected in this combobox.

2. Product. Lists the available Products, select one to display its details in the Product Card.

3. Product Icon. Use this property to select an icon uploaded to Salesforce CMS and display it in the designed space.

4. Product Description Template. Use this property to configure the Product Description shown in the designed space. You can access to the selected Product properties using the syntax $propertyName. For example, the string $baseCost per $transactionType will result in $100.00 per subscription.

5. Product Description CMS Content. You can use this property to display News content created in Salesforce CMS, check the official Salesforce docs for more information.

6. Show Buttons. Check this property if you want to show the Product Details Button.

7. Card Margin. Controls the space between the card border and the content.

8. Card Height. Controls the card height.

9. Description Align. Controls the Product Description text align.

10. Description Text Size. Controls the Product Description text size.

11. Button Variant. Controls the Product Details Button style, based on the Lightning Design System directives (Only has effect if the Show Buttons property is checked).

12. Button Label. Label shown in the Product Details Button (Only has effect if the Show Buttons property is checked).

13. Button Align. Controls the Product Details Button alignment.

Figure 1. Product Card Blueprint.