Я все еще начинающий с JavaScript и пытаюсь использовать его, чтобы адаптировать Etsy Mini API. У меня есть два <script> s, которые нужно добавить к <div>, чтобы появился мини-магазин:
<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>
Во втором <script> я могу указать размер сетки миниатюр (4x3 в приведенном выше примере), но эта сетка не отвечает, поэтому, если она загружается на устройство с меньшим экраном или размер окна браузера ноутбука изменяется, сетка 4x3 может быть слишком большой. Я хочу использовать медиа-запросы во внешнем файле. js, чтобы изменить эту сетку миниатюр, и именно здесь я сталкиваюсь с проблемами.
Ниже приведен мой текущий внешний файл. js:
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();
}());
И вот. 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>
Проблема 1: Сценарий не выполняется, а текст, содержащий теги <script>, отображается в <div>. Как изменить Javascript, чтобы скрипт выполнялся и отображал мини-магазин?
Проблема 2: <div> пусто при загрузке страницы, но после изменения размера экрана браузера и нажатия одной из кнопок срезы, указанные в медиазапросах, текст отображается и изменяется должным образом в соответствии с медиазапросами. Как сделать так, чтобы магазин отображался при загрузке страницы <div>, а не только при изменении размера окна браузера?
ОБНОВЛЕНИЕ 1 Итак, я обнаружил, что используя innerText / inner HTML не разрешает выполнение / рендеринг каких-либо сценариев при внедрении в файл html ( на основе ответа здесь ). Вот мой новый. js файл:
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();
}());
Хотя это и делает мини-магазин Etsy, он делает это с некоторыми странными действиями:
Весь <body> заменяется внедренным сценарием, когда я ожидал, что целевой <div> будет заменен сценарием.
Каждый раз, когда я изменяю размер экрана, он добавляет другой мини-магазин Etsy (он не заменяет тот, который есть в данный момент), в результате чего страница заполняется многочисленными магазинами.
Проблема, связанная с отсутствием рендеринга при загрузке страницы: все еще там.
Извините, если это довольно простой вопрос. Я потратил много времени на поиск решений Google, но ничего, что я пробовал, не сработало. Код, который у меня есть выше, ближе всего подходит к адаптивному магазину Etsy Mini. Спасибо за любые ответы / комментарии / предложения!