Всем привет. Задумал я сделать очередной интернет магазин (на этот раз по продаже шаблонов для Elementor) через WooCommerce. Ну и раз уж делать так всё по взрослому, как на серьезных сайтах, то есть чтобы можно было посмотреть как данный шаблон выглядит на мобильных, планшетных и десктопных устройствах.
Посмотрел как это делается на серьезных сайтах, к примеру на официальном сайте Elementor, а делается это там так — шаблоны показываются внутри iFrame, а красивые кнопки с иконками для переключения вида (мобильный, планшетный и десктопный) просто меняют ширину этого iFrame — таким образом содержимое автоматически подстраивается под iFrame и всё становится красиво.
То есть HTML будет выглядеть примерно вот так
<button id="mobile-btn">Мобильный вид</button>
<button id="tablet-btn">Планшетный вид</button>
<button id="desktop-btn">Десктопный вид</button>
<iframe id="my-iframe" src="ваш_сайт" width="100%" height="600px"></iframe>
Нам осталось прописать Java Script который будет менять, и для удобства вставлять мы его будет в function.php. Выглядеть он будет так
add_action('wp_footer', 'custom_iframe_resizer_script');
function custom_iframe_resizer_script() {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('mobile-btn').addEventListener('click', function() {
document.getElementById('my-iframe').style.width = '320px'; // Ширина для мобильного вида
});
document.getElementById('tablet-btn').addEventListener('click', function() {
document.getElementById('my-iframe').style.width = '768px'; // Ширина для планшетного вида
});
document.getElementById('desktop-btn').addEventListener('click', function() {
document.getElementById('my-iframe').style.width = '100%'; // Ширина для десктопного вида
});
});
</script>
<?php
}
И вроде бы всё отлично — но есть одно но. По всей видимости просто показать секцию или контейнер в браузере не получится, а шорткод типа в iFrame не вставишь.
Поэтому принял решение:
- Делаю шаблон обычным способом, сохраняю его в библиотеке шаблонов, тип шаблона выбираю “Контейнер”
- Делаю одноименную запись (чтобы не запутаться) и вставляю туда шорткод контейнера. Шаблон для записи ставлю как “Elementor canvas”, чтобы там кроме моего созданного контейнера ничего не было.
- В описание товара вставляю уже iFrame с URL записи, к примеру <iframe id=“my-iframe” src=“https://mysite.ru/menu‑1” width=“100%” height=“600px” style=“border: 1px solid black”></iframe>
Минус данного подхода — мне приходится делать запись чтобы вставить туда шорткод, но как выводить шорткод напрямую я пока не знаю.