Mda-assets-template NPM

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>