Opencart 2.1 - Ocstore 2.1 - Переделываем Корзину

Тема в разделе "Шаблоны, дизайн и оформление магазина", создана пользователем admin, 8 июл 2016.

  1. TopicStarter Overlay
    Offline

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

    Сообщения:
    1.590
    Симпатии:
    22.940
    Репутация:
    124
    Всем привет, в этой статье мы переделаем корзину нашего интернет магазина для OpenCart 2.1 - OcStore 2.1

    До:
    1.png


    После:

    2.png

    3.png

    Приступим:

    1. Откроем файл ../catalog/language/russian/common/cart.php и вместо этой строки (3):

    Код:
    $_['text_items']  = '%s товар(ов) - %s';
    вставим эту:

    Код:
    $_['text_items']  = '%s - %s';
    2. Откроем файл ../catalog/language/russian/checkout/cart.php и вместо этой строки (9):

    Код:
    $_['text_items']  = '%s товар(ов) - %s';
    вставим эту:

    Код:
    $_['text_items']  = '%s - %s';
    3. Откроем файл ../catalog/view/theme/default/template/common/header.tpl и удаляем эту строку (95):

    Код:
    <div class="col-sm-3"><?php echo $cart; ?></div>
    после этой строки (49):

    <body class="<?php echo $class; ?>">

    вставим эту:

    Код:
    <div id="my_cart"><?php echo $cart; ?></div>
    4. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и после этой строки (144):

    Код:
    /* cart */
    добавим эти:

    Код:
    #my_cart {
    position: fixed;
    top: 8%;
    right: 0px;
    z-index: 99;
    }
    (эти строки задают положение нашей корзине и позволяют корзине перекрывать другие элементы – меню, слайдер и т.д.)

    если вам не нравится чёрная кнопка корзины поправьте эти стили (154-158):

    Код:
    #cart > .btn {
    font-size: 12px;
    line-height: 18px;
    color: #FFF;
    }
    к примеру так:

    Код:
    #cart > .btn {
    font-size: 12px;
    color: #FFF;
    height: 80px;
    width: 100px;
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    border-color: #1f90bb #1f90bb #145e7a;
    }
    #cart > .btn > .fa {
    font-size: 30px;
    display: block;
    padding-bottom: 10px;
    }
    (частично стили взяты с меню категорий + добавил стили для иконки корзины, размер кнопки регулируется с помощью height и width)

    если фиксированные размеры вам не нужны, стили можно обрезать:

    Код:
    #cart > .btn {
    font-size: 12px;
    color: #FFF;
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    border-color: #1f90bb #1f90bb #145e7a;
    }
    #cart > .btn > .fa {
    font-size: 30px;
    display: block;
    padding-bottom: 10px;
    }
    Результат:

    2.png

    Поиграв стилями можно сделать и так:

    Код:
    #cart > .btn {
    font-size: 12px;
    color: #000;
    background: #fff;
    border-left: 2px solid #F44336;
    border-top: 2px solid #F44336;
    border-bottom: 2px solid #F44336;
    border-right: 2px dotted #F44336;
    border-radius: 10px 0 0 10px;
    box-shadow: none;
    text-shadow: none;
    }
    #cart > .btn:hover {
    border-left: 2px solid #B71C1C;
    border-top: 2px solid #B71C1C;
    border-bottom: 2px solid #B71C1C;
    border-right: 2px dotted #B71C1C;
    }
    #cart > .btn > .fa {
    color: #F44336;
    font-size: 30px;
    display: block;
    padding-bottom: 10px;
    }
    #cart > .btn:hover > .fa {
    color: #B71C1C;
    }
    (изменили фон, бордюры, убрали ненужную тень, добавили бордюрам и иконке корзины смену цвета при наведении курсором мыши)

    Результат:

    3.png

    Можно сделать даже круглую кнопку, но это уже самостоятельно [​IMG]

    На сегодня всё, до новых встреч.
     
    lyumicka нравится это.