Back Вы здесь: Home Всё о CMS Prestashop Изменение шаблона модуля Новые товары Prestashop

Изменение шаблона модуля Новые товары Prestashop

descrippict-135x300Здравствуйте, дорогие читатели.

В этой статье я расскажу вам как изменить шаблон модуля Новые товары.
Давайте начнем с самого простого - изменение стандартного шаблона.
В примере будет приведена работа со стандартной темой default, которая есть в стандартном комплекте Prestashop, но по аналогии все ниже перечисленные действия можно реализовать и в других темах.
Изменять шаблон модуля мы будем в директории установленной темы Prestashop.
Итак начнем.
Дня начала зайдем в директорию нашего шаблона /themes/default/modules/ и создадим папку blocknewproducts, если она не существует.
Создадим в ней файл шаблона модуля новые товары blocknewproducts.tpl.
Для первого варианта, в котором новые товары будут отображаться только изображением товара, нам необходимо поправить дефолтный шаблон модуля новых товаров.
Для этого ищем модуль /modules/ blocknewproducts в корне вашего сайта и открываем файл blocknewproducts.tpl редактором Notepad++.
Копируем полностью весь код и вставляем его в /themes/default/modules/blocknewproducts/blocknewproducts.tpl.
Затем удаляем строку 33 если вы не хотите ограничивать количество отображаемого товара.

{if $smarty.foreach.newProducts.index < 2}


или же оставляем эту строку, но меняем количество товара, это цифра в конце кода, например можно поставить 6 товаров

 

{if $smarty.foreach.newProducts.index < 6}


Теперь осталось удалить краткое описание товара , для этого удалим код с 38 по 43 строку

<dl class="products">
{foreach from=$new_products item=newproduct name=myLoop}
<dt class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}"><a href="/{$newproduct.link}" title="{$newproduct.name|escape:html:'UTF-8'}">{$newproduct.name|strip_tags|escape:html:'UTF-8'}</a></dt>
{if $newproduct.description_short}<dd class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}"><a href="/{$newproduct.link}">{$newproduct.description_short|strip_tags:'UTF-8'|truncate:75:'...'}</a><br /><a href="/{$newproduct.link}" class="lnk_more">{l s='Read more' mod='blocknewproducts'}</a></dd>{/if}
{/foreach}
</dl>

Сохраните изменения в редакторе и обновите страницу вашего сайта, остались только изображения товара с ссылкой на их страницы. Но картинки расположены хаотично, и поправить их можно с помощью Css. Файл blocknewproducts.css нужно разместить так же в директории используемого шаблона магазина.
/themes/default/css/modules/blocknewproducts/blocknewproducts.css. Если каких то папок не существует их необходимо создать.
Открываем файл blocknewproducts.css текстовым редактором и вставляем код

/* оформление изображений товара в рамке и с отступами */
.products_block li img {
border: 1px solid #d1d1d1;
margin:2px 2px 0 2px;
}
/*оформление ссылки "Все новые товары"*/
a.button_large{
border: none;
background: none;
color: #333;
}

Сохраним правки и обновим страницу сайта.

 

Пример №2
Мы изменим шаблон модуля с отображением всех изображений товаров с названием и кратким описанием
Открываем файл /themes/default/modules/blocknewproducts/blocknewproducts.tpl текстовым редактором и вносим следующие изменения

<!-- MODULE Block new products -->
<div id="new-products_block_right" class="block products_block">
<h4 class="title_block"><a href="/{$link->getPageLink('new-products')}" title="{l s='New products' mod='blocknewproducts'}">{l s='New products' mod='blocknewproducts'}</a></h4>
<div class="block_content">
{if $new_products !== false}
<ul class="products">
{foreach from=$new_products item=newproduct name=myLoop}
<li class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}">
<div class="product_image">
<a href="/{$newproduct.link}" title="{$newproduct.legend|escape:html:'UTF-8'}"><img src="/{$link->getImageLink($newproduct.link_rewrite, $newproduct.id_image, 'medium_default')}" alt="{$newproduct.legend|escape:html:'UTF-8'}" /></a>
</div>
<div class="extra-wrap">
<h5 class="s_title_block">
<a class="product_name" href="/{$newproduct.link}" title="{$newproduct.name|escape:html:'UTF-8'}">{$newproduct.name|strip_tags:'UTF-8'|truncate:30:'...'}</a>
</h5>
{if $newproduct.description_short}
<div class="short_descr">{$newproduct.description_short|strip_tags:'UTF-8'|truncate:60:'...'}</div>
<a href="/{$newproduct.link}" class="lnk_more">{l s='Read more' mod='blocknewproducts'}</a>
{/if}
</div>
</li>
{/foreach}
</ul>
<p><a href="/{$link->getPageLink('new-products')}" title="{l s='All new products' mod='blocknewproducts'}" class="button_large">{l s='All new products' mod='blocknewproducts'}</a></p>
{else}
<p>&raquo; {l s='No new products at this time' mod='blocknewproducts'}</p>
{/if}
</div>
</div>
<!-- /MODULE Block new products -->

Объясню
За отображение изображения товара отвечает часть кода

<div class="product_image">
<a href="/{$newproduct.link}" title="{$newproduct.legend|escape:html:'UTF-8'}"><img src="/{$link->getImageLink($newproduct.link_rewrite, $newproduct.id_image, 'medium_default')}" alt="{$newproduct.legend|escape:html:'UTF-8'}" /></a>
</div>

За отображение названия товара другая часть

<h5 class="s_title_block">
<a class="product_name" href="/{$newproduct.link}" title="{$newproduct.name|escape:html:'UTF-8'}">{$newproduct.name|strip_tags:'UTF-8'|truncate:30:'...'}</a>
</h5>

в truncate:60:’…’ указано количество отображаемых знаков в кратком описании, можете поменять цифру как вам будет удобнее.

Краткое описание

{if $newproduct.description_short}
<div class="short_descr">{$newproduct.description_short|strip_tags:'UTF-8'|truncate:60:'...'}</div>
<a href="/{$newproduct.link}" class="lnk_more">{l s='Read more' mod='blocknewproducts'}</a>
{/if}

в truncate:65:’…’ аналогично с примером выше можете менять количество знаков в кратком описании товара.
Код файла css приведен с комментариями


/*отступ от верхнего края названия товара*/
.column ul.products h5 {
padding: 0 0 5px 0;
}

/*текст с левой стороны картинки товара отступом 10 px*/
.column ul.products .product_image {
float: left;
margin: 0 10px 0 0;
}
/*оформление блока новые товары*/
.column ul.products li {
padding: 5px 0; /*отступ с верху и снизу*/
border-width: 0 0 1px 0; /*рамка снизу, убрать рамку заменой 1px но 0*/
border-style: solid; /*Обычная сплошная рамка*/
float: none; /*на всякий случай, если вдруг сработает float из другого шаблона*/
}
/*цвет ссылки read more и отступ от краткого описания*/
#new-products_block .lnk_more {
padding:5px 0 0 0;

color:#0251c7;
}
/*оформление ссылки "Все новые товары"*/
#new-products_block .button_large {
padding: 5px;
border: none;
background: none;
color: #333;

}
/*если надо показать кнопку закомментируйте блок выше и раскомментируйте блок ниже*/
/*#new-products_block .button_large {

margin-top: 10px ;

}*/

Сохраним правки в файлах и смотрим изменения

 

descrippict-135x300


До новых встреч!

Добавить комментарий


Защитный код
Обновить

Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов
RuCaptcha - заработай на вводе каптч

Заработок в сети