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


Как Сделать Отображение Картинки В Карточке Товаров


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

#1 sibulba

sibulba

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

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

Отправлено 16 Март 2017 - 12:04

Подскажите как сделать выводимое изображение в карточке товара
необходимо правило которое будет выводить изображение под ценой товара. там есть свободный блок
залью изображение в корень сайта. правило будет выводить в зависимости от характериситки это изображение в этот блок

Аккаунт SL-14071
пример

если есть характериситика Бесплатная доставка: Да
выводить изображение (ссылка)
изображение нужно выводить на картинке товара. будет залита ленточка с надписью бесплатная доставка. которая будет накрывать блок изображения товара в верхнем правом углу

#2 sibulba

sibulba

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

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

Отправлено 16 Март 2017 - 15:19

ап

#3 Vaccina

Vaccina

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

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

Отправлено 17 Март 2017 - 07:50

Здравствуйте.

Готовый код по примеру будет иметь следующий вид:
{% FOR goods_features %}{% IF goods_features.NAME = Бесплатная доставка %}{% IF goods_features.VALUE = Да %}
  <img src="Cсылка на картинку" alt="Бесплатная доставка" />
{% ENDIF %}{% ENDIF %}{% ENDFOR %}

Вставить его необходимо в разделе Сайт - Редактор шаблонов - Товар, также необходимо текст заменить на ссылку в атрибуте src.

#4 sibulba

sibulba

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

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

Отправлено 17 Март 2017 - 20:42

рахместил
подскажите как разместить картинку правильно над изображением чтобы она была по углу и не смешала основоне изображение
http://climl.ru/good...-5207?from=NzUz вот пример товара

или я не правильно выбрал то как это нужно выводить на старнице?
может есть более цивилизованный вариант это в коде прописать?

#5 metry

metry

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

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

Отправлено 18 Март 2017 - 10:17

Добрый день. Для внесения изменений зайдите в  Редактор шаблона-->main.css

и найдите код:

.goodsDataMainImageBlock			{text-align:center;height:350px;border:1px solid #E5E5E5;background-color:#FFF;}

замените на:

.goodsDataMainImageBlock			{text-align: right;height:350px;border:1px solid #E5E5E5;background-color:#FFF;}


#6 sibulba

sibulba

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

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

Отправлено 18 Март 2017 - 11:30

Просмотр сообщенияmetry (18 Март 2017 - 10:17) писал:

Добрый день. Для внесения изменений зайдите в  Редактор шаблона-->main.css

и найдите код:

.goodsDataMainImageBlock {text-align:center;height:350px;border:1px solid #E5E5E5;background-color:#FFF;}

замените на:

.goodsDataMainImageBlock {text-align: right;height:350px;border:1px solid #E5E5E5;background-color:#FFF;}
проблему подобный код не решает
можно получить ответ от Вакцины?

#7 sibulba

sibulba

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

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

Отправлено 18 Март 2017 - 11:56

http://climl.ru/good...sw-09hn1-ol-15y
пример
разместил ленту вроде встало но не уверен правилен ли код вставки и такой вопрос
как сделать эту ленту над изображением но так чтобы она не перекрывало его и изображение снизу было кликабельным?

#8 Stasya

Stasya

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

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

Отправлено 21 Март 2017 - 16:28

Просмотр сообщенияsibulba (18 Март 2017 - 11:56) писал:

http://climl.ru/good...sw-09hn1-ol-15y
пример
разместил ленту вроде встало но не уверен правилен ли код вставки и такой вопрос
как сделать эту ленту над изображением но так чтобы она не перекрывало его и изображение снизу было кликабельным?
Здравствуйте. В данном случае можно лишь сделать так чтобы ссылка на увеличение изображение товара оборачивала и ленту Бесплатная доставка. Что касаемо перекрывания изображения, то в данном случае можно лишь уменьшить размер блока с ленточкой, поскольку данный блок дожиться поверх изображения товара. Изображение товара в свою очередь может быть разным. Либо можно спустить изображение товара ниже чем блок с лентой. На скриншоте показала Вам как располагается блок с изображением и лентой (красная рамка - изображение товара, синяя - блок с лентой).

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

  • Screenshot_211.jpg





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

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