Moushe.ru

Блог обо всём

OpenCart 1.5.1 несколько улучшений (2 часть)



Сегодня мы с вами изменим немного вывод товаров – поменяем местами название и картинку товара в OpenCart 1.5.1.+.

До:                                       После:

12

Список изменений:

1. Поменяем местами название и изображение товара в модулях

2. Поменяем местами название и изображение товара в витрине категорий

3. Центрируем название, изображение, цену и кнопку купить в модулях

4. Центрируем название, изображение, цену и кнопку купить в списке категорий

 

И так приступим:

1. Откроем папку модулей (../catalog/view/theme/default/template/module) и изменим в модулях bestseller.tpl, featured.tpl, latest.tpl, special.tpl это (7-10):

<?php if ($product['thumb']) { ?>
<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
<?php } ?>
<div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>

на это:

<div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
<?php if ($product['thumb']) { ?>
<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
<?php } ?>

 

2. Откроем файл category.tpl (../catalog/view/theme/default/template/product) и изменим это (158-164):

var image = $(element).find('.image').html();

if (image != null) {
html += '<div class="image">' + image + '</div>';
}

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

на это:

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

var image = $(element).find('.image').html();

if (image != null) {
html += '<div class="image">' + image + '</div>';
}

 

3. Откроем stylesheet.css и изменим это:

.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-product .image {
display: block;
margin-bottom: 0px;
text-align: center;
}
.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;
text-align: center;
}
.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
text-align: center;
}
.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-product .cart {
text-align: center;
}

 

4. Откроем stylesheet.css и изменим это:

.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 .image {
display: block;
margin-bottom: 0px;
text-align: center;
}
.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;
text-align: center;
}
.product-grid .description {
display: none;
}
.product-grid .rating {
display: block;
margin-bottom: 4px;
text-align: center;
}
.product-grid .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
text-align: center;
}
.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;
text-align: center;
}

 

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

22 Комментария

  1. добрый день! отличный урок, жаль что все это я вчера у себя на сайте сделал, а так бы все было быстрее. А вот еще вопрос: а как сделать цену на одном уровне с кнопкой купить, но только справа или слева от нее, а то как то цена сливается… Спасибо за уроки!

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

      18.04.2012 at 21:09

      Возможно в следующих улучшениях сделаю и это. 🙂

  2. Евгений

    18.04.2012 at 15:01

    после процедуры у меня не переключается со списка на витрину

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

    18.04.2012 at 21:11

    Куки чистили ? В каком браузере проблема ? Урок был проверен несколькими людьми, говорят всё работает.

  4. Сергей

    19.04.2012 at 13:28

    Добрый день,

    Очень интересует вставка кода сапы. Подскажите плиз
    Это уже было?
    Если нет, то очень хотелось бы узнать
    Спасибо

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

      19.04.2012 at 21:34

      По сапе ничего не напишу — на оф форуме есть материалы по этой теме.

  5. Дмитрий

    25.04.2012 at 12:12

    Добрый день. Спасибо за урок.
    А подскажите как по аналогии сделать, что бы в витрине категории: название товара, кнопка купить и цена отображались справа от картинки?

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

      25.04.2012 at 21:00

      Подсказать, без проблем — правьте модули и ксс стили. Слишком много возни чтобы отписываться здесь в форму комментирования. Возможно сделаю урок.

  6. Добрый день. Спасибо за урок.
    Подскажите пожалуйста как сделать чтоб кнопки КУПИТЬ не плавали, это происходит из за разной длинны названия товаров. Может привязать кнопку купить к самому нижней части блока товара? тогда при разной длине названия она всегда будет стоять внизу (на одном уровне со всеми кнопками)

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

      24.05.2012 at 18:36

      Вёрстка вывода товаров сделана на дивах и я не знаю как исправить «плавающие кнопки», можно было бы попробовать переделать вывод товара в таблицах (тогда высота всех ячеек была бы одинакова — по самой высокой растягивались бы и остальные) и задать отступ кнопке корзина от нижней грани, но нет времени экспериментировать. Скачайте кучку шаблонов с myopencart.ru и посмотрите в каком из них проблема решена — и достаточно будет исправить ксс и вывод.

  7. Здравствуйте!
    Подскажите, как можно «обрезать» название товара в витрине? А то у некоторых оно занимает по 4 строки. Видел на модуле фильтров товара сделали, что после определенного кол-ва символов стоит троеточие, а при наведении курсора появлеется окошко с полным названием товара.

  8. А еще бы лучше выделить отдельное поле, в котором можно указать короткое название товара, на подобие «Модель». Но это уже сложно наверно, как минимум отдельный урок нужен или у меня у одного такая проблема?)

  9. Алексей

    30.10.2012 at 23:32

    Подскажите, пожалуйста, как сделать 5 товаров в ряд

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

      31.10.2012 at 00:02

      Уменьшайте или увеличивайте размеры картинок, тогда больше или меньше товаров поместится в ряд.

    • Алексей

      31.10.2012 at 02:58

      делал. все равно остается по 4 в ряд

  10. Эльвира

    19.01.2013 at 14:41

    Здравствуйте, Владислав!
    Подскажите как в модуле Рекомендуемое или Последнее добавить ниже кнопки Купить ссылочку «в закладки» или «в сравнение»

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

      19.01.2013 at 22:24

      Попробую сделать

  11. Отличный урок, спасибо автору. все получилось с первого раза)

  12. Все получилось, кроме 2 пункта, везде поменял, а тут меняться не хочет
    http://e-smoke.in.ua/index.php?route=product/category&path=20

  13. Можете подсказать какую? А то голова уже не варит, смотрю вроди правильно все

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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