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


Помогите Изменить Расположение Блоков На Странице Товара

Автор maxxb, 14 янв. 2013 07:03

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

#1 maxxb

maxxb

    Продвинутый пользователь

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

Отправлено 14 Январь 2013 - 07:03

1. блок характеристики товара вправо, на место под модификации.
2. сами модификации придвинуть друг к другу, а то они расползаются
3. галерея доп.  фото под основное изображение на всю ширину от левого меню до конца страницы
4. текст под галерею
5. Справа убрать свободное  пространство (страница почему-то растянулась вправо)

#2 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 14 Январь 2013 - 09:49

Просмотр сообщенияmaxxbon (14 Январь 2013 - 07:03) писал:

1. блок характеристики товара вправо, на место под модификации.
2. сами модификации придвинуть друг к другу, а то они расползаются
3. галерея доп.  фото под основное изображение на всю ширину от левого меню до конца страницы
4. текст под галерею
5. Справа убрать свободное  пространство (страница почему-то растянулась вправо)

По первому пункту:
скорее всего вы имели ввиду не характеристики, а описание товара. Если так, тогда найдите в шаблоне Товар код:
			  <!-- Блок описания товара. Показываем его есть описание товара -->
{% IF GOODS_DESCRIPTION_LARGE %}
  <h3>Описание {GOODS_NAME}</h3>
  <div class="htmlDataBlock">
	{GOODS_DESCRIPTION_LARGE}
  </div>
{% ENDIF %}
<!-- END Блок описания товара. Показываем его есть описание товара -->
и удалите.

Найдите в том же шаблоне код:
	  {GOODS_MOD_DESCRIPTION}
				</td>
			  </tr>
и вставьте после код:
<tr>	  <td>   
			  <!-- Блок описания товара. Показываем его есть описание товара -->
{% IF GOODS_DESCRIPTION_LARGE %}
  <h3>Описание {GOODS_NAME}</h3>
  <div class="htmlDataBlock">
	{GOODS_DESCRIPTION_LARGE}
  </div>
{% ENDIF %}
<!-- END Блок описания товара. Показываем его есть описание товара -->
	 </td> </tr>

#3 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 14 Январь 2013 - 10:11

По второму пункту - в файле main.csstemplate найти код:
.goodsDataMainModificationsBlockProperty {
padding: 0px;
}
и заменить его на:
.goodsDataMainModificationsBlockProperty {
padding: 0px;
float: left;
margin-right: 32px; /*расстояние между модификациями*/
}

По третьему - в шаблоне HTML
удалите код из блока (
<div class="goodsDataMainOrder cornerAll">
):
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		 {% IFNOT goods_images_empty %}
		 {% FOR goods_images %}
			
			 <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
			 {% IF goods_images.first %}
			 <div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
				 <h5>Другие фото {GOODS_NAME}</h5>
			 {% ENDIF %}
		
			 <!-- Уменьшенное изображение товара -->
			 <div class="goodsDataMainImagesIcon floatLeft">
			 <a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>

			 <!-- Идентификатор изображения товара, используется для галереи изображений -->
			 <input type="hidden" rel="{goods_images.ID}" />
			 </div>
			
			 <!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
			 {% IF goods_images.last %}
			 </div>
			 {% ENDIF %}
		 {% ENDFOR %}
		 {% ENDIF %}

После строк кода:
   <!-- Идентификатор изображения товара, используется для галереи изображений -->
			<input type="hidden" rel="{GOODS_IMAGE_ID}" />
		  </div>

вставьте следующий код:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		 {% IFNOT goods_images_empty %}
		 {% FOR goods_images %}
			
			 <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
			 {% IF goods_images.first %}
			 <div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
				 <h5>Другие фото {GOODS_NAME}</h5>
			 {% ENDIF %}
		
			 <!-- Уменьшенное изображение товара -->
			 <div class="goodsDataMainImagesIcon floatLeft">
			 <a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>

			 <!-- Идентификатор изображения товара, используется для галереи изображений -->
			 <input type="hidden" rel="{goods_images.ID}" />
			 </div>
			
			 <!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
			 {% IF goods_images.last %}
			 </div>
			 {% ENDIF %}
		 {% ENDFOR %}
		 {% ENDIF %}

#4 maxxb

maxxb

    Продвинутый пользователь

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

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

Просмотр сообщенияmiyako (14 Январь 2013 - 09:49) писал:

По первому пункту:
скорее всего вы имели ввиду не характеристики, а описание товара. Если так, тогда найдите в шаблоне Товар код:
			 <!-- Блок описания товара. Показываем его есть описание товара -->
{% IF GOODS_DESCRIPTION_LARGE %}
<h3>Описание {GOODS_NAME}</h3>
<div class="htmlDataBlock">
{GOODS_DESCRIPTION_LARGE}
</div>
{% ENDIF %}
<!-- END Блок описания товара. Показываем его есть описание товара -->
и удалите.

