❤
npm
Sign UpSign In

mda-assets-template

1.0.12 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i mda-assets-template

Weekly Downloads

6

Version

1.0.12

License

ISC

Unpacked Size

78.2 kB

Total Files

17

Last publish

Collaborators

  • pedromanriquez
  • dplaza
Try on RunKit
Report malware