Перейти к содержимому


Подправить В Блоке Характеристики


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 7

#1 Sgray

Sgray

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

  • Пользователи
  • PipPipPipPip
  • 456 сообщений

Отправлено 16 Январь 2016 - 20:57

Как подправить в блоке характеристики в карточке товара во всех разрешениях. На 1 картинке как сейчас, нужно как на 2 картинке.

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

  • Безымянный.jpg
  • Безымянный 1.jpg


#2 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 17 Январь 2016 - 10:40

Просмотр сообщенияSgray (16 Январь 2016 - 20:57) писал:

Как подправить в блоке характеристики в карточке товара во всех разрешениях. На 1 картинке как сейчас, нужно как на 2 картинке.
Здравствуйте.
В шаблоне Товар найдите код
  {% IFNOT goods_features_empty %}
	  <div id="content_2" class="tab-content">
		<!-- Блок характеристик товара. Показываем его если указаны характеристики -->
		{% IFNOT goods_features_empty %}
		  <h3>Характеристики: {GOODS_NAME}</h3>
		  <table class="goodsDataFeatures" width="100%">
			<tr>
			  {% FOR goods_features%}
				<td>
				  <p class="name"><span class="value">{goods_features.NAME}</span></p>
				</td>
				<td>
				  <span class="value">{goods_features.VALUE}</span>
				</td>
				{goods_features.index | is_divided("2","</tr><tr>","")}
			  {% ENDFOR %}
			</tr>
		  </table>
		{% ENDIF %}
		<!-- END Блок характеристик товара. Показываем его если указаны характеристики -->
	  </div>
	{% ENDIF %}
и замените на
{% IFNOT goods_features_empty %}
	  <div id="content_2" class="tab-content">
		<!-- Блок характеристик товара. Показываем его если указаны характеристики -->
		{% IFNOT goods_features_empty %}
		  <h3>Характеристики: {GOODS_NAME}</h3>
		  <table class="goodsDataFeatures" style="width:auto;">
			<tr>
			  {% FOR goods_features%}
				<td style="padding:0px 5px;">
				  <p class="name" style="overflow:hidden;"><span class="value" style="float:left;">{goods_features.NAME}</span><span class="value" style="float:right;padding-left:25px;">{goods_features.VALUE}</span></p>
				</td>
				{goods_features.index | is_divided("2","</tr><tr>","")}
			  {% ENDFOR %}
			</tr>
		  </table>
		{% ENDIF %}
		<!-- END Блок характеристик товара. Показываем его если указаны характеристики -->
	  </div>
	{% ENDIF %}
В style.css найдите код
.value {
	background: #fff;
	border-bottom: 10px solid #fff;
}
и замените на
.value {
	background: #fff;
}


#3 Sgray

Sgray

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

  • Пользователи
  • PipPipPipPip
  • 456 сообщений

Отправлено 17 Январь 2016 - 11:20

Просмотр сообщенияDanil (17 Январь 2016 - 10:40) писал:

Здравствуйте.
В шаблоне Товар найдите код
{% IFNOT goods_features_empty %}
	 <div id="content_2" class="tab-content">
	 <!-- Блок характеристик товара. Показываем его если указаны характеристики -->
	 {% IFNOT goods_features_empty %}
		 <h3>Характеристики: {GOODS_NAME}</h3>
		 <table class="goodsDataFeatures" width="100%">
		 <tr>
			 {% FOR goods_features%}
			 <td>
				 <p class="name"><span class="value">{goods_features.NAME}</span></p>
			 </td>
			 <td>
				 <span class="value">{goods_features.VALUE}</span>
			 </td>
			 {goods_features.index | is_divided("2","</tr><tr>","")}
			 {% ENDFOR %}
		 </tr>
		 </table>
	 {% ENDIF %}
	 <!-- END Блок характеристик товара. Показываем его если указаны характеристики -->
	 </div>
{% ENDIF %}
и замените на
{% IFNOT goods_features_empty %}
	 <div id="content_2" class="tab-content">
	 <!-- Блок характеристик товара. Показываем его если указаны характеристики -->
	 {% IFNOT goods_features_empty %}
		 <h3>Характеристики: {GOODS_NAME}</h3>
		 <table class="goodsDataFeatures" style="width:auto;">
		 <tr>
			 {% FOR goods_features%}
			 <td style="padding:0px 5px;">
				 <p class="name" style="overflow:hidden;"><span class="value" style="float:left;">{goods_features.NAME}</span><span class="value" style="float:right;padding-left:25px;">{goods_features.VALUE}</span></p>
			 </td>
			 {goods_features.index | is_divided("2","</tr><tr>","")}
			 {% ENDFOR %}
		 </tr>
		 </table>
	 {% ENDIF %}
	 <!-- END Блок характеристик товара. Показываем его если указаны характеристики -->
	 </div>
{% ENDIF %}
В style.css найдите код
.value {
background: #fff;
border-bottom: 10px solid #fff;
}
и замените на
.value {
background: #fff;
}

Получилось как на картинке. Теперь надо сделать промежуток между столбцами. И заметил, что сама характеристика стала тоже подчеркнута под одной линией с значением.

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

  • Безымянный.jpg


#4 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 17 Январь 2016 - 12:11

Просмотр сообщенияSgray (17 Январь 2016 - 11:20) писал:

