Moushe.ru

Блог обо всём

OpenCart 1.5.3 делаем шаблон GreenTea (6 часть)



Сегодня мы с вами немного поработаем над модулем рекомендуемые и над категориями.

OpenCartGreenTea

Список задач на сегодня:

1. Измененим  модуль рекомендуемые

2. Изменим категории

3. Изменим поиск

4. Поработаем над CSS стилями

5. Перекрасим кнопку Купить (и если вы делали, кнопку описание)

 

И так начнём:

1. Откроем файл featured.tpl (../catalog/view/theme/greentea/template/module), вырежем эту строку (10):

<div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>

и вставим после этих строк (4-6):

<div class="box-product">
<?php foreach ($products as $product) { ?>
<div>

(Если вы используете другие модули, сделайте в них такие же правки)

2. Откроем файл category.tpl (../catalog/view/theme/greentea/template/product) и вырежем эту строку (167):

html += '<div class="name">' + $(element).find('.name').html() + '</div>';

и вставим после этих (158-159):

$('.product-grid > div').each(function(index, element) {
html = '';

а эту строку (200):

display('list');

изменим на эту:

display('grid');

3. Откроем файл search.tpl (../catalog/view/theme/greentea/template/product) и вырежем эту строку (213):

html += '<div class="name">' + $(element).find('.name').html() + '</div>';

и вставим после этих (204-205):

$('.product-grid > div').each(function(index, element) {
html = '';

а эту строку (247):

display('list');

изменим на эту:

display('grid');

4. Откроем файл stylesheet.css (../catalog/view/theme/greentea/stylesheet) и изменим это (648-694):

/* box products */
.box-product {
width: 100%;
overflow: auto;
}
.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product > div {
width: 119px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.box-product .price-old {
color: #F00;
text-decoration: line-through;
}
.box-product .price-new {
font-weight: bold;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}

на это:

/* box products */
.box-product {
width: 100%;
overflow: auto;
text-align: center;
}
.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
#column-left + #column-right + #content .box-product > div {
width: 119px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
border: 1px solid #78a240;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
}
.box-product .name a {
color: #000;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-product .name a:hover {
color: #78a240;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.box-product .price-old {
color: #F00;
text-decoration: line-through;
}
.box-product .price-new {
font-weight: bold;
}
.box-product .rating {
display: block;
margin-bottom: 4px;
}

а это (916-987):

.product-grid {
width: 100%;
overflow: auto;
}
.product-grid > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 15px;
}
#column-left + #column-right + #content .product-grid > div {
width: 125px;
}
.product-grid .image {
display: block;
margin-bottom: 0px;
}
.product-grid .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.product-grid .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.product-grid .description {
display: none;
}
.product-grid .rating {
display: block;
margin-bottom: 4px;
}
.product-grid .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.product-grid .price-old {
color: #F00;
text-decoration: line-through;
}
.product-grid .price-new {
font-weight: bold;
}
.product-grid .price .price-tax {
display: none;
}
.product-grid .cart {
margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
margin-bottom: 3px;
}
.product-grid .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}

на это:

.product-grid {
width: 100%;
overflow: auto;
text-align: center;
}
.product-grid > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 15px;
}
#column-left + #column-right + #content .product-grid > div {
width: 125px;
}
.product-grid .image {
display: block;
margin-bottom: 0px;
}
.product-grid .image img {
padding: 3px;
border: 1px solid #78a240;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
}
.product-grid .name a {
color: #000;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.product-grid .name a:hover {
color: #78a240;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.product-grid .description {
display: none;
}
.product-grid .rating {
display: block;
margin-bottom: 4px;
}
.product-grid .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.product-grid .price-old {
color: #F00;
text-decoration: line-through;
}
.product-grid .price-new {
font-weight: bold;
}
.product-grid .price .price-tax {
display: none;
}
.product-grid .cart {
margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
margin-bottom: 3px;
}
.product-grid .wishlist a, .product-grid .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-grid .wishlist a:hover, .product-grid .compare a:hover {
color: #78a240;
}

5. Откроем папку image (../opencart/catalog/view/theme/greentea/image) и закинем в неё эти картинки (с заменой родных):

buttonbutton-active

Если вы делали по моему уроку кнопку Описание, сделайте это:

5.1. Откроем файл stylesheet.css () и вместо этого (556-561):

input.button {
margin: 0;
border: 0;
height: 24px;
padding: 0px 12px 0px 12px;
}

вставим это:

input.button {
margin: 0;
border: 0;
height: 24px;
padding: 0px 12px 0px 12px;
margin-bottom: 2px;
}

На сегодня всё, следите за нашими новостями. Улыбка

6 Комментариев

  1. Григорий

    19.12.2012 at 00:35

    Здравствуйте.
    Вопрос немного не в тему и, возможно, глупый 🙂 :
    Если я редактирую в header.tpl (в ..default/template/common/) , например после

    добавляю "", то потом почему-то блок в header.tpl дублируется. Почему так происходит?:smile:

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      19.12.2012 at 22:11

      Честно говоря не знаю 🙂

  2. Скажите пожалуста , как перенести описание в категогии вниз страницы(после товаров)?

  3. получилась вот такая ерунда почему-то(((

    http://my.jetscreenshot.com/demo/20150418-xohi-2kb

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

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика