Заполнение каталога.
Неплохое видео по заполнению каталога Prestashop.
Правим стандартный шаблон default-bootstrap Prestashop 1.6.1.18
Стандартный шаблон в Prestashop 1.6 довольно неплохо сделан: адаптивный, код почти валидный и вроде бы все на своих местах. Но есть перу но: телефон в шапке скрыт в мобильном разрешении, лого сам на себя ссылается на главной, корзина как-то не в рифму количество считает, теги не совсем логичны в некоторых местах и некоторые другие косяки. Исправлением их и займемся далее, ну еще и дизайн поправим.
Чтобы видеть все изменения в шаблоне, заходим в меню Конфигурация>Результат,
Принудительная перекомпиляция, Кеш>Нет>Сохранить. Когда сайт будет готов, нужно будет изменить эти настройки.
Смотрю на шаблон, первое что бросилось в глаза: ссылка на сайт Prestashop внизу страницы. Давайте ее будем убирать). Для этого не обязательно править код шаблона, заходим в админку, затем в Модули>Блок CMS (blockcms)>Настроить, в самом низу убираем галочку — Отображать в футере надпись «Работает на PrestaShop».
Копирайт
Если вы хотите например вставить свой копирайт, правим шаблон themes\default-bootstrap\modules\blockcms\blockcms.tpl, находим код в строке 129
|
1 |
{l s='[1] %3$s %2$s - Ecommerce software by %1$s [/1]' mod='blockcms' sprintf=['PrestaShop™', 'Y'|date, '©'] tags=['<a class="_blank" href="http://www.prestashop.com">'] nocache} |
Меняем на что-то типа этого:
|
1 2 |
&copy; {$shop_name} ™, {$smarty.now|date_format:'%Y'}. Все права защищены. <!--noindex-->Запрещено использование материалов сайта без согласия автора и обратной ссылки.<!--/noindex--> |
Заголовок меню
В навигационном меню убираем заголовок-ссылку. Что-то мне кажется, что в ней нет особого смысла. В этом же файле, строка 30, комментируем код:
|
1 2 3 4 5 |
<!-- <p class="title_block"> <a href="{$cms_title.category_link|escape:'html':'UTF-8'}"> {if !empty($cms_title.name)}{$cms_title.name}{else}{$cms_title.category_name}{/if} </a> </p> --> |
Топ бар
Далее возьмемся за топбар, в котором указан номер телефона, изменить его можно через меню > Модули > Модули и сервисы > Блок контактов, мне не очень нравится, что телефон скрывается в мобильной версии, и место пустует, можно добавить туда например свое УТП или маркетинговую фишку. Да и надписи учетной записи и связи можно поменять на иконки. Вообщем вот моя версия:
themes\default-bootstrap\modules\blockcontact\nav.tpl
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="contact-link" {if isset($is_logged) && $is_logged} class="is_logged"{/if}> <a href="{$link->getPageLink('contact', true)|escape:'html':'UTF-8'}" title="{l s='Contact us' mod='blockcontact'}" rel="nofollow noopener"><i class="icon-envelope"></i></a> </div> {if $telnumber} <span class="shop-phone{if isset($is_logged) && $is_logged} is_logged{/if}"> <a href="tel:{$telnumber}" rel="nofollow noopener"><i class="icon-phone"></i>{$telnumber}</a> </span> {/if} <span class="marketing_top"> <i class="icon-calculator"></i>Низкие цены <i class="icon-truck"></i>Доставка по РФ <i class="icon-credit-card"></i>Удобные способы оплаты </span> |
themes\default-bootstrap\modules\blockcuserinfo\nav.tpl
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- Block user information module NAV --> {if $is_logged} <div class="header_user_info"> <a href="{$link->getPageLink('my-account', true)|escape:'html':'UTF-8'}" title="{$cookie->customer_firstname}, ваш личный кабинет" class="account" rel="nofollow noopener"> <i class="icon-user"></i></a> </div> {/if} <div class="header_user_info"> {if $is_logged} <a class="logout" href="{$link->getPageLink('index', true, NULL, "mylogout")|escape:'html':'UTF-8'}" rel="nofollow noopener" title="{l s='Log me out' mod='blockuserinfo'}"> <i class="icon-signout"></i> </a> {else} <a class="login" href="{$link->getPageLink('my-account', true)|escape:'html':'UTF-8'}" rel="nofollow noopener" title="{l s='Log in to your customer account' mod='blockuserinfo'}"> <i class="icon-user"></i> </a> {/if} </div> <!-- /Block usmodule NAV --> |
themes\default-bootstrap\css\modules\blockcontact\blockcontact.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
.shop-phone { float: right; padding: 8px 5px 8px; line-height: 18px; } .shop-phone i { padding-right: 7px; color: #ffcc33; font-size: 20px; } .shop-phone a { color: #fff; text-decoration: none; font-size: 20px; line-height: 20px; } #contact-link { float: right; border-left: 1px solid #515151; } #contact-link a { display: block; padding: 8px 10px 11px 10px; color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.2); font-weight: bold; line-height: 18px; cursor: pointer; } #contact-link a:hover, #contact-link a.active { background: #2b2b2b; } @media (max-width:767px) { #contact-link.is_logged { display: none; } } @media (max-width:767px) { #contact_block { margin-bottom: 20px; } } #contact_block .label { display: none; } #contact_block .block_content { color: #888888; } #contact_block p { margin-bottom: 4px; } #contact_block p.tel { margin-bottom: 6px; color: #333; font: 400 17px/21px Arial, Helvetica, sans-serif; } #contact_block p.tel i { padding-right: 10px; vertical-align: -2px; font-size: 25px; } .marketing_top { float: left; padding-top: 4px; padding-right: 7px; color: #ccc; font-size: 12px; } .marketing_top i { margin-left: 5px; margin-right: 5px; padding: 4px; border: 1px solid #ccc; border-radius: 50%; background-color: #ccc; color: #333; font-size: 16px; } @media (max-width:767px) { .marketing_top { display: none; } } |
themes\default-bootstrap\css\modules\blockcuserinfo\blockcuserinfo.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.header_user_info { float: right; border-left: 1px solid #515151; border-right: 1px solid #515151; } .header_user_info a { color: #fff; font-weight: bold; display: block; padding: 8px 9px 11px 8px; cursor: pointer; line-height: 18px; } @media (max-width:479px) { .header_user_info a { font-size: 11px; } } .header_user_info a:hover, .header_user_info a.active { background: #2b2b2b; } /*# sourceMappingURL=blockuserinfo.css.map */ |
Обратите внимание, я рассчитал длину рекламного текста с учетом залогиненого пользователя.
Логотип
Далее можно добавить логотип Настройки > Шаблоны> логотип я выбрал высотой 65px, очень хочется добавить надпись под логотипом и убрать ссылку с главной, сделать это можно в шаблоне:
themes\default-bootstrap\header.tpl, ищем код:
|
1 2 3 4 5 |
<div id="header_logo"> <a href="{if isset($force_ssl) && $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> |
Меняем на
|
1 2 3 4 5 6 7 8 9 |
{if $page_name !='index'} <a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}"> {/if} <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}/> {if $page_name !='index'} </a> {/if} <b>Ваш текст под логотипом.</b> </div> |
Корзина
Далее исправим косяк с корзиной:
modules/blockcart/blockcart.tpl , где +, добавлены строки, где — , удалены.
|
1 2 3 4 5 |
+ <span class="ajax_cart_product_txt{if $cart_qties != 1} unvisible{/if}">{l s='Товар:' mod='blockcart'}</span> + <span class="ajax_cart_product_txt_s{if $cart_qties < 2} unvisible{/if}">{l s='Товаров:' mod='blockcart'}</span> <span class="ajax_cart_quantity{if $cart_qties == 0} unvisible{/if}">{$cart_qties}</span> - <span class="ajax_cart_product_txt{if $cart_qties != 1} unvisible{/if}">{l s='Product' mod='blockcart'}</span> - <span class="ajax_cart_product_txt_s{if $cart_qties < 2} unvisible{/if}">{l s='Products' mod='blockcart'}</span> |
Теперь товары будут отображаться правильно.
Тюнинг сортировки в категории.
Заменяем класс у первого div на horizontal_select, комментируем заголовок и лишние option. Мой пример: themes\default-bootstrap\product-sort
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
{if isset($orderby) AND isset($orderway)} <ul class="display hidden-xs"> <li class="display-title">{l s='View:'}</li> <li id="grid"><a rel="nofollow" href="#" title="{l s='Grid'}"><i class="icon-th-large"></i>{l s='Grid'}</a></li> <li id="list"><a rel="nofollow" href="#" title="{l s='List'}"><i class="icon-th-list"></i>{l s='List'}</a></li> </ul> {* On 1.5 the var request is setted on the front controller. The next lines assure the retrocompatibility with some modules *} {if !isset($request)} <!-- Sort products --> {if isset($smarty.get.id_category) && $smarty.get.id_category} {assign var='request' value=$link->getPaginationLink('category', $category, false, true) } {elseif isset($smarty.get.id_manufacturer) && $smarty.get.id_manufacturer} {assign var='request' value=$link->getPaginationLink('manufacturer', $manufacturer, false, true)} {elseif isset($smarty.get.id_supplier) && $smarty.get.id_supplier} {assign var='request' value=$link->getPaginationLink('supplier', $supplier, false, true)} {else} {assign var='request' value=$link->getPaginationLink(false, false, false, true)} {/if} {/if} {if $page_name == 'best-sales' && (!isset($smarty.get.orderby) || empty($smarty.get.orderby))}{$orderby = ''}{$orderbydefault = ''}{/if} <form id="productsSortForm{if isset($paginationId)}_{$paginationId}{/if}" action="{$request|escape:'html':'UTF-8'}" > <div class="horizontal_select"> <!-- <label for="selectProductSort{if isset($paginationId)}_{$paginationId}{/if}">{l s='Sort by'}</label> --> <select size="8" id="selectProductSort{if isset($paginationId)}_{$paginationId}{/if}" class="selectProductSort form-control"> <!-- <option value="{if $page_name != 'best-sales'}{$orderbydefault|escape:'html':'UTF-8'}:{$orderwaydefault|escape:'html':'UTF-8'}{/if}"{if !in_array($orderby, array('price', 'name', 'quantity', 'reference')) && $orderby eq $orderbydefault} selected="selected"{/if}>x</option> --> {if !$PS_CATALOG_MODE} <option value="price:asc"{if $orderby eq 'price' AND $orderway eq 'asc'} selected="selected"{/if}>Дешевле</option> <option value="price:desc"{if $orderby eq 'price' AND $orderway eq 'desc'} selected="selected"{/if}>Дороже</option> {/if} <option value="name:asc"{if $orderby eq 'name' AND $orderway eq 'asc'} selected="selected"{/if}>Название</option> <option value="name:desc"{if $orderby eq 'name' AND $orderway eq 'desc'} selected="selected"{/if}>От Я до А</option> {if $PS_STOCK_MANAGEMENT && !$PS_CATALOG_MODE} <option value="quantity:desc"{if $orderby eq 'quantity' AND $orderway eq 'desc'} selected="selected"{/if}>В наличии</option> {/if} <!-- <option value="reference:asc"{if $orderby eq 'reference' AND $orderway eq 'asc'} selected="selected"{/if}>{l s='Reference: Lowest first'}</option> <option value="reference:desc"{if $orderby eq 'reference' AND $orderway eq 'desc'} selected="selected"{/if}>{l s='Reference: Highest first'}</option> --> </select> </div> </form> <!-- /Sort products --> {if !isset($paginationId) || $paginationId == ''} {addJsDef request=$request} {/if} {/if} |
Добавляем CSS в themes\default-bootstrap\css\global.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.horizontal_select { width: 370px; display: inline-block; overflow: hidden; padding: 0; height: 60px; vertical-align: top; } .horizontal_select select { margin: 0px -30px 0px 0px; padding: 0px; border: none!important; background-color: #eee; overflow: hidden } .horizontal_select option { display: inline-block; margin: 2px; padding: 5px; border: 1px solid #5bc0de; border-radius: 3px; background-color: #5bc0de; color:white; text-align: center; overflow: hidden } .horizontal_select option:hover, .horizontal_select option:focus, .horizontal_select option:active, .horizontal_select option:checked{ border: 1px solid #369; background-color: #1E90FF; } |
Там же через поиск по .content_sortPagiBar .sortPagiBar #productsSortForm select — строка примерно 6xxx удаляем свойство
max-width: 192px;
и
@media (max-width: 991px) {
.content_sortPagiBar .sortPagiBar #productsSortForm select {
max-width: 160px; } }
После чего, открываем категорию, чистим кеш, ctrl+f5 и должно получиться так:
Картинка и описание категории.
Мне не очень нравится скрипт сжатия текста, да и вообще вывод, товары хотелось бы выводить вначале, а описание можно делать и побольше внизу страницы, вот моя версия файла category.tpl
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
{include file="$tpl_dir./errors.tpl"} {if isset($category)} {if $category->id AND $category->active} <div class="cathead"> <h1 class="page-heading{if (isset($subcategories) && !$products) || (isset($subcategories) && $products) || !isset($subcategories) && $products} product-listing{/if}"><span class="cat-name">{$category->name|escape:'html':'UTF-8'}{if isset($categoryNameComplement)}&nbsp;{$categoryNameComplement|escape:'html':'UTF-8'}{/if}</span><!-- {include file="$tpl_dir./category-count.tpl"} --></h1> {if isset($subcategories)} {if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories) } </div> <div id="subcategories"> <ul class="clearfix"> {foreach from=$subcategories item=subcategory} <li> <div class="subcategory-image"> <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img"> {if $subcategory.id_image} <img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" /> {else} <img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-medium_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" /> {/if} </a> </div> <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:35:'...'|escape:'html':'UTF-8'}</a></h5> {if $subcategory.description} <div class="cat_desc">{$subcategory.description}</div> {/if} </li> {/foreach} </ul> </div> {/if} {/if} {if $products} <div class="content_sortPagiBar clearfix"> <div class="sortPagiBar clearfix"> {include file="./product-sort.tpl"} {include file="./nbr-product-page.tpl"} </div> <div class="top-pagination-content clearfix"> {include file="./product-compare.tpl"} {include file="$tpl_dir./pagination.tpl"} </div> </div> {include file="./product-list.tpl" products=$products} <div class="content_sortPagiBar"> <div class="bottom-pagination-content clearfix"> {include file="./product-compare.tpl" paginationId='bottom'} {include file="./pagination.tpl" paginationId='bottom'} </div> </div> {/if} {elseif $category->id} <p class="alert alert-warning">{l s='This category is currently unavailable.'}</p> {/if} {if $scenes || $category->description || $category->id_image} <div class="content_scene_cat"> {if $scenes} <div class="content_scene"> <!-- Scenes --> {include file="$tpl_dir./scenes.tpl" scenes=$scenes} {if $category->description} <div class="cat_desc rte"> {if Tools::strlen($category->description) > 500} <div id="category_description_short">{$description_short}</div> <div id="category_description_full" class="unvisible">{$category->description}</div> <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a> {else} <div>{$category->description}</div> {/if} </div> {/if} </div> {else} <!-- Category image --> {if $category->id_image} <img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" alt="" class="img-responsive"> {/if} <!-- <div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}> --> {if $category->description} <!-- <div class="cat_desc"> --> <span class="category-name"> {strip} {$category->name|escape:'html':'UTF-8'} {if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'} {/if} {/strip} </span> <!-- {if Tools::strlen($category->description) > 350} <div id="category_description_short" class="rte">{$description_short}</div> <div id="category_description_full" class="unvisible rte">{$category->description}</div> <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a> {else} --> <div class="rte">{$category->description}</div> <!-- {/if} --> {/if} {/if} </div> {/if} {/if} |
В global.css комментируем
|
1 2 3 |
.category-name{ color:#FFF!important; } |
А в CSS категории themes\default-bootstrap\css\category.css
Добавляем:
|
1 2 3 4 5 6 |
.cathead { text-align: center; } .cathead h1 { font-size:24px; } |
Ищем класс .content_scene_cat , комментируем /* border-top: 5px solid #333; */,
меняем цвет, color: #d7d7d7; на color: #333;
и в классе .content_scene_cat span.category-name меняем color: #fff; на color: #777;
Должно получится так:
Добрый день! Очень благодарен за эти интересные и полезные статьи. Всё просто и доступным языком описано. Очень жду новых шагов по этой CMS.
Добрый день,
нашел themes\default-bootstrap\modules\blockcms\blockcms.tpl, все исправил, обновил страницу — ничего не изменилось…
есть ли вероятность, что нужный .tpl лежит в другом месте?
Добрый вечер! Есть вероятность, если шаблон родной стоит, что нужно почистить кеш — Расширенные параметры — Производительность
Добрый день!
Пытался опустить описание категорий вниз, за товары, но чет ничего не получилось, при изменении кода просто описание категории вообще удаляется!
Как бы разобраться, помогите пожалуйста!
Шаблон сайта стандартный.
Виталий, добрый день, просто скопируйте мой код в свой файл category.tpl, и очистите кеш.
Добрый вечер.
Спасибо за доработку отображения под категорий сверху описания. Дельная вещь.
Загрузил ваш файл, вроде все норм.
Подправил чуток слили под свой.
Подскажите, вот Вы пишите: В global.css комментируем, я так понял закрываем. Но у меня нет в этом файле такой строчки –
.category—name{color:#FFF!important;}
может я не там смотрел, /http/themes/default-bootstrap/css/global.css Я этот код не нашел и не закрыл. Подскажите, может не правильный у меня путь?
А так, очень круто, действительно отлично.