Получилось как на картинке. Теперь надо сделать промежуток между столбцами. И заметил, что сама характеристика стала тоже подчеркнута под одной линией с значением.
В style.css найдите код
.name {border-bottom: 1px dotted #ccc;}
и замените на
.name {float:left;border-bottom: 1px dotted #ccc;}
В шаблоне html найдите код
  {% IFNOT goods_features_empty %}
		  <div id="content_2" class="tab-content">
				<!-- Блок характеристик товара. Показываем его если указаны характеристики -->
				{% IFNOT goods_features_empty %}
				  <h3>Характеристики: {GOODS_NAME}</h3>
				  <table class="goodsDataFeatures" style="width:auto;">
						<tr>
						  {% FOR goods_features%}
								<td style="padding:0px 5px;">
								  <p class="name" style="overflow:hidden;"><span class="value" style="float:left;">{goods_features.NAME}</span><span class="value" style="float:right;padding-left:25px;">{goods_features.VALUE}</span></p>
								</td>
								{goods_features.index | is_divided("2","</tr><tr>","")}
						  {% ENDFOR %}
						</tr>
				  </table>
				{% ENDIF %}
				<!-- END Блок характеристик товара. Показываем его если указаны характеристики -->
		  </div>
		{% ENDIF %}
и замените на
{% IFNOT goods_features_empty %}
		  <div id="content_2" class="tab-content">
				<!-- Блок характеристик товара. Показываем его если указаны характеристики -->
				{% IFNOT goods_features_empty %}
				  <h3>Характеристики: {GOODS_NAME}</h3>
				  <table class="goodsDataFeatures" style="width:auto;">
						<tr>
						  {% FOR goods_features%}
								<td style="padding-right: 15px;">
								  <p class="name" style="overflow:hidden;border-bottom:0px;"><span class="value" style="float:left;">{goods_features.NAME}</span></p>
								  <p class="name" style="overflow:hidden;"><span class="value" style="float:right;padding-left:25px;">{goods_features.VALUE}</span></p>
								</td>
								{goods_features.index | is_divided("2","</tr><tr>","")}
						  {% ENDFOR %}
						</tr>
				  </table>
				{% ENDIF %}
				<!-- END Блок характеристик товара. Показываем его если указаны характеристики -->
		  </div>
		{% ENDIF %}


#5 Sgray

Sgray

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

  • Пользователи
  • PipPipPipPip
  • 456 сообщений

Отправлено 17 Январь 2016 - 13:50

Просмотр сообщенияDanil (17 Январь 2016 - 12:11) писал:

В style.css найдите код
.name {border-bottom: 1px dotted #ccc;}
и замените на
.name {float:left;border-bottom: 1px dotted #ccc;}
В шаблоне html найдите код
{% IFNOT goods_features_empty %}
		 <div id="content_2" class="tab-content">
			 <!-- Блок характеристик товара. Показываем его если указаны характеристики -->
			 {% IFNOT goods_features_empty %}
				 <h3>Характеристики: {GOODS_NAME}</h3>
				 <table class="goodsDataFeatures" style="width:auto;">
					 <tr>
						 {% FOR goods_features%}
							 <td style="padding:0px 5px;">
								 <p class="name" style="overflow:hidden;"><span class="value" style="float:left;">{goods_features.NAME}</span><span class="value" style="float:right;padding-left:25px;">{goods_features.VALUE}</span></p>
							 </td>
							 {goods_features.index | is_divided("2","</tr><tr>","")}
						 {% ENDFOR %}
					 </tr>
				 </table>
			 {% ENDIF %}
			 <!-- END Блок характеристик товара. Показываем его если указаны характеристики -->
		 </div>
	 {% ENDIF %}
и замените на
{% IFNOT goods_features_empty %}
		 <div id="content_2" class="tab-content">
			 <!-- Блок характеристик товара. Показываем его если указаны характеристики -->
			 {% IFNOT goods_features_empty %}
				 <h3>Характеристики: {GOODS_NAME}</h3>
				 <table class="goodsDataFeatures" style="width:auto;">
					 <tr>
						 {% FOR goods_features%}
							 <td style="padding-right: 15px;">
								 <p class="name" style="overflow:hidden;border-bottom:0px;"><span class="value" style="float:left;">{goods_features.NAME}</span></p>
								 <p class="name" style="overflow:hidden;"><span class="value" style="float:right;padding-left:25px;">{goods_features.VALUE}</span></p>
							 </td>
							 {goods_features.index | is_divided("2","</tr><tr>","")}
						 {% ENDFOR %}
					 </tr>
				 </table>
			 {% ENDIF %}
			 <!-- END Блок характеристик товара. Показываем его если указаны характеристики -->
		 </div>
	 {% ENDIF %}

Посмотрите, че то не то.

#6 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 17 Январь 2016 - 14:54

Просмотр сообщенияSgray (17 Январь 2016 - 13:50) писал:

Посмотрите, че то не то.
Изменения Вам произвел, проверьте.

#7 Sgray

Sgray

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

  • Пользователи
  • PipPipPipPip
  • 456 сообщений

Отправлено 17 Январь 2016 - 14:58

Просмотр сообщенияDanil (17 Январь 2016 - 14:54) писал:

Изменения Вам произвел, проверьте.

Все как надо было, но так хорошо отображается только при разрешениях более 1000, а при меньших разрешениях все криво. Может в мобильных версиях можно как-то подправить? (например: если не умещается текст, то характеристики сделать в одну колонку)

#8 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 17 Январь 2016 - 15:38

Просмотр сообщенияSgray (17 Январь 2016 - 14:58) писал:

Все как надо было, но так хорошо отображается только при разрешениях более 1000, а при меньших разрешениях все криво. Может в мобильных версиях можно как-то подправить? (например: если не умещается текст, то характеристики сделать в одну колонку)
Изменения внес, характеристики в мобильной версии отображается корректно.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных