Вывод чанка в зависимости от ширины монитора

Задача: при заходе на сайт с ПК выдается стандартный шаблон, со смартфона — мобильный.
Решение: Обычный шаблон поместить в чанк (пусть будет [[$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]] не выдает значение ширины.
В чем проблема и вообще на сколько правильно так делать? Спасибо

Artur

07 декабря 2014, 10:29

4 762

Комментарии: 15

Виталий Киреев

07 декабря 2014, 15:30

В данном случае сниппет выполняется раньше джаваскрипта. Смотреть, как правильно, здесь: modx.pro/development/3139-foundations-of-ajax/

Aртур Чикин

07 декабря 2014, 19:27

побуду маленько занудой, но смысл того что вы сейчас делете? Сейчас на телефонах разрешение почти как на пк. Не лучше ли просто основываясь на заголовках передаваемых от пользователя выбирать нужный чанк? Я например иногда специально включаю на телефоне полную версию сайта так как в мобильной иногда что то да нехватает, а в полной версии есть.

Artur

07 декабря 2014, 20:42

в моем случае только такой вариант нужен

Марк Валерич

07 декабря 2014, 21:04

а зачем все это надо, если есть в бутсрапе, например, тот же hidden xs, hidden sm. это самый простой спосб убирать ненужные блоки. а если требуется логика в выводе, то можно использовать например аналог [[pagetitle:default='longtitle']].
в минишопе таким образом выводится возможность смены вида отображения чанков под тлвары.

Artur

07 декабря 2014, 21:14

в бульбостане не такой уж интернет, чтобы позволить с мобильного подгружать кучу лишних css

Василий Наумкин

07 декабря 2014, 21:37

Определяй мобильный специальным php классом. Он смотрит в заголовки и по массе критериев даёт ответ, что за устройство.

И обзывать дружественные нам страны не стоит — это, как минимум, не красиво.

Artur

07 декабря 2014, 22:28

я живу в этой дружественной стране

Василий Наумкин

07 декабря 2014, 22:39

Тем более.

Николай Загумённов

08 декабря 2014, 08:48

Для моб версии пользовался этим:
modx.pro/help/3766/

Artur

08 декабря 2014, 16:18

спасибо, то что искал!

Сергей Шлоков

08 декабря 2014, 09:14

Или так

Сергей Шлоков

08 декабря 2014, 10:00

Вообще, решение через $(document).ready() не очень правильное. Пользователь будет видеть все «махинации» с чанками. Это делать надо раньше.

АндрейЧ

22 декабря 2019, 21:59

Помогите плз. Использую ширину экрана, не получается вывести ее в чанке.

Так видит значение ширины экрана…

… а в TV заюзать значение никак не получается и

[[*screen_width:gt=`768`:then=`меньше 768`:else=`больше 768`]]

И другие глобальные переменные из файла скрипта также не могу в чанке вывести…

srs

22 декабря 2019, 22:27

del

АндрейЧ

22 декабря 2019, 23:52

Вернее вопрос такой, использую этот скрипт — он нормально читает screen_width

<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`]]
И другие глобальные переменные из файла скрипта также не могу в чанке вывести

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Вывод чанка в зависимости от ширины монитора

Комментарии: 15

Здесь упомянуты