Автор Тема: Блок Категорий в мобильной версии  (Прочитано 81 раз)

15 Июля 2016, 10:28:26
  • Новичок
  • *
  • Сообщений: 13
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Здравствуйте! Стоит задача, что бы на маленьких экранах Блок Категорий не опускался вниз под контент вместе со всей левой колонкой, а оставался наверху (перед контентом страницы). Ну или весь сайтбар был сверху (так может быть даже лучше)...
Не придумал ничего умнее как добавить этот блок еще и в позицию "displayTop" и скрывать/отображать в зависимости от ширины экрана. Самой этой позиции для этого модуля не было, поэтому в файл blockcategories.php добавил: !$this->registerHook('displayTop') || и
public function hookdisplayTop($params)
{
return $this->hookLeftColumn($params);
}
Категории стали отображаться, но в "развернутом" виде и "свернуть" тоже не получается... Догадываюсь, что дело видимо в скриптах js, но разобраться не получается...
 
Если можно было бы просто как-то сделать отображение левой колонки над контентом  мобильной версии - было бы еще лучше... )
15 Июля 2016, 11:26:02
Ответ #1
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 85953
  • Репутация: +25399/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Это не хуками менять нужно, а стилями. Дефолтная тема построена на bootsrap, поэтому можно применять готовые классы bootsrap. Можно задать блоку абсолютное позиционирование. При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера.
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { /* создайте новые правила стилей для блока категорий */ }
15 Июля 2016, 13:35:21
Ответ #2
  • Новичок
  • *
  • Сообщений: 13
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
думал об этом... но разве тогда (при абсолютном позиционировании) не нужно делать отступы для этого блока, что бы он не накладывался на другие элементы, к тому же он должен быть "разворачивающимся" - как-то не "аккуратненько" получается )
15 Июля 2016, 14:11:56
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 2174
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
Если хочешь менять вывод модулей для телефонов, делай отдельную мобильную тему.
15 Июля 2016, 21:52:11
Ответ #4
  • Новичок
  • *
  • Сообщений: 13
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
ну как так?! там ведь просто где-то в файлах нужно поменять очередность блоков (это я про сайдбар перед контентом)?!...... просто я в prestashop пока ни бум-бум... (((
15 Июля 2016, 22:24:08
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 1195
  • Репутация: +28/-1
  • Сообщество PrestaShop
    • Просмотр профиля
Очередность блоков в 2 основных шаблонах header.tpl и footer.tpl
15 Июля 2016, 23:00:00
Ответ #6
  • Новичок
  • *
  • Сообщений: 13
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Цитировать
Очередность блоков в 2 основных шаблонах header.tpl и footer.tpl
да не может быть такого!... я с Prestashop раньше не сталкивался, но с другими CMS работал )) и знаю что такое header и footer ))
15 Июля 2016, 23:11:27
Ответ #7
  • Новичок
  • *
  • Сообщений: 13
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
в том же wordpress я бы даже и не спрашивал - потому что знаю что где искать... в Prestshop похоже мало кто у нас разбирается в России (жалко)   :(
16 Июля 2016, 11:23:31
Ответ #8
  • Партнер
  • Ветеран
  • ****
  • Сообщений: 22094
  • Репутация: +17108/-1
  • Разработка веб-сайтов и веб-программирование
    • Просмотр профиля
Очередность блоков в 2 основных шаблонах header.tpl и footer.tpl
Вам правильно подсказали где сформирована основная структура. В этих файлах основная сетка. Остальное подключается хуками.

да не может быть такого!... я с Prestashop раньше не сталкивался, но с другими CMS работал )) и знаю что такое header и footer ))
Вижу, что не знаете. Это не html, а название шаблонов для лучшего понимая. Знали бы хотя бы html, поняли.

в Prestshop похоже мало кто у нас разбирается в России (жалко)   :(
За Россию обидно  :)

