Вывод чанка в зависимости от ширины монитора
Задача: при заходе на сайт с ПК выдается стандартный шаблон, со смартфона — мобильный.
Решение: Обычный шаблон поместить в чанк (пусть будет [[$standart]]), а мобильный в чанк [[$mobile]]
Создаю страницу с пустым шаблоном (test.html) в которой вывожу скрипт для определения ширины монитора и передачи значения в сниппет аяксом.
Создаю сниппет [[width]], который хранится в статичном файле script.php
исходный код test.html
В чем проблема и вообще на сколько правильно так делать? Спасибо
Решение: Обычный шаблон поместить в чанк (пусть будет [[$standart]]), а мобильный в чанк [[$mobile]]
Создаю страницу с пустым шаблоном (test.html) в которой вывожу скрипт для определения ширины монитора и передачи значения в сниппет аяксом.
Создаю сниппет [[width]], который хранится в статичном файле script.php
исходный код test.html
<!DOCTYPE html>
<html>
<head>
<script src="assets/katalog/js/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
ScreenWidth = screen.width;
$(document).ready(function(){
$.ajax({
url: 'script.php',
data : "postVar=" + ScreenWidth,
type : "POST",
success: function (data) {
alert (data);
},
error: function(){
alert ("No PHP script: ");
}
});
});
</script>
</head>
<body>
[[!width:gt=`400`:then=`[[$standart]]`:else=`[[$mobile]]`]]
</body>
</html>
код в сниппете [[width]]<?php
echo $_POST['postVar'];
Проблема в том, что сниппет [[width]] не выдает значение ширины. В чем проблема и вообще на сколько правильно так делать? Спасибо
Комментарии: 15
В данном случае сниппет выполняется раньше джаваскрипта. Смотреть, как правильно, здесь: modx.pro/development/3139-foundations-of-ajax/
побуду маленько занудой, но смысл того что вы сейчас делете? Сейчас на телефонах разрешение почти как на пк. Не лучше ли просто основываясь на заголовках передаваемых от пользователя выбирать нужный чанк? Я например иногда специально включаю на телефоне полную версию сайта так как в мобильной иногда что то да нехватает, а в полной версии есть.
в моем случае только такой вариант нужен
а зачем все это надо, если есть в бутсрапе, например, тот же hidden xs, hidden sm. это самый простой спосб убирать ненужные блоки. а если требуется логика в выводе, то можно использовать например аналог [[pagetitle:default='longtitle']].
в минишопе таким образом выводится возможность смены вида отображения чанков под тлвары.
в минишопе таким образом выводится возможность смены вида отображения чанков под тлвары.
в бульбостане не такой уж интернет, чтобы позволить с мобильного подгружать кучу лишних css
Определяй мобильный специальным php классом. Он смотрит в заголовки и по массе критериев даёт ответ, что за устройство.
И обзывать дружественные нам страны не стоит — это, как минимум, не красиво.
И обзывать дружественные нам страны не стоит — это, как минимум, не красиво.
я живу в этой дружественной стране
Тем более.
Для моб версии пользовался этим:
modx.pro/help/3766/
modx.pro/help/3766/
спасибо, то что искал!
Или так
Вообще, решение через $(document).ready() не очень правильное. Пользователь будет видеть все «махинации» с чанками. Это делать надо раньше.
Помогите плз. Использую ширину экрана, не получается вывести ее в чанке.
Так видит значение ширины экрана…
… а в TV заюзать значение никак не получается и
[[*screen_width:gt=`768`:then=`меньше 768`:else=`больше 768`]]
И другие глобальные переменные из файла скрипта также не могу в чанке вывести…
Так видит значение ширины экрана…
… а в TV заюзать значение никак не получается и
[[*screen_width:gt=`768`:then=`меньше 768`:else=`больше 768`]]
И другие глобальные переменные из файла скрипта также не могу в чанке вывести…
del
Вернее вопрос такой, использую этот скрипт — он нормально читает screen_width
[[*screen_width:gt=`768`:then=`меньше 768`:else=`больше 768`]]
И другие глобальные переменные из файла скрипта также не могу в чанке вывести
<script>
var h_hght = 370; // высота шапки
var h_mrg = 0; // отступ когда шапка уже не видна
var screen_width; // ширина экрана эзера
screen_width = screen.width;
alert(screen_width);
if (screen_width < 768) var h_hght = 370;
if (screen_width < 768)
$(function(){
$(window).scroll(function(){
var top = $(this).scrollTop();
var elem = $('#top-megamenu-nav');
if (top+h_mrg < h_hght) {
elem.css('top', (h_hght-top));
} else {
elem.css('top', h_mrg);
}
});
});
</script>
… А из чанка никак не могу использовать ширину… не работает конструкция:[[*screen_width:gt=`768`:then=`меньше 768`:else=`больше 768`]]
И другие глобальные переменные из файла скрипта также не могу в чанке вывести
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.