Opencart 1.5.x - Ocstore 1.5.x - Переделываем Корзину (2 Вариант)

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

  1. TopicStarter Overlay
    Offline

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

    Сообщения:
    2.327
    Симпатии:
    77.287
    Репутация:
    170
    Недавно мне пришлось поработать с интернет магазином на OcStore 1.5.x и мне понравилась реализация корзины шаблона которую сделал, в этой статье мы будем видоизменять корзину в шапке стандартного шаблона OcStore 1.5.x. (2 вариант)

    1.png

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

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

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

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

    Код:
    $_['text_items']  = '%s (%s)';
    2. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вместо этих строк (144-204):

    Код:
    #header #cart {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 9;
    min-width: 300px;
    }
    #header #cart .heading {
    float: right;
    margin-right: 2px;
    height: 30px;
    padding-left: 14px;
    padding-right: 14px;
    background: url('../image/cart.png') 0% 50% no-repeat;
    position: relative;
    z-index: 1;
    }
    #header #cart .heading h4 {
    color: #333333;
    font-size: 15px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 3px;
    }
    #header #cart .heading a {
    color: #000;
    text-decoration: none;
    display: block;
    }
    #header #cart .heading a span {
    background: url('../image/arrow-down.png') 100% 50% no-repeat;
    padding-right: 15px;
    margin-left:30px;
    line-height: 30px;
    }
    #header #cart .content {
    clear: both;
    display: none;
    position: relative;
    top: 2px;
    padding: 8px;
    min-height: 150px;
    border-top: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    -webkit-border-radius: 0px 0px 7px 7px;
    -moz-border-radius: 0px 0px 7px 7px;
    -khtml-border-radius: 0px 0px 7px 7px;
    border-radius: 0px 0px 7px 7px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    background: #FFF;
    }
    #header #cart.active .heading {
    font-weight:700;
    }
    #header #cart.active .content {
    display: block;
    }
    вставим эти:

    Код:
    #cart_img {
    position: fixed;
    top: 20px;
    right: 35px;
    }
    #cart {
    position: fixed;
    top: 60px;
    right: 0px;
    z-index: 9;
    min-width: 300px;
    }
    #cart .heading {
    float: right;
    margin-right: 2px;
    height: 30px;
    padding-left: 14px;
    padding-right: 14px;
    position: relative;
    z-index: 1;
    }
    #cart .heading h4 {
    color: #333333;
    font-size: 15px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 3px;
    }
    #cart .heading a {
    color: #000;
    text-decoration: none;
    display: block;
    }
    #cart .heading a span {
    background: url('../image/arrow-down.png') 100% 50% no-repeat;
    padding-right: 15px;
    margin-left:30px;
    line-height: 30px;
    }
    #cart .content {
    clear: both;
    display: none;
    position: relative;
    top: 2px;
    padding: 8px;
    min-height: 150px;
    border: 1px solid #EEEEEE;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    
    background: #FFF;
    }
    #cart.active .content {
    display: block;
    }
    3. Откроем файл ../catalog/view/theme/default/template/module/cart.tpl и вместо этой строки (1):

    Код:
    <div id="cart">
    вставим эти:

    Код:
    <div id="cart_img"><a href="?route=checkout/cart"><img src="catalog/view/theme/default/image/cart.png"></a></div>
    <div id="cart">
    Результат:

    2.png

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

    1.1. В файле ../catalog/language/russian/module/cart.php вместо этой строки (6):

    Код:
    $_['text_items']  = '%s (%s)';
    вставляю эту:

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

    Код:
    $_['text_items']  = '%s (%s)';
    вставляю эту:

    Код:
    $_['text_items']  = '%s';
    2. В файле ../catalog/view/theme/default/template/module/cart.tpl вместо этих строк (1-4):

    Код:
    <div id="cart">
    <div id="cart_img"><a href="?route=checkout/cart"><img src="catalog/view/theme/default/image/cart.png"></a></div>
    <div class="heading">
    <a title="<?php echo $heading_title; ?>"><span id="cart-total"><?php echo $text_items; ?></span></a></div>
    вставляю эти:

    Код:
    <div id="cart">
    <div class="heading">
    <a href="?route=checkout/cart"><img src="catalog/view/theme/default/image/cart.png"></a>
    <a title="<?php echo $heading_title; ?>"><span id="cart-total"><?php echo $text_items; ?></span></a></div>
    3. В файле ../catalog/view/theme/default/stylesheet/stylesheet.css вместо этих строк (144-200):

    Код:
    #cart_img {
    position: fixed;
    top: 20px;
    right: 35px;
    }
    #cart {
    position: fixed;
    top: 60px;
    right: 0px;
    z-index: 9;
    min-width: 300px;
    }
    #cart .heading {
    float: right;
    margin-right: 2px;
    height: 30px;
    padding-left: 14px;
    padding-right: 14px;
    position: relative;
    z-index: 1;
    }
    #cart .heading h4 {
    color: #333333;
    font-size: 15px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 3px;
    }
    #cart .heading a {
    color: #000;
    text-decoration: none;
    display: block;
    }
    #cart .heading a span {
    background: url('../image/arrow-down.png') 100% 50% no-repeat;
    padding-right: 15px;
    margin-left:30px;
    line-height: 30px;
    }
    #cart .content {
    clear: both;
    display: none;
    position: relative;
    top: 2px;
    padding: 8px;
    min-height: 150px;
    border: 1px solid #EEEEEE;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    
    background: #FFF;
    }
    #cart.active .content {
    display: block;
    }
    вставляю эти:

    Код:
    #cart {
    position: fixed;
    top: 60px;
    right: 0;
    z-index: 9;
    }
    #cart .heading {
    float: right;
    height: 70px;
    padding: 10px;
    position: relative;
    z-index: 1;
    border: 1px solid #eee;
    background: #fff;
    }
    #cart .heading a {
    color: #000;
    text-decoration: none;
    display: block;
    }
    #cart .heading a span {
    background: url('../image/arrow-down.png') 100% 50% no-repeat;
    padding-right: 15px;
    margin-left: 10px;
    line-height: 30px;
    }
    #cart .content {
    clear: both;
    display: none;
    position: relative;
    top: 2px;
    padding: 8px;
    min-height: 150px;
    border: 1px solid #EEEEEE;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    
    background: #FFF;
    }
    #cart.active .content {
    display: block;
    }
    Результат моих правок:

    1.png

    Надеюсь вам понравилась и статья и финальный результат. До новых встреч, следите за нашими новостями.
     
    semandro нравится это.