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 install
Development
npm run dev
Compiles and minifies for production
npm run build