Найдите в том же шаблоне код:
	 {GOODS_MOD_DESCRIPTION}
			 </td>
			 </tr>
и вставьте после код:
<tr>	 <td>
			 <!-- Блок описания товара. Показываем его есть описание товара -->
{% IF GOODS_DESCRIPTION_LARGE %}
<h3>Описание {GOODS_NAME}</h3>
<div class="htmlDataBlock">
{GOODS_DESCRIPTION_LARGE}
</div>
{% ENDIF %}
<!-- END Блок описания товара. Показываем его есть описание товара -->
	 </td> </tr>

нет-нет, именно характеристики товара

#5 maxxb

maxxb

    Продвинутый пользователь

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

Отправлено 14 Январь 2013 - 12:14

Просмотр сообщенияmiyako (14 Январь 2013 - 10:11) писал:

По второму пункту - в файле main.csstemplate найти код:
.goodsDataMainModificationsBlockProperty {
padding: 0px;
}
и заменить его на:
.goodsDataMainModificationsBlockProperty {
padding: 0px;
float: left;
margin-right: 32px; /*расстояние между модификациями*/
}

По третьему - в шаблоне HTML
удалите код из блока (
<div class="goodsDataMainOrder cornerAll">
):
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		 {% IFNOT goods_images_empty %}
		 {% FOR goods_images %}
			
			 <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
			 {% IF goods_images.first %}
			 <div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
				 <h5>Другие фото {GOODS_NAME}</h5>
			 {% ENDIF %}
		
			 <!-- Уменьшенное изображение товара -->
			 <div class="goodsDataMainImagesIcon floatLeft">
			 <a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>

			 <!-- Идентификатор изображения товара, используется для галереи изображений -->
			 <input type="hidden" rel="{goods_images.ID}" />
			 </div>
			
			 <!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
			 {% IF goods_images.last %}
			 </div>
			 {% ENDIF %}
		 {% ENDFOR %}
		 {% ENDIF %}

После строк кода:
<!-- Идентификатор изображения товара, используется для галереи изображений -->
		 <input type="hidden" rel="{GOODS_IMAGE_ID}" />
		 </div>

вставьте следующий код:
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
		 {% IFNOT goods_images_empty %}
		 {% FOR goods_images %}
			
			 <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно -->
			 {% IF goods_images.first %}
			 <div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>
				 <h5>Другие фото {GOODS_NAME}</h5>
			 {% ENDIF %}
		
			 <!-- Уменьшенное изображение товара -->
			 <div class="goodsDataMainImagesIcon floatLeft">
			 <a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>

			 <!-- Идентификатор изображения товара, используется для галереи изображений -->
			 <input type="hidden" rel="{goods_images.ID}" />
			 </div>
			
			 <!-- В самом конце закрываем обёртку для списка маленьких изображений товара -->
			 {% IF goods_images.last %}
			 </div>
			 {% ENDIF %}
		 {% ENDFOR %}
		 {% ENDIF %}

другие фото выстроились  не в одну линию, а два вверху, и одно под ними, а мне надо, чтобы в одну линию

#6 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 14 Январь 2013 - 12:20

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

нет-нет, именно характеристики товара


Характеристики у товара заполняются в Товары->Товары в разделе Характеристики (снизу приложен скриншот)
Если вы действительно имеете ввиду эти характеристики?

Если нет, то попробуйте проделать, что было написано выше.

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

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

#7 maxxb

maxxb

    Продвинутый пользователь

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

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

Просмотр сообщенияmiyako (14 Январь 2013 - 12:20) писал:

Характеристики у товара заполняются в Товары->Товары в разделе Характеристики (снизу приложен скриншот)
Если вы действительно имеете ввиду эти характеристики?

Если нет, то попробуйте проделать, что было написано выше.

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

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

  • скрин.jpg

#8 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 14 Январь 2013 - 13:16

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

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

#9 maxxb

maxxb

    Продвинутый пользователь

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

Отправлено 14 Январь 2013 - 13:33

Просмотр сообщенияKoderhan (14 Январь 2013 - 13:16) писал:

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

145752

Попробовала разместить на пустом месте, вместе блока доставки ОПИСАНИЕ, но оно вытянулось длинной полоской, надо как-то ширину добавить

Просмотр сообщенияmaxxbon (14 Январь 2013 - 13:31) писал:

145752

Попробовала разместить на пустом месте, вместе блока доставки ОПИСАНИЕ, но оно вытянулось длинной полоской, надо как-то ширину добавить
посмотрите эту страницу там нагляднее /goods/Kedrovaja-bochka-Sibirskoje-zdorov-je-kruglaja-130-78-78-2-5-sm?from=Mzc2

#10 support 2.0

support 2.0

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

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

Отправлено 14 Январь 2013 - 14:07

