<html>

<head>
</head>

<body>
  <div id="spreadshop-promo-banner"></div>
  <p>If no promotion active, nothing is displayed</p>
</body>

</html>
#spreadshop-promo-banner {
  width: 100%;
  background-color: #990000;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}
#spreadshop-promo-banner:empty {
  background-color: transparent;
}
#spreadshop-promo-banner .code {
  font-size: 15px;
  text-align: center;
}
#spreadshop-promo-banner .validity {
  font-size: 10px;
  text-align: center;
}
jQuery(function($) {
  const readPromo = (successCallback, failedCallback) => {
    // You can add your own shop by changing "https://shop.spreadshirt.de/welovetee" to your shop URL.
    const asinUrl = "https://shop.spreadshirt.de/welovetee";
    if (asinUrl.length > 0) {
      // Get Sales Rank
      $.get(asinUrl, res => {
        const doc = res.match(/"promotion":(.*?)\}/) || [];

        const json = JSON.parse("{" + doc[0] + "}");
        if (json && json.promotion) {
          let text =
            json.promotion.shortText;
          if (json.promotion.code) {
            text += '<div class="code">Code: ' +
            json.promotion.code +
            '</div>';
          }
            text += '<div class="validity">' +
            json.promotion.validityText +
            "</div>";
          successCallback(text);
        }
      });
    } else if (typeof failedCallback === "function") {
      failedCallback();
    }
  };
  // Call function
  readPromo(r => {
    if (r.length > 0) {
      $("#spreadshop-promo-banner").append(r);
    }
  });
});

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js