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

NepaGoda

  • Осваиваюсь на форуме
  • 54
  • 0
Как реализовать такой вывод атрибутов..

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

NepaGoda

  • Осваиваюсь на форуме
  • 54
  • 0
видимо нет..
*

srg

  • Давно я тут
  • 208
  • 40
видимо нет..
Вообще-то ДА! Перепиливайте шаблон вывода продукта, а точнее 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

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

работает для атрибутов типа 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

  • Новичок
  • 9
  • 0
А можно ли реализовать вывод этих атрибутов в отдельном окне?
*

Linfuby

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

Kusxov

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

Linfuby

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

Kusxov

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

dmitry_stas

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

nevigen

  • Moderator
  • 8923
  • 755
  • http://n*****n.com
мало того посмотрите раздел сайты на ЖШ там были сайты по мебели с аккордеонами для атрибутов сделано.
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !
*

Kusxov

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

nevigen

  • Moderator
  • 8923
  • 755
  • http://n*****n.com
а чем они во сплывающем окне удобнее ?
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !
*

Kusxov

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

nevigen

  • Moderator
  • 8923
  • 755
  • http://n*****n.com
чем ? я же и спрашиваю.. :)
тем что просто всплывает ? разница какая ?
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !
*

Kusxov

  • Новичок
  • 9
  • 0
Хотя бы тем что не заполнит всё пространство описания товара
*

dmitry_stas

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

Kusxov

  • Новичок
  • 9
  • 0
А как их  вынести?  ::)
*

nevigen

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

Kusxov

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

nevigen

  • Moderator
  • 8923
  • 755
  • http://n*****n.com
задайте атрибутам картинки.
сделайте их радиобатонами
и стилизируйте чтобы видны были только лейблы не инпуты
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !
*

Kusxov

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

nevigen

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

bautina

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

работает для атрибутов типа 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

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

nevigen

  • Moderator
  • 8923
  • 755
  • http://n*****n.com
типа да
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !
*

pvi1

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

pvi1

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

Вывод характеристик JoomShopping в виде таблицы

Автор nash17

Ответов: 27
Просмотров: 1572
Последний ответ 04.09.2017, 14:57:59
от kit2m2
Вывод двух цен с возможностью заказа

Автор denxio

Ответов: 6
Просмотров: 277
Последний ответ 02.09.2017, 19:37:39
от Argawa
Вывод дочерних категорий в родительской категории

Автор vipiusss

Ответов: 25
Просмотров: 232
Последний ответ 19.08.2017, 21:03:35
от robert
Опции атрибутов не поддерживают форматирование HTML, можно исправить?

Автор fragmarw

Ответов: 11
Просмотров: 237
Последний ответ 26.06.2017, 20:25:40
от fragmarw
Вывод цены и скидки у атрибутов товара

Автор fragmarw

Ответов: 22
Просмотров: 290
Последний ответ 22.06.2017, 12:53:09
от fragmarw