Personalizações Checkout

Por
Edvan
-
48

As formas de personalização do WHMCS são ilimitadas, é possível alterar o que bem desejar: cores, textos, imagens e etc… Basta abrir os arquivos de templates através de um editor HTML e alterar! Existe dezenas de softwares gratuitos confira aqui. Você também pode editar através de editores ONLINE, vou citar 2 exemplos ONLINE um básico: htmledit e um avançado Online-HTML-Editor.org

Neste post vou citar 2 exemplos práticos de personalização.

1) Velha conhecida Imagens formas de pagamento já publicado aqui e com a seguinte atualização:

{foreach key=num item=gateway from=$gateways}
<div style=”width:230px; height:60px; text-align:center; padding-bottom:30px; float:left;”>

<input type=”radio” name=”paymentmethod” value=”{$gateway.sysname}” id=”pgbtn{$num}”{if $selectedgateway eq $gateway.sysname} checked{/if} /><label for=”pgbtn{$num}”>{$gateway.name}<br />
{if $gateway.sysname}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img align=”center” src=”images/{$gateway.sysname}.gif” />
{/if}
</label>
</div>{/foreach}

Resultado:

Formas de Pagamento Centralizado
Dica extraída do fórum da HostDime e desenvolvida pela Patty.

2) Termos de Serviços

Se no seu WHMCS em General Settings, Ordering, a opção Enable TOS Acceptance esteja ativa irá surgir no checkout do pedido a  imagem abaixo:

TOS

Aonde o cliente obrigatoriamente terá que marcar a caixa informando que leu os Termos de Serviço ( Terms of Service URL cadastrado no seu WHMCS abaixo da opção Enable TOS Acceptance ). Ocorre um inconveniente, o cliente nem sempre clica em Termos de Serviço. Através do fórum oficial da WHMCS encontrei um post ensinando a personalizar de forma bem clara a exibição do termos na página.

Primeiro passo é saber qual ordeform está ativo no seu WHMCS na aba Ordering opção Default Order Form Template veja qual opção está marcada. Em seguida acesse seu FTP, va na pasta /seuwhmcs/templates/orderforms/_seu_orderform/ e baixe o arquivo viewcart.tpl localize o código:

{if $accepttos}
<p align=”center”>
<input type=”checkbox” name=”accepttos” id=”accepttos” />
<label for=”accepttos”>{$LANG.ordertosagreement} <a href=”{$tosurl}” target=”_blank”>{$LANG.ordertos}</a></label>
<p>
{/if}

Substitua por:

{if $accepttos}
<p align=”center”>
<textarea rows=”4″ style=”width:75%” readonly=”readonly”>
***INSIRA AQUI OS TERMOS E CONDIÇÕES.***
</textarea>

</p><p align=”center”>
<input type=”checkbox” name=”accepttos” id=”accepttos” />
<label for=”accepttos”>{$LANG.ordertosagreement} {$LANG.ordertos} acima.</label>
</p> {/if}

Resultado:

Termos - Caixa

Já possui os termos e serviços formatado em HTML? Então utilize o código abaixo:

<center><div style=”border:1px black solid; width:600px; height:200px; overflow:auto;”>
{include file=’/home/usuario/www/termos.html’}
<p align=”center”><input type=”checkbox” name=”accepttos” id=”accepttos” /> <labelfor=”accepttos”>{$LANG.ordertosagreement} {$LANG.ordertos} acima.
</label><p></div></center>

Observação o {include file} não aceita http, você precisa digitar o caminho absoluto, usuario = seu usuário cpanel.

Resultado:

Termos - DIVGostou? Então comente!

Sucesso!

ARTIGOS RELACIONADOSMais do autor

48 COMENTÁRIOS

  4. Parabéns pelo artigo Edvan!

    E obrigado pelas dicas.

    Ainda estou apanhando bastante aqui pra fazer as personalização, mais uma hora eu consigo.

    Valew.

    Abraço.

  19. Edvan, como que se faz para adicionar mais módulos de payment gateway igual ao Bank Transfer? Gostaria de deixar separados por banco, porque tudo junto fica muita informação. Obrigado desde já.

  20. Edvan, como que se faz para adicionar mais módulos de payment gateway igual ao Bank Transfer? Gostaria de deixar separados por banco, porque tudo junto fica muita informação. Obrigado desde já.

  23. Pequena Observação:
    {if $accepttos} 
     
       
      {$LANG.ordertosagreement} {$LANG.ordertos} 
     
    {/if}

    Nofinal do código esta assim

    {/if}

    O correto é:

    {/if}

    Pois esta encerrando o código inicial e não começando outro. Caso o de alguém tenha dado algum errinho poderia ser isso.
    =)

  24. Pequena Observação:
    {if $accepttos} 

     
       
       

     
    {/if}

    Nofinal do código esta assim

    {/if}

    O correto é:

    {/if}

    Pois esta encerrando o código inicial e não começando outro. Caso o de alguém tenha dado algum errinho poderia ser isso.
    =)

  25. O código como esta, está colocando o Eu li e concordo…. Dentro da caixa de texto do contrato ou termos. Para tirar eu apenas coloquei o código da confirmação fora do
    Assim:

      {if $accepttos} {include file=’/home/usuario/www/termos.html’}  {$LANG.ordertosagreement} {$LANG.ordertos} acima. {/if}

    Se o de alguém também deu o erro é só alterar para esse que muda. (OBS: Comigo funcionou )

  26. O código como esta, está colocando o Eu li e concordo…. Dentro da caixa de texto do contrato ou termos. Para tirar eu apenas coloquei o código da confirmação fora do

    Assim:

      {if $accepttos}

     {include file=’/home/usuario/www/termos.html’} 

    {$LANG.ordertosagreement} {$LANG.ordertos} acima. 

    {/if}

    Se o de alguém também deu o erro é só alterar para esse que muda. (OBS: Comigo funcionou )

  31. Edvan, excelente post vou usar aqui. Agora deixa eu te fazer uma pergunta: Tem como fazer um termo de serviço diferente para cada serviço ou produto?

    Abs

      • Edvan, olá
        Parabéns pelo trabalho e por ser referência e fonte de informação no assunto.
        Gostaria muito de sua ajuda para conseguir exatamente o que o colega queria, pois no meu caso termos e condições globais não funcionaria, por serem produtos muito distintos.
        Pode me dar uma noção de como individualizar os termos para produtos diferentes.
        já criei modelos individuais mais a programação em algum lugar busca o viewcart.tpl do modelo padrão.
        Aguma dica de como conseguir isso??

  32. Edvan, excelente post vou usar aqui. Agora deixa eu te fazer uma pergunta: Tem como fazer um termo de serviço diferente para cada serviço ou produto?

    Abs

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here