javascript – Rendering and executing on pageload after injecting it from external .js file

I’m still a beginner with JavaScript and am trying to use it to make the Etsy Mini API responsive. I have two <script>s that need to be added to a <div> in order for the mini shop to appear:

<script type="text/javascript" src="https://www.etsy.com/assets/js/etsy_mini_shop.js"></script>
<script type="text/javascript">new Etsy.Mini(<UNIQUE_SHOP_ID>,'thumbnail',4,3,0,'https://www.etsy.com');</script>

In the second <script>, I can specify the size of a thumbnail grid, (4×3 in the example above), but this grid is not responsive, so if it’s loaded on a device with a smaller screen, or if a laptop’s browser window is resized, the 4×3 grid might be too big. I want to use media queries in an external .js file to change this thumbnail grid, and this is where I’m running into problems.

Below is my current external .js file:

var products = document.getElementById("products-card");
var grid5x3 = "<script type="text/javascript">new Etsy.Mini(<UNIQUE_SHOP_ID>,'thumbnail',5,3,0,'https://www.etsy.com');</script>";
var grid4x3 = "<script type="text/javascript">new Etsy.Mini(<UNIQUE_SHOP_ID>,'thumbnail',4,3,0,'https://www.etsy.com');</script>";
var grid3x3 = "<script type="text/javascript">new Etsy.Mini(<UNIQUE_SHOP_ID>,'thumbnail',3,3,0,'https://www.etsy.com');</script>";
var grid2x3 = "<script type="text/javascript">new Etsy.Mini(<UNIQUE_SHOP_ID>,'thumbnail',2,3,0,'https://www.etsy.com');</script>";
var grid1x3 = "<script type="text/javascript">new Etsy.Mini(<UNIQUE_SHOP_ID>,'thumbnail',1,3,0,'https://www.etsy.com');</script>";

(function () {
    function resize() {
        var min_2500 = window.matchMedia('only screen and (min-width: 2500px)').addListener(function () {
            products.innerText = grid5x3;
        });
        var min_1900_max_2499 = window.matchMedia('only screen and (min-width: 1900px) and ' +
        '(max-width: 2499px)').addListener(function () {
            products.innerText = grid4x3;
        });
        var min_1200_max_1899 = window.matchMedia('only screen and (min-width: 1200px) and ' +
        '(max-width: 1899px)').addListener(function () {
            products.innerText = grid3x3;
        });
        var min_900_max_1199 = window.matchMedia('only screen and (min-width: 900px) and ' +
        '(max-width: 1199px)').addListener(function () {
            products.innerText = grid2x3;
        });
        var max_899 = window.matchMedia('only screen and (max-width: 899px)').addListener(function () {
            products.innerText = grid1x3;
        });
    }

    resize();
}());

And here is the .html:

<head>
  ...
  <script type="text/javascript" src="https://www.etsy.com/assets/js/etsy_mini_shop.js"></script>
</head>
<body>
  ...
  <div class="products-card" id="products-card"></div>
  ...
</body>

Problem 1: The script isn’t executed, but rather the actual text, <script> tags included, appears in the <div>. How can I change my Javascript to make the script execute and render the mini shop?

Problem 2: The <div> is empty upon page load, but after the browser screen is resized and hits one of the cutoffs specified in the media queries, the text appears and changes properly according to the media queries. How can I make the shop render in the <div> on page load and not just when the browser window is resized?

UPDATE 1
So I discovered that using innerText/innerHTML does not allow any scripts to be executed/rendered when injected into the html file (based on an answer here). Here is my new .js file:

var products = document.getElementById("products-card");
var grid5x3 = "new Etsy.Mini(<UNIQUE_SHOP_ID>,'thumbnail',5,3,0,'https://www.etsy.com');";
var grid4x3 = "new Etsy.Mini(<UNIQUE_SHOP_ID>,'thumbnail',4,3,0,'https://www.etsy.com');";
var grid3x3 = "new Etsy.Mini(<UNIQUE_SHOP_ID>,'thumbnail',3,3,0,'https://www.etsy.com');";
var grid2x3 = "new Etsy.Mini(<UNIQUE_SHOP_ID>,'thumbnail',2,3,0,'https://www.etsy.com');";
var grid1x3 = "new Etsy.Mini(<UNIQUE_SHOP_ID>,'thumbnail',1,3,0,'https://www.etsy.com');";

(function () {
    function resize() {
        var min_2500 = window.matchMedia('only screen and (min-width: 2500px)').addListener(function () {
            var eval_grid5x3 = eval(grid5x3);
            products.innerText = eval_grid5x3;
        });
        var min_1900_max_2499 = window.matchMedia('only screen and (min-width: 1900px) and ' +
        '(max-width: 2499px)').addListener(function () {
            var eval_grid4x3 = eval(grid4x3);
            products.innerText = eval_grid4x3;
        });
        var min_1200_max_1899 = window.matchMedia('only screen and (min-width: 1200px) and ' +
        '(max-width: 1899px)').addListener(function () {
            var eval_grid3x3 = eval(grid3x3);
            products.innerText = eval_grid3x3;
        });
        var min_900_max_1199 = window.matchMedia('only screen and (min-width: 900px) and ' +
        '(max-width: 1199px)').addListener(function () {
            var eval_grid2x3 = eval(grid2x3);
            products.innerText = eval_grid2x3;
        });
        var max_899 = window.matchMedia('only screen and (max-width: 899px)').addListener(function () {
            var eval_grid1x3 = eval(grid1x3);
            products.innerText = eval_grid1x3;
        });
    }

    resize();
}());

While this does render the Etsy mini shop, it does so with some odd behaviors:

  1. The entire <body> is replaced with the injected script, when I expected the targeted <div> to be replaced with the script.

  2. Every time I resize the screen, it adds another Etsy mini shop (it does not replace the one that is currently there), resulting in the page becoming filled with numerous shops.

  3. The issue of it not rendering on pageload is still there.

Apologies if this is a rather simple question. I’ve spent a lot of time Googling solutions but nothing I’ve tried has worked. The code I have above is the closest I’ve come to having a responsive Etsy Mini shop. Thanks for any answers/comments/suggestions!

Leave a Comment