Вывод атрибутов - а так возможно реализовать?

  • 27 Ответов
  • 2153 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн NepaGoda

Как реализовать такой вывод атрибутов..

В виде изображений, да с выделением таким при нажатии..
« Последнее редактирование: 29.09.2012, 14:51:32 от NepaGoda »

*

Оффлайн NepaGoda

видимо нет..

*

Оффлайн srg

видимо нет..
Вообще-то ДА! Перепиливайте шаблон вывода продукта, а точнее CSS. Нужно воспользоваться Google с запросом типа "Стилизация радио боксов на CSS и jQuery", почитать http://followdesign.com/development/2011/11/28/oformlenie-knopok-chekboksov-i-drugih-elementov-interfeysa.html , и одним из понравившихся методов заменить стандартный контрол радио на свою галочку, точку, рамку или что душе угодно... Немного CSS, jQuery и контролы уникальные.
Только помните, для стандартного контрола не указывайте display:none, IE перестают обрабатывать такие скрытые радио батоны, нужно для радио кнопки сделать position:absolute;left:-5000px; тогда его никто не увидит и для IE он будет не скрытым...

*

Оффлайн linykc

вижу что тема не нова, но в свое время сам с этим сильно заморачивался, поэтому выложу свое решение, может кому пригодится.

работает для атрибутов типа radio, должны быть загружены картинки обязательно (атрибут цвет например).

ie 9+ правда.
но зато без скриптов

CSS

Код: (css) [Выделить]
.jshop.productfull .jshop_prod_attributes { margin-bottom:20px; width:300px; float:left;}
.jshop.productfull .jshop_prod_attributes .input_type_radio{ float:left;width:54px; height:54px; overflow:hidden; display:block; position:relative;}
.jshop.productfull .jshop_prod_attributes .input_type_radio input{ position:absolute; z-index:-1; left:5px; top:5px;}
.jshop.productfull .jshop_prod_attributes  .input_type_radio span.radio_attr_label {text-indent:-9999px; font-size:0px;}
.jshop.productfull .jshop_prod_attributes  .input_type_radio span.radio_attr_label img { cursor:pointer; border:solid 2px; border-color:transparent; width:50px; height:50px; position:relative; z-index:2;}
.jshop.productfull .jshop_prod_attributes  .input_type_radio input[type="radio"]:checked+label img { border:solid 2px #4a3a0f; }


для ei8 условным коментанием можно добавить вот такую строчку.

Код: (css) [Выделить]
.jshop.productfull .jshop_prod_attributes .input_type_radio input{ position:absolute; z-index:5; width:54px; height:54px; left:0px; top:0px; outline:none;}
радио батон будет висеть посреди картинки и активироваться при клике на нее, но z-index должен быть выше чем у картинки.

ну и для остальных осликов аналогично

*

Оффлайн Kusxov

А можно ли реализовать вывод этих атрибутов в отдельном окне?

*

Оффлайн Linfuby

  • ******
  • 1259
  • [+]174 / [-]0
  • Всё просто...
    • Просмотр профиля
    • Разработка дополнений для JoomShopping
кх кх...
Чуть кофе не подавился...
Можно всё. Вопрос только зачем...
Немного воображения и логики, и любая проблема становится решенной.
Кривые решения - дают кривой результат!
Решения для JoomShopping
Благодарности и поддержка принимаются по след. реквизитам:
Яндекс.Деньги - 41001751720054

*

Оффлайн Kusxov

кх кх...
Чуть кофе не подавился...
Можно всё. Вопрос только зачем...
Ну если атрибутов слишком много и хочется вывести их во всплывающем окне и выбрать уже там) Я к сожалению далёк от этого и не знаю как это сделать)

*

Оффлайн Linfuby

  • ******
  • 1259
  • [+]174 / [-]0
  • Всё просто...
    • Просмотр профиля
    • Разработка дополнений для JoomShopping
