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

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

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

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

 

Screenshot (1).png

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


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

sashamaximiv, Стилизация CSS ONLY!

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


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

Стилизация не работает. Можете сами проверить. 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 пользователей онлайн

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

×

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

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