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

Neuro75 · March 17, 2019

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

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

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

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

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

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

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

Pavel666 · March 17, 2019

[type="radio"]{

display: none;

}

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

border: 1px solid red;

border-radius: 5px;

}

Neuro75 · March 17, 2019

Здорово! Спасипотому что.

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

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

Neuro75 · March 18, 2019

Понял, что только 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 · February 11

bootstrap.min.css

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

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

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

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

Cezarmay · February 11

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

Dimasscus · February 11

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

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

Гуглите :focus

Cezarmay · February 11

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

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

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

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

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

Cezarmay · February 11

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

Гуглите :focus

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

Dimasscus · February 11

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

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

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

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

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

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

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

Cezarmay · February 11

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

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

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

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

Dimasscus · February 11

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

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

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

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

Cezarmay · February 11

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

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

Cezarmay · February 11

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

Dimasscus · February 11

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

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

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

Cezarmay · February 11

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

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

Dimasscus · February 12

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

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

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

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

Tom · February 12

: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 · February 12

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 · February 12

<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 · February 12

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

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

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

esculapra · February 12

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

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

Можно javascript

пример

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

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

Cezarmay · February 12

Пока решил ик

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

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

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

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

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

Sign In

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

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Similar Content

Recently Browsing 0 members

Покупателям

Разрилитликам

Полезная информация

Последние дополнения

Important Information