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

[Найдено] Нужно чтобы опция "Размер" отображалась кнопками


welldesign

Recommended Posts

Приветствую!

 

Не подскажите есть ли готовые модули для реализации следующего функционала:

 

Нужно внести изменения в страницу товара:

 

Сейчас выбор опции "Размер" одежды осуществляется с помощью select. А нужно сделать, чтобы все значения опции "Размер" отображались кнопками, даже если количество 0, на которые можно кликнуть для выбора необходимого размера. При отсутствии размера у данного товара (то есть если количество товара для данной опции=0) кнопки зачеркивались бы красной линией и на них нельзя было нажать или же была возможность предварительного заказа отсутствующего товара.

 

Примеры:



 

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


  • 1 year later...
  • 11 months later...

бесплатного или не дорого решения нет?

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


в product.tpl (opencart 2) меняем 

     <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" />

на

 <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> на  <label for="<?php echo $option_value['product_option_value_id']; ?>" >

 

в 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;
}
 
это можно использовать как для checkbox так и для radio
Змінено користувачем Marianna
  • +1 1
Надіслати
Поділитися на інших сайтах


  • 1 month later...

 

в product.tpl (opencart 2) меняем 

     <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" />

на

 <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> на  <label for="<?php echo $option_value['product_option_value_id']; ?>" >

 

в 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;
}
 
это можно использовать как для checkbox так и для radio

 

Для opencart 1.5 тоже подходит

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


  • 11 months later...

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

<input />
<label> 
текст опции
</label>

в ОС изначально <input /> в <label> обернут

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


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

А могли би Вы подробнее описать, а то что-то у меня тоже стили не подхватывает?

И если не сложно, то сразу для radio описать.

Большое спасибо!

Сделать то, что написала Marianna, только в моем шаблоне шел сначала <label> и в него обернуть <input /> а надо наоборот. просто выведете <input /> выше за пределы <label> и все заработает

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


  • 4 months later...
В 16.01.2016 в 03:16, Marianna сказал:

в product.tpl (opencart 2) меняем 

     <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" />

на

 <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> на  <label for="<?php echo $option_value['product_option_value_id']; ?>" >

 

в 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;
}
 
это можно использовать как для checkbox так и для radio

А что за css файл, где его искать?

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


В 27.02.2017 в 19:12, Algrizly сказал:

Сделать то, что написала Marianna, только в моем шаблоне шел сначала <label> и в него обернуть <input /> а надо наоборот. просто выведете <input /> выше за пределы <label> и все заработает

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

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


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

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

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

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

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

Вхід

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

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

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

Important Information

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