Сообщений в теме: 92

[arver]

Добрый день,уважаемые модераторы возможно ли произвести изменения по дизайну как на картинке?
Аккаунт SL-203796

Прикрепленные изображения

• 

[daria_dnk]

arver (14 Июнь 2014 - 20:42) писал:

up

Здравствуйте! Так можно сделать. Но советую Вам расположить функциональные элементы(кнопку, счетчик товара, цену и название товара) все-таки под изображением товара, чтобы не было больших проблем со стилями. Сообщите пожалуйста, если данный вариант Вас устроит.

[arver]

Доброй ночи,нет все таки хотелось бы отображения справа от товара,ну разве что название товара можно расположить под изображением.

[Dars]

arver (16 Июнь 2014 - 06:36) писал:

up

В шаблоне "Товары" находим строку:

						  <h5><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h5>

и перемещаем после строк:

{% IF GOODS_VIEW_TYPE=1 %}
			  <ul class="grid" id="product_list">
				{% FOR goods %}
				  <li class="elem">

Затем, в style.css находим и заменяем следующие строки:

#category_view_type.grid_view #product_list .product_image_wrapper{position:relative;padding:8px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;
box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;background:#ffffff;margin-left:10px;}

на

#category_view_type.grid_view #product_list .product_image_wrapper {position:relative;padding:70px 8px 8px 8px;margin-left:10px;float: left;}

#category_view_type.grid_view #product_list li {
display: inline-block;
display: -moz-inline-stack;
position: relative;
width: 300px;
min-height: 250px;
margin: 0 15px;
padding: 0;
border: 0;
vertical-align: top;
text-align: center;
z-index: 2;
}

на

#category_view_type.grid_view #product_list li {
display: inline-block;
display: -moz-inline-stack;
position: relative;
width: 300px;
min-height: 250px;
margin: 0 15px;
padding: 0 10px;
border: 0;
vertical-align: top;
text-align: center;
z-index: 2;
border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;
box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;background:#ffffff;
}

#category_view_type.grid_view #product_list .product_list_details_left h5{padding:12px 0 5px 0;font-size:14px;font-weight:400}

на

.elem h5{padding:12px 0 5px 0;font-size:14px;font-weight:400;}

#category_view_type.grid_view #product_list .product_list_details{display:block;overflow:hidden;min-height:85px;}

на

#category_view_type.grid_view #product_list .product_list_details{display:block;overflow:hidden;min-height:85px;}

.add_to_cart_ph{display:block;background-color:#da3b44;background-image:url('http://design.hozbe.ru/cart_white.png');background-repeat:no-repeat;background-position:13px 50%;

на

.add_to_cart_ph{display:block;background-color:green;background-image:url('http://design.hozbe.ru/cart_white.png');background-repeat:no-repeat;background-position:13px 50%;

(вместо green можете подставить свое значение).
Так мы отстилизуем отображение товаров в каталоге. Если это подходит, то мы напишем инструкцию и для товаров на главной.

[arver]

Добрый вечер,надо еще подкорректировать,под цифрой 1 показал,что отступы текста везде разное,надо сделать везде одинаковое.
2)Надо бы размеры уменьшить чтобы вмещалось 3 блока как раньше,сейчас некрасиво..
3)Красным выделил как должна выглядить карточка товара(тоесть кнопку купить сместить вниз,добавить счетчик товара,цену ниже опустить и описание выравнять

Прикрепленные изображения

• 

[arver]

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

[arver]

сделал бэкап,поскольку все выглядит некрасиво,еще раз прилагаю картинку как хотелось бы переделать каталог товаров

Прикрепленные изображения

• 

[Vaccina]

Необходимо видеть изменения, чтобы мы могли далее консультировать

<h5><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h5>

перенесите поставьте после:

<div> 
					  <div class="product_image_wrapper">
						<a href="{goods.URL | url_amp}" title="{goods.NAME}"  class="product_img_link">
						  <img class="product_image" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" />
						</a>
					  </div>

В style.css найдите:

#category_view_type.grid_view #product_list li {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 0 none;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
	display: -moz-inline-stack;
	margin: 0 15px;
	min-height: 250px;
	padding: 0 10px;
	position: relative;
	text-align: center;
	vertical-align: top;
	width: 300px;
	z-index: 2;
}

замените на:

#category_view_type.grid_view #product_list li {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 0 none;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
	display: -moz-inline-stack;
	margin: 0 15px;
	min-height: 250px;
	padding: 0 10px;
	position: relative;
	text-align: center;
	vertical-align: top;
	width: 265px;
	z-index: 2;
}

