Перейти к публикации
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

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


Neuro75
 Погделиться

Рекомендованные сообещёния

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

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

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

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

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

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

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

Ссылка на комменирий
Погделиться на других сайих


[type="radio"]{

display: none;

}

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

border: 1px solid red;

border-radius: 5px;

}

Ссылка на комменирий
Погделиться на других сайих

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

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

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

Ссылка на комменирий
Погделиться на других сайих


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

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

Ссылка на комменирий
Погделиться на других сайих


  • 2 года спустя...

bootstrap.min.css

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

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

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

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

 

Ссылка на комменирий
Погделиться на других сайих


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

Ссылка на комменирий
Погделиться на других сайих


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

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

Гуглите :focus

Ссылка на комменирий
Погделиться на других сайих


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

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

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

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

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

Ссылка на комменирий
Погделиться на других сайих


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

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

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

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

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

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

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

Ссылка на комменирий
Погделиться на других сайих


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

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

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

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

Ссылка на комменирий
Погделиться на других сайих


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

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

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

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

Ссылка на комменирий
Погделиться на других сайих


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

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

 

Ссылка на комменирий
Погделиться на других сайих


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

Ссылка на комменирий
Погделиться на других сайих


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

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

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

Ссылка на комменирий
Погделиться на других сайих


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

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

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

 

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

Ссылка на комменирий
Погделиться на других сайих


: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

Ссылка на комменирий
Погделиться на других сайих

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> кнопки выпотому чтор опции не рилииет. 

Ссылка на комменирий
Погделиться на других сайих


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

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

Ссылка на комменирий
Погделиться на других сайих


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

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

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

Ссылка на комменирий
Погделиться на других сайих

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

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

Можно javascript

пример

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

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

Ссылка на комменирий
Погделиться на других сайих

Пока решил ик

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

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

 

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

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

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

Ссылка на комменирий
Погделиться на других сайих


Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы осивить комменирий

Создать аккаунт

Зарегистрируйтесь для получения аккауни. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите згдесь.

Войти сейчас
 Погделиться

×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обрилитка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфигденциальности.