Moushe.ru

Блог обо всём

OcStore 1.5.4 Bootstrap template (9 часть)



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

OCSTORE BOOTSTRAP

Список задач на сегодня:

1. Изменим кнопки на странице категорий товара

2. Изменим CSS стили (для всех шагов этого урока)

3. Изменим кнопки на странице сравнения товара

4. Изменим модуль рекомендуемые товары

5. Социальные кнопки в футер сайта

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

1.1. Откроем файл ../catalog/view/theme/bootsmy/template/product/category.tpl и удалим эту строку (68):

<div class="product-compare"><a href="<?php echo $compare; ?>" id="compare-total"><?php echo $text_compare; ?></a></div>

изменим эти строки (92-94):

<div class="cart">
<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" />
</div>

на эти:

<div class="cart">
<button class="btn btn-small btn-success" type="button" onclick="top.location.href=('<?php echo $product['href']; ?>');"/><?php echo $button_info; ?></button>
<button class="btn btn-small btn-primary" id="button-cart" type="button" onclick="addToCart('<?php echo $product['product_id']; ?>');"/><?php echo $button_cart; ?></button>
</div>

1.2. Откроем файл ../catalog/language/russian/russian.php и после этой строки (24):

$_['button_continue']       = 'Продолжить';

вставим эту:

$_['button_info']            = 'Инфо';

1.3. Откроем файл ../catalog/controller/product/category.php и после этой строки (101):

$this->data['text_limit'] = $this->language->get('text_limit');

вставим эту:

$this->data['button_info'] = $this->language->get('button_info');

2. Откроем файл ../catalog/view/theme/bootsmy/stylesheet/stylesheet.css и вместо этих строк (691-695):

.product-filter {
border-bottom: 1px solid #EEEEEE;
padding-bottom: 5px;
overflow: auto;
}

вставим эти:

.product-filter {
border-bottom: 1px solid #EEEEEE;
padding-bottom: 5px;
margin-bottom: 15px;
overflow: auto;
}

изменим эти строки (800-803):

.product-grid {
width: 100%;
overflow: auto;
}

на эти:

.product-grid {
width: 100%;
overflow: auto;
text-align: center;
}

изменим эти строки (518-520):

.box {
margin-bottom: 20px;
}

на эти:

.box {
margin-bottom: 20px;
text-align: center;
}

изменим эти строки (570-576):

.box-product .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}

на эти:

.box-product .name a {
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}

изменим эти строки (552-558):

.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}

на эти:

.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #DBDEE1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

изменим эти строки (572-575):

.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}

на эти:

.box-product .image img {
padding: 3px;
}

проматываем стили в самый низ и добавляем эти строки:

#share42 {display: inline-block; padding: 6px 0 0 6px; background: #F8F8F8; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; border-radius: 0 0 5px 5px; text-align:right;float: right;}
#share42:hover {background: #F6F6F6;}
#share42 a {opacity: 0.5}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}

3. Откроем файл ../catalog/view/theme/bootsmy/template/product/compare.tpl и вместо этой строки (115):

<td><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></td>

вставим эту:

<td><button class="btn btn-small btn-primary" id="button-cart" onclick="addToCart('<?php echo $product['product_id']; ?>');"/><?php echo $button_cart; ?></button></td>

вместо этой (121):

<td class="remove"><a href="<?php echo $product['remove']; ?>" class="button"><?php echo $button_remove; ?></a></td>

эту:

<td class="remove"><a href="<?php echo $product['remove']; ?>" class="btn btn-small btn-danger"><?php echo $button_remove; ?></a></td>

вместо этой (126):

<div class="right"><a href="<?php echo $continue; ?>" class="button"><?php echo $button_continue; ?></a></div>

эту:

<div class="right"><a href="<?php echo $continue; ?>" class="btn btn-success"><?php echo $button_continue; ?></a></div>

и вместо этой (131):

<div class="right"><a href="<?php echo $continue; ?>" class="button"><?php echo $button_continue; ?></a></div>

эту:

<div class="right"><a href="<?php echo $continue; ?>" class="btn btn-success"><?php echo $button_continue; ?></a></div>

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

$_['heading_title'] = 'Рекомендуем';

вставим эту:

$_['heading_title'] = 'Рекомендуемые товары';

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

<div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div>

вставим эту:

<button class="btn btn-small btn-primary" type="button" onclick="addToCart('<?php echo $product['product_id']; ?>');"/><?php echo $button_cart; ?></button>

5.1. Недавно я делал другу сайт визитку и наткнулся на хороший сайт с социальными кнопками, давайте встроим их в футер нашего шаблона. Заходим на сайт http://share42.com/ru и выбираем необходимые вам кнопки, так-же вы можете настроить их порядок.

