Moushe.ru

Блог обо всём

OcStore 2.1 (OpenCart 2.1) улучшение витрины (1 часть)



Всем привет, сегодня я решил сделать мини-улучшение витрины нашего интернет магазина, если вы смотрели свой магазин на телефоне или планшете с небольшим разрешением экрана (или просто уменьшали окно браузера на своём пк) то вы наверняка видели что каждый товар отображается очень крупно, 1 товар в колонку, это на мой взгляд очень не удобно, будем исправлять.

OpenCart-20

До:

ocstore_vitrina_01

 

После:

ocstore_vitrina_03

 

Приступим:

1. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки:

/* products in the modules and categories 2 in a row */
@media (max-width: 768px) {
.col-xs-12 {
width: 49%;
vertical-align: top;
text-align: center;
float: left;
min-height: 450px;
}
}

Смотрим на результат:

ocstore_vitrina_02

 

Неплохо, но краткое описание товара лучше убрать – кому нужно тот сможет посмотреть полное описание в карточке товара, а без краткого описания на экране будет одновременно показано больше товаров и покупателю нужно будет меньше прокручивать страницу вниз.

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

<p><?php echo $product['description']; ?></p>

вставим эту:

<p class="description"><?php echo $product['description']; ?></p>

(аналогично вносим правку в файлы manufacturer_info.tpl, search.tpl, special.tpl, думаю вы не дурачки, сами найдёте номера строк)

3. Откроем файл ../catalog/view/theme/default/template/module/featured.tpl и вместо этой строки (9):

<p><?php echo $product['description']; ?></p>

вставим эту:

<p class="description"><?php echo $product['description']; ?></p>

(аналогично вносим правку в файлы bestseller.tpl, latest.tpl, special.tpl, думаю вы не дурачки, сами найдёте номера строк)

4. Вновь откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и подправим наш код, вместо этих строк (749-758):

/* products in the modules and categories 2 in a row */
@media (max-width: 768px) {
.col-xs-12 {
width: 49%;
vertical-align: top;
text-align: center;
float: left;
min-height: 450px;
}
}

вставим эти:

/* products in the modules and categories 2 in a row */
@media (max-width: 768px) {
.col-xs-12 {
width: 50%;
vertical-align: top;
text-align: center;
}
.description {
display: none;
}
.product-thumb .caption {
min-height: 10px;
}
}

Смотрим на результат:

ocstore_vitrina_03

 

Отлично, так и оставим.

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

 

Хочешь посодействовать автору? Внеси свою копеечку в нашу копилку:

Перевести деньги на Qiwi кошелёк: +7 (925) 206-20-98

Перевести деньги на Яндекс кошелёк: 410011255443442

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

  1. Здравствуйте! До этого урока все уроки помогали. Улучшения в этом уроке ничего у меня на сайте не изменило.

  2. Сорри , все работает.

  3. Максим

    27.05.2016 at 05:04

    Ничего не поменялось, почему-то.

  4. Максим

    30.05.2016 at 09:17

    здравствуйте, а не поможете перенести хлебные крошки в подвал, или рядом с ним

  5. yandex.ru Андрей Невмыванный

    18.06.2016 at 18:12

    Владислав, здравствуйте!
    Я так понял, что описание убирается только в случае просмотра на маленьком экране смартфона или планшета. А как убрать вообще краткое описание, чтобы и на больших экранах его не было?

    • Вопрос не по теме статьи! Правьте css стили. (4 шаг — стили для мелких экранов, сделать так-же для больших)

  6. Подскажите как правильно сделать данное исправление так, чтобы на большом экране компа было так же, работает только на планшетах и телефонах.

    • На компе же и так в ряд по 4 товара, зачем вам это? А так правьте стили для большого разрешения, по типу статьи, если не понятно пишите мне в вк.

  7. Добрый день, у меня модули слева длиннее чем справа теперь, помоги выравнить их

  8. вот мой сайт, слева колонку посмотрите (рекомендуемые товары)

    • Модули слева длиннее чем справа — это о чём вообще? Если о товарах на страницах или в модулях то по вашему вопросу хрен поймёшь, о чём был задан вопрос. Если же я всё же правильно догадался о теме вопроса, В админке настраивается количество выводимых товаров (В настройках и каждом модуле — рекомендуемые, нокинки и т.д.)и это вообще не имеет никакого отношения к статье!

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

  10. Добрый День!
    Не могу понять, почему у меня не работает!
    Перепроверил все несколько раз — описание товаров не убирается.
    Шаблон у меня один — дефолтный! Кэш чистил и в браузере и в Opemcart!

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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