Быстрый просмотр и выделение карточки товара

Главные вкладки

Аватар пользователя raskolbasster raskolbasster 22 февраля 2013 в 17:07

Всем привет!

Необходимо сделать быстрый просмотр карточки товара без перехода по аналогии с wildberries.ru.

Как это можно реализовать?

Впринципе слева понятно что выводится jcarousel с пейджером.

Кнопка быстрый просмотр отсылает к jqmodal/lightbox/colorbox/fancybox и т.д. с телом ноды.

Все эти элементы в теории можно сорганизовать views`ом или переопределить шаблон product-teaser.

А сам всплывающий блок при наведении как лучше реализовать, просто jquery селектором по наведению?

Есть ли у кого опыт или информация о готовых решениях?

ВложениеРазмер
Иконка изображения example.jpg98.16 КБ

Комментарии

Аватар пользователя raspytnik raspytnik 23 февраля 2013 в 6:15

реализовали такое на lightbox. в личку примеры скину, в скайп стучите, если что.
тормозить стало дико, когда товаров набилось под пару тысяч.
потанцевали с кешами, отлегло.
но на данный момент планируем разработку под клиента решения на базе кастомного js/ajax

Аватар пользователя raskolbasster raskolbasster 23 февраля 2013 в 12:05

Посмотрел модуль quicktabs и мини патч на hover.

Views цепляет отлично, ajax подгрузка.

Если вместо табс с именами переопределить его на тизер типа ноды, и сделать onMouseOver OnMouseOut для скрытия то получится, то что нужно. Только с вьюхой поиграться надо, чтобы строилась по контексту.

По крайней мере его наработки можно использовать.

Аватар пользователя multpix multpix 24 февраля 2013 в 12:17

"neltharian" wrote:
готовые решения есть только у тех кто делал подобное....

ай не тупи)))

из контриб берем field_slideshow cloud_zoom colorbox_node

вьюха: диспл.1 стр. каталог(полями все), диспл.2 стр. товара(арг. nid).

каталог:
nid перезаписать как: кнопка "быстрпросмотр" - адрес быстрпросмотр/[nid]?width=600&height=600 класс colorbox-node
(не забыть подтянуть либы клодзума)
быстрый просмотр:
все поля что надо, адрес быстрпросмотр/[nid]

темизация вьюхи - работа - не бей лежачего))
css:
display:none; -на все ненужные поля (превью field_slideshow, тех.данные и т.д.)
ховер на блок ноды - показываем что надо, как надо (включая ссылку на просмотр)

это универсальный принцип (причем один из многих))

p.s.
TS - raskolbass it !

Аватар пользователя raskolbasster raskolbasster 24 февраля 2013 в 15:13

Блин *рукалицо*, field_slideshow перед глазами все мелькал и не обращал внимания))
Сейчас расколбасим)), посмотрим как работает. Единственное colorbox тот еще тормоз)
Спасибо)

Аватар пользователя raskolbasster raskolbasster 24 февраля 2013 в 22:52

"multpix" wrote:
из контриб берем field_slideshow cloud_zoom colorbox_node

вьюха: диспл.1 стр. каталог(полями все), диспл.2 стр. товара(арг. nid).

каталог:
nid перезаписать как: кнопка "быстрпросмотр" - адрес быстрпросмотр/[nid]?width=600&height=600 класс colorbox-node
(не забыть подтянуть либы клодзума)
быстрый просмотр:
все поля что надо, адрес быстрпросмотр/[nid]

темизация вьюхи - работа - не бей лежачего))
css:
display:none; -на все ненужные поля (превью field_slideshow, тех.данные и т.д.)
ховер на блок ноды - показываем что надо, как надо (включая ссылку на просмотр)

Все отлично работает без вариаций товаров.

Следующие проблемы возникли:

1. Если есть variations, как реализовано в commerce_kickstart через product reference, то вьюха начинает капризничать. Relationship не поддерживает multiple-values и берет только первое значение. Патч http://drupal.org/node/1378656#comment-5922278 не спас и выдал «EntityMetadataWrapperException: Unknown data property» как здесь

Хотя я возможно запутался и не в ту степь пошел?

Сомнения т.к. field_slideshow работает в рамках ноды, а у нас здесь разбиение на product display включающий в себя ряд product entity, в которых уже нужные field_images по вариациям товаров. Как еще можно изображения выхватить с вариациями?

Впринципе частично решить можно, если вывести images из product variations на уровень product display, но потеряется гибкость карточки товара.

2. Локально подтормаживает до 4 секунд открытие "быстрого просмотра"))

Аватар пользователя multpix multpix 24 февраля 2013 в 23:24

2. - нужно кешировать вьюс быстрпросмотр/[nid]

1. - field_slideshow для нескольких изо в одном поле,
если хочется, чтоб фото было на стороне product,
а мелкие превью - как кнопка выбор атрибута, то это другая песня))

Аватар пользователя raskolbasster raskolbasster 24 февраля 2013 в 23:41

"multpix" wrote:
а мелкие превью - как кнопка выбор атрибута, то это другая песня))

Ага, по одному атрибуту выбор хотя бы нужен, к примеру цвет - голубая рубашка, рыжая рубашка) И при быстром просмотре стрелять на вариацию с превьюхи.

Аватар пользователя raskolbasster raskolbasster 10 ноября 2015 в 11:49

"multpix" wrote:
http://drupal.org/project/commerce_fancy_attributes[/quote]

Да, отлично работает в случае если мы можем атрибут однозначно определить. Например на запрос "красная куртка" выдавать скриншот куска материала. Все отмечается, переключается, подгружается.

красные куртки - красный скриншот
синие куртки - синий скриншот

но как быть если нужно:

чтобы на вывод шла эта же самая красная куртка, image с дельтой 1 к примеру.
Чтобы сразу было видно исполнение этой куртки в красном цвете, а не картинка красной ткани))

Можно конечно под каждый product делать свой term item с отсылом в product reference и оттуда доставать эту картинку. Но это к каждому товару придется так вручную создавать term item... даже если это прото select list продукта))

Хотя может при создании продукта можно сделать поле которое автоматически будет вставлять в словарь соответствующий term и передавать id продукта (module_form_alter и дальше db_select - может кто пример написать такой штуки для данной ситуации?):

Конечно выбор атрибута не самый быстрый, еcли работать не по клику, а по mouseenter.

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

Аватар пользователя multpix multpix 25 февраля 2013 в 14:34

"neltharian" wrote:

изначально, тут больше по темизации, нежели по функ-лу вопрос.

но если углубляться, то

"raskolbasster" wrote:

ет понятно все))),
но я предлагал схитрить: на сторону display_product(возможно дополнительно с product) вынести фото(всех вариантов),
и тогда field_slideshow.
а fancy_attributes - для отправки в корзину.

иначе - ет садиться и писать свое решение по реализации атрибутов.
(а в таксономию вместо универсального цвета уникальные фото товаров - не вариант)