Ну если атрибутов слишком много
Это сколько? Давайте исходить из реалий нашей жизни... Максимальное количество атрибутов я видел в магазине мебели, где продавали "супер "стенку"".
Слово "стенка" не зря в дополнительных ковычках.
Итого 10-12 атрибутов. Это не так много чтобы выводить в дополнительном окне...
Именно поэтому я спросил - "Зачем".
Аргументы "Я так хочу" и "Так хочет заказчик" не принимаются. Принимается только аргумент - "У меня столько-то атрибутов, надо оптимизировать"...
Немного воображения и логики, и любая проблема становится решенной.
Кривые решения - дают кривой результат!
Решения для JoomShopping
Благодарности и поддержка принимаются по след. реквизитам:
Яндекс.Деньги - 41001751720054

*

Оффлайн Kusxov

Ну в моём случае это ткани для мягкой мебели) их порядка штук 200, если не больше. Заказчика нет, я строю для себя сайт. Никаких знаний в программировани и даже в CSS и HTML нет) Обычно пишут модуль для выбора тканей, стоит он на рынке фрилансеров 20-25 т.р. А если реализовать выбор аттрибутов в отдельном окне то это вполне достойный ответ на тот модуль) Но не знаю как там будет с нагрузкой на сервер и есть ли там подводные камни.

*

Онлайн dmitry_stas

Цитировать
их порядка штук 200
покажите картинку. пока по написанному я вижу 1 атрибут (выпадающий список), который имеет 200 опций, а не 200 атрибутов, которые надо все сразу вывести на странице
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

Оффлайн nevigen

  • *****
  • 9340
  • [+]771 / [-]17
  • http://n*****n.com
    • Просмотр профиля
    • Nevigen.com -разработки для Joomla
мало того посмотрите раздел сайты на ЖШ там были сайты по мебели с аккордеонами для атрибутов сделано.
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !

*

Оффлайн Kusxov

покажите картинку. пока по написанному я вижу 1 атрибут (выпадающий список), который имеет 200 опций, а не 200 атрибутов, которые надо все сразу вывести на странице
Да, вы правы. Я неправильно выразился. Атрибут один с 200 опциями. Вот пример, правда там пока 3 опции но что будет если их будет 200? http://mk-maar.ru/index.php/internet-magazin/sofa/divan

*

Оффлайн nevigen

  • *****
  • 9340
  • [+]771 / [-]17
  • http://n*****n.com
    • Просмотр профиля
    • Nevigen.com -разработки для Joomla
а чем они во сплывающем окне удобнее ?
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !

*

Оффлайн Kusxov

а чем они во сплывающем окне удобнее ?
а 3 атрибута по 200 опций в каждой разве будет смотреться красиво? Выбор во всплывающем окне мне казалось было бы удобнее)

*

Оффлайн nevigen

  • *****
  • 9340
  • [+]771 / [-]17
  • http://n*****n.com
    • Просмотр профиля
    • Nevigen.com -разработки для Joomla
чем ? я же и спрашиваю.. :)
тем что просто всплывает ? разница какая ?
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !

*

Оффлайн Kusxov

Хотя бы тем что не заполнит всё пространство описания товара

*

Онлайн dmitry_stas

:) ну так вынесите атрибуты из описания :)
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций

*

Оффлайн Kusxov

А как их  вынести?  ::)

*

Оффлайн nevigen

  • *****
  • 9340
  • [+]771 / [-]17
  • http://n*****n.com
    • Просмотр профиля
    • Nevigen.com -разработки для Joomla
http://prntscr.com/2l8a0k
......Заказчика нет, я строю для себя сайт. Никаких знаний в программировани и даже в CSS и HTML нет)......
значит надо либо приобретать знания, либо Вы сами описывали второй путь.
попробуйте поискать что-то типа attributes в шаблоне
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !

*

Оффлайн Kusxov

На приобретение знаний времени уже нет. Могу лишь предложить вознаграждение за помощь) Я очень долго возился и с шаблоном и с самим модулем JoomShopping. Но увы не получилось. А можно ли хоть Select доработать и сделать его с картинками?
« Последнее редактирование: 21.01.2014, 17:45:22 от Kusxov »

