Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Модуль размеров обуви в таком виде (смотрите скриншот)


Recommended Posts

Стилизация не работает. Можете сами проверить. http://prima-shop.com.ua/index.php?route=product/product&path=60_69&product_id=50

 

Или эту тему 

 

Змінено користувачем sashamaximiv
Надіслати
Поділитися на інших сайтах


поработать над точкой для щелчка на выбор опции

Скрытый текст
#product .checkbox input[type=checkbox] {

 

  1. margin-left: 20px;
}

Но, видите ли в чем дело, у вас размер- чекбокс, а он должен быть radio ( переключатель)

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

 

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

Осталось только поменять цвет фона, текста и бордера

Скрытый текст

#product .checkbox input[type=checkbox]:checked + label {

position: relative;

border-color: #ff6908;

background: black;

color: white;

}

 

Змінено користувачем jaffagold
Надіслати
Поділитися на інших сайтах


10 minutes ago, jaffagold said:

Для начала, можно пару кнопка число замкнуть в общий контур

Что-то типа этого

  Reveal hidden contents
#product .checkbox {
  1. border: 1px solid #aaa;
  2. padding: 4px;
  3. border-radius: 3px;
}

А потом поработать над 

  Hide contents
#product .checkbox input[type=checkbox] {

 

  1. margin-left: 20px;
}

Но, видите ли в чем дело, у вас размер- чекбокс, а он должен быть radio ( переключатель)

Потому что можно сразу несколько чекбоксов выбрать, а радиокнопку- только одну. Это более логично при покупке вещи определенного размера

 

Я бы за, но нужен выбор нескольких размеров.
Вот текущий html

<div class="checkbox">
  <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="<?php echo $option_value['product_option_value_id']; ?>" />
                  <label>
                    
                    <?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>

 и css

#product .checkbox {
    display: inline-block;
}
#product .checkbox input[type=checkbox] {
    cursor: pointer;
    opacity: 0;
}
#product .checkbox input[type=checkbox] + label {
    padding: 1px 9px;
    height: 15px;
    line-height: 15px;
    font-size: 14px;
    border: #ddd solid 1px;
    margin-top: 5px;
}
#product .checkbox input[type=checkbox]:checked + label {
    position: relative;
    border-color: #ff6908;
}

Но при клике на текст размера срабатывает рамка следующего размера. Вот так.
 

Screenshot_1.png

Змінено користувачем sashamaximiv
Надіслати
Поділитися на інших сайтах


Я вам выше все стили уже написал.

НО как можно купить одну вещь сразу в трех размерах- не понимаю. Один товар-один размер. Я так привык.

Кстати, там дополнение и по черному цвету фона есть

Змінено користувачем jaffagold
Надіслати
Поділитися на інших сайтах


14 minutes ago, jaffagold said:

Один товар-один размер. Я так привык.

 

Могут заказать несколько размеров для примерки.

 

7 minutes ago, sashamaximiv said:

Спасибо за помощь. Сделал немного по другому. Работает как часы) Всем спасибо за помощь. Тему можно закрывать.

 

Если вам потрудились ответить, то и вы уж скажите как сделали. Возможно кому-то пригодится.

Надіслати
Поділитися на інших сайтах


1 час назад, sashamaximiv сказал:

Стилизация не работает.

не правда

 

checked.gif

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.