Como deixar o Layout Responsivo no One Step Checkout 6 Brasil

admin Sem categoria

Por padrão o excelente checkout criado pela INOVARTI não é responsivo. Mas a funcionalidade é razoavelmente fácil de ser implementada. Veja aqui um passo a passo de Como Deixar o Layout Responsivo no One Step Checkout 6 Brasil.

Passo 1: Adicionando a Classe CSS no seu arquivo do Checkout

  • Faça o Backup Completo de Sua Loja Magento
  • Edite o arquivo: /app/design/frontend/base/default/template/onestepcheckout/onestep.phtml
  • Adicione ao arquivo onestep.phtml a classe versões conforme abaixo:
  • Na linha 14 substitua:
    <div class=”col-1″>
    Por:  <div class=”col-1 versoes”>
  • Na linha 21 substitua:
    <div class=”col-2″>
    Por:  <div class=”col-2 versoes”>
  • Na linha 33 substitua:
    <div class=”col-3″>
    Por:  <div class=”col-3 versoes”>

Passo 2: Adicionando o estilo a sua Classe

  • Adicione ao final do seu arquivo /skin/frontend/SEU_TEMA/SEU_TEMA_PADRAO/css/local.css o estilo:
.versoes {
    width: 32% !important;
}
@media screen and (max-width: 800px) { 
    .versoes {

         width: 100% !important;

    }
}

O tutorial foi testado com sucesso em alguns dos principais temas Magento. No entanto, pode ser necessário alterar o percentual da classe .versoes. Sugerimos que teste com 32%, caso tenha problemas teste com percentuais menores até chegar ao ideal para sua loja.

Share This :

About admin

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *