Вывод опций на товаре горизонтально

Тема в разделе "Дизайн, оформление и шаблоны", создана пользователем Алексей, 27 май 2015.

  1. Алексей

    Алексей Пользователь

    Сообщения:
    39
    Симпатии:
    2
    Может кто-нибудь подскажет как сделать вывод опций горизонтально под описанием товара? Вот как-то так http://c2n.me/3ilL2LR.jpg

    Opencart 2.0.1.1, русская сборка.
     
    Последнее редактирование: 27 май 2015
  2. Ален

    Ален Эксперт

    Сообщения:
    2.055
    Симпатии:
    635
    Сначало необходимо отредактировать product.tpl и перенести весь код с опциями под описание или еще куда. Это сделано?

    А потом добавить стиль в stylesheet.css, например такой
    Код:
    div[id^="input-option"] .radio {
        display: inline-block;
    }
     
    Алексей нравится это.
  3. Алексей

    Алексей Пользователь

    Сообщения:
    39
    Симпатии:
    2
    Перенес код с опциями вниз и применил указанный стиль - в итоге все стало как надо. Есть только одна проблемка: кнопка купить и количество товара тоже растянулись на всю страницу http://c2n.me/3iopcK3.png, пробовал вынести эти элементы из блока опций - тогда кнопка купить перестает работать. Можно это как-то поправить?

    И еще вопрос: как избавиться от этих элементов http://c2n.me/3iooZ87.jpg, т.е. скрыть радиобокс и название опции?
     
  4. Ален

    Ален Эксперт

    Сообщения:
    2.055
    Симпатии:
    635
    Код:
    div[id^="input-option"] .radio input {
        display: none;
    }
    но это только для радиобокса. Названия надо убрать в коде product.tpl
    чуть ниже <?php if ($option['type'] == 'image') { ?>
    удалите <?php echo $option_value['name']; ?>
     
    Алексей нравится это.
  5. Ален

    Ален Эксперт

    Сообщения:
    2.055
    Симпатии:
    635
    так оберните ее в блок bootstrap-а и все. Или просто класс добавить, например col-sm-6
     
    Алексей нравится это.
  6. Алексей

    Алексей Пользователь

    Сообщения:
    39
    Симпатии:
    2
    Спасибо.

    Это уже сам нашел, там в <label> это строка была.

    В col-sm-4 обернул, в котором она и была раньше.

    А через css как добавить выделение картинки опции после клика на нее http://c2n.me/3ip1WOG.jpg ?
     
  7. Ален

    Ален Эксперт

    Сообщения:
    2.055
    Симпатии:
    635
    http://htmlbook.ru/css/focus
     
  8. Алексей

    Алексей Пользователь

    Сообщения:
    39
    Симпатии:
    2
    Добавил в css и на выделение и на наведение. Наведение работает, а вот выделение - нет. В чем может быть причина?

    Код:
    .img-thumbnail{
    padding:4px;
    line-height:1.428571429;
    background-color:#fff;
    border:1px solid #ddd;
    border-radius:4px;
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    display:inline-block;
    max-width:100%;
    height:auto}
    
    .img-thumbnail:focus {
    border: 1px solid #aa88ff;
    background-color: #ffeeac;}
    
    .img-thumbnail:hover {
    border: 1px solid #aa88ff;
    background-color: #ffeeac;}
     
  9. tsap

    tsap Продвинутый пользователь

    Сообщения:
    230
    Симпатии:
    131
    может так?
    .img-thumbnail a:focus
    .img-thumbnail a:hover
    или у вас без ссылок?
     
  10. Алексей

    Алексей Пользователь

    Сообщения:
    39
    Симпатии:
    2
    У меня без ссылок, это выбор опции. Опция с радиобоксом, т.е. по нажатию радиобокс активируется, но т.к. я его скрываю мне надо сделать выделение опции http://c2n.me/3ip1WOG.jpg.
     
  11. unlimuser

    unlimuser Новичок

    Сообщения:
    16
    Симпатии:
    0
    Есть готовое решение для стандартного шаблона для Opencart 2.3.0.2 ? В этой версии по сравнению с прежними все поменялось. Готов заплатить 10$ за рабочую инструкцию для этой версии.
     
  12. Vlad

    Vlad Эксперт

    Сообщения:
    3.941
    Симпатии:
    945
    это решение должно работать.. карточка не менялась..
     
  13. unlimuser

    unlimuser Новичок

    Сообщения:
    16
    Симпатии:
    0
    Есть два вопроса после выставления в ряд:
    1. Как добавить всплывающий Alt к изображениям Опций при наведении на них?
    2. Как полностью избавиться от поля radio input (сейчас несмотря на его скрытие, оно продолжает занимать место и наслаивается на соседние изображения и соответственно выходит за пределы изображения для которого назначено)?
     
  14. Vlad

    Vlad Эксперт

    Сообщения:
    3.941
    Симпатии:
    945
    ну что же вы. Тут уже идет простой html и должны как то сами...
     
  15. unlimuser

    unlimuser Новичок

    Сообщения:
    16
    Симпатии:
    0
    Если бы все работало, то не обращался бы за советом.
    В product.tpl уже прописано img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] ... , поэтому при наведении должно показывать название опции, но этого не происходит.
    Некорректное отображение radio input тоже пока не побеждается.
     
  16. Vlad

    Vlad Эксперт

    Сообщения:
    3.941
    Симпатии:
    945
    потому что всплывающего альта не существует. Есть только title
    Почитайте все же html ;)