MODX - адаптивность

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

Я лично использую сетку Bootsrap. В большинстве случаев выручает. Но не всегда.

Вообще адаптивности обычно добиваются через CSS. И реже через JS. И совсем уж редко на PHP. Я умудрился все три использовать.

Пример для мобильника(разрешение < 768)).


@media (max-width: 768px){
	.mrgLR5_768{
		margin: 0 5px !important;
	}
	.mrgT10_768{
		margin-top: 10px !important;
	}
	.mrgT20_768{
		margin-top: 20px !important;
	}
	.mrgB10_768{
		margin-bottom: 10px !important;
	}
	.mrgB20_768{
		margin-bottom: 20px !important;
	}
}
    
Теперь в нужном месте назначаем класс и получаем требуемое поведение для мобильника. Т.е. наиболее используемое поведение собирают в один CSS. Что разумно.

Для десктопа будет примерно так(разрешение больше 768):


@media (min-width: 768px){
	.dispTC_gt_768{
  		display: table-cell;
	}
}
    
CSS делает основную работу по адаптивности.

В случаях когда уже не хватает только изменения свойств, и нужно передвинуть блок в другой блок, или скопировать его и т.д. - выходит на арену JS. Вот так можно "схлопнуть" блок bootstrap при загрузке страницы на мобильник.


<script type="text/javascript">
  $(document).ready(function(){
  	var $win=$(window);
	var winW=$win.width();
	var winH=$win.height();  
   	if(winW<768){
   			$("#popKat").collapse();
   	} 
 
  });
</script>
    

Особенно полезен JS при боковых(левых и правых) вертикальных меню с разделами и подразделами. Подраздел можно просто "отвязать" от прежнего родителя, перенести в верх среднего блока, сделать автономный выплывающий блок и т.д.. Т.е. полная свобода.

Это вообще круто! Когда не нужна индексация. Например блоки типа "последние просмотренные", "мы также рекомендуем", "с этим товаром покупают" и т.п.. Смысл:

  • Страница грузится без этих блоков.
  • Запускается JS.
  • В зависимости от разрешения экрана - грузится нужный адаптированный блок, вместе со своим CSS и JS
Преимущества-
  • Ускореенная загрузка основной страницы
  • Никаких напрягов с адаптацией, т.к. блоки такие как надо
Естественно это все через ajax. Пример подключаемого внешнего блока в MODX Evo:

<?php
	$curId = $modx->documentIdentifier;
	$curId=($curId==9481) ? 116 : $curId;
?>
<script type="text/javascript">
   $(document).ready(function(){
   	var docId=<?php echo $curId;?>;
   	var $win=$(window);
      var winW=$win.width();
      var winH=$win.height();  
		$("#pohogieAj").load(
  			"/assets/..../aj/ogiemain.php",
  			 {
    			docId: docId,
    			param2: 2,
    			winW:winW,
    			winH:winH
  			},
  			function(data){
  				 $(shkOptions.stuffCont).shopkeeper();  
  			}
		);
   });
</script> 
    
Код сервера:

<hr>
<h3 class="text-primary">Похожие товары :</h3>
<div id="carousel-pohogee" class="carousel slide" data-ride="carousel">
<?php
$MngrDir=$_SERVER['DOCUMENT_ROOT'].'/manager';

define('MODX_MANAGER_PATH', $MngrDir."/");
require_once(MODX_MANAGER_PATH . 'includes/config.inc.php');
require_once(MODX_MANAGER_PATH . 'includes/protect.inc.php');
define('MODX_API_MODE', true);
require_once(MODX_MANAGER_PATH.'/includes/document.parser.class.inc.php');

session_name($site_sessionname);
session_id($_COOKIE[session_name()]);
session_start();

$modx = new DocumentParser;
$modx->minParserPasses=2;

$modx->db->connect();
$modx->getSettings();
$modx->config['site_url'] = isset($request['site_url']) ? $request['site_url'] : '';

$arrDoc=$modx->getDocument($_POST['docId']);
$priceTV=$modx->getTemplateVar("price","*",$_POST['docId']);
$price=$priceTV['value'];

$curPrice = ($price> 0) ? $price : 0;
$curParent = $arrDoc['parent'];

$curParent =($curParent==9294) ? 122 : $curParent; 

$items = null;
$idsArr=array();

