Список доставки в виде radio-списка

Согласно дизайну выбор доставки через стилизованный radio-список. Подскажите где можно поменять вид списка вместо select'а на input[type=radio]?
Я нашел в коде сам select и placeholder в котором опишины рендеряться

 <select name="shk_delivery" class="form-control">
       [[!+shkopt_delivery]]
 </select>

А если так сделать ???

<input type="radio" name="hk_delivery" value="[[!+shkopt_delivery]]">

Если я вам не ответил, значит я не знаю ответ на вопрос так же как и вы

@Роман сказал Список доставки в виде radio-списка:

[[!+shkopt_delivery]]
получится фигня

Тоже интересует этот вопрос. Голову уже сломал, ума не приложу, как реализовать выбор через radio.

Пробовал через JS:

$('input[name="shk_delivery"]').bind('change',function(){
        SHK.selectDelivery( $('input[name="shk_delivery"]:checked').val() );
    });

Не работает.

@rebroff сказал Список доставки в виде radio-списка:

Не работает.

А если заменить

.bind('change'

на

.bind('click'

@Andchir так же. Дело не в инпуте. Значение выбранного берется, но не записывается, как стоимость доставки в SHK.selectDelivery()

Все получилось через &tpl сниппета shkOptions. Не понимаю, почему раньше не получалось)
Но теперь появилась вот такая проблема. Есть вид доставки А и вид доставки Б. В настройках Shopkeeper указано для А стоимость доставки = 0, а для Б = 300. Но в выводе на странице заказа почему-то все наоборот: при выборе доставки А к стоимости заказа добавляется 300, а при выборе Б - ничего.

Все решилось. (жаль, что сообщение редактируется только в течение минуты)

@rebroff Как все решилось? Столкнулся с той же проблемой. значение выбранного инпута не записывается. Покажите код tpl сниппета shkOptions

Все получилось. Если кому интересно как реализовать выбор способа доставки и выбор способа оплаты используя radio button через сниппет "shkOptions", пишите - помогу.

У меня была такая же ситуация. Долго пытался решить задачу "правильно", но в итоге запилил костыль (скрытые поля из которого "магазин" подтянет значение доставки и оплаты, а в них в свою очередь "пишется" значение выбранного радиобатона).

З.Ы. Всегда "тащаился" от постов в стиле "ура у меня получилось" ... КАК ПОЛУЧИЛОСЬ ? Неужели так тяжело вместо этого написать хотя бы пару слов про то как получилось ? "накрайняк" код чанка скинуть просто.

@alexanderr Подскажите, как решилась проблема???

Случайно зашел на этот форум и увидел что многих интересует как реализовать Список доставки в виде radio-списка.
Я этот способ реализовал очень давно и уже не помню деталей. Показываю код для реализации этой фишки. Не спрашивайте как и зачем. Просто изучите код сравните со своим и внедряйте.
У меня задача была такая: сделать список доставки и список способов оплаты в виде блоков (с заголовками и иконками). Именно выбор через radio позволили реализовать идею. Вот что получилось http://timotrader.ru/oformlenie-zakaza

Вызов shkOptions

[!shkOptions?
&get=`delivery,payments`
&post_name=`shk_delivery,payment`
&toPlaceholders=`1`
&pl_prefix=`shkopt_`
&tpl=`select_option_2`
]]

// tpl select_option_2

<label class="op_[[+name]]">
<input name="[[+name:is=`delivery`:then=`shk_delivery`:else=`payment`]]" type="radio" value="[[+value]]" [[+checked]] ><span>[[+label]]
<div>
	[[+value:is=`Доставка курьером (по Москве)`:then=`<i class="fa fa-truck" aria-hidden="true"></i>`]]
        [[+value:is=`Доставка курьером до ПВЗ (по России)`:then=`<i class="fa fa-truck" aria-hidden="true"></i>`]]
	[[+value:is=`Самовывоз (Москва)`:then=`<i class="fa fa-archive" aria-hidden="true"></i>`]]
	[[+value:is=`Наличными при получении`:then=`<i class="fa fa-rub" aria-hidden="true"></i>`]]
	[[+value:is=`Банковской картой`:then=`<i class="fa fa-credit-card" aria-hidden="true"></i>`]]
	[[+value:is=`Банковской картой при получении`:then=`<i class="fa fa-tablet" aria-hidden="true"></i>`]]
	</div></span>
</label>

// html разметка

<div class="opt_delivery">
	<span>Выберите способ доставки</span>
		[[!+shkopt_delivery]]
</div>
<div class="opt_payment">
	<span>Выберите способ оплаты</span>
		[[!+shkopt_payments]]
</div>

// модифицированный код снипета shkOptions

<?php
/**
 * shkOptions
 * Сниппет выводит данные из конфигурации Shopkeeper
 *
 */

$output = array();

$get = $modx->getOption( 'get', $scriptProperties, '' );
$post_name = explode( ',', $modx->getOption( 'post_name', $scriptProperties, $get ) );
$get = explode( ',', $get );
$get = array_map( 'trim', $get );
$post_name = array_map( 'trim', $post_name );
$tpl = $modx->getOption( 'tpl', $scriptProperties, '' );
$toPlaceholders = $modx->getOption( 'toPlaceholders', $scriptProperties, false );
$pl_prefix = $modx->getOption( 'pl_prefix', $scriptProperties, 'shkopt_' );

if( empty( $get ) ) return '';

if( class_exists('Shopkeeper') ){
    
    $config = Shopkeeper::getConfig( $get );
    
    //echo '<pre>' . print_r( $config, true ) . '</pre>';
    
    if( !empty( $config ) ){
        
        foreach( $get as $index => $opt_name ){
            
            if( !empty( $config[ $opt_name ] ) ){
                
                $output[ $opt_name ] = '';
                
                foreach( $config[ $opt_name ] as $key => $conf ){
                    
                    if( empty( $conf['value'] ) ){
                        $conf['value'] = $conf['label'];
                    }
                    if( empty( $conf['name'] ) ){
                        $conf['name'] = $opt_name;
                    }
                    $conf['checked'] = ( isset( $post_name[$index] ) && isset( $_POST[ $post_name[$index] ] ) && $_POST[ $post_name[$index] ] == $conf['value'] ? 'checked="checked"' : '' );
                    
                    $output[ $opt_name ] .= $modx->getChunk( $tpl, $conf ) . PHP_EOL . "\t";
                    
                }
                
            }
            
        }
        
    }
    
}

if( $toPlaceholders ){
    
    foreach( $output as $pl_name => $out ){
        $modx->setPlaceholder( $pl_prefix . $pl_name, $out );
    }
    
    $output = array();
    
}

return implode( '', $output );

Похоже, подключение к Форум | MODX Shopkeeper было разорвано, подождите, пока мы пытаемся восстановить соединение.