|
1) Можно создать для модуля users экстраполе к примеру PHP.usr.profile.user_hide_hints - радиобокс Не показывать мне подсказки. По умолчанию ноль, если решает юзер что ему они НЕ нужны - то 1.
Options for select, radio and checklistbox (comma sep.) 0,1
Default value 0
2) Можно украисть стандартный радио
- Base HTML в настройках экстраполя -
<label><input type="radio" name="{$name}" value="{$value}"{$checked} /><span><label></label></span></label>
- В самом TPL получить такую конструкцию
<span class="switchradio-light switch-blue"><label><input type="radio" name="ruserhide_hints" value="0" checked="checked"><span><label></label></span></label> <label><input type="radio" name="ruserhide_hints" value="1"><span><label></label></span></label></span>
У меня в users.profile.tpl так
<div class="row _padding-bottom-20">
<div class="col-md-4 col-lg-3">
<label class="form-control-label">{USERS_PROFILE_HIDE_HINTS_TITLE}:</label>
</div>
<div class="col-md-8 col-lg-9">
<span class="switchradio-light switch-blue">{USERS_PROFILE_HIDE_HINTS}</span>
</div>
</div>
- В css такая у меня простыня (для разных типов и цветов радиобоксов)
.switchradio-light,
.switchradio-light input,
.switchradio-light label input + span,
.switchradio-light label input + span label,
.switchradio-light label input:checked + span label,
.switchradio-light label input[value="yes"]:checked + span,
.switchradio-light label input[value="no"]:checked + span,
.switchradio-light label input[value="1"]:checked + span,
.switchradio-light label input[value="0"]:checked + span,
.switchradio-light label input[value="full"]:checked + span,
.switchradio-light label input[value="gallery"]:checked + span{
position: absolute;
vertical-align: middle;
width:30px;
height:11px;
cursor: pointer;
font-size: 11px;
}
.switchradio-light label input + span label{
overflow: hidden;
line-height:11px;
text-align: center;
}
.switchradio-light,
.switchradio-light input,
.switchradio-light label input + span{
position: absolute;
}
.switchradio-light label input + span{
top:0px;
}
.switchradio-light{
position:relative;
display:inline-block;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.switchradio-light input{
top:-4px; left:0;
opacity: 0;
z-index:1;
}
.switchradio-light input:checked{
z-index:0;
}
.switchradio-light label input[value="yes"] + span label, .switchradio-light label input[value="1"] + span label, .switchradio-light label input[value="full"] + span label{
text-indent: -14px;
color:white;
}
.switchradio-light label input[value="no"] + span label, .switchradio-light label input[value="0"] + span label, .switchradio-light label input[value="gallery"] + span label{
text-indent: 14px;
color: rgba(219,30,6,1);
}
.switchradio-light label input[value="yes"] + span, .switchradio-light label input[value="1"] + span, .switchradio-light label input[value="full"] + span{
background: #eeeeee;
}
.switchradio-light.switch-blue label input[value="yes"] + span, .switchradio-light.switch-blue label input[value="1"] + span, .switchradio-light.switch-blue label input[value="full"] + span{
background: #eeeeee;
}
.switchradio-light label input[value="no"] + span, .switchradio-light label input[value="0"] + span, .switchradio-light label input[value="gallery"] + span{
background-color: rgba(221, 221, 221, 0.51);
}
.switchradio-light label input[value="no"]:checked + span, .switchradio-light label input[value="0"]:checked + span, .switchradio-light label input[value="gallery"]:checked + span{
left:0px;
}
.switchradio-light label input[value="yes"]:checked + span, .switchradio-light label input[value="1"]:checked + span, .switchradio-light label input[value="full"]:checked + span{
right:0px;
}
.switchradio-light label input + span label{
width:0px;
}
.switchradio-light label input + span{
width:8px;
}
.switchradio-light label input[value="no"] + span, .switchradio-light label input[value="0"] + span, .switchradio-light label input[value="gallery"] + span{
left:22px;
}
.switchradio-light label input[value="yes"] + span, .switchradio-light label input[value="1"] + span, .switchradio-light label input[value="full"] + span{
right:22px;
}
.switchradio-light label input + span label,
.switchradio-light label input:checked + span label,
.switchradio-light label input + span,
.switchradio-light label input:checked + span{
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.switchradio-light label input[ value="no"] + span:after, .switchradio-light label input[ value="0"] + span:after, .switchradio-light label input[ value="gallery"] + span:after {
position:absolute;
top:0px;
left:0px;
content: "";
position: absolute;
display: inline-block;
width: 15px;
height: 15px;
background-color: #CD2122;
border-radius: 15px;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -5px;
top: -2px;
transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease; content:'';
z-index: 1000;
}
.switchradio-light.switch-blue label input[ value="no"] + span:after, .switchradio-light.switch-blue label input[ value="0"] + span:after, .switchradio-light.switch-blue label input[ value="gallery"] + span:after {
background-color: #3b99fc;
}
.switchradio-light label input[ value="0"] + span:after:active:after, .switchradio-light label input[ value="no"] + span:after:active:after, .switchradio-light label input[ value="gallery"] + span:after:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08); }
.switchradio-light,
.switchradio-light input,
.switchradio-light label input + span,
.switchradio-light label input[ value="0"] + span:after, .switchradio-light.swbox label input[ value="0"] + span:after, .switchradio-light label input[ value="no"] + span:after, .switchradio-light.swbox label input[ value="no"] + span:after, .switchradio-light label input[ value="gallery"] + span:after, .switchradio-light.swbox label input[ value="gallery"] + span:after{
border-radius:30px;
}
Можно переписывать как хочется.
Я создал себе сколько нужно. Как это выглядит

