Перейти к содержанию
Ch0oJoy

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

Рекомендуемые сообщения

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

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

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

 

post-705002-0-49492700-1451831418_thumb.png

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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;

Поделиться сообщением


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

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

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

 

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

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

Поделиться сообщением


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

 

 

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

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

 

 

 

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

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

Поделиться сообщением


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

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

post-705002-0-94761100-1451851873_thumb.png

Поделиться сообщением


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

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

attachicon.gif12.png

.option-image лишнее

ответил в ЛС

Поделиться сообщением


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

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

Поделиться сообщением


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

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

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