240 lines
14 KiB
Smarty
Executable File
240 lines
14 KiB
Smarty
Executable File
|
||
{capture name=path}{l s='Votre diagnostic'}{/capture}
|
||
{include file="$tpl_dir./breadcrumb.tpl"}
|
||
<link href="{$css_dir}{$page_name}.css" rel="stylesheet" type="text/css" media="all" />
|
||
<script type="text/javascript" src="{$js_dir}diagnostic.js"></script>
|
||
<div class="borderGreen auto">
|
||
{if $step<1}
|
||
<h1 class="border">[{l s='Diagnostic'}]</h1>
|
||
{include file="$tpl_dir./errors.tpl"}
|
||
<form action="{$link->getPageLink('diagnostic.php')}?step=1" class="std" method="post">
|
||
<div class="center">
|
||
<p><img src="{$img_dir}Saveria-COSTE.jpg" alt="{l s='Savéria COSTE'}" width="250"/></p>
|
||
<p><strong>{l s='Savéria COSTE'}</strong>, {l s='Docteur en Pharmacie, vous fait '}<br/>{l s='partager son expertise pour votre diagnostic de peau.'}</p>
|
||
<p>{l s='Avez-vous les bons gestes ? Les bonnes routines beauté ?'}<br/>{l s='Répondez à ces quelques questions pour avoir un'} <br/>{l s='diagnostic clair et précis.'}</p>
|
||
<div class="clear submit" style="padding-right:118px"><input type="submit" value="{l s='Démarrer le diagnostic'}"/></div>
|
||
</div>
|
||
</form>
|
||
{else if $step==7}
|
||
|
||
<script type="text/javascript" src="{$js_dir}modules/blockcart/ajax-cart-mobile.js"></script>
|
||
<link href="{$css_dir}product_list_mobile.css" rel="stylesheet" type="text/css" media="all" />
|
||
<h1 class="border">[{l s='Votre rituel beauté magique'}]</h1>
|
||
{include file="$tpl_dir./errors.tpl"}
|
||
<p>{l s='Découvrez votre rituel beauté personnalisé complètement magique !'}</p>
|
||
<form class="std" action="#">
|
||
<div class="tiroirs">
|
||
{if isset($categoryA)}{include file="./diagnostic-items.tpl" categorie=$categoryA rituel=1}{/if}
|
||
{if isset($categoryB)}{include file="./diagnostic-items.tpl" categorie=$categoryB rituel=2}{/if}
|
||
{if isset($categoryC)}{include file="./diagnostic-items.tpl" categorie=$categoryC rituel=3}{/if}
|
||
{if isset($categoryD)}{include file="./diagnostic-items.tpl" categorie=$categoryD rituel=4}{/if}
|
||
</div>
|
||
</form>
|
||
<div class="clear mobile">
|
||
{include file="./diagnostic-share.tpl"}
|
||
</div>
|
||
<form class="std" action="#">
|
||
<div class="submit bilanComplet" style="float:left;padding-left:55px">
|
||
<input type="button" class="button uppercase commanderRituel" value="{l s='Commander mon rituel magique complet'}" />
|
||
</div>
|
||
</form>
|
||
<script type="text/javascript">
|
||
{literal}
|
||
$(document).ready(function(){
|
||
$('.commanderRituel').each(function(){
|
||
$(this).css('width','auto').css('display','block');
|
||
var widthRituel=$(this).width();
|
||
var widthBtn=$(this).find('.ui-btn').width();
|
||
var paddLeftRituel=(widthRituel-widthBtn)/2;
|
||
$(this).css('float','left').css('padding-left',paddLeftRituel+'px');
|
||
});
|
||
|
||
$('.bilanComplet').css('width','auto').css('display','block');
|
||
var widthRituel=$('.tiroirs').width();
|
||
var widthBtn=$('.bilanComplet .ui-btn').width();
|
||
var paddLeftRituel=(widthRituel-widthBtn)/2;
|
||
$('.bilanComplet').css('float','left').css('padding-left',paddLeftRituel+'px');
|
||
});
|
||
{/literal}
|
||
</script>
|
||
{else}
|
||
<h1 class="border">[{l s='Diagnostic'}]</h1>
|
||
{include file="$tpl_dir./errors.tpl"}
|
||
<ul class="diagnosticMiniStep">
|
||
<li>{if $step>1}<a href="{$link->getPageLink('diagnostic.php')}?step=1">{/if}<img src="{$img_dir}diagnosticMiniStep{if $step==1}Selected{/if}.png" alt="1" />{if $step>1}</a>{/if}</li>
|
||
<li>{if $step>2}<a href="{$link->getPageLink('diagnostic.php')}?step=2">{/if}<img src="{$img_dir}diagnosticMiniStep{if $step==2}Selected{/if}.png" alt="2" />{if $step>2}</a>{/if}</li>
|
||
<li>{if $step>3}<a href="{$link->getPageLink('diagnostic.php')}?step=3">{/if}<img src="{$img_dir}diagnosticMiniStep{if $step==3}Selected{/if}.png" alt="3" />{if $step>3}</a>{/if}</li>
|
||
<li>{if $step>4}<a href="{$link->getPageLink('diagnostic.php')}?step=4">{/if}<img src="{$img_dir}diagnosticMiniStep{if $step==4}Selected{/if}.png" alt="4" />{if $step>4}</a>{/if}</li>
|
||
<li>{if $step>5}<a href="{$link->getPageLink('diagnostic.php')}?step=5">{/if}<img src="{$img_dir}diagnosticMiniStep{if $step==5}Selected{/if}.png" alt="5" />{if $step>5}</a>{/if}</li>
|
||
<li>{if $step>6}<a href="{$link->getPageLink('diagnostic.php')}?step=6">{/if}<img src="{$img_dir}diagnosticMiniStep{if $step==6}Selected{/if}.png" alt="6" />{if $step>6}</a>{/if}</li>
|
||
</ul>
|
||
<ul class="clear diagnosticSteps step{$step}">
|
||
<li class="item1{if $step==1} selected{/if}"><a href="{if $step>1}{$link->getPageLink('diagnostic.php')}?step=1{else}javascript:void(0){/if}">{l s='En savoir plus sur vous'}</a></li>
|
||
<li class="item2{if $step==2} selected{/if}"><a href="{if $step>2}{$link->getPageLink('diagnostic.php')}?step=2{else}javascript:void(0){/if}">{l s='Bilan hydratation eclat'}</a></li>
|
||
<li class="item3{if $step==3} selected{/if}"><a href="{if $step>3}{$link->getPageLink('diagnostic.php')}?step=3{else}javascript:void(0){/if}"><span>{l s='Bilan imperfections'}</span></a></li>
|
||
<li class="item4{if $step==4} selected{/if}"><a href="{if $step>4}{$link->getPageLink('diagnostic.php')}?step=4{else}javascript:void(0){/if}">{l s='Bilan anti-âge yeux'}</a></li>
|
||
<li class="item5{if $step==5} selected{/if}"><a href="{if $step>5}{$link->getPageLink('diagnostic.php')}?step=1{else}javascript:void(0){/if}"><span>{l s='Routine beauté'}</span></a></li>
|
||
<li class="item6{if $step==6} selected{/if}"><a href="{if $step>6}{$link->getPageLink('diagnostic.php')}?step=1{else}javascript:void(0){/if}"><span>{l s='Bilan corps'}</span></a></li>
|
||
</ul>
|
||
|
||
<form class="std formulaire" id="diagnostic{$step}" method="post" action="javascript:void(0)" rel="{$link->getPageLink('diagnostic.php')}?step={$step+1}" {*onsubmit="return checkDiagnostic('diagnostic{$step}','{$link->getPageLink('diagnostic.php')}?step={$step+1}')"*}>
|
||
{foreach from=$full_rep item=rep}
|
||
{if in_array($rep.id_item,$Q_a_Masquer)}
|
||
{assign var=QAMasquer value=1}
|
||
{else}
|
||
{assign var=QAMasquer value=0}
|
||
{/if}
|
||
{if $rep.id_item==5}
|
||
<p class="titre">{l s='Avez-vous des zones de brillance au niveau :'}</p>
|
||
{/if}
|
||
{if $rep.id_item==14}
|
||
{if $QAMasquer==1}
|
||
<input type="hidden" value="6" id="q{$rep.id_item}_F" name="q{$rep.id_item}" />
|
||
{else}
|
||
<div style="float:left;" class="item14 "> {* curseur à faire *}
|
||
|
||
{if $rep.id_item==5 || $rep.id_item==6}
|
||
<p class="titre diagFlecheSmall">{$rep.question}</p>
|
||
{else}
|
||
<p class="titre">{$rep.question}</p>
|
||
{/if}
|
||
<div class="radio required hidden">
|
||
{if $rep.repA!=""}<input type="radio" value="1" class="item1" id="q{$rep.id_item}_A" name="q{$rep.id_item}"{if $rep.reponse==1 || $rep.reponse==''} checked="checked"{/if} data-role="none"/>{/if}
|
||
{if $rep.repB!=""}<input type="radio" value="2" class="item2" id="q{$rep.id_item}_B" name="q{$rep.id_item}"{if $rep.reponse==2} checked="checked"{/if} data-role="none"/>{/if}
|
||
{if $rep.repC!=""}<input type="radio" value="3" class="item3" id="q{$rep.id_item}_C" name="q{$rep.id_item}"{if $rep.reponse==3} checked="checked"{/if} data-role="none" />{/if}
|
||
{if $rep.repD!=""}<input type="radio" value="4" class="item4" id="q{$rep.id_item}_D" name="q{$rep.id_item}"{if $rep.reponse==4} checked="checked"{/if} data-role="none"/>{/if}
|
||
{if $rep.repE!=""}<input type="radio" value="5" class="item5" id="q{$rep.id_item}_E" name="q{$rep.id_item}"{if $rep.reponse==5} checked="checked"{/if} data-role="none" />{/if}
|
||
<div class="clear"></div>
|
||
</div>
|
||
<div class="diagCurseurBar">
|
||
<img src="{$img_dir}diagCurseur.png" alt="1" class="item1 {if $rep.reponse==1 || $rep.reponse==''}selected{else}fade op05{/if}" />
|
||
<img src="{$img_dir}diagCurseur.png" alt="2" class="item2 {if $rep.reponse==2}selected{else}fade op05{/if}" />
|
||
<img src="{$img_dir}diagCurseur.png" alt="3" class="item3 {if $rep.reponse==3}selected{else}fade op05{/if}" />
|
||
<img src="{$img_dir}diagCurseur.png" alt="4" class="item4 {if $rep.reponse==4}selected{else}fade op05{/if}" />
|
||
<img src="{$img_dir}diagCurseur.png" alt="5" class="item5 {if $rep.reponse==5}selected{else}fade op05{/if}" />
|
||
</div>
|
||
<div class="imageGrade">
|
||
<img src="{$img_dir}grade1.png" alt="1" class="item1 {if $rep.reponse==1 || $rep.reponse==''}selected{else}fade{/if}" />
|
||
<img src="{$img_dir}grade2.png" alt="2" class="item2 {if $rep.reponse==2}selected{else}fade{/if}" />
|
||
<img src="{$img_dir}grade3.png" alt="3" class="item3 {if $rep.reponse==3}selected{else}fade{/if}" />
|
||
<img src="{$img_dir}grade4.png" alt="4" class="item4 {if $rep.reponse==4}selected{else}fade{/if}" />
|
||
<img src="{$img_dir}grade5.png" alt="5" class="item5 {if $rep.reponse==5}selected{else}fade{/if}" />
|
||
</div>
|
||
</div>
|
||
<div style="flaot:right;height:115px;width:450px"></div>
|
||
<script type="text/javascript">{literal}
|
||
$(document).ready(function(){
|
||
$('.item14 input').click(function(){
|
||
var newVal=$(this).val();
|
||
$('.imageGrade img.selected').css('z-index',2);
|
||
$('.imageGrade img.item'+newVal).fadeTo(0,0).css('z-index',4).fadeTo('fast',1,function(){
|
||
$('.imageGrade img.selected').css('z-index',1).removeClass('selected');
|
||
$(this).addClass('selected');
|
||
});
|
||
});
|
||
$('.diagCurseurBar').find('img.fade').css('opacity', '0.5');
|
||
|
||
$('.diagCurseurBar').hover(function(){
|
||
$(this).find('img.fade').fadeTo('fast',0.5);
|
||
},
|
||
function(){
|
||
$(this).find('img.fade').fadeTo('fast',0);
|
||
});
|
||
$('.diagCurseurBar img').click(function(){
|
||
$('.diagCurseurBar img').removeClass('op05');
|
||
$('.diagCurseurBar img.selected').addClass('fade').removeClass('selected').fadeTo('fast',0.5);
|
||
$(this).addClass('selected').removeClass('fade').fadeTo('fast',1);
|
||
var newVal=$(this).attr('alt');
|
||
// alert(newVal);
|
||
$('.item14 .radio input.item'+newVal).click();
|
||
});
|
||
|
||
$('.diagCurseurBar img.fade').fadeTo('fast',0);
|
||
});
|
||
|
||
{/literal}</script>
|
||
|
||
{/if}
|
||
{else}
|
||
{if $rep.id_item==12|| $rep.id_item==13}
|
||
<div style="float:right;width:450px">
|
||
{else}
|
||
<div class="clear"></div>
|
||
{/if}
|
||
{if $QAMasquer==1}
|
||
<input type="hidden" value="6" id="q{$rep.id_item}_F" name="q{$rep.id_item}" />
|
||
{else}
|
||
{if $rep.id_item==5 || $rep.id_item==6}
|
||
<p class="titre diagFlecheSmall">{$rep.question}</p>
|
||
{else}
|
||
<p class="titre">{$rep.question}</p>
|
||
{/if}
|
||
<div class="radio required radio{$rep.id_item}">
|
||
{if $rep.repA!=""}<input type="radio" value="1" id="q{$rep.id_item}_A" name="q{$rep.id_item}"{if $rep.reponse==1} checked="checked"{/if} /><label for="q{$rep.id_item}_A" class="label1">{$rep.repA}</label>{if $rep.repC!=""}<br/>{/if}{/if}
|
||
{if $rep.repB!=""}<input type="radio" value="2" id="q{$rep.id_item}_B" name="q{$rep.id_item}"{if $rep.reponse==2} checked="checked"{/if}/><label for="q{$rep.id_item}_B" class="label2">{$rep.repB}</label>{if $rep.repC!=""}<br/>{/if}
|
||
{/if}
|
||
|
||
{if $rep.repC!=""}<input type="radio" value="3" id="q{$rep.id_item}_C" name="q{$rep.id_item}"{if $rep.reponse==3} checked="checked"{/if}/><label for="q{$rep.id_item}_C" class="label3">{$rep.repC}</label>{if $rep.repD!=""}<br/>{/if}
|
||
{/if}
|
||
|
||
{if $rep.repD!=""}<input type="radio" value="4" id="q{$rep.id_item}_D" name="q{$rep.id_item}"{if $rep.reponse==4} checked="checked"{/if} /><label for="q{$rep.id_item}_D" class="label4">{$rep.repD}</label>{if $rep.repE!=""}<br/>{/if}
|
||
{/if}
|
||
{if $rep.repE!=""}<input type="radio" value="5" id="q{$rep.id_item}_E" name="q{$rep.id_item}"{if $rep.reponse==5} checked="checked"{/if}/><label for="q{$rep.id_item}_E" class="label5">{$rep.repE}</label>{/if}
|
||
<div class="clear"></div>
|
||
</div>
|
||
{/if}
|
||
{if $rep.id_item==12|| $rep.id_item==13}
|
||
</div>
|
||
{/if}
|
||
{/if}
|
||
{if $rep.texterepA!=""}<div class="hidden"><a href="#textere_q{$rep.id_item}_A" id="lien_q{$rep.id_item}_A" class="thickbox"></a><div id="textere_q{$rep.id_item}_A" class="popinDiag">{$rep.texterepA}</div></div>{/if}
|
||
{if $rep.texterepB!=""}<div class="hidden"><a href="#textere_q{$rep.id_item}_B" id="lien_q{$rep.id_item}_B" class="thickbox"></a><div id="textere_q{$rep.id_item}_B" class="popinDiag">{$rep.texterepB}</div></div>{/if}
|
||
{if $rep.texterepC!=""}<div class="hidden"><a href="#textere_q{$rep.id_item}_C" id="lien_q{$rep.id_item}_C" class="thickbox"></a><div id="textere_q{$rep.id_item}_C" class="popinDiag">{$rep.texterepC}</div></div>{/if}
|
||
{if $rep.texterepD!=""}<div class="hidden"><a href="#textere_q{$rep.id_item}_D" id="lien_q{$rep.id_item}_D" class="thickbox"></a><div id="textere_q{$rep.id_item}_D" class="popinDiag">{$rep.texterepD}</div></div>{/if}
|
||
{if $rep.texterepE!=""}<div class="hidden"><a href="#textere_q{$rep.id_item}_E" id="lien_q{$rep.id_item}_E" class="thickbox"></a><div id="textere_q{$rep.id_item}_E" class="popinDiag">{$rep.texterepE}</div></div>{/if}
|
||
|
||
{/foreach}
|
||
|
||
<input type="hidden" value="{$step+1}" name="step" />
|
||
<div class="submit">
|
||
<input type="submit" value="{l s='Suivante'}" class="uppercase button" />
|
||
{*<a href="{$link->getPageLink('diagnostic.php')}?step={$step-1}" class="uppercase button back">{l s='Précédente'}</a>*}
|
||
</div>
|
||
</form>
|
||
<script type="text/javascript">
|
||
// var idForm=$(this).attr('id');
|
||
{literal}
|
||
$(document).ready(function(){
|
||
$('#diagnostic{/literal}{$step}{literal}').submit(function() {
|
||
var idForm=$(this).attr('id');
|
||
var newRel=$(this).attr('rel');
|
||
$('#'+idForm).attr('action','javascript:void(0)');
|
||
var newError=false;
|
||
$('#'+idForm+' p,#'+idForm+' p label').removeClass('erreur');
|
||
$('#'+idForm+' .required').each(function(){
|
||
if($(this).hasClass('radio') || $(this).hasClass('checkbox')){
|
||
if($(this).find('input:checked').length<1){
|
||
newError=true;
|
||
$(this).prev().addClass('erreur');
|
||
$(this).find('label').addClass('erreur');
|
||
}
|
||
}
|
||
});
|
||
if(newError==false){
|
||
$('#'+idForm).attr('action',newRel);
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
|
||
$('.formulaire .required input').click(function(){
|
||
var newID=$(this).attr('id');
|
||
if($('#lien_'+newID).length>0)
|
||
$('#lien_'+newID).click();
|
||
});
|
||
|
||
});
|
||
{/literal}</script>
|
||
{/if}
|
||
<div class="clear"></div>
|
||
</div> |