css для отображения опций в строку

[Neuro75]

Здравствуйте.

Для магазина обуви на ОС 2.3 пытаюсь сделать отображение размеров (опция) на странице товара в строку, в виде картинки, без радио-кнопки, с выделением картинки опции рамкой или еще как при выборе. Шаблон Moneymaker2.

В админке добавил опциям изображения цифр, вставил в пользовательский css:

#product .radio{
  position: relative;
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px; 
}

Теперь опции отображаются в строку.  Но как запретить отображать радио-кнопку и подпись опции, а также сделать рамку вокруг изображения при выборе опции не знаю.

Заморочился со стилями css потому что все дополнения, связанные с изображениями опций, которые видел делают несколько не то - меняют изображения товара в зависимости от выбранной опции и пр. Но при этом не убирают его радио-кнопку. Авторы ссылаются на то, что ее отображение зависит от шаблона, а не от модуля.

Прошу помочь написать css или дать ссылку на модуль, который так делает.

[Pavel666]

[type="radio"]{

display: none;

}

[type="radio"]:checked+img{ /* img или div в зависимости от того что у вас там идет */

border: 1px solid red;

border-radius: 5px;

}

[Neuro75]

Здорово! Спасибо.

Радио кнопка пропала, рамка вокруг изображения опции появляется.

Но только вот они опять вертикально стали и подпись не пропала. Это можно как-то сделать?
 

[Neuro75]

Понял, что только css вопрос не решить.

В дополнение к указанным выше значениям css, нашел в catalog/view/theme/moneymaker/template/product/product.tpl кусок, который отвечает за вывод опции:

                      <div class="radio">
                        <label>
                          <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                          <?php if ($option_value['image']) { ?>
                          <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
                          <?php } ?>
                          <?php echo $option_value['name']; ?>
                          <?php if ($option_value['price']) { ?>
                          (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                          <?php } ?>
                        </label>
                      </div>

удалил в нем

 <?php echo $option_value['name']; ?>

получилось

                      <div class="radio">
                        <label>
                          <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                          <?php if ($option_value['image']) { ?>
                          <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
                          <?php } ?>

                          <?php if ($option_value['price']) { ?>
                          (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                          <?php } ?>
                        </label>
                      </div>

Теперь вся задача решена, кроме вывода изображений опций в строку, а не вертикально. Радио-кнопка и имя опции не отображается, сами они представлены кликабельными изображениями.

Полагаю, что нужно как-то указать выводить опции в таблице, но как - не знаю, не силен в php. Кроме того, задача осложняется тем, что количество доступных опций (в моем случае - имеющиеся в наличии размеры) у товара разное и варьируется от 1 до 10-12.

Прошу помочь разместить опции в строку. В идеале - в строки по пять.

[Cezarmay]

bootstrap.min.css

но там сперва нужно все разнести по строкам

иначе - там черт голову сломит

меняете на display:inline-block; - опции в строку

Может кто знает - как разместить надписи по центру каждой опции снизу картинки?

 

[Cezarmay]

Пока получается так. Может кто знает - как выделить опцию при нажатии - например, поменять цвет рамки выбранной опции.

[Dimasscus]

49 минут назад, Cezarmay сказал:

Пока получается так. Может кто знает - как выделить опцию при нажатии - например, поменять цвет рамки выбранной опции.

Гуглите :focus

[Cezarmay]

Пока редактировал эти строки в bootstrap.min.css

На номера строк не нужно ориентироваться. Это я его сам разбивал из одной строки на более наглядную для себя форму.

https://doors.moscow/profildoors-dveri-serii-u/dver-mezhkomnatnaja-cargovaja-profildooors-serija-u-model-2u.html

пока получается так. 

Сейчас буду пробовать окрашивать выбранную форму в другой цвет. А то пока непонятно.

[Cezarmay]

2 часа назад, Dimasscus сказал:

Гуглите :focus

Спс, сейчас поробую

[Dimasscus]

1 минуту назад, Cezarmay сказал:

Пока редактировал эти строки в bootstrap.min.css

На номера строк не нужно ориентироваться. Это я его сам разбивал из одной строки на более наглядную для себя форму.

https://doors.moscow/profildoors-dveri-serii-u/dver-mezhkomnatnaja-cargovaja-profildooors-serija-u-model-2u.html

пока получается так. 

Сейчас буду пробовать окрашивать выбранную форму в другой цвет. А то пока непонятно.

Редактируя файл бутстрапа вы задали стили ВСЕМ чекбоксам на сайте, а не только опциям. Не нужно его трогать. Вносите изменения в файл стилей шаблона

[Cezarmay]

1 минуту назад, Dimasscus сказал:

Редактируя файл бутстрапа вы задали стили ВСЕМ чекбоксам на сайте, а не только опциям. Не нужно его трогать. Вносите изменения в файл стилей шаблона

Не могу найти стили для опций в stylesheet.css. Целый день потратил. 

Я так понимаю, нужно отдельно прописывать блоки и под них стили ?

[Dimasscus]

1 минуту назад, Cezarmay сказал:

Не могу найти стили для опций в stylesheet.css. Целый день потратил. 

Я так понимаю, нужно отдельно прописывать блоки и под них стили ?

Нет. Нужно просто использовать класс блока в котором опции

[Cezarmay]

Стоп. А не плохо получилось)))) Полный отказ от маленького круга.

