[Помогите] Как выставить опции в ряд

Тема в разделе "OpenCart", создана пользователем opalko, 31 дек 2014.

  1. opalko

    opalko

    Регистрация:
    23 дек 2014
    Сообщения:
    151
    Симпатии:
    8
    Как реализовать вот это http://group.96.lt/index.php?route=product/product&product_id=75
    Нужно чтобы опция "цвет" с переключателем "image" были выставлены горизонтально, но отсутствовала кнопка выбора, а вместо неё была сама картинка. На сайте, который в примере, каждое фото - отдельная карточка товара, а нужно чтобы все манипуляции проходили в одной карточке.
    Заранее благодарен всем откликнувшимся!
     
  2. Alexxx13

    Alexxx13

    Регистрация:
    14 мар 2015
    Сообщения:
    51
    Симпатии:
    5
    Добрый день. Нашли как сделать так как на указанном сайте?
     
  3. Pelmen2

    Pelmen2

    Регистрация:
    26 янв 2015
    Сообщения:
    169
    Симпатии:
    14
  4. Alexxx13

    Alexxx13

    Регистрация:
    14 мар 2015
    Сообщения:
    51
    Симпатии:
    5
    1. Да
    2. Да
    Не совсем понял, чем поможет этот модуль, он же просто меняет картинки на основном изображении товара и если скрыть радиобокс через css, то ничего выбрать вообще не получится.

    Мне смена основного изображения товара не нужна при выборе опции, надо просто сделать выбор при клике на изображение опции, без чекбоксов и радиобоксов.
     
  5. max6002

    max6002

    Регистрация:
    11 ноя 2013
    Сообщения:
    75
    Симпатии:
    64
    вам нужно создать условие, чтоб выбранной опции прописывался id или что-то другое, тогда можно будет с помощью css стилей выделить
     
  6. Pelmen2

    Pelmen2

    Регистрация:
    26 янв 2015
    Сообщения:
    169
    Симпатии:
    14
    я проверилна демке. скрыл радиобокс, нажимаю на нужной опции - она становится выбранной и попадает в корзину при заказе.
    Да и при помощи стилей выделять выбранную опцию.

    радиобокс в любом случае нужен, просто он будет невидимый.
     
  7. Alexxx13

    Alexxx13

    Регистрация:
    14 мар 2015
    Сообщения:
    51
    Симпатии:
    5
    в общем, что при клике на картинку опции, что на радиобокс - выбор опции происходит, поэтому достаточно сделать выделение картинки при нажатии на нее, а радиобокс скрыть. Может подскажите как через css добавить это выделение?
    --- Добавлено, 28 май 2015 ---
    если через css не найду как сделать выделение, то придется ставить модуль, а так для такой мелочи лишний модуль устанавливать не очень хочется.
     
  8. Alexxx13

    Alexxx13

    Регистрация:
    14 мар 2015
    Сообщения:
    51
    Симпатии:
    5
    думается, что все это я уже сделал, а вот как выделить с помощью css? Нашел всевдокласс focus http://htmlbook.ru/css/focus, но вот что-то прикрутить к своим изображениям не получается.
    Вот класс в css для изображений:
    .img-thumbnail {
    1. padding: 4px;
    2. line-height: 1.428571429;
    3. background-color: #fff;
    4. border: 1px solid #ddd;
    5. border-radius: 4px;
    6. -webkit-transition: all .2s ease-in-out;
    7. transition: all .2s ease-in-out;
    8. display: inline-block;
    9. max-width: 100%;
    10. height: auto;
    }
     
  9. Pelmen2

    Pelmen2

    Регистрация:
    26 янв 2015
    Сообщения:
    169
    Симпатии:
    14
  10. max6002

    max6002

    Регистрация:
    11 ноя 2013
    Сообщения:
    75
    Симпатии:
    64
    в css прописать нужный стиль + :focus, к примеру .img-thumbnail:focus
    лучше дать ссылку на сайт, так быстрее сможем помочь
     
  11. Alexxx13

    Alexxx13

    Регистрация:
    14 мар 2015
    Сообщения:
    51
    Симпатии:
    5
    я так и сделал, вот код
    Код:
    .img-thumbnail:focus {
    border: 1px solid #aa88ff;
    background-color: #23a1d1;}
    
    .img-thumbnail:hover {
    border: 1px solid #aa88ff;
    background-color: #23a1d1;}
    при наведении работает, а при выборе - нет, вот здесь можно посмотреть http://carmat.by/chehly/audi-cover/a3-1996-2003-8l
     
  12. Pelmen2

    Pelmen2

    Регистрация:
    26 янв 2015
    Сообщения:
    169
    Симпатии:
    14
  13. max6002

    max6002

    Регистрация:
    11 ноя 2013
    Сообщения:
    75
    Симпатии:
    64
    у вас псевдокласс не добавляется к выбранной опции, поэтому и не работает, нужно опции доработать
    посмотрите в демке модуля http://www.opencart.com/index.php?extension_id=10910&route=extension/extension/info
    там выбранной опции добавляется в класс "active"
    [​IMG][​IMG]