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

Пт, 22/02/2013 - 13:07

Всем привет!

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

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

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

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

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

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

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

0 Спасибо

Комментарии

Аватар пользователя neltharian
4 года 3 months назад neltharian #

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

0 Спасибо
Аватар пользователя ХулиGUN
4 года 3 months назад ХулиGUN #

Смысл таков:

  1. Не важно чем, делаете каталог.
  2. Каждый элемент списка(товар) должен иметь какой-нить атрибут, передающий, например, nid ноды
  3. Делаете page--node_type.tpl.php и node--node_type.tpl.php
  4. Делаете обработчик js, который будет брать значение вашего атрибута и загружать, например(в случае с nid), страницу "/node/nid" в модальное окно
  5. Профит
0 Спасибо
Аватар пользователя ХулиGUN
4 года 3 months назад ХулиGUN #

2 вариант:

  1. ...
  2. ...
  3. Создаёте вьюху для одного товара
  4. Делаете hook_menu() и в калбек передаёте этот nid, который возвращает view_embed_views('...', '...', $nid)
  5. Пишете js обработчик, который отсылает post запрос со значением nid и возвращает соответствующую вьюху
  6. Профит
0 Спасибо
Аватар пользователя ХулиGUN
4 года 3 months назад ХулиGUN #

Как Вы это будете делать зависит исключительно от Вашей фантазии и возможностей

0 Спасибо
Аватар пользователя raskolbasster
4 года 3 months назад raskolbasster #

Большое спасибо за ответы, попробую реализовать

0 Спасибо
Аватар пользователя raspytnik
4 года 3 months назад raspytnik #

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

0 Спасибо
Аватар пользователя raskolbasster
4 года 3 months назад raskolbasster #

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

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

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

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

0 Спасибо
Аватар пользователя neltharian
4 года 3 months назад neltharian #

на результат сейчас или потом бросите сюда линк?

0 Спасибо
Аватар пользователя raskolbasster
4 года 3 months назад raskolbasster #

Занимаюсь этим в фоновом режиме, конечно будет линк, только позже.

0 Спасибо
Аватар пользователя multpix
4 года 3 months назад multpix #
neltharian написал:
готовые решения есть только у тех кто делал подобное....

ай не тупи)))

из контриб берем 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 !

0 Спасибо
Аватар пользователя raskolbasster
4 года 3 months назад raskolbasster #

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

0 Спасибо
Аватар пользователя raskolbasster
4 года 3 months назад raskolbasster #
multpix написал:
из контриб берем 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 секунд открытие "быстрого просмотра"))

0 Спасибо
Аватар пользователя multpix
4 года 3 months назад multpix #

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

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

0 Спасибо
Аватар пользователя raskolbasster
4 года 3 months назад raskolbasster #
multpix написал:
а мелкие превью - как кнопка выбор атрибута, то это другая песня))

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

0 Спасибо
Аватар пользователя raskolbasster
1 год 6 months назад raskolbasster #

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

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

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

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

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

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

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

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

0 Спасибо
Аватар пользователя neltharian
4 года 3 months назад neltharian #
multpix написал:
ай не тупи)))

в виде модуля.

а собрать из модулей понятно что можно

0 Спасибо
Аватар пользователя multpix
4 года 3 months назад multpix #
neltharian написал:

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

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

raskolbasster написал:

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

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

0 Спасибо
Аватар пользователя raskolbasster
4 года 3 months назад raskolbasster #
multpix написал:
но я предлагал схитрить

очень тонкое предложение))) Попробуем, спасибо

0 Спасибо