Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Количество Товаров И Название

Автор metafora, 04 мая 2015 15:29

Авторизуйтесь для ответа в теме

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

#1 metafora

Активный участник

Пользователи
205 сообщений

Отправлено 04 Май 2015 - 15:29

Добрый день..
Хотела бы попробовать сделать так, чтобы было 4 товара в строчке, а не 3 как сейчас.
Еще хотела бы название товара сделать сверху.
Нарисовала примерно, как это представляю

помогите пожалуйста.. rayban10.ru

Наверх

#2 Danil

Активный участник

Пользователи
4 645 сообщений

Отправлено 05 Май 2015 - 18:27

metafora (04 Май 2015 - 15:29) писал:

Добрый день..
Хотела бы попробовать сделать так, чтобы было 4 товара в строчке, а не 3 как сейчас.
Еще хотела бы название товара сделать сверху.
Нарисовала примерно, как это представляю

помогите пожалуйста.. rayban10.ru

В main.css найдите код

.products-grid li.item{float:left;position:relative;/* width:213px;*/ padding:0px 0px 17px 0px; text-align:center;}

и замените на

.products-grid li.item {
  float: left;
  position: relative;
  width: 167px;
  text-align: center;
}

Так же найдите

.product-box{padding:14px 14px 14px 14px; background:#FFF;/*height:280px;*/}

и замените на

.product-box{background:#FFF;}

В bootstrap.min.css найдите код

.btn {
  display: inline-block;
  padding: 2px 5px 2px 5px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255,255,255,0.75);
  vertical-align: middle;
  cursor: pointer;
  border: solid 1px;
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}

и замените на

.btn {
  display: inline-block;
  padding: 2px 0px 2px 0px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255,255,255,0.75);
  vertical-align: middle;
  cursor: pointer;
  border: solid 1px;
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}

В main.css найдите

.product-image {
  vertical-align: middle;
  text-align: center;
  padding: 0px;
  border: 0px solid #E2E2E2;
  height: 204px;
  width: 100%;
  cursor: pointer;
}

и замените на

.product-image {
  vertical-align: middle;
  text-align: center;
  padding: 0px;
  border: 0px solid #E2E2E2;
  height: 100px;
  width: 100%;
  cursor: pointer;
}

В шаблоне Товары

Скрытый текст

