Топики пользователя «SergeyKravtsov»

AJAX Login modx evolution

Сделал возможность AJAX-логина и регистрации для modx.
Исользован WebloginPE и jQuery

overbrand.com/yaktv/

Позволяет регистрироваться и логиниться из js-окошек.

Также перед публикацией комментария проверяет залогинен ли ты и если нет выдает js-окошко для логина.

Ниже писали что было бы интересно увидеть реализацию, показываю на примере «вход на сайт»:

1)HTML-разметка для окошка «Вход на сайт»

<div id="signup"  style="display:none" class="floating-dialog">
<form id="signup-form" method="post" class="floating-dialog-form">
<div class="form-error" id="signup-form-error"></div>
<input type="text" id="wlpeUsernameid" name="username" value="Ваш email" onclick="clearText(this);" onkeypress="clearText(this);" /> 
<input type="password" id="wlpePassword" name="password" value="Ваш пароль" onfocus="clearText(this);"/>
<p><a class="dotted" href="#" onclick="lostpassDialog();">Забув пароль</a></p>
<div id="ajax-loader" style="display:none;"><img src="assets/templates/yak/img/ajax-loader.gif"/></div>
<a class="submit_btn" href="#" onclick="parseSignup();"> ВХІД </a>

<input type="hidden"  id="wlpeLoginButton" name="service" value="Login" />
</form>
<p><b>Немає акаунту?</b> <a  href="#"  class="dotted" onclick="registerDialog();">Реєстрація</a></p>
</div>


2)JS ложим в шаблон или выносим в отдельный файлик, использует jquery UI



var login_url="[(site_url)][~24~]";// Это нельзя выносить в файл, 24 - id страницы с вызовом WebLoginPE для логина.

$.ajaxSetup({
  timeout:10000
 });

//Окошко "вход на сайт"

function signupDialog(){
 	
   $("#signup").dialog({
    title: "Вхід на сайт",  	//тайтл, заголовок окна
   });
}


//Обработчик для входа на сайт


function parseSignup(){
var form=$("#signup-form");
var form_data=form.serialize();
form.find("#ajax-loader").show();
var jqxhr = $.ajax({
  type: "POST",
  url: login_url,
  data: form_data,
  success: function(data) { 
  
var resp=$(data);
var error=resp.find("#error").text();
form.find("#ajax-loader").hide();
if(error==''||error=='undefined'){
	//if no error div
	error=resp.find("#wlpeWelcome");
	if(error!='')
	{
		 $("#signup").dialog("close");
		 alert('Вхід вже виконано!');
		 $("#before-login").hide();
		 showProfile();
	}
}
if(error.indexOf('success')!=-1){
 $("#signup").dialog("close");
 $("#before-login").hide();
 showProfile();
}
else{
  $("#signup-form-error").text(error);
}

 },
   fail:function() { alert("Помилка при вході на сайт. Спробуйте пізніше!"); form.find("#ajax-loader").hide();return false; },
   always:function() { alert("Вхід не виконано"); form.find("#ajax-loader").hide();return false; }
});
return false;
}


3)Серверная часть на странице 24 (форма логина) лежит:
[!WebLoginPE? &type=`simple` &loginFormTpl=`loginTpl` &liHomeId=`23` &loHomeId=`1` &resetTpl=`resetTpl`!]

4)Чанк loginTpl

<div id="wlpeLogin">
<div id="error">[+wlpe.message+]
</div>
	
	<form id="wlpeLoginForm" action="" method="post">
		
		<table id="authPanelTable" border="0" cellspacing="2" cellpadding="2">
		  <tr>
            <td class="td_auth"><label id="wlpeUsernameLabel" for="wlpeUsername">Логин</label></td>
			<td colspan=2>
				<input id="wlpeUsernameid" type="text" tabindex="1" name="username"/>
			</td>
          </tr>
		 
          <tr>
            <td class="td_auth_width"><label id="wlpePasswordLabel" for="wlpePassword">Пароль</label></td>
            <td colspan=2>
				<input id="wlpePassword" type="password" tabindex="2" name="password"/>
			</td>
          </tr>
         
		<tr>
          	
			<td class="td_auth"><div align="right"><input type="submit" id="wlpeLoginButton" name="service" value="Login"></div></td>
            <td></td>
			<td colspan=2><div align ="right"><input type="submit" id="wlpeReminderButton" name="service" value="Reset"></div></td>
          </tr>			  
        </table>		
		
	</form>
</div>

Нужен разработчик на modX

Добрый день!

Есть ряд проектов на modx, на которые у меня сейчас уже не хватает времени и нужен разработчик, с которым можно было бы работать по совместному созданию и поддержке этих проектов.

Условия работы: Работа удаленная.Поддержка постоянная
Бюджеты в районе 300-400 у.е. в месяц при нагрузке 30-40 часов. Нагрузка неравномерная (то больше то меньше, но всегда есть).

Что нужно от разработчика: готовность брать любые задачи в рамках разработки на modx, готовность и способность учиться, свободно и творчески мыслить, умение управлять своим временем и оперативно решать задачи, умение писать свои простые сниппеты, не бояться при необходимости дотачивать сторонние модули и т.п.

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