Или в редактировании страницы

- У вас есть красивый чекбокс в профиле с возможность выбора показывать юзерам подсказки или нет. Дальше как это использовать.
- В HEАDER шаблона
<!-- IF {PHP.usr.profile.user_hide_hints} == '1' --><!-- IF {PHP.usr.profile.user_logcount} >= '100' -->
<style media="screen" type="text/css">
._old_user {display: none !important;}
</style>
<!-- ENDIF --><!-- ENDIF -->
В любом месте стиль _old_user для включивших не показывать или уже 100 раз зашедших на сайт людей выключит нужный только новичкам блок. То есть выключит совсем без возможности его увидеть.
- Если надо просто скрыть но дать возможность посмотреть если надо - то так
В любом месте
<a class="_big_hint" data-toggle="collapse" href="#collapseHintmarket" aria-expanded="false" aria-controls="collapseHintmarket" id="collapseHintmarketToggle">Показать "как это работает" - то есть подсказку</a>
<div class="_padding-bottom-30 bd-example collapse <!-- IF {PHP.usr.profile.user_hide_hints} != '1' --><!-- IF {PHP.usr.profile.user_logcount} <= '100' -->show<!-- ENDIF --><!-- ENDIF -->" id="collapseHintmarket">
Тут сама подсказка или полезная информация
</div>
Это для стандартного коллапса бутстрапа - если вы или выбрали в профиле не показывать или более 100 раз зашли - то будет скрыт контент и ссылка с его показыванием видна.
Для новичков с показом подсказок - виден контент сразу. Как это выглядит
Это скрытый контент

Это открытый контент - там будет карусель сос лайдами - как работает магазин (когда нарисуют слайды))))

- Дальше - больше. Прямо в том месте где есть скрывающийся блок можно так
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
if($.cookie('collapseHintmarket') === 'on')
$('#collapseHintmarket').collapse('hide');
$('#collapseHintmarketToggle').click(function() {
// Toggle cookie value
if($.cookie('collapseHintmarket') === 'on')
$.cookie('collapseHintmarket', 'off');
else
$.cookie('collapseHintmarket', 'on');
});
});
</script>
То есть у нас есть куки collapseHintmarket которой по умолчанию нету - и контент будет показан (если условия выше PHP.usr.profile.user_hide_hints и PHP.usr.profile.user_logcount не противоречат.)
Но нажав на кнопку с id="collapseHintmarketToggle" мы не только скроем контент но и запишем куку в значение противоположное тому что есть. Если в 1 раз скрыли контент то кука станет on - и при следующем открытии этой страницы контент БУДЕТ СКРЫТ НЕ СМОТРЯ НА условия выше PHP.usr.profile.user_hide_hints и PHP.usr.profile.user_logcount и что бы его опять открыть опять надо нажать на
<a class="_big_hint" data-toggle="collapse" href="#collapseHintmarket" aria-expanded="false" aria-controls="collapseHintmarket" id="collapseHintmarketToggle">Показать "как это работает" - то есть подсказку</a>
|