Просмотр сообщенияmaxxbon (14 Январь 2013 - 13:33) писал:

145752

Попробовала разместить на пустом месте, вместе блока доставки ОПИСАНИЕ, но оно вытянулось длинной полоской, надо как-то ширину добавить


посмотрите эту страницу там нагляднее /goods/Kedrovaja-bochka-Sibirskoje-zdorov-je-kruglaja-130-78-78-2-5-sm?from=Mzc2


Сейчас на Вашем сайте блок описания к товару уже расположен сразу же под блоком доставки и большого отступа нет.

#11 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 14 Январь 2013 - 14:07

Просмотр сообщенияmaxxbon (14 Январь 2013 - 13:33) писал:

145752

Попробовала разместить на пустом месте, вместе блока доставки ОПИСАНИЕ, но оно вытянулось длинной полоской, надо как-то ширину добавить


посмотрите эту страницу там нагляднее /goods/Kedrovaja-bochka-Sibirskoje-zdorov-je-kruglaja-130-78-78-2-5-sm?from=Mzc2

Описание товара выводится сбоку. Как я понимаю вопрос исчерпан?

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

  • ScreenShot 317.jpg

#12 maxxb

maxxb

    Продвинутый пользователь

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

Отправлено 14 Январь 2013 - 14:15

Просмотр сообщенияKoderhan (14 Январь 2013 - 14:07) писал:

Описание товара выводится сбоку. Как я понимаю вопрос исчерпан?

нет, не исчерпан, колонка описания слишком узкая и длинная

#13 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 14 Январь 2013 - 14:16

Просмотр сообщенияmaxxbon (14 Январь 2013 - 14:15) писал:

нет, не исчерпан, колонка описания слишком узкая и длинная
В каком смысле узкая?
Описание занимает почти всю ширину окна браузера..

#14 maxxb

maxxb

    Продвинутый пользователь

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

Отправлено 14 Январь 2013 - 14:27

а у меня вот-так

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

  • скрин 2.jpg

#15 support 2.0

support 2.0

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

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

Отправлено 14 Январь 2013 - 15:19

Просмотр сообщенияmaxxbon (14 Январь 2013 - 14:27) писал:

а у меня вот-так


У Вас в шаблоне Товар есть блок
<tr>	  <td>  
						  <!-- Блок описания товара. Показываем его есть описание товара -->
{% IF GOODS_DESCRIPTION_LARGE %}
  <h3>Описание {GOODS_NAME}</h3>
  <div class="htmlDataBlock">
		{GOODS_DESCRIPTION_LARGE}
  </div>
{% ENDIF %}
<!-- END Блок описания товара. Показываем его есть описание товара -->
		 </td> </tr>

замените его на
<tr>	  <td colspan="3">  
						  <!-- Блок описания товара. Показываем его есть описание товара -->
{% IF GOODS_DESCRIPTION_LARGE %}
  <h3>Описание {GOODS_NAME}</h3>
  <div class="htmlDataBlock">
		{GOODS_DESCRIPTION_LARGE}
  </div>
{% ENDIF %}
<!-- END Блок описания товара. Показываем его есть описание товара -->
		 </td> </tr>

#16 maxxb

maxxb

    Продвинутый пользователь

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

Отправлено 14 Январь 2013 - 15:44

Спасибо. И еще расстояние между описанием и заголовком характеристики как сократить?

#17 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 14 Январь 2013 - 21:05

Как я понимаю у вас нет информации для блока "Условия доставки" из-за чего остается пустое место под данный блок. Попробуйте в файл стилей main.css в разделе редактора тем добавить

.goodsDataMainDeliveryBlock {
  display: none;
}

тем самым скрыв данный блок и освободив место.

#18 Kaluchka

Kaluchka

    Пользователь

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

Отправлено 24 Апрель 2013 - 22:32

Как сделать что бы описание после фотографий растягивалось по ширине окна?
не получается....

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

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

#19 mikola

mikola

    Good soo good

  • Модератоpы
  • 1 550 сообщений
  • Городгород Нижний Новгород

Отправлено 24 Апрель 2013 - 22:46

Просмотр сообщенияKaluchka (24 Апрель 2013 - 22:32) писал:

Как сделать что бы описание после фотографий растягивалось по ширине окна?
не получается....
в main.css найти код
.goodsDataMainModificationsBlockProperty {padding:5px;}
.goodsDataMainModificationsBlockProperty select {width:auto;}
меняем его на
.goodsDataMainModificationsBlockProperty {
padding: 0px;
float: left;
margin-right: 32px; /*расстояние между модификациями*/
}
.goodsDataMainModificationsBlockProperty select {width:auto;}

#20 Kaluchka

Kaluchka

    Пользователь

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

Отправлено 24 Апрель 2013 - 22:59

Все равно все как и прежде
Обратно в Страница товара


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Мокко
  5. → Страница товара
  6. Privacy Policy