Сегодня мы с вами поработаем над кнопкой в корзину и поправим стили категорий, поиска, производителей (подкорректируем стили блоков товаров, заголовков, ссылок в закладки, сравнения).

12

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

1. Работаем с category.tpl

2. Работаем с search.tpl

3. Работаем с manufacturer_info.tpl

4. Работаем с stylesheet.css

Приступим:

1. Откроем файл ../catalog/view/theme/bearstore/template/product/category.tpl и вместо этих строк (93-95):

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

вставим эту:

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

2. Откроем файл ../catalog/view/theme/bearstore/template/product/search.tpl и вместо этой строки (110):

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

вставим эту:

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

3. Откроем файл ../catalog/view/theme/bearstore/template/product/manufacturer_info.tpl и вместо этих строк (61-63):

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

вставим эту:

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

4. Откроем файл ../catalog/view/theme/bearstore/stylesheet/stylesheet.css и вместо этих строк (878-882):

.product-list .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
}

вставим эти:

.product-list .name a {
color: #60a859;
font: 18px Verdana;
line-height: 14px;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.product-list .name a:hover {
text-decoration: underline;
}

вместо этих строк (925-935):

.product-list .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-list .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left 60% no-repeat;
}

вставим эти:

.product-list .wishlist a, .product-list .compare a {
text-decoration: none;
padding-left: 18px;
display: block;
color: #60a859;
}
.product-list .wishlist a:hover, .product-list .compare a:hover {
text-decoration: underline;
}

вместо этих строк (931-934):

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

вставим эти:

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

вместо эти строк (936-1003):

.product-grid > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 15px;
}
#column-left + #column-right + #content .product-grid > div {
width: 125px;
}
.product-grid .image {
display: block;
margin-bottom: 0px;
}
.product-grid .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.product-grid .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.product-grid .description {
display: none;
}
.product-grid .rating {
display: block;
margin-bottom: 4px;
}
.product-grid .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.product-grid .price-old {
color: #F00;
text-decoration: line-through;
}
.product-grid .price-new {
font-weight: bold;
}
.product-grid .price .price-tax {
display: none;
}
.product-grid .cart {
margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
margin-bottom: 3px;
}
.product-grid .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}

вставим эти:

.product-grid > div {
padding: 10px;
display: inline-block;
vertical-align: top;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
border-radius: 5px;
}
.product-grid > div:hover {
border: 1px solid #60a859;
}
#column-left + #column-right + #content .product-grid > div {
width: 125px;
}
.product-grid .image {
display: block;
margin-bottom: 0px;
}
.product-grid .image img {
padding: 3px;
}
.product-grid .name a {
color: #60a859;
font: 18px Verdana;
width: 160px;
line-height: 14px;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.product-grid .name a:hover {
text-decoration: underline;
}
.product-grid .description {
display: none;
}
.product-grid .rating {
display: block;
margin-bottom: 4px;
}
.product-grid .price {
display: block;
font-weight: bold;
color: #333333;
font: 18px Arial;
margin-bottom: 4px;
}
.product-grid .price-old {
color: #F00;
text-decoration: line-through;
}
.product-grid .price-new {
font-weight: bold;
}
.product-grid .price .price-tax {
display: none;
}
.product-grid .cart {
margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
margin-bottom: 3px;
}
.product-grid .wishlist a, .product-grid .compare a {
color: #333333;
text-decoration: none;
}
.product-grid .wishlist a:hover, .product-grid .compare a:hover {
text-decoration: underline;
}

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