[Решено] Изменить активную опцию

[Ch0oJoy]

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

Помогите хоть как-то обозначить выбранную опцию. Может можно как на скрине (вариант 2.3.4)?

Все что смог сделать, это осветление при нажатии, но оно только мигнуло и все.

 

 

Вот код опции:

<?php } ?>
        <?php if ($option['type'] == 'image') { ?> 
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b> <small> - (нажмите на цвет и он автоматически добавится)</small> <br />
          <table class="option-image">
            <?php foreach ($option['option_value'] as $option_value) { ?>
            <tr class="tr_my_options">
             <td style="display:none;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td>
              <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td>
              <td><label class="name_my_options" for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><td style="display:none;"><?php echo $option_value['name']; ?></td>
                  <?php if ($option_value['price']) { ?>
                  (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                  <?php } ?>
                </label></td>

[pantagruel964]

input:checked {

}

[Ch0oJoy]

input:checked {

}

Добавил в CSS, но ничего не поменялось.

 

Вот мой CSS

.product-info .option-image label  {
	display: block;
}
.product-info .option-image :hover  {
opacity:1;

}
.product-info .option-image :active {
 opacity:0.5;
}
	
.product-info .option-image input:checked{
	display: block;
	width: 100%;
	height: 100%;
}
.product-info .option-image img {
	margin-right: 5px;
	border: 1px solid #FFFFFF;
	cursor: pointer;
	 width: 25px;
        height: 25px;

[pashast]

У вас же скрытый элемент <td style="display:none;">

В нем не будет показыватся input:checked.

 

Предлагаю убрать все элементы td, потом выбранный элемент можно подсветить так

.product-info .option-image input:checked + label img{
    border: 3px solid #888;
}

[pantagruel964]

 

 

скрытый элемент <td style="display:none;">

Скорее всего там по клику меняется на block, по фотографии тяжело гадать

 

 

 

убрать все элементы td

и сверстать по-человечески, используя для radio псевдоэлементы :before или :after. За верстку таблицами уже давно пора по рукам бить.

[Ch0oJoy]

pashast, Пробовал Вашим способом, вот что получилось, может что-то не так сделал... Подскажите пожалуйста.

[pashast]

Пробовал Вашим способом, вот что получилось, может что-то не так сделал... Подскажите пожалуйста.

12.png

.option-image лишнее

ответил в ЛС

[Ch0oJoy]

Спасибо большое всем, все получилось!

[afwollis]

вот уже обсуждалось (не первый раз): https://opencartforum.com/topic/55221-%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%BE-%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BE%D0%BF%D1%86%D0%B8%D0%B8-%D0%BF%D1%80%D0%B8-%D0%B2%D1%8B%D0%B1%D0%BE%D1%80%D0%B5/?do=findComment&comment=489251