<ul class="products-grid">
										  {% FOR goods %}
										   <li class="span3 item {goods.index0 | is_divided("4","first","")} {goods.index | is_divided("4","last","")}">
												<div class="product-box">
														<div class="span12">
														  <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">
														  <div class="product-image" style="background: url('{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}') no-repeat center center; background-size: contain;
														  /* IE8 */
														  -ms-filter:'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}',sizingMethod='scale')'\9;
														  /* IE < 8 */
														  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}', sizingMethod='scale')\9;
														  background-image: none\9; /* IE ≤ 9.0 */">										   
														  </div></a>
												  </div>
														<div class="quick-shop">
														  <div class="bg-quick-shop">
														  <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{goods.MIN_PRICE_NOW_ID}">
																<div>
																		<input type="hidden" name="hash" value="{HASH}" />
																		<input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
																		<input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
																		<a onclick="$('.product-form-{goods.MIN_PRICE_NOW_ID}').attr('rel', 'quick').submit();return false;" title="Быстро оформить заказ">&nbsp;</a>
																  </div>
																</form>
														  </div>
														</div>
								<table  style="width: 100%;">
														<tr><td height="50" style="text-align: center">
														<div  class="product-name">
														<h2><a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}" style="*height:;">{goods.NAME}</a></h2>
														</div>
														</td>
														</tr>
		</table>
				<!-- Блок характеристик товара. Показываем его если указаны характеристики -->
		  {% IFNOT goods_features_empty %}
				<table class="goodsDataFeatures">
				  <tr>
						{% FOR goods_features%}
						  <td>
								<p>{goods_features.NAME}</p>
						  </td>
						  <td>
								{goods_features.VALUE}
						  </td>
						  {goods_features.index | is_divided("2","</tr><tr>","")}
						{% ENDFOR %}
				  </tr>
				</table>
		  {% ENDIF %}
		  <!-- END Блок характеристик товара. Показываем его если указаны характеристики -->
		 <table  style="width: 100%;">
														<tr><td height="50" style="text-align: center">
														<div class="price-now">{goods.MIN_PRICE_NOW}<font size="5">руб</font></div>
		 
												{% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
												  <div class="old-price2">
														<span class="goodsDataMainModificationPriceOld price" title="Мы снизили цену на &laquo;{goods.NAME}&raquo;. Старая цена - {goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT} руб.">
												   <font color="#929292"> {goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT}руб</font>
												  </span>
												  </div>
											   
												{% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
												  <div class="old-price2">
														<span class="goodsDataMainModificationPriceOld price" title="Мы снизили цену на &laquo;{goods.NAME}&raquo;. Старая цена - {goods.MIN_PRICE_OLD} руб.">
														<font color="#929292">{goods.MIN_PRICE_OLD}руб</font>
												  </span>
												  </div>
												{% ENDIF %}
		 
														</td></tr>
		  </table>
		   <table  style="width: 100%;">
														<tr><td height="50" style="text-align: center; width: 0px;">
		 
		   <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}" class="goodsListForm">
<input type="hidden" name="hash" value="{HASH}" />
<input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
<input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
<button class="btn btn-success" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" title="Положить &laquo;{goods.NAME}&raquo;в корзину" type="button">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Купить&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
</form></td><td height="50" style="text-align: center; width:0;">
		 
														<button onclick="document.location='{goods.URL_MIN_PRICE_NOW | url_amp}';return false;" class="btn btn-success2" title="Узнать подробнее о &laquo;{goods.NAME}&raquo;" type="button">&nbsp;Подробнее&nbsp;</button>	 
														</td></tr>
														</table>
												  </div>
												</li>
										 {% ENDFOR goods %}
										</ul>

и замените на

Скрытый текст

<ul class="products-grid">
										  {% FOR goods %}
										   <li class="span3 item {goods.index0 | is_divided("4","first","")} {goods.index | is_divided("4","last","")}">
												<div class="product-box">
<table  style="width: 100%;">
														<tr><td height="50" style="text-align: center">
														<div  class="product-name">
														<h2><a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}" style="*height:;">{goods.NAME}</a></h2>
														</div>
														</td>
														</tr>
		</table>
														<div class="span12">
														  <a title="{goods.NAME}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">
														  <div class="product-image" style="background: url('{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}') no-repeat center center; background-size: contain;
														  /* IE8 */
														  -ms-filter:'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}',sizingMethod='scale')'\9;
														  /* IE < 8 */
														  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}', sizingMethod='scale')\9;
														  background-image: none\9; /* IE ≤ 9.0 */">										   
														  </div></a>
												  </div>
														<div class="quick-shop">
														  <div class="bg-quick-shop">
														  <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="goodsListItemCatalogueAddToCartButton product-form-{goods.MIN_PRICE_NOW_ID}">
																<div>
																		<input type="hidden" name="hash" value="{HASH}" />
																		<input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
																		<input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
																		<a onclick="$('.product-form-{goods.MIN_PRICE_NOW_ID}').attr('rel', 'quick').submit();return false;" title="Быстро оформить заказ">&nbsp;</a>
																  </div>
																</form>
														  </div>
														</div>
								
				<!-- Блок характеристик товара. Показываем его если указаны характеристики -->
		  {% IFNOT goods_features_empty %}
				<table class="goodsDataFeatures">
				  <tr>
						{% FOR goods_features%}
						  <td>
								<p>{goods_features.NAME}</p>
						  </td>
						  <td>
								{goods_features.VALUE}
						  </td>
						  {goods_features.index | is_divided("2","</tr><tr>","")}
						{% ENDFOR %}
				  </tr>
				</table>
		  {% ENDIF %}
		  <!-- END Блок характеристик товара. Показываем его если указаны характеристики -->
		 <table  style="width: 100%;">
														<tr><td height="50" style="text-align: center">
														<div class="price-now">{goods.MIN_PRICE_NOW}<font size="5">руб</font></div>
		 
												{% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
												  <div class="old-price2">
														<span class="goodsDataMainModificationPriceOld price" title="Мы снизили цену на &laquo;{goods.NAME}&raquo;. Старая цена - {goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT} руб.">
												   <font color="#929292"> {goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT}руб</font>
												  </span>
												  </div>
											   
												{% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
												  <div class="old-price2">
														<span class="goodsDataMainModificationPriceOld price" title="Мы снизили цену на &laquo;{goods.NAME}&raquo;. Старая цена - {goods.MIN_PRICE_OLD} руб.">
														<font color="#929292">{goods.MIN_PRICE_OLD}руб</font>
												  </span>
												  </div>
												{% ENDIF %}
		 
														</td></tr>
		  </table>
		   <table  style="width: 100%;">
														<tr><td height="50" style="text-align: center; width: 0px;">
		 
		   <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}" class="goodsListForm">
<input type="hidden" name="hash" value="{HASH}" />
<input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
<input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
<button class="btn btn-success" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" title="Положить &laquo;{goods.NAME}&raquo;в корзину" type="button">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Купить&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
</form></td><td height="50" style="text-align: center; width:0;">
		 
														<button onclick="document.location='{goods.URL_MIN_PRICE_NOW | url_amp}';return false;" class="btn btn-success2" title="Узнать подробнее о &laquo;{goods.NAME}&raquo;" type="button">&nbsp;Подробнее&nbsp;</button>	 
														</td></tr>
														</table>
												  </div>
												</li>
										 {% ENDFOR goods %}
										</ul>

Наверх

#3 metafora

Активный участник

Пользователи
205 сообщений

Отправлено 06 Май 2015 - 08:42

Все сделала..
но у меня поплыло все
вот, что в категории

Вот, что на главной

пришлось вернуть..

Может тогда пока делать не будем. А просто хотелось бы по компактнее сделать товары.
Пусть в три штуки, но чтобы не так было много пустого пространства..

Наверх

#4 Danil

Активный участник

Пользователи
4 645 сообщений

Отправлено 06 Май 2015 - 10:04

metafora (06 Май 2015 - 08:42) писал:

Все сделала..
но у меня поплыло все
вот, что в категории

Вот, что на главной

пришлось вернуть..

Может тогда пока делать не будем. А просто хотелось бы по компактнее сделать товары.
Пусть в три штуки, но чтобы не так было много пустого пространства..

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