Как в карточке товара сделать красиво выбор упаковки? - Дизайн и оформление

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

готовых не встречал
но мне кажется можно сделать проще
атрибут радио (стилизировать) и сделать опции с картинками + 1 первый атрибут (без упаковки)
так будет гораздо дешевле

Да, тоже хотел предложить атрибуты. А если в окне то можно modal прикрутить, но я думаю лучше было бы в спойлере проще всего если есть бутстрап

http://getbootstrap.com/javascript/#collapse

А что делать в случае, если вариантов упаковок штук двадцать и покупатель должен их  нормально разглядеть?
Вот как у меня сейчас: ссылка, т.е. создала независимые атрибуты.
Как было бы  хорошо в идеале: хочешь упаковку?
-нет (по умолчанию, все тихо, выбора упаковок нет)
-хочу!
-выбирай (показываются варианты упаковок и клиент выбирает)
-открытка нужна к ложке?
-нет (по умолчанию, все тихо, выбора открыток  нет)
-да! (появляется окно с вариантами выбора открыток)
и т.д.
P.S. В крайнем случае сделаю по совету neviger,  но забивается карточка товара, становится каша, пропадает лаконичность дизайна, а хочется простоты + побольше функциональности, удобства для покупателя...
посоветуйте

работайте со стилями http://prntscr.com/alkerj
или можете сделать открывание в Lightbox большой кратинки.

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

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

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

бустрапа нету

Biss, по первой ссылке у меня не получится, т.к. надо лезть в com_jshopping/lib/function.php, чтобы добавить  для <td>    id="body", что нежелательно, я правильно мыслю?
пойду ко второму варианту
посмотрела вторую ссылку, то же самое: надо в функции менять, чтобы классы добавить...
помогите

Biss, по первой ссылке у меня не получится, т.к. надо лезть в com_jshopping/lib/function.php, чтобы добавить  для <td>    id="body", что нежелательно, я правильно мыслю?
пойду ко второму варианту

Да зачем вам лишний код на сайте. Там всего-то пару строк скрипта надо.

по скриптам  у меня      "двойка"
поэтому, через CSS извращаюсь 

по скриптам  у меня      "двойка"
поэтому, через CSS извращаюсь 

Конкретно для вот этой страницы http://adellin.ru/serebro/stolovoe-serebro/chajnye-kofejnye-lozhki/serebryanaya-chajnaya-lozhka-veer
Если скроете block_attr_sel_7 с помощью CSS, то будет еще проще...

Уважаемый Brooksus, большое спасибо за ваше содействие, далеко не все могут уделить свое ценное время на таких, как я, мягко говоря, "зелененьких"!
Именно такого решения я ждала.
но у меня  будет много видов упаковок и картинки на них будут побольше, просится вариант такой: клиент в открывающемся окне выбрал упаковку, окно закрывается и остается выбранный вариант
можно как-нибудь?..

Уважаемый Brooksus, большое спасибо за ваше содействие, далеко не все могут уделить свое ценное время на таких, как я, мягко говоря, "зелененьких"!
Именно такого решения я ждала.
но у меня  будет много видов упаковок и картинки на них будут побольше, просится вариант такой: клиент в открывающемся окне выбрал упаковку, окно закрывается и остается выбранный вариант
можно как-нибудь?..

Если у вас подключена DOM библиотека в модуле корзины, можно использовать ее для открытия модального окна (http://swip.codylindley.com/DOMWindowDemo.html):
Ну, или подключать родной mootools...

не, не получается подружить мои атрибуты с модальным окном, час думала...
подскажите, пожалуйста
DOM библиотека в модуле корзины подключена, смогла только скрыть атрибут "виды футляров" и все...

не, не получается подружить мои атрибуты с модальным окном, час думала...
подскажите, пожалуйста
DOM библиотека в модуле корзины подключена, смогла только скрыть атрибут "виды футляров" и все...

А что не получается? Вижу вот здесь http://adellin.ru/serebro/stolovoe-serebro/chajnye-kofejnye-lozhki/detskaya-lozhka-begemotik окно открывается при изменении "С футляром". Только в этом товаре нет атрибутов....

http://adellin.ru/serebro/stolovoe-serebro/chajnye-kofejnye-lozhki/serebryanaya-chajnaya-lozhka-veer
здесь есть

http://adellin.ru/serebro/stolovoe-serebro/chajnye-kofejnye-lozhki/serebryanaya-chajnaya-lozhka-veer
здесь есть

Вот так например:

спасиииииибо!
а после закрытия окошка покупатель должен видеть выбранную опцию, иначе непонятно, что он выбрал, быстро забудет,
можно будет так?

спасиииииибо!
а после закрытия окошка покупатель должен видеть выбранную опцию, иначе непонятно, что он выбрал, быстро забудет,
можно будет так?

В принципе можно, но, честно говоря, я бы не стал вообще делать в модальном окне.
Вот, допустим, я выбрал вид упаковки, закрыл окно, а потом передумал. Что мне дальше делать? Я ведь понятия не имею о js, о том что окно открывается  при изменении и .т.д.
Подумайте, поставьте себя на место обычного покупателя и продумайте весь алгоритм полностью...

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

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

Я не буду советовать, вы просто все еще разок хорошо взвесьте, подумайте и напишите полный алгоритм работы, а я постараюсь вам помочь с его реализацией.
Только вы хорошо подумайте, а то тут у некоторых по 400 атрибутов в магазине бывает

Я не буду советовать, вы просто все еще разок хорошо взвесьте, подумайте и напишите полный алгоритм работы, а я постараюсь вам помочь с его реализацией.
Только вы хорошо подумайте, а то тут у некоторых по 400 атрибутов в магазине бывает

товарищ Brooksus, давайте завтра доведем начатое до логического конца, все же красиво получается, может, еще кому пригодится...

Может и добьем, но вы так и не написали весь алгоритм работы...
Что же касается дублирования id, вот с этим кодом не должно дублироваться

алгоритм работы:
1. клиент выбрал ложку, тут же в карточке товара он решает, взять к ней футляр или нет,
2. если футляр ему не нужен, то он выбирает количество товара и нажимает на кнопку купить
3. если футляр ему  нужен, то он выбирает да и открывается модальное окно, где есть название атрибута (виды футляров )  его опции.  Покупатель  выбрал нужную упаковку и кликает на крестик в правом верхнем углу или вне зоны окошка.
4. модальное окно закрывается и остается выбранный вариант упаковки, а рядом - слово изменить на случай, если покупатель решит выбрать другую упаковку
http://prntscr.com/am6tv6

Красным выделено то, что осталось, как у вас говорят, "допилить" для полной и ясной картины в карточке...
Бы хоть...

как у вас говорят...

Прям сразу вспомнилась героиня Нонны Викторовны Мордюковой из фильма "Бриллиантовая рука".
- Ясно. Собутыльник! Ну-ка иди отсюда, Миша! Как у вас там говорят - топай до хазы! )

Постараюсь сделать в ближайшие дни.., ну, если кто-нибудь раньше не сделает

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

Стили только настройте

спасибо, Brooksus, за решение, сейчас все работает, как надо, только Вы забыли слово изменить возле выбранной опции...
сейчас полная карточка товара выглядит так: http://adellin.ru/serebro/stolovoe-serebro/chajnye-kofejnye-lozhki/serebryanaya-chajnaya-lozhka-tsvetok
При необходимости изменить выбранный вариант опции, народ не поймет, что делать дальше и, не дай бог, начнет думать