Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Neuro75
 Share

Recommended Posts

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

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

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

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

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

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

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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites


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

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

Link to comment
Share on other sites


  • 2 years later...

bootstrap.min.css

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

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

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

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

 

Снимок5.JPG

Link to comment
Share on other sites


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

Снимок9.JPG

Link to comment
Share on other sites


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

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

Снимок9.JPG

Гуглите :focus

Link to comment
Share on other sites


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

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

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

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

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

122.jpg

123.jpg

Link to comment
Share on other sites


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

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

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

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

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

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

122.jpg

123.jpg

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

Link to comment
Share on other sites


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

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

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

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

Link to comment
Share on other sites


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

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

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

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

Link to comment
Share on other sites


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

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

 

Link to comment
Share on other sites


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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites


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

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

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

 

124.jpg

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

Link to comment
Share on other sites


: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

Link to comment
Share on other sites

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> кнопки выбор опции не работает. 

Link to comment
Share on other sites


<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 ?

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

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites

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

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

Можно javascript

пример

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

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

Link to comment
Share on other sites

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

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

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

 

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

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

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

Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.