Konfiguracja widoku responsywnego w sklepie

[TimonP]

Chciałbym zmienić kolejność wyświetlanych modułów w sklepie w wersji responsywnej.

Obecnie otwierając stronę na telefonie w pierwszej kolejności wyświetla się lewa kolumna następnie kategorie i produkty.

Chciałbym to odwrócić aby wcześniej wyświetlały  się kategorie i produkty  a następnie lewa kolumna.

 

[atomek]

Przenieś lewą kolumnę (#left_column) do pliku footer.tpl, po zamknięciu diva #center_column.

dla #center_column w css ustaw float: right;

PS 1.6

 

[TimonP]

Z header.tpl przeniosłem coś takiego

<div id="slider_row" class="row">
                        {capture name='displayTopColumn'}{hook h='displayTopColumn'}{/capture}
                        {if $smarty.capture.displayTopColumn}
                            <div id="top_column" class="center_column col-xs-12 col-sm-12">{$smarty.capture.displayTopColumn}</div>
                        {/if}
                    </div>
                    <div class="row">
                        {if isset($left_column_size) && !empty($left_column_size)}
                        <div id="left_column" class="column col-xs-12 col-sm-{$left_column_size|intval}">{$HOOK_LEFT_COLUMN}</div>
                        {/if}
                        {if isset($left_column_size) && isset($right_column_size)}{assign var='cols' value=(12 - $left_column_size - $right_column_size)}{else}{assign var='cols' value=12}{/if}
                        <div id="center_column" class="center_column col-xs-12 col-sm-{$cols|intval}">

 

footer.tpl

(...)
		</div><!-- #center_column -->
               
               <div id="slider_row" class="row">
						{capture name='displayTopColumn'}{hook h='displayTopColumn'}{/capture}
						{if $smarty.capture.displayTopColumn}
							<div id="top_column" class="center_column col-xs-12 col-sm-12">{$smarty.capture.displayTopColumn}</div>
						{/if}
					</div>
					<div class="row">
						{if isset($left_column_size) && !empty($left_column_size)}
						<div id="left_column" class="column col-xs-12 col-sm-{$left_column_size|intval}">{$HOOK_LEFT_COLUMN}</div>
						{/if}
						{if isset($left_column_size) && isset($right_column_size)}{assign var='cols' value=(12 - $left_column_size - $right_column_size)}{else}{assign var='cols' value=12}{/if}
						<div id="center_column" class="center_column col-xs-12 col-sm-{$cols|intval}">
                  
					{if isset($right_column_size) && !empty($right_column_size)}
						<div id="right_column" class="col-xs-12 col-sm-{$right_column_size|intval} column">{$HOOK_RIGHT_COLUMN}</div>
					{/if}
					</div><!-- .row -->
				</div><!-- #columns -->
			</div><!-- .columns-container -->
(...)

 

W którym miejscu przemieścić środkową kolumnę float:right;

Szukałem ale kolumna nie chce się przesunąć.

[atomek]

Z pliku header.tpl przenieś kod:

{if isset($left_column_size) && !empty($left_column_size)}
    <div id="left_column" class="column col-xs-12 col-sm-{$left_column_size|intval}">{$HOOK_LEFT_COLUMN}</div>
{/if}

do pliku footer.tpl

umieść go przed znacznikiem

</div><!-- .row -->

 

do arkusza css (np. global.css) dodaj kod:

@media (min-width: 768px) {
    #center_column {
        float: right;
    
    }

}

podobny efekt bez przerabiania szablonu możesz uzyskać przenosząc wszystkie moduły z kolumny lewej do prawej - lewą kolumnę musisz w tym przypadku wyłączyć, prawą włączyć,

 

do arkusza css dodaj kod:

@media (min-width: 768px) {
    #center_column {
        float: right;
    }
    
    
    #right_column {
        float: left;
    }
    
    

}

 

Edited December 7, 2017 by atomek (see edit history)

[TimonP]

Dzięki

Zamiast dodawania nowego kodu zmieniłem obecny i dodałem float: right;

 .col-sm-9 {
    width: 75%;
    float: right; }

 

[endriu107]

Nie powinno się edytować klas bootstrapa lepiej było dodać pull-right do tpl.

[TimonP]

pull-right do tpl

Czyli??

To co napisał atomek ?

 @media (min-width: 768px) {
    #center_column {
        float: right;
    
    }

} 

 

Edited December 8, 2017 by TimonP (see edit history)

[endriu107]

Zapoznaj się z bootstrapem on ma zdefiniowane klasy które można wykorzystać w tym przypadku jest klasa pull-right.