[Помощь] Webasyst radio button характеристики

[droni4]

Здравствуйте уважаемые!

Подскажите как реализовать выбор характеристики таким образом


первое что получилось

    <tr>
        <td>
            <span class="ad_razsel">{$product_extra[i].name|escape:'html'}</a>{if $product_extra[i].option_show_times > 1 }({counter name=option_show_times}):{else}:{/if}
        </td>
        <td>
            {counter name=select_counter assign=_cnt}
            <form name='option_{$_cnt}' class="product_option">
            {section name=j loop=$product_extra[i].values_to_select}
<input type="button" value='{$product_extra[i].values_to_select[j].option_value}' rel='{$product_extra[i].values_to_select[j].price_surplus}'
            {if $product_extra[i].values_to_select[j].variantID == $product_extra[i].variantID}selected="selected"{/if}>
             
 
            {/section}
            </form>
        </td>
    </tr>

но надо как то запоминать выбранное значение и передавать его в корзину... пока под вопросом

Добавлено t3s: мультипостинг наказуем

 

[mdss]

1) в смысле запоминать?
2) чтобы передавалось значение в корзину нужно задавать класс product_option

Плюс ты неправильно сделал. Для кнопки нельзя использовать атрибут selected, используй радиокнопки и label для визуального оформления как на скрине. Чуть позже напишу готовое решение, но без визуального оформления.

 

[droni4]

1) в смысле запоминать?
2) чтобы передавалось значение в корзину нужно задавать класс product_option

Плюс ты неправильно сделал. Для кнопки нельзя использовать атрибут selected, используй радиокнопки и label для визуального оформления как на скрине. Чуть позже напишу готовое решение, но без визуального оформления.

С нетерпением жду)) заранее спасибо) а то моск уже

 

[mdss]

чистый пример:
Для просмотра ссылки Войди или Зарегистрируйся

Код для жоп-скрипта

<input type="radio" name="option_{$_cnt}" id="option_{$product_extra[i].values_to_select[j].variantID}" class="product_option option_size" value="option_{$product_extra[i].values_to_select[j].variantID}"{if $product_extra[i].values_to_select[j].variantID == $product_extra[i].variantID} checked="checked"{/if} /><label for="option_{$product_extra[i].values_to_select[j].variantID}">{$product_extra[i].values_to_select[j].option_value}</label>

