mda-assets-template
v1.0.12
Published
Assets for MDA custom templates
Downloads
19
Readme
Custom templates in Multiverse Dynamics ADS
This package was created to provide the necessary assets in order to load the products from MDA into a custom HTML template.
Getting started
In order to get and show the products correctly from MDA, you need to follow this steps:
1. Load in your HTML
CDN (Recommended)
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mda-assets-template/dist/mda.js"></script>Download
https://cdn.jsdelivr.net/npm/mda-assets-template/dist/mda.js
2. Initialize
Initialize MDA in your script file or at the end of <body>:
<script>
document.addEventListener("DOMContentLoaded", function() {
MDA({
productsContainer: 'products',
notAvailableMessageContainer: 'notAvailableMessage',
sample: true,
});
});
</script>Options
| Option | Value | Required | Default | Description | |------------------------------|---------|----------|---------------------|-------------------------------------------------------------------------------------------------| | productsContainer | string | yes | products | ID of the products container. The products will be loaded here. | | notAvailableMessageContainer | string | yes | notAvailableMessage | ID of the not available message. It will be shown if something went wrong loading the banner. | | mainContainer | string | no | container | ID of the main container. Only used to set the size as a class. Helpful for responsiveness. | | token | string | no | | Banner ID to identify the campaign. Use it when you want to test for a specific campaign | | loadingContainer | string | no | loading | ID of the loading container. It will be shown when the products are loading. | | size | string | no | 300x600 | Indicates the size of the banner. This size will be set as a class in the main container. | | sample | boolean | no | false | Indicates whether it loads sample products or real products. Useful when designing template. | | products | number | no | 4 | Only use if sample option is true. Indicates how many products you want to load in your sample. |
Optional CSS
You can add this CSS to get a ready-to-use style in your product list view:
CDN (Recommended)
<link href="https://cdn.jsdelivr.net/npm/mda-assets-template/dist/mda-theme.css" rel="stylesheet">Download
https://cdn.jsdelivr.net/npm/mda-assets-template/dist/mda-theme.css
Styling
If you want to style the product list, this is the generated HTML for every product:
<!-- Class 'alert-stock' is only shown if this product has low stock or it could not be checked -->
<div class="product alert-stock">
<!-- Product image-->
<div class="image"></div>
<!-- This img element is only loaded if you choose to show the store logo. The variable 'store-name' is set with the store name. -->
<img class="imageStore {store-name}">
<!-- Container with name and price / button -->
<div class="info">
<!-- Product name -->
<div class="name">{product-name}</div>
<!-- Class 'price' if you choose to show the price, or class 'buyBtn' if you choose to show a button with the message 'Comprar' -->
<div class="price | buyBtn">
$25.000 | Comprar
</div>
</div>
</div>Build
Install packages
npm installDevelopment
npm run devCompiles and minifies for production
npm run build