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

Тема в разделе "WebAsyst", создана пользователем droni4, 1 ноя 2012.

Модераторы: mdss
  1. droni4

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    182
    Симпатии:
    7
    Здравствуйте уважаемые!

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

    первое что получилось
    HTML:
        <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: мультипостинг наказуем
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    1) в смысле запоминать?
    2) чтобы передавалось значение в корзину нужно задавать класс product_option

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

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    182
    Симпатии:
    7
    С нетерпением жду)) заранее спасибо) а то моск уже :alko:
     
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    чистый пример:
    http://jsfiddle.net/tGqRW/

    Код для жоп-скрипта
    HTML:
    
    <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>
    
    из минусов. Значение поставленное по-умолчанию сразу выделяться не будет, надо выбирать вручную (
     
  5. droni4

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    182
    Симпатии:
    7
    сделал так
    Код:
            <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>
    не выделяется, и значение не передается взял по стандарту с ссылки сверху, глянь код может снес много
     
  6. droni4

    droni4

    Регистр.:
    21 авг 2007
    Сообщения:
    182
    Симпатии:
    7
    Кинь пожалуйста свой кусок глянуть всего кода а то так по частям собирать а глянешь в общей картине и сразу все станет на свои места, на сколько я понял что бы выделялось надо еще Java прикуручивать
     
  7. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    для чекбокса надо обязательно задавать класс product_option. Его обрабатывает родной скрипт жоп-скрипта.
     
  8. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    627
    Симпатии:
    257
    тоже заинтересовал этот вопрос. взял по твоему примеру, но значение не выбирается и в консоли ругается

    строка 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;
    }
     
  9. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    скопируй кусок шаблона еще, хочу глянуть. Суть то в том, что это решение с рабочего проекта (http://sling-yar.ru/product/flisovaja-vodolazka-pantera-i-love-mum-chernika/) и там значения передаются. В посте выше я лишь стилизовал радиокнопку
     
  10. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    627
    Симпатии:
    257

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

    Код:
    {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;
    }