Инструкция по установке счетчика: http://forum.storela...__20#entry36569

[arver]

Сделал изменения в коде,как вы предложили выше....отображение не такое как надо...(

[Vaccina]

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

[arver]

Текст теперь идет в столбик,и наверное надо как то задать определенный размер изображения(а то получается непонятно-что,как например ватные палочки на главной) и товары идут столбиком а не 3-4 товара на строке как раньше

p.s.все изменения еще раз проделал

[Vaccina]

В style.css найдите:

#category_view_type.grid_view #product_list .product_image_wrapper {
float: left;
margin-left: 10px;
padding: 70px 8px 8px;
position: relative;
}
#category_view_type.grid_view #product_list .product_image {
margin: auto;
max-height: 120px;
max-width: 184px;
z-index: 1;
}

замените на:

#category_view_type.grid_view #product_list .product_image_wrapper {
float: left;
padding: 8px;
position: relative;
}
#category_view_type.grid_view #product_list .product_image {
margin: auto;
max-height: 120px;
max-width: 120px;
z-index: 1;
}

далее найдите:

#category_view_type.grid_view #product_list li {
	 background: none repeat scroll 0 0 #FFFFFF;
	 border: 0 none;
	 border-radius: 2px;
	 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
	 display: -moz-inline-stack;
	 margin: 0 15px;
	 min-height: 250px;
	 padding: 0 10px;
	 position: relative;
	 text-align: center;
	 vertical-align: top;
	 width: 265px;
	 z-index: 2;
}

уменьшите еще немного значение width, например: width: 255px;
Должно получиться по 3 товара в ряд

[arver]

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

+так же уменьшил ширину,а товары все также в столбик идут..((

Прикрепленные изображения

• 

[Vaccina]

простите,с названием товаров напутала вам.
в шаблоне Товары находим:

<h5><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h5>

переносим обратно и сразу после него вставляем:

<div class="clear"></div>

На счет отображения столбиком найдите:

#category_view_type.grid_view #product_list li {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 0 none;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1);
	display: -moz-inline-stack;
	margin: 0 15px;
	min-height: 250px;
	padding: 0 10px;
	position: relative;
	text-align: center;
	vertical-align: top;
	width: 235px;
	z-index: 2;
}

display: -moz-inline-stack;  замените на:   display: inline-block;

Фото товаров не было отцентровано, был задан отступ, найдите:

#category_view_type.grid_view #product_list a.product_img_link {
	border: 0 none;
	float: none;
	margin: 0;
}

замените на:

#category_view_type.grid_view #product_list a.product_img_link {
	border: 0 none;
	display: table-cell;
	float: none;
	height: 180px;
	margin: 0;
	vertical-align: middle;
}

[arver]

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

+вопрос как добавить отображение под ценой,рейтинга товара?

Прикрепленные изображения

• 

[Vaccina]

Когда я вас просила вернуть строку названия товара назад, я имела ввиду поставить ее перед этим блоком:

<div> 
					  <div class="product_image_wrapper">
						<a href="{goods.URL | url_amp}" title="{goods.NAME}"  class="product_img_link">
						  <img class="product_image" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" />
						</a>
					  </div>

Чтобы появились звездочки рейтинга, необходимо, чтобы к товару был добавлен отзыв, это стандартный функционал.

[arver]

исправил,однако ничего не поменялось.
p.s.по поводу звездочек я имел ввиду чтобы они отображались независимо от отзыва(имеется ввиду бледноватые звездочки рейтинга и кол-во ярких в зависимости от отзыва)

[arver]

приложил картинку по отображению рейтинга

Прикрепленные изображения

• 

[Vaccina]

На счет названия товаров, почистите кэш, изменения имеются.
На счет рейтинга, в шаблоне Товары найдите:

<a href="{goods.URL | url_amp}?&amp;form%5Bgoods_id%5D=opinion#goodsDataOpinionAdd">Оставить отзыв первым</a>

замените на:

<img src="{ASSETS_IMAGES_PATH}raiting.jpg" alt="" />

где raiting.jpg будет картинкой данных тусклых звездочек, которое вам необходимо будет загрузить в раздел Редактор шаблонов.

Когда отзыву поставят оценку, эта оценка автоматически покажется в каталоге у товара звездочками.

[arver]

рейтинг пока в принципе не так важен как правильное отображение остального,поскольку долго я не могу в корявом* виде оставлять,т.к. сайт рабочий и идет реклама

а все понял...дело было не в кэше я просто ориентировался на изменения,просматривая отображение товаров на главной

название теперь вернулось куда нужно,разве что отступы везде разные,картинку прилагаю

Прикрепленные изображения

•