$sql=	"SELECT `tvc`.`contentid`, `tvc`.`value`
	FROM  `modx_site_tmplvar_contentvalues` AS tvc
	LEFT JOIN  `modx_site_content` AS cnt ON ( `tvc`.`contentid` =  `cnt`.`id` )
	WHERE `cnt`.`parent` = '".$curParent."'
   AND `tvc`.`value` < ".$curPrice."
	AND `tvc`.`tmplvarid` = '4'
	AND `cnt`.`published` = '1'
	ORDER BY `tvc`.`value` ASC
	LIMIT 3";

$res = $modx->db->query($sql);
while ($row = $modx->db->getRow($res)) {
  $idsArr[] = $row['contentid'];
} 

$limit=6-count($idsArr);

$sql="SELECT `tvc`.`contentid`, `tvc`.`value`
	FROM  `modx_site_tmplvar_contentvalues` AS tvc
	LEFT JOIN  `modx_site_content` AS cnt ON ( `tvc`.`contentid` =  `cnt`.`id` )
	WHERE `cnt`.`parent` = '".$curParent."'
  AND `tvc`.`value` > ".$curPrice."
	AND `tvc`.`tmplvarid` = '4'
	AND `cnt`.`published` = '1'
	ORDER BY `tvc`.`value` ASC
	LIMIT ".$limit."
";
                             
$res = $modx->db->query($sql);
while ($row = $modx->db->getRow($res)) {
  $idsArr[] = $row['contentid'];
} 
                                     
$items="";
if (count($idsArr) == 0) {echo ''; return;}
  $idsMore = implode(',', $idsArr); 
  $total=count($idsArr);             
  $parents=''.$curParent;  
  $tpl=file_get_contents($_SERVER['DOCUMENT_ROOT'].'/assets/cppv/TPL/T1/BODY/MiddleTovar/pohogie/ditto1.tpl');
  $tpl350=file_get_contents($_SERVER['DOCUMENT_ROOT'].'/assets/cppv/TPL/T1/BODY/MiddleTovar/pohogie/ditto350.tpl');

$winW=(int)$_POST['winW'];
$winH=(int)$_POST['winH'];

$outCarItems="";

$countItems=2;
if($winW<800){$countItems=3;}	
if($winW<768){$countItems=6;}

if($winW<350) {	
 $tpl=$tpl350;
}
$sizeItems=ceil(count($idsArr)/$countItems);

$carentSize=0;
$outCarItems.='<div class="carousel-inner text-center">'."\n";
	$outCarItems.='<div class="item active dispT">'."\n";
foreach($idsArr as $v){  $carentSize++;  
  $arr=$modx->getDocument($v);
  $TVs=$modx->getTemplateVars(array('price','catalog_item_image'),"*",$v);
  $arr["price"]=$TVs[0]["value"];
  $arr["catalog_item_image"]=$TVs[1]["value"];
  $arr["url"]= $modx->makeUrl($arr['id'],'','','full');
  
  $modx->placeholders=$arr;
  if($carentSize>$sizeItems) {
	$outCarItems.='
	  </div>
	  <div class="item dispT">
  		';
  		$carentSize=1;
  }

  if($carentSize<$sizeItems) {
		  $outCarItems.='<div class="I dispTC pdngR10">'."\n";
  }else {
   	  $outCarItems.='<div class="I dispTC">'."\n";
  }
  $outCarItems.=$modx->parseDocumentSource($tpl).'</div>';
   
}	
		$outCarItems.='</div>';
$outCarItems.='</div>';

$outCarIndicators='
  <ol class="carousel-indicators">
    <li data-target="#carousel-pohogee" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-pohogee" data-slide-to="1"></li>
  </ol>
';

$outCarControl=' 
  <a class="left carousel-control" href="#carousel-pohogee" data-slide="prev">
    <span class="fs22 glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-pohogee" data-slide="next">
    <span class="fs22 glyphicon glyphicon-chevron-right"></span>
  </a>';
echo $out.$outCarItems.$outCarControl;
?>
</div>

    

Да, адаптация добавила некоторую сложность в жизнь верстальщиков и программистов. Приходится приспосабливаться. И с этим уже ничего не поделаешь).


Комментарии 0






Разрешённые теги: <b><i><br>Добавить новый комментарий: