Категории

Регистрация и авторизация в popup окнах

Регистрация и авторизация в popup окнах

Открыть index.html вашего шаблона и найти

{config_load file="$language/lang.conf" section="index"}

ниже вставить

Это не обязательно. Добавляет затемнение при открытие окна.

В самый низ шаблона добавить

{if !$smarty.session.customer_id}
<div class="boxes">
<div id="modal_login" class="window">
<a href="#" class="close-modal">Close</a>
{$box_LOGIN}
</div>
</div>
<div class="boxes">
<div id="modal_register" class="window">
<a href="#" class="close-modal">Close</a>
{$box_REGISTER}
</div>
</div>
{/if}

удалив при этом {$box_LOGIN} в другом месте шаблона. Или можете оставить только код для формы регистрации, а вход оставить как есть.

В нужное место вставить

<a href="create_account.php" rel="#modal_register" name="modal">Зарегистрируйтесь</a>
или
<a href="{$login}" rel="#modal_login" name="modal">Войдите</a>

в style.css шаблона вставить

a.close-modal {position:absolute;top:15px;right:15px;display:block;width:16px;height:16px;float:left;text-indent:-30000px;background: url(img/close.png) no-repeat;}
#mask {position:absolute;z-index:9000;display:none;background-color:#000;}
.boxes .window {position:absolute;width:400px;display:none;z-index:9999;background: white;-webkit-box-shadow: 0px 0px 15px #222;-moz-box-shadow: 0px 0px 15px #222;box-shadow: 0px 0px 15px #222;color: #333;padding: 15px;background: white;overflow: hidden;zoom: 1;}
.boxes .window h3 {margin-bottom:20px;color: #000;font-size:22px;}

.box-login-auth {float:left;font-size:1.2em;padding:10px 0px 0 20px;}
.box-login-auth li {padding:0 0 0 0px;}
.login-box-form {}
.login-box-form li {padding:4px 0 5px 0;border-bottom:1px solid #D7E3EB;}
.login-box-form li.last {padding:4px 0 5px 0;border-bottom:none;}
.login-box-form li .Requirement {float:left;color:#ff0000;font-size:0.9em;display:block;}
.login-box-form li label {float:left;margin:0 0 0 4px;width:140px;color: #5D7183;line-height: 20px;}
.login-box-form li.lbf-input-text input {float:left;width:240px;height:20px;line-height:20px;background: #F2F5F8;padding: 2px;color: black;border: 1px solid #D7E3EB;box-shadow: 0 2px 2px #e8eef4 inset;}
.login-box-form li.item-radio radio {float:left;}
.login-box-form li.item-select select {float:left;width:246px;padding:2px 5px 2px 5px;height:23px;line-height:23px;background: #F2F5F8;padding: 2px;color: black;border: 1px solid #D7E3EB;box-shadow: 0 2px 2px #e8eef4 inset;}

Стили скорее всего нужно будет править под себя. Тут делалось на скорую руку и не факт что корректно будет работать.

В файл themes\шаблон\javascript\general.js.php

Добавить
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function(e)
{
e.preventDefault();
var id = $(this).attr('rel');
var maskHeight = $(document).height();
var maskWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight,'opacity':'0.5'});
$('#mask').fadeIn(700);

var winH = $(window).height();
var winW = $(window).width();

$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(700);
});

$('.window .close-modal').click(function (e)
{
e.preventDefault();
$('#mask, .window').hide();
});

$('#mask').click(function ()
{
$(this).hide();
$('.window').hide();
});
});
</script>

В файл themes\шаблон\source\boxes.php добавить

require(DIR_WS_BOXES . 'register.php');

Закачать файлы из архива в папку своего шаблона в соответствии со структурой.

Ну и конечно нужен jQuery для корректной работы.
Пример на картинке ниже

спасибо!!!!!!!!

Че-то не работает у меня:(

информативно!

Ошибок никаких не вылетает, просто не работает:)

ошибки скорее всего в JS. нужно смотреть сайт.

ясно, спс, буду копать дальше

отличная штука, возьму себе на вооружение.

NeBox, как всегда Спасибо!!!

у меня вот такой вопрос возник по другому варианту использования данного по-апа.
есть такой сайт http://reima.fi/ru/collection-ru/outerwear-ru/overalls-ru так вот хочу попробовать сделать показ карточки товара как на этом сайте.

хочу у профи узнать вообще возможно ли это на shopos сделать, если да, то на что нужно обратить внимание при подключении pop-up?

еще один вопрос в догонку. на этом сайте когда смотришь товар, там есть иконки при наведении на которые всплывает подсказка, подскажите как это можно реализовать в shopos. Думаю это через атрибуты товара можно сделать, но не уверен что будет работать.

1 - http://www.shopos.ru/forum/index.php?topic=5295.0
2 - tooltip - в гугле найдете кучу скриптов для вывода всплывающих подсказок.

NeBox, спасибо.

Источник