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

[welldesign]

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

 

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

 

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

 

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

 

Примеры:

http://themes.webiz.mu/opencart/teez/index.php?route=product/product&path=60&product_id=54

http://www.wildberries.ru/catalog/831768/detail.aspx?group_cod_1s=371

 

[Lery37]

 хм...интересно придумано... тоже бы поставила данное решение к себе на сайт...
есть желающие помочь??? :oops:

[ingenerks]

Вот модуль http://www.opencart.com/index.php?route=extension/extension/info&extension_id=10910

[procon]

Нашел отличное решение. Остаток товара не показывает, но все таки. Ищем Product Block Optiion

[Marianna]

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

Змінено 15 січня 2016 користувачем Marianna

[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

Змінено 15 січня 2016 користувачем Marianna

[smutno]

 

в 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 тоже подходит

[Algrizly]

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

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

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

Змінено 22 лютого 2017 користувачем Algrizly

[RoSSo]

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

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

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

[Algrizly]

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

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

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

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

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

[dscarpe]

В 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 файл, где его искать?

[Marianna]

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

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

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

Змінено 9 липня 2017 користувачем Marianna