Теперь нужно найти путь для выделения выбранного пункта. Может кто поможет - уже полночь, я с утра за компом)))

 

[Cezarmay]

Сутки настраивали связанные опции с автором. Оказывается после установки модуля категорически не рекомендуется делать очистку кеша модификации. Удар для меня... 

[Dimasscus]

Только что, Cezarmay сказал:

Сутки настраивали связанные опции с автором. Оказывается после установки модуля категорически не рекомендуется делать очистку кеша модификации. Удар для меня... 

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

[Cezarmay]

Не могу понять, где прописать :focus

вроде все делаю по логике - ничего не выходит?

 

[Dimasscus]

5 часов назад, Cezarmay сказал:

Не могу понять, где прописать :focus

вроде все делаю по логике - ничего не выходит?

 

Это стили доп.картинок товара

[Tom]

:focus аналог hover, как он поможет выделить отмеченный чекбокс?

Его действие ограничено зоной наведения курсора мыши.

Здесь нужен элемент input[type="radio"]:checked

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

Примеров тьма.

 

UPD:

Сейчас структура такая :

 

<label>
       <input type="radio" name="option[xxx]" value="xxx" data-points="xxx" data-prefix="+" data-price="xxxx">
        <img src="xxx.jpg" alt="xxx" class="img-thumbnail"> Название опции 
</label>

Попробовать изменить на

  <input type="radio" name="option[xxx]" value="xxx" data-points="xxx" data-prefix="+" data-price="xxxx">
<label>
       <img src="xxx.jpg" alt="xxx" class="img-thumbnail"> Название опции 
</label>

 

Ну и в css так например

input[type=radio]:checked + label>img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

 

http://joxi.ru/V2Vvp0dH89ODa2

[Cezarmay]

4 часа назад, Tom сказал:

:focus аналог hover, как он поможет выделить отмеченный чекбокс?

Его действие ограничено зоной наведения курсора мыши.

Здесь нужен элемент input[type="radio"]:checked

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

Примеров тьма.

 

UPD:

Сейчас структура такая :

 

<label>
       <input type="radio" name="option[xxx]" value="xxx" data-points="xxx" data-prefix="+" data-price="xxxx">
        <img src="xxx.jpg" alt="xxx" class="img-thumbnail"> Название опции 
</label>

Попробовать изменить на

  <input type="radio" name="option[xxx]" value="xxx" data-points="xxx" data-prefix="+" data-price="xxxx">
<label>
       <img src="xxx.jpg" alt="xxx" class="img-thumbnail"> Название опции 
</label>

 

Ну и в css так например

input[type=radio]:checked + label>img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}

 

http://joxi.ru/V2Vvp0dH89ODa2

При изменении позиции <label> кнопки выбор опции не работает. 

[Cezarmay]

<div class="radio">
                  <label>
                    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                    <?php if ($option_value['image']) { ?>                  
                   <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> 
                    <?php } ?>                    
                    <?php echo $option_value['name']; ?>
                    <?php if ($option_value['price']) { ?>
                    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                    <?php } ?>
                  </label>
                </div>

 

Не подумайте, что лентяй))) просто уже голова не варит. Что здесь поменять?

И что прописать в bootstrap.min.css или в styleeshet.css ?

Вот не получается у меня - курсы не заканчивал )

[esculapra]

12 часов назад, Cezarmay сказал:

Не могу понять, где прописать :focus

Сказали же, что focus = hover. hover, как правило, используется для ссылок (a:hover), а focus - для любого узла можно применить.

[esculapra]

7 минут назад, Cezarmay сказал:

Что здесь поменять?

Можно javascript

пример

  <form>
   <p><input type="text" class="text" value="Введите текст" 
    onfocus="this.value=''" onblur="this.value='Введите текст'"></p>
   </form>

тут все просто: событие focus - при наведении курсора на узел, blur - если курсор ушел куда-то (потеря фокуса).

[Cezarmay]

Пока решил так

https://doors.moscow/profildoors-dveri-serii-u/dver-mezhkomnatnaja-cargovaja-profildooors-serija-u-model-2u.html

Надо еще скачать для сайта 15000 фото и потом все это разобрать по коллекциям.

 

Задача в чем: что бы функции кнопки .radio полностью перенести на фото выбранной опции. Т.е. при выборе картинка опции выделялась, например, красным цветом.

Может кто сделает ? - сколько будет стоить?

Сразу скажу - доступ не могу предоставить. Уже был горький опыт.