Moushe.ru

Блог обо всём

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



Сегодня мы продолжим доделывать карточку товара.

OCSTORE

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

1. Русифицируем фразу в ColorBox

2. Добавим иконку с информацией

3. Изменим стиль табов

4. Ответ на просьбу Жени

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

1. Когда в карточке товара мы просматриваем изображения товаров то видим такие надписи: image, of, использовать в русском интернет магазине надписи на английском  языке на мой взгляд не очень правильно. Будем исправлять! Откроем файл ../catalog/view/javascript/jquery/colorboxjquery.colorbox.js и вместо этой строки (31):

current: "image {current} of {total}",

вставим эту:

current: "Изображение {current} из {total}",

сохраняем файл в кодировке utf-8 без bom (Notepad++  — Кодировки — Кодировать в UTF-8 (без BOM)).

2. Добавим к выпадающему списку действия иконку с информацией. Откроем файл ../catalog/view/theme/bootsmy/template/product/product.tpl и после этих строк (219-220):

</ul>
</div>

вставим эту:

<i class="icon-info-sign" title="Нажмите на кнопку действия и вы сможете добавить товар в закладки или в список сравнения"></i>

сохраняем файл в кодировке utf-8 без bom.

3. Откроем файл ../catalog/view/theme/bootsmy/stylesheet/stylesheet.css и вместо этого кода (500-508):

.tab-content {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
padding: 10px;
margin-bottom: 20px;
z-index: 2;
overflow: auto;
}

вставим этот:

.tab-content {
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
padding: 10px;
margin-bottom: 20px;
z-index: 2;
overflow: auto;
-webkit-border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-khtml-border-radius: 0px 0px 15px 15px;
border-radius: 0px 0px 15px 15px;
}

(мы закруглили нижние углы у табов), если вы хотите закруглить вкладки переключения табов, то изменим этот код (480-495):

.htabs a {
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF url('../image/tab.png') repeat-x;
padding: 7px 15px 6px 15px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000000;
margin-right: 2px;
display: none;
}

на этот:

.htabs a {
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF url('../image/tab.png') repeat-x;
padding: 7px 15px 6px 15px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000000;
margin-right: 2px;
display: none;
-webkit-border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-khtml-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}

4. Женя привет, открываем снова файл ../catalog/view/theme/bootsmy/template/product/product.tpl и вместо этой строки (229):

<div><img src="catalog/view/theme/default/image/stars-<?php echo $rating; ?>.png" alt="<?php echo $reviews; ?>" />&nbsp;&nbsp;<a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $reviews; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $text_write; ?></a></div>

вставим эту:

<div><img src="catalog/view/theme/default/image/stars-<?php echo $rating; ?>.png" alt="<?php echo $reviews; ?>" />&nbsp;&nbsp;<a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $reviews; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $text_write; ?></a> <i class="icon-info-sign" title="тут ваш текст"></i></div>

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

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

  1. Добрый день! БОЛЬШОЕ-БОЛЬШОЕ Вам спасибо!

  2. Галина

    17.05.2013 at 14:49

    Чем открыть файл colorbox.js?

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

      17.05.2013 at 20:59

      любым текстовым редактором, хоть блокнотом.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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