из минусов. Значение поставленное по-умолчанию сразу выделяться не будет, надо выбирать вручную (

 

[droni4]

чистый пример:
Для просмотра ссылки Войди или Зарегистрируйся

Код для жоп-скрипта

<input type="radio" name="option_{$_cnt}" id="option_{$product_extra[i].values_to_select[j].variantID}" class="product_option option_size" value="option_{$product_extra[i].values_to_select[j].variantID}"{if $product_extra[i].values_to_select[j].variantID == $product_extra[i].variantID} checked="checked"{/if} /><label for="option_{$product_extra[i].values_to_select[j].variantID}">{$product_extra[i].values_to_select[j].option_value}</label>

из минусов. Значение поставленное по-умолчанию сразу выделяться не будет, надо выбирать вручную (

сделал так

        <div class="wrap">
            {counter name=select_counter assign=_cnt}
            {section name=j loop=$product_extra[i].values_to_select}
                <div class="option_place">
                    <input type="radio" name="option_{$_cnt}" id="option_{$product_extra[i].values_to_select[j].variantID}" class="option_size" value="option_{$product_extra[i].values_to_select[j].variantID}"{if $product_extra[i].values_to_select[j].variantID == $product_extra[i].variantID} checked="checked"{/if} /><label for="option_{$product_extra[i].values_to_select[j].variantID}">{$product_extra[i].values_to_select[j].option_value}</label>
                </div>
            {/section}
        </div>

не выделяется, и значение не передается взял по стандарту с ссылки сверху, глянь код может снес много

 

[droni4]

Кинь пожалуйста свой кусок глянуть всего кода а то так по частям собирать а глянешь в общей картине и сразу все станет на свои места, на сколько я понял что бы выделялось надо еще Java прикуручивать

 

[mdss]

для чекбокса надо обязательно задавать класс product_option. Его обрабатывает родной скрипт жоп-скрипта.

 

[HeadHunter]

для чекбокса надо обязательно задавать класс product_option. Его обрабатывает родной скрипт жоп-скрипта.

тоже заинтересовал этот вопрос. взял по твоему примеру, но значение не выбирается и в консоли ругается

Ошибка: TypeError: selectEntry.options is undefined
Источник: /published/SC/html/scripts/js/functions.js
Строка: 214

строка 214 говорит следующее

function select_getCurrOption(selectEntry) {
 
    for (var i = 0; i < selectEntry.options.length; i++) { //строка 214
 
        if (selectEntry.options[i].selected) {
            return selectEntry.options[i];
        }
    }
 
    return null;
}

 

[mdss]

тоже заинтересовал этот вопрос. взял по твоему примеру, но значение не выбирается и в консоли ругается



строка 214 говорит следующее

function select_getCurrOption(selectEntry) {
 
    for (var i = 0; i < selectEntry.options.length; i++) { //строка 214
 
        if (selectEntry.options[i].selected) {
            return selectEntry.options[i];
        }
    }
 
    return null;
}

скопируй кусок шаблона еще, хочу глянуть. Суть то в том, что это решение с рабочего проекта (Для просмотра ссылки Войди или Зарегистрируйся) и там значения передаются. В посте выше я лишь стилизовал радиокнопку

 

[HeadHunter]

скопируй кусок шаблона еще, хочу глянуть. Суть то в том, что это решение с рабочего проекта (Для просмотра ссылки Войди или Зарегистрируйся) и там значения передаются. В посте выше я лишь стилизовал радиокнопку

Делал таким образом

{if !$CPT_CONSTRUCTOR_MODE}
 
{literal}
<script type="javascript">
$('.option_size').click(function () {
    $('input:not(:checked)').parent().removeClass("option_place_selected");
    $('input:checked').parent().addClass("option_place_selected");
});
</script>
{/literal}
 
<table>
{counter name='select_counter' start=0 skip=1 print=false assign='select_counter_var'}
{section name=i loop=$product_extra}
    {if $product_extra[i].option_type != 0 }
    {section name=k loop=$product_extra[i].option_show_times}
    <tr>                   
        <td>
            {$product_extra[i].name|escape:'html'}{if $product_extra[i].option_show_times > 1 }({counter name=option_show_times}):{else}:{/if}
        </td>
        <td>
        <div class="wrap">
            {counter name=select_counter assign=_cnt}
            {section name=j loop=$product_extra[i].values_to_select}
                <div class="option_place">                    <input type="radio" name="option_{$_cnt}" id="option_{$product_extra[i].values_to_select[j].variantID}" class="product_option option_size" value="option_{$product_extra[i].values_to_select[j].variantID}"{if $product_extra[i].values_to_select[j].variantID == $product_extra[i].variantID} checked="checked"{/if} /><label for="option_{$product_extra[i].values_to_select[j].variantID}">{$product_extra[i].values_to_select[j].option_value}</label>
                </div>
            {/section}
        </div>
        </td>
    </tr>
    {/section}
    {/if}
{/section}
</table>
 
{else}
    <table>
    <tr>                   
    <td>Color:            </td>
    <td>
   
    <select name='option_select_1_71' onchange='GetCurrentCurrency_71()'>
    <option value='0.00:8'>
    white
    </option>
    <option value='0.00:5'>
   
    yellow
    </option>
    <option value='0.00:6'>
    green
    </option>
    </select>
    </td>
    </tr>
    </table>
{/if}

ну и css

.wrap {
    padding:20px;
}
.option_place {
    display:inline;
    margin-right:3px;
}
.wrap input {
    display:none;
}
.wrap label {
    color:#333;
    font:12px Arial, Verdana, Tahoma, Helvetica;
    background:linear-gradient(#fefefe, #cccccc);
    border:1px solid #cbcbcb;
    padding:3px 10px;
    cursor:pointer;
    border-radius:3px;
}
.option_place_selected label {
    background:#ccc !important;
}