Интернет-магазин под ключ.
Какой выбрать движок для интернет магазина ?
Какой движок лучше ?
Magento или Prestashop ?
Решение всех Ваших вопросов в создании Интернет-магазина.
16 Июля 2016, 13:09:02
Ответ #9
  • Новичок
  • *
  • Сообщений: 13
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо! Извините, если был не прав про хедер и футер. Сейчас посмотрю.
16 Июля 2016, 13:54:42
Ответ #10
  • Новичок
  • *
  • Сообщений: 13
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Цитировать
Вам правильно подсказали где сформирована основная структура. В этих файлах основная сетка. Остальное подключается хуками.
Да, абсолютно верно - вся структура в файлах header.tpl и footer.tpl, еще раз приношу свои извинения Mr.Sen.
Как бы теперь еще со всем этим разобраться?  :-\
Я правильно понимаю, что начало div для левой колонки прописано в хедере, а окончание в футере? что-то опять запутался... ((
16 Июля 2016, 14:08:05
Ответ #11
  • Ветеран
  • *****
  • Сообщений: 13147
  • Репутация: +14553/-0
  • Сообщество PrestaShop
    • Просмотр профиля
http://doc.prestashop.com/display/PS16/Laying+the+Theme%27s+Foundations
Про то как устроенна тема prestashop, описание шаблонов.

Левая колонка находится в header.tpl
{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}
16 Июля 2016, 14:17:41
Ответ #12
  • Новичок
  • *
  • Сообщений: 13
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
http://doc.prestashop.com/display/PS16/Laying+the+Theme%27s+Foundations
Про то как устроенна тема prestashop, описание шаблонов.

Левая колонка находится в header.tpl
{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}
У меня тема не стандартная стоит
header.tpl
<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="{$language_code|escape:'html':'UTF-8'}"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="{$language_code|escape:'html':'UTF-8'}"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="{$language_code|escape:'html':'UTF-8'}"><![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="{$language_code|escape:'html':'UTF-8'}"><![endif]-->
<html lang="{$language_code|escape:'html':'UTF-8'}">
<head>
<meta charset="utf-8" />
<title>{$meta_title|escape:'html':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
<meta name="description" content="{$meta_description|escape:'html':'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
<meta name="keywords" content="{$meta_keywords|escape:'html':'UTF-8'}" />
{/if}
<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
<meta name="viewport" content="width=device-width, minimum-scale=0.25, maximum-scale=1.0, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link rel="stylesheet" href="{$css_uri}" media="{$media}" />
{/foreach}
{/if}
{if isset($js_defer) && !$js_defer && isset($js_files) && isset($js_def)}
{$js_def}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri|escape:'html':'UTF-8'}"></script>
{/foreach}
{/if}
{$HOOK_HEADER}
<link rel="stylesheet" href="http{if Tools::usingSecureMode()}s{/if}://fonts.googleapis.com/css?family=Open+Sans:300,700,600&amp;subset=latin,latin-ext,cyrillic-ext" type="text/css" media="all" />
<!--[if IE 8]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
{if (($hide_left_column || $hide_right_column) && ($hide_left_column !='true' || $hide_right_column !='true')) && !$content_only}
{assign var="columns" value="2"}
{elseif (($hide_left_column && $hide_right_column) && ($hide_left_column =='true' && $hide_right_column =='true')) && !$content_only}
{assign var="columns" value="1"}
{elseif $content_only}
{assign var="columns" value="1"}
{else}
{assign var="columns" value="3"}
{/if}
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {implode value=$body_classes separator=' '}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso} {if !$content_only}{if $columns == 2} two-columns{elseif $columns == 3} three-columns{else} one-column{/if}{/if}">
{if !isset($content_only) || !$content_only}
    <!--[if IE 8]>
        <div style='clear:both;height:59px;padding:0 15px 0 15px;position:relative;z-index:10000;text-align:center;'><a href="//www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div>
<![endif]-->
{if isset($restricted_country_mode) && $restricted_country_mode}
<div id="restricted-country">
<p>{l s='You cannot place a new order from your country.'}{if isset($geolocation_country) && $geolocation_country} <span class="bold">{$geolocation_country|escape:'html':'UTF-8'}</span>{/if}</p>
</div>
{/if}

        <div id="page">
<div class="header-container">
<header id="header">
<div class="banner">
<div class="container">
<div class="row" id="inCartLayered">
{hook h="displayBanner"}
</div>
</div>
</div>
<div class="nav">
<div class="container">
<div class="row">
<nav>
                                <div id="header_logo">
<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
</a>
</div>
                                {hook h="displayNav"}</nav>
</div>
</div>
</div>
<div class="row-top">
<div class="container">
                               <div>                 
<div class="row">

{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
</div></div>
                           
</div>
</div>
</header>
</div>
<div class="columns-container">
<div id="columns" class="container">

<div class="row">
                    <div class="large-left col-sm-{12 - $right_column_size}">
                        <div class="row">
                           <div id="center_column" class="center_column col-xs-12 col-sm-{12 - $left_column_size}">
                        {if $page_name !='index' && $page_name !='pagenotfound'}
                            {include file="$tpl_dir./breadcrumb.tpl"}
                        {/if}
                      <div id="slider_row">
<div id="top_column" class="center_column ">{hook h="displayTopColumn"}</div>
</div>
{/if}
footer.tpl
{if !isset($content_only) || !$content_only}
</div><!-- #center_column -->
                        {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}
                    </div><!--.large-left-->
                    </div><!--.row-->
{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 -->
                {if isset($HOOK_HOME) && $HOOK_HOME|trim}
                <div class="home-column">
                        <div class="container">
                            {$HOOK_HOME}
                        </div>
                    </div>
                {/if}
</div><!-- .columns-container -->
{if isset($HOOK_FOOTER)}
<!-- Footer -->
<div class="footer-container">
<footer id="footer"  class="container">
<div class="row">{$HOOK_FOOTER}</div>
</footer>
</div><!-- #footer -->
{/if}
</div><!-- #page -->
{/if}

{include file="$tpl_dir./global.tpl"}
</body>
</html>

вроде что-то понятно, но куда именно что переставить, что бы левая колонка была перед контентом - пока не соображу..... (
16 Июля 2016, 14:40:07
Ответ #13
  • Ветеран
  • *****
  • Сообщений: 13147
  • Репутация: +14553/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Левая колонка у вас в footer.tpl.
Если вы ее хотите передвинуть перед центральной колонкой (контентом), то нужно менять стили.
Но это плохая идея. Для SEO лучше размещать контент выше остальных колонок, как у вас сделано.
Чтобы изменить положение 1-го блока, необязательно менять структуру сайта вцелом.
Для такой задачи есть 2 решения:
1. Вам уже подсказали, сделать отдельную мобильную тему.
2. Переделать модуль, добавить уставноку в хук displayTop (не менять hookLeftColumn, он должен остаться для десктопа), для этого хука создать свой шаблон.
В шаблонах для hookLeftColumn displayTop добавить стили для мобильной и десктопной версии, которые позволяют менять видидость блока в зависимости от разрешения экрана
http://bootstrap-ru.com/303/css/#responsive-utilities
16 Июля 2016, 14:52:03
Ответ #14
  • Новичок
  • *
  • Сообщений: 13
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Цитировать
2. Переделать модуль, добавить уставноку в хук displayTop (не менять hookLeftColumn, он должен остаться для десктопа), для этого хука создать свой шаблон.
В шаблонах для hookLeftColumn displayTop добавить стили для мобильной и десктопной версии, которые позволяют менять видидость блока в зависимости от разрешения экрана
Я как бы с этого варианта и начинал - добавил хук displayTop для модуля Блока Категорий и в css через "display: none" настроил их отображение в зависимости от ширины экрана ... Все у меня работало, за исключением того, в этом новом хуку displayTop блок всегда "развернут и не сворачивается"  - видимо что-то с Js скриптами не так ((