Opencart 2.1 - Улучшение Витрины (1 Часть)

Тема в разделе "Модули и дополнения", создана пользователем admin, 12 сен 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

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

    OpenCart-20.jpg


    До:

    ocstore_vitrina_01.png



    После:

    ocstore_vitrina_03.png



    Приступим:

    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.png



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

    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.png



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

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