Jump to content

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


Recommended Posts

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

 

Заморочился исправить радиобаттоны на селект. Речь идет о 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. И всем спасибо, чьи комментарии на этом форуме я использовал, вот решил сделать компиляцию результата в благодарность.

Edited by dpdp
Link to post
Share on other sites

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

 

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

 

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

 

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

Link to post
Share on other sites

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

 

 

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

 


{* Это если вариант один и без имени*}
{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}	

 

 

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

Edited by dpdp
Link to post
Share on other sites

 

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

Link to post
Share on other sites
{* Вариант один*}
{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>
 

дублируешь?

Link to post
Share on other sites
  • 3 weeks later...

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

Link to post
Share on other sites

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

 

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

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

 

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

Link to post
Share on other sites
  • 1 month later...

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

 

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;
});

 

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

Link to post
Share on other sites
  • 1 month later...

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

 
Link to post
Share on other sites
  • 6 months later...

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

 

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}

 

Link to post
Share on other sites

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

 

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

Link to post
Share on other sites

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

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

 

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

Link to post
Share on other sites
  • 1 year later...

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

Link to post
Share on other sites
<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>

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...