*

Оффлайн nevigen

  • *****
  • 9340
  • [+]771 / [-]17
  • http://n*****n.com
    • Просмотр профиля
    • Nevigen.com -разработки для Joomla
задайте атрибутам картинки.
сделайте их радиобатонами
и стилизируйте чтобы видны были только лейблы не инпуты
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !

*

Оффлайн Kusxov

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

*

Оффлайн nevigen

  • *****
  • 9340
  • [+]771 / [-]17
  • http://n*****n.com
    • Просмотр профиля
    • Nevigen.com -разработки для Joomla
1. в шаблоне пернесите ниже их, чтобы были по ширине больше.
2. не чек бокс а загоните их в просмотре со скролом просто и все.. бует Ваша пробелма решена
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !

вижу что тема не нова, но в свое время сам с этим сильно заморачивался, поэтому выложу свое решение, может кому пригодится.

работает для атрибутов типа radio, должны быть загружены картинки обязательно (атрибут цвет например).

ie 9+ правда.
но зато без скриптов

CSS

Код: (css) [Выделить]
.jshop.productfull .jshop_prod_attributes { margin-bottom:20px; width:300px; float:left;}
.jshop.productfull .jshop_prod_attributes .input_type_radio{ float:left;width:54px; height:54px; overflow:hidden; display:block; position:relative;}
.jshop.productfull .jshop_prod_attributes .input_type_radio input{ position:absolute; z-index:-1; left:5px; top:5px;}
.jshop.productfull .jshop_prod_attributes  .input_type_radio span.radio_attr_label {text-indent:-9999px; font-size:0px;}
.jshop.productfull .jshop_prod_attributes  .input_type_radio span.radio_attr_label img { cursor:pointer; border:solid 2px; border-color:transparent; width:50px; height:50px; position:relative; z-index:2;}
.jshop.productfull .jshop_prod_attributes  .input_type_radio input[type="radio"]:checked+label img { border:solid 2px #4a3a0f; }


для ei8 условным коментанием можно добавить вот такую строчку.

Код: (css) [Выделить]
.jshop.productfull .jshop_prod_attributes .input_type_radio input{ position:absolute; z-index:5; width:54px; height:54px; left:0px; top:0px; outline:none;}
радио батон будет висеть посреди картинки и активироваться при клике на нее, но z-index должен быть выше чем у картинки.

ну и для остальных осликов аналогично


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

*

Оффлайн pvi1

1. в шаблоне пернесите ниже их, чтобы были по ширине больше.
2. не чек бокс а загоните их в просмотре со скролом просто и все.. бует Ваша пробелма решена
Как правильно я понял -
.класс дива {
overflow: scroll;
}
и задаем размеры дива?

*

Оффлайн nevigen

  • *****
  • 9340
  • [+]771 / [-]17
  • http://n*****n.com
    • Просмотр профиля
    • Nevigen.com -разработки для Joomla
типа да
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !

*

Оффлайн pvi1

Цитата: bautina
все замечательно работало по вашему рецепту пока я не захотела открыть их во всплывающем окне через modal.js встроенный плагин Joomla...не могу понять почему в модальном окне не работает, стили те же, но вот по label уже не переключается, есть идеи?
Так вы что хотите: картинку опции открыть в всплывающем окне или опции атрибута открыть в нем?
Если первое - то было на форуме решение http://joomlaforum.ru/index.php/topic,217413.msg1139746.html#msg1139746. Если второе - то вам надо создать кнопку, по клику которой появлялось всплывающее окно с лейбами опций
« Последнее редактирование: 03.03.2015, 00:09:20 от pvi1 »

*

Оффлайн pvi1

Помогите мне хоть сделать там какой нибудь бокс чтобы скрывать эти атрибуты, а когда нужно раскрывать.
Решение есть для JS 3.x и 4.x. Пишите в личку