Пишите на почту: sergey.kravtsov (at) jarstudio.com.ua
Приветствуются разработчики из Киева.

Ускорение Wayfinder в Revolution (при большой структуре)

Делал сайт с верхним меню (js, выпадающее, содержит все страницы сайта) и боковым меню (отображает продукцию). Всего около 400 страниц с 6 уровнями иерархии.

Столкнулся с такой проблемой — даже со включенным кэшированием, Wayfinder постоянно перестраивает оба меню, в результате страница грузится около 2.68s при каждой загрузке.

Включение &cacheResults в вызове Wayfinder дало ускорение до 2.07s

Покопался в коде, понял следующее — при переходе со страницы на страницу Wayfinder заново выстраивает всю структуру и потом еще обрабатывает её, присваивая классы текущему пункту меню. Оптимизация hide sub menus описанная в инете не помогла: боковое меню стало работать быстрее, но оставалось еще верхнее меню, которое работало так же медленно.

Решил делать так: выстраивать меню целиком, сохранять его в кэше. Потом для бокового меню отдельно фильтровать скриптом и присваивать классы.

В итоге родился вот такой сниппет:


/*  Snippet WayfinderKSV 
 *  Author: Sergey Kravtsov
 *  Author email: sergey.kravtsov@jarstudio.com.ua 
*  Params: mode (to swich menu type)
*/

//Получаем текущий контекст, в принципе не обязательно, но у меня многосайтовая стуктура
$context=$modx->getOption('context_name')."_";

switch($mode) //В вызове сниппета будем указывать режим
{
case 'topmenu': //Верхнее меню
$key=$context.'wftopmenu'; //Название ключа кэша
$snippet='Wayfinder'; //Дальше идут параметры Wayfinder, без каких-то особенностей
$params=array(
   'startId' => 0,
   'outerTpl'=>'topMenuOuterTpl',
   'innerTpl'=>'topMenuInnerTpl',
   'rowTpl'=>'topMenuRowTpl',
   'level'=>4
);
break;


case 'production'://Боковое меню
$key=$context.'wfprodmenu';//Название ключа кэша
$snippet='Wayfinder'; //Дальше идут параметры Wayfinder
$params=array(
   'startId' => $modx->getOption('product_id'), 
   'hereClass'=>' ', //Здесь указываем пробелы, чтобы Wayfinder не добавлял классов
   'selfClass'=>' ', //Здесь указываем пробелы, чтобы Wayfinder не добавлял классов
   'rowTpl'=>'sideMenuRowTpl',
   'rowIdPrefix'=>'sm_', //Это нужно для фильтрации ниже
   'levelClass'=>'level_', //Это нужно для фильтрации ниже
   'outerClass'=>'prodmenu',
   'level'=>4
);
break;
}

$cached_wf = $modx->cacheManager->get($key); //Получаем сохраненную версию из кэша
if(!$cached_wf ) //Если не найдено
{
$wf= $modx->runSnippet($snippet,$params); //Запускаем Wayfinder
$cacheres=$modx->cacheManager->set($key,$wf,7200); //Кэшируем то что он выдаст
}
else $wf=$cached_wf; 


if($mode=='production' ) //Если боковое меню, фильтруем
{
 $id=$modx->resource->get('id');
 $parents=$modx->getParentIds($id); 
 $root_parents=array(0,$modx->getOption('product_id')); 
 $parents = array_diff($parents, $root_parents); 

 $find=array();
 $replace=array();

 $i=0;
 foreach($parents as $p){
   $find[$i]='id="sm_'.$p.'" class="';
   $replace[$i]=$find[$i].' current '; //Всем "родительских" узлов в меню ставим класс 'current'
   $i++;
   }
  $find[$i]='id="sm_'.$id.'" class="';
   $replace[$i]=$find[$i].' active  current '; //Текущему документу ставим 'active  current'

 
 $wf=str_replace($find,$replace,$wf);
}

echo $wf; 


Теперь с помощью CSS спрячем всё лишнее:


#sidemenu-box ul.prodmenu li.level_2,
#sidemenu-box ul.prodmenu li.level_3,
#sidemenu-box ul.prodmenu li.level_4,
#sidemenu-box ul.prodmenu li.level_5,
#sidemenu-box ul.prodmenu li.level_6{
	display:none;
}

#sidemenu-box ul.prodmenu li.current ul li.level_2,
#sidemenu-box ul.prodmenu li.current ul li.current ul li.level_3,
#sidemenu-box ul.prodmenu li.current ul li.current ul li.current ul li.level_3,
#sidemenu-box ul.prodmenu li.current ul li.current ul li.current ul li.current ul li.level_4,
#sidemenu-box ul.prodmenu li.current ul li.current ul li.current ul li.current ul li.current ul li.level_5{
	display:inherit;
}


Сам вызов сниппета такой:

[[WayfinderKSV? &mode=`production` ]]


Результаты работы такие (время загрузки страницы):
1. Без фильтрации (верхнее меню) — 707s
2. С фильтрацией (боковое меню) 1.2s

Исходное время 2.68s, то есть достигнуто ускорение минимум в 2 раза.

Метод, возможно, не самый красивый, но:

1. Удобный, т.к. не требует ломать чужие сниппеты
2. Может быть применен к любым другим сниппетам.