Personalizações OrderForm Slider

Atualmente o WHMCS 5.1.2 possui 6 OrderForm ( formulários de pedido ) cada um com sua particularidade e recursos. O post de hoje irá fornecer dicas de personalização do OrderForm Slider. O Slider utiliza uma barra deslizante para seleção dos produtos/serviços disponíveis, possibilita comercialização em várias moedas e tem um recurso interessante chamado”bolha/círculo” para destacar os detalhes dos produtos/serviços, esse recurso pode ser utilizando nos OrderForm Modern e Comparasion.Para isso basta seguir uma regra bem simples no momento do cadastramento, no item Product Description/Descrição do produto. Utilize o padrão  “Atributo : Valor“, exemplo:

Espaço em Disco: 1000MB
Banda: 5 GB
Emails: 5
Sub-domínios: 3

Resultado:

Vou demonstrar algumas personalizações:

– Efeito na barra de rolagem, abra o arquivo style.css  que está localizado na pasta /templates/orderforms/slider/ e insira no final do arquivo:

.ui-slider .ui-slider-range, .ui-slider .ui-slider-handle {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.sliderlabel {
-webkit-transition: color 0.5s ease-in-out;
-moz-transition: color 0.5s ease-in-out;
-o-transition: color 0.5s ease-in-out;
-ms-transition: color 0.5s ease-in-out;
transition: color 0.5s ease-in-out;
}

Confira um vídeo comparativo, essa dica foi obtida neste link

Outra dica, nosso parceiro Veezon utiliza no OrderForm Slider uma personalização de imagens que ao invés de descrição por texto utiliza imagens, veja vídeo demonstrativo.

No Product Description/Descrição do Produto utilize assim:

Cpanel:<img src=”images/yes.png”>
WHMCS: <img src=”images/no.png”>

Obviamente que você terá que enviar as imagens para pasta /images/ do diretório do seu WHMCS ou se preferir você pode utilizar os ícones do bootstrap.

Cpanel:<i class=”icon-ok “></i>
WHMCS:<i class=”icon-remove”></i>

 Resultado:

Gostou? Comente!