Перейти к содержанию
Официальный форум поддержки Simpla

Замена radiobuttons на select в товарах


Рекомендуемые сообщения

Исправлено и дополнено благодаря комментариям

 

Заморочился исправить радиобаттоны на селект. Речь идет о Simpla 2.2. и выше

 

Конечно с точки зрения интерфейсов селект это отстой. Но в случае ограниченности места и вариантов больше двух-трех радиобаттоны превращаются в кошмар. 

 

За основу взял пример отсюда: http://vitam.16mb.com/page/zamena-radiobutton-na-select

 

Но меня не устроило то, что варианты товаров могут быть и выключены из видимости или наличия, а выпадающий список все равно будет показываться. Выпадающий список с одним вариантом вообще не нужен. И когда в категории в каждом товаре есть выпадающий список с одним вариантом, то в какой-то момент клиент перестанет туда заглядывать.

 

Итак код: 

 

/ваш-шаблон/design/html/products.tpl 

находим строки: 

                <table>
			{foreach $product->variants as $v}
			<tr class="variant">
				<td>
					<input id="variants_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/>
				</td>
				<td>
					{if $v->name}<label class="variant_name" for="variants_{$v->id}">{$v->name}</label>{/if}
				</td>
				<td>
					{if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if}
					<span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span>
				</td>
			</tr>
			{/foreach}
			</table>

 

 

Заменяем на:

 

{* Это если вариант 1*}
{if $product->variants|count==1  && !$product->variant->name}
	{foreach $product->variants as $v}<input id="product_{$v->id}" name="variant" value="{$v->id}" 
        type="radio" {if $product->variant->id==$v->id}checked{/if} style="display:none;"/>{/foreach}
{/if}
{if $product->variants|count==1}
	{foreach $product->variants as $v}{$v->name}<input id="product_{$v->id}" name="variant" 
        value="{$v->id}" type="radio" {if $product->variant->id==$v->id}checked{/if} 
        style="display:none;"/>{/foreach}
{else}
{* А это если вариантов несколько *}
	<select name="variant" >
		{foreach $product->variants as $v}
		<option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert}"{/if} price="{$v->price|convert}">
		{$v->name}
		</option>
		{/foreach}
	</select>

{/if}	

	<div class="price">
		<strike>
		{if $product->variant->compare_price > 0}
		{$product->variant->compare_price|convert}
		{/if}
		</strike>
		<span>{$product->variant->price|convert}</span>
		{$currency->sign|escape}
	</div>

 

И в конце файла вставляем:

 

{literal}
<script>
$(function() {
	// Выбор вариантов
	$('select[name=variant]').change(function() {
		price = $(this).find('option:selected').attr('price');
		compare_price = '';
		if(typeof $(this).find('option:selected').attr('compare_price') == 'string')
			compare_price = $(this).find('option:selected').attr('compare_price');
		$(this).find('option:selected').attr('compare_price');
		$(this).closest('form').find('span').html(price);
		$(this).closest('form').find('strike').html(compare_price);
		return false;		
	});
	
});
</script>
{/literal} 

 

Эти же пункты нужно сделать так же и для  /ваш-шаблон/design/html/main.tpl (для стартовой страницы магазина)

 

 

Еще нужно поменять в корзине /ваш-шаблон/design/js/ajax_cart.js заменить 11 строку: 

 

data: {variant: variant},

поменять на:

 

data: {variant: ($(this).find('input[name=variant]:checked').val() || $(this).find('select[name=variant]').val())},

 

У меня все заработало. 

 

На странице product.tpl я не стал ничего менять потому что там достаточно места именно для радиобаттонов, как раз там они уместны. потому что клиент сразу видит все варианты товара.

 

 

PS. Я не программист, просто хочу понять сможет ли симпла выполнять мои задачи, поэтому если знаете как улучшить или исправить. то что я написал, буду только рад!

 

PS2. И всем спасибо, чьи комментарии на этом форуме я использовал, вот решил сделать компиляцию результата в благодарность.

Изменено пользователем dpdp
Ссылка на сообщение
Поделиться на другие сайты

А как у тебя будет работать 

 

{* Это если вариант один *}
    {foreach $product->variants as $v}
        {$v->name}
    {/foreach}
 

 

если нету input с name=variant что ты будешь передавать в корзину?

 

У меня все заработало.  - Очень странно)))

Ссылка на сообщение
Поделиться на другие сайты

Да, ты полностью прав. Не программист я. Помоги исправить! :)

 

 

У меня вот только на такой вариант сейчас хватило мыслей: (но реально добавляются в корзину любые позиции)

 


{* Это если вариант один и без имени*}
{if $product->variants|count==1  && !$product->variant->name}
	<select name="variant" style='display:none;'>
		{foreach $product->variants as $v}
		<option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert}"{/if} price="{$v->price|convert}">
		{$v->name}
		</option>
		{/foreach}
	</select>
{/if}
{* Это если вариант один и с именем*}
{if $product->variants|count==1}

	<select name="variant" style='display:none;'>
		{foreach $product->variants as $v}
		<option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert}"{/if} price="{$v->price|convert}">
		{$v->name}
		</option>
		{/foreach}
	</select>

        {foreach $product->variants as $v}
		{$v->name}
	{/foreach}