Я настроил так:

  • размер кнопок 24×24
  • В контакте, Facebook, Одноклассники, Mail.ru, Google Plus, Избранное, Наверх
  • тип панели с иконками: горизонтальная
  • кодировка сайта: utf-8

Жмём кнопку скачать готовый скрипт. Не закрываем сайт!

5.2. Открываем папку catalog\view\theme\bootsmy и копируем в неё содержимое архива (папку с файлами share42)

5.3. Заходим на сайт и выполняем 3 шаг инструкции, копируем получившуюся ссылку из 5 шага.

5.4. Откроем файл ../catalog/view/theme/bootsmy/template/common/footer.tpl и после этих строк (31-38):

<ul>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
<li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>
<li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
</ul>
</div>
</div>

вставим получившуюся ссылку из 5 шага (я делаю сайт на своём сайте через OpenServer, поэтому мой код выглядит так):

<div class="share42init"></div>
<script type="text/javascript" src="catalog/view/theme/bootsmy/share42/share42.js"></script>

Вот наш урок и подошёл к концу. До новых встреч.

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

  1. Bad_Mazafakka

    26.03.2013 at 10:08

    Владислав, привет. Можешь подсказать как реализовать мультивалютность в ocstore 1.5.4.1? Расклад такой: существуют товары, у которых фиксированная цена в прайсах в 3-х разных валютах (долл, руб. и евро, соответственно). Как можно настроить выбор валюты в карточке определённого товара, чтобы не приходилось при смене курса доллара ручками всё остальное пересчитывать?!

  2. Денис

    26.03.2013 at 10:11

    Здравствуйте, Влад! Спасибо Вам за то, что делитесь своим опытом, изучаю Ваши уроки по opencart. Хочу спросить, в этом шаблоне, Вы специально не укорачивали слайд-шоу?

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

      26.03.2013 at 21:35

      До слайдшоу ещё руки не дошли — изменить размер слайдшоу секундное дело. 🙂

  3. Денис

    26.03.2013 at 22:24

    Владислав, а как Вы лично относитесь к Bootstrap’у и фреймворкам вообще? Среди разработчиков мнения неоднозначны есть например и такое: http://vas3k.ru/blog/306/, интересует Ваше.

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

      27.03.2013 at 21:41

      Bootstrap хорош для переделки админки сайтов — админка становится визуально красивее и удобнее, в создании же шаблонов сайта я его не советую использовать — труднее придумать оригинальную тему и сложно переделывать уже существующую.

  4. Ольга

    28.03.2013 at 15:43

    Владислав, добрый день!

    Нужна Ваша помощь в настройке ЧПУ, а именно, — файл (.htaccess) что удаляем и что добавляем и т.д.

    Opencart 1.5.4.1

    Есть ли инструкция (или урок) — как правильно настроить, желательно подробно.

    Спасибо

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

      28.03.2013 at 21:34

      Нет такого урока у меня нет.

  5. Александр

    29.03.2013 at 14:30

    Добрый день, Влад! Спасибо Вам за уроки, очень помогают в освоении OpenCart!
    Нужна Ваша помощь:
    Как сделать в карточке товаров дополнительную кнопку «Рассрочка» и что бы при нажатии этой кнопки открывалась анкета на другом сайте. Т.е. в эту кнопку встроить ссылку на другой сайт.

    И как в закладках в Карточке товара, я добавил Закладку «Вопросы», как там сделать заполняемые поля, как в Отзывах и что бы была возможность отвечать на эти вопросы и ответы показывались сразу под вопросами.

    Заранее спасибо!

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

      29.03.2013 at 17:20

      Обратитесь к программистам, за вознаграждение всё сделают за пару дней в лучшем виде.

  6. Михаил

    10.05.2013 at 23:16

    Владислав, подскажите, а как добавить слева под категориями МЫ в контакте? Спасибо

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

      11.05.2013 at 21:13

      Скачиваете модуль html и вставляете в него код api в контакте

  7. Михаил

    12.05.2013 at 12:58

    Владислав, а можно по подробней?

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

      12.05.2013 at 21:25

      1. Скачиваете это — http://opencartforum.ru/files/file/981-html-blok/
      2. В контакте, внизу жмём ссылку разработчикам — на новой странице жмём кнопку — Авторизация и виджеты для сайтов, на новой странице ищем — Виджеты для сайтов — Сообщества, жмём ссылку, вставляем в первую строку ссылку на группу или страницу в контакте, настраиваем ширину, длину и т.д. Копируем получившийся код, вставляем его в html блок, задаём отображение блока.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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