OneStepCheckout Responsivo

Como uso bastante o OSC Brasil 6.0, tive que buscar como torná-lo responsivo, pois os temas hoje são todos responsivos.

Achei um issue no github do Deivison Arthur que ajudou, post:

https://github.com/deivisonarthur/OSC-Magento-Brasil-6-Pro/issues/220

Temos que alterar o onestep.phtml que está em:
/app/design/frontend/base/default/template/onestepcheckout/ ou na pasta do seu tema, se você copiou ele, que deve ser em:
/app/design/frontend/”seu tema”/”padrão”/template/onestepcheckout/onestep.phtml ou
/app/design/frontend/default/”tema”/template/onestepcheckout/onestep.phtml

Alterando a linha 14 trocando <div class=”col1″> por <div class=”col1 verssoes”>
Alterando a linha 21 trocando <div class=”col2″> por <div class=”col2 verssoes”>
Alterando a linha 14 trocando <div class=”col3″> por <div class=”col3 verssoes”>

o trecho do phtml vai ficar assim (# da linha abaixo não corresponde as linhas alteradas)

<div class="col-1 versoes">
    <div class="opc">
        <div class="section allow active">
            <?php echo $this->getChildHtml('address'); ?>
        </div>
    </div>
</div>
<div class="col-2 versoes">
    <div class="opc">
        <div class="section allow active">
            <div id="onestepcheckout-shipping-method-wrapper">
                <?php echo $this->getChildHtml('shippingmethod'); ?>
            </div>
            <div id="onestepcheckout-payment-method-wrapper">
                <?php echo $this->getChildHtml('paymentmethod'); ?>
            </div>
        </div>
    </div>
</div>
<div class="col-3 versoes">
    <div class="opc">
        <div class="section allow active">

Depois temos que colocar um CSS no final do arquivo do seu tema, que pode ser em:
/skin/frontend/”seu tema”/”padrão”/css/local.css  ou skin/frontend/default/”tema”/css/local.css
ou no arquivo skin.css. Em outro tema, do magentothem, tive que colocar no bootstrap.css, o seguinte estitlo:

.versoes {
    width: 32% !important;
}
@media screen and (max-width: 800px) { 
    .versoes {
 
         width: 100% !important;
 
    }
}

Usei esta solução em vários temas com sucesso.

Espero ter ajudado.

Alfredo Letti

 

Encode uri de forma errada
Tirando carrinho da tela do produto

Deixe uma resposta

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