{else}
{* А это если вариантов несколько *}
	<select name="variant" >
		{foreach $product->variants as $v}
		<option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert}"{/if} price="{$v->price|convert}">
		{$v->name}
		</option>
		{/foreach}
	</select>

{/if}	

 

 

Но это как-то не красиво. Кто-то знает как улучшить? Я потом добавлю в первое сообщение. 

Изменено пользователем dpdp
Ссылка на сообщение
Поделиться на другие сайты

 

Спасибо, исправил первое сообщение на правильный вариант! 

Ссылка на сообщение
Поделиться на другие сайты
{* Вариант один*}
{if $product->variants|count==1}
    {foreach $product->variants as $v}{$v->name}<input id="product_{$v->id}" name="variant" value="{$v->id}" type="radio" {if $product->variant->id==$v->id}checked{/if} style="display:none;"/>{/foreach}    </select>    {foreach $product->variants as $v}<input id="product_{$v->id}" name="variant" value="{$v->id}" type="radio" {if $product->variant->id==$v->id}checked{/if} style="display:none;"/>{/foreach}    </select>
{else}
 

- убрать надо. И зачем 

 

{foreach $product->variants as $v}<input id="product_{$v->id}" name="variant" value="{$v->id}" type="radio" {if $product->variant->id==$v->id}checked{/if} style="display:none;"/>{/foreach}    </select>
 

дублируешь?

Ссылка на сообщение
Поделиться на другие сайты
  • 3 недели спустя...

Почему с точки зрения интерфейсов селект - отстой? Выпадающий список экономнее радиокнопок, а стилизуется селект очень легко, достаточно наложить на него сверху другой элемент (обычно юзают span) и придать ему желаемый вид, есть до кучи готовых решений, да возьмите первые 10 ссылок по запросу style select, например, http://byrichardpowell.github.io/Style-Select/, и найдете там решение для вас

Ссылка на сообщение
Поделиться на другие сайты

Почему с точки зрения интерфейсов селект - отстой? 

 

1. Потому что всегда подразумевают два клика.

2. потому что не дают обзор сразу всех вариантов выбора. 

 

Почитайте что-то по дизайну интерфейсов. Интерфейсы создаются не для экономии места, а для удобства использования. 

Ссылка на сообщение
Поделиться на другие сайты
  • 1 месяц спустя...

сделал всё по инструкции, отображается всё правильно, только вот теперь не работает выбор количества товара перед помещением в корзину

 

http://forum.simplacms.ru/topic/1762-kolichestvo-tovara-pered-pomecsheniem-v-korzinu/

 

товар добавляется только в количестве 1 шт. 

 

версия 2.0.2

код файла ajax-cart.js:

// Аяксовая корзина
$('form.cart').live('submit', function(e) {
    e.preventDefault();
    var button = $(this).find('input[type="submit"]');
    $.ajax({
        url: "ajax/cart.php",
        data: {variant: ($(this).find('input[name=variant]:checked').val() || $(this).find('select[name=variant]').val()),
        amount: $(this).find('select[name="amount"]').val()
        },
        dataType: 'json',
        success: function(data){
            $('#cart_informer').html(data);
            if(button.attr('added_text'))
                button.val(button.attr('added_text'));
        }
    });
    var o1 = $(this).offset();
    var o2 = $('#cart_informer').offset();
    var dx = o1.left - o2.left;
    var dy = o1.top - o2.top;
    var distance = Math.sqrt(dx * dx + dy * dy);
    $(this).closest('.product').find('.image img').effect("transfer", { to: $("#cart_informer"), className: "transfer_class" }, distance);
    $('.transfer_class').html($(this).closest('.product').find('.image').html());
    $('.transfer_class').find('img').css('height', '100%');
    return false;});

так же пробовал код, он тоже работает, но количество не добавляет:

// Аяксовая корзина
$('form.cart').live('submit', function(e) {
    e.preventDefault();
    button = $(this).find('input[type="submit"]');
    if($(this).find('input[name=variant]:checked').size()>0)
        variant = $(this).find('input[name=variant]:checked').val();
    if($(this).find('select[name=variant]').size()>0)
        variant = $(this).find('select').val();
        var amount = $('select[name="amount"]').val();
    $.ajax({
        url: "ajax/cart.php",
        data: {variant: variant, amount: amount},
        dataType: 'json',
        success: function(data){
            $('#cart_informer').html(data);
            if(button.attr('added_text'))
                button.val(button.attr('added_text'));
        },
        amount: $(this).find('select[name="amount"]').val(),
    });
    var o1 = $(this).offset();
    var o2 = $('#cart_informer').offset();
    var dx = o1.left - o2.left;
    var dy = o1.top - o2.top;
    var distance = Math.sqrt(dx * dx + dy * dy);
    $(this).closest('.product').find('.image img').effect("transfer", { to: $("#cart_informer"), className: "transfer_class" }, distance);
    $('.transfer_class').html($(this).closest('.product').find('.image').html());
    $('.transfer_class').find('img').css('height', '100%');
    return false;
});

 

Подскажите пожалуйста, где ошибка?

Ссылка на сообщение
Поделиться на другие сайты

Сделайте после получения данных amout в том же Хроме console.log(amout);

Возможно Вы не получаете из формы данные.

Ссылка на сообщение
Поделиться на другие сайты
  • 1 месяц спустя...

Все, кто реализовал данный функционал, проверьте работу с iphone, на apple-девайсах сайт стал загружаться очень долго, заменил обратно на radiobuttons, сново стал работать быстро.

 
Ссылка на сообщение
Поделиться на другие сайты
  • 6 месяцев спустя...

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

 

http://yadi.sk/d/Dd9Tbi1bLZnB6

 

{if $product->variants|count > 0}
		<!-- Выбор варианта товара -->
		<form class="variants" action="/cart">
			{* Это если вариант 1*}
{if $product->variants|count==1  && !$product->variant->name}
	{foreach $product->variants as $v}<input id="product_{$v->id}" name="variant" value="{$v->id}" 
        type="radio" {if $product->variant->id==$v->id}checked{/if} style="display:none;"/>{/foreach}
{/if}
{if $product->variants|count==1}
	{foreach $product->variants as $v}{$v->name}<input id="product_{$v->id}" name="variant" 
        value="{$v->id}" type="radio" {if $product->variant->id==$v->id}checked{/if} 
        style="display:none;"/>{/foreach}
{else}
{* А это если вариантов несколько *}
	<select name="variant" >
		{foreach $product->variants as $v}
		<option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert}"{/if} price="{$v->price|convert}">
		{$v->name}
		</option>
		{/foreach}
	</select>

{/if}	

	<div class="price">
		<strike>
		{if $product->variant->compare_price > 0}
		{$product->variant->compare_price|convert}
		{/if}
		</strike>
		<span>{$product->variant->price|convert}</span>
		{$currency->sign|escape}
	</div>
            <!-- Кнопка купить-->
            <div class="funcs-buttons">
                <!-- Start. Collect information about Variants, for future processing -->
                                                            <div class="frame-count-buy js-variant-219 js-variant">
                                                        <div class="btn-buy">
                                <button class="btnBuy infoBut" type="submit" class="button" value="Купить" data-result-text="Добавлено" >
                                    <span class="text-el">
                                    <input type="submit" class="text-el" value="Купить" data-result-text="Добавлено"/>
                                    </span>
                                </button>
                            </div>
                        </div>
                                                </div>
            <!-- Кнопка купить-->
		</form>
		<!-- Выбор варианта товара (The End) -->
		{else}
			Нет в наличии
		{/if}

	</li>
	<!-- Товар (The End)-->
	{if $smarty.foreach.fproducts.iteration%5 == 0} 
					</ul> </p></div> 
					{if $smarty.foreach.fproducts.iteration != $featured_products|@count} 
					<div> 
					{/if} 
					{/if} 
	{/foreach}
			</div></div>

{/if}

 

Ссылка на сообщение
Поделиться на другие сайты

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

 

Уберите data-result-text="Добавлено"  и будет вам счастье.

Ссылка на сообщение
Поделиться на другие сайты

Уберите data-result-text="Добавлено"  и будет вам счастье.

Тут вы не правы, как раз таки добавлено у меня и должно получиться после нажатия на кнопку, а ошибка выделена красным, вместо купить и добавлена на кнопке пишет цену, что мне не нужно

 

Читайте пожалуйста внимательней

Ссылка на сообщение
Поделиться на другие сайты

{foreach $product->variants as $v}{$v->name}<input id="product_{$v->id}" name="variant"  если в этой строке убираю name="variant",  то с кнопкой все нормально, но цена не меняется

Ссылка на сообщение
Поделиться на другие сайты
  • 1 год спустя...

Не знаю, что там у вас не работает, решение рабочее на 1000%, возможно, вывод цены находится за пределами ФОРМЫ, это можно решить изменением джаваскрипта

Ссылка на сообщение
Поделиться на другие сайты
<script>
$(function() {
	// Выбор вариантов
	$('select[name=variant]').change(function() {
		price = $(this).find('option:selected').attr('price');
		compare_price = '';
		if(typeof $(this).find('option:selected').attr('compare_price') == 'string')
			compare_price = $(this).find('option:selected').attr('compare_price');
		$(this).find('option:selected').attr('compare_price');
		$(this).closest('form').find('span').html(price);
		$(this).closest('form').find('strike').html(compare_price);
		return false;		
	});
	
});
</script>

Вместо этого желательно вынести в отдельный файл и там определять, что куда и зачем...

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...