Jump to content

Варианты товара выпадающим списком и при этом меняется цена


Recommended Posts

Господа хорошие) поделитесь строками вариантов товара выпадающим списком что бы при смене варианта и цена менялась. Спасибо заранее!

Link to post
Share on other sites
  • Replies 66
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

JS скрипт:

// Выбор варианта
$('select[name=variant]').live('change', function(){
	price = $(this).find('option:selected').attr('data-price');
	compare_price = '';
	if(typeof $(this).find('option:selected').attr('data-compare-price') == 'string')
		compare_price = $(this).find('option:selected').attr('data-compare-price');
	$(this).closest('form.variants').find('.prc-new').html(price);
	$(this).closest('form.variants').find('.prc-old').html(compare_price);
	return false;
}); 

 

Сама разметка html:

<!-- Выбор варианта товара -->
<form class="variants" action="/cart">
	<div class="price">
		<div class="prc-old">
			{$product->variant->compare_price|convert} {$currency->sign|escape}
		</div>
		<div class="prc-new">
			{$product->variant->price|convert} {$currency->sign|escape}
		</div>
	</div>
	<div class="cart">
		{if $product->variants|count > 0}
			{if $product->variants|count>1}
			<select name="variant">
				{foreach $product->variants as $v}
				<option value="{$v->id}" data-price="{$v->price|convert} {$currency->sign|escape}" data-compare-price="{$v->compare_price|convert} {$currency->sign|escape}">{$v->name}</option>
				{/foreach}
			</select>
			{else}
			<input name="variant" value="{$product->variant->id}" type="radio" checked style="display:none!important;"/>
			{/if}
			<input class="button" type="submit" value="В корзину"/>
		{else}
			Нет в наличии
		{/if}
	</div>
</form>
<!-- end -->
Link to post
Share on other sites

Господа хорошие) поделитесь строками вариантов товара выпадающим списком что бы при смене варианта и цена менялась. Спасибо заранее!

еще бы менялось фото, описание, характеристики и отзывы... 

Link to post
Share on other sites

еще бы менялось фото, описание, характеристики и отзывы... 

А это все разное для вариантов???

Нафига такие посты писать? Зачем вообще нужны товары, у которых все разное? Какой в этом смысл? 

Обьясните, я просто не понимаю, ЗАЧЕМ ЭТО????

Link to post
Share on other sites

для этого есть if (если) посмотрите в гугле php if

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

Link to post
Share on other sites

Вы хоть сами понимаете что пишите?

Ну например возьмем процессор для PC, он поставляется в заводской упаковке без излишеств (ОЕМ) а есть и в красочной упаковке с разными фишками инструкциями, до ПО, возможно даже с кулером и т.д. (BOX).

Вот тут товар один, название одно, возможно и характеристики одни, а фото и комплектность разная, соответственно и цена разная, поэтому для кого-то это неприемлемо а для кого-то нужно, все зависит от сферы деятельности ИМ.

Link to post
Share on other sites
		<!-- Выбор варианта товара -->
		<form class="variants" action="/cart">
		<!-- ПОМЕНЯНО -->		
			<select name="variant" {if $product->variants|count==1  && !$product->variant->name}style='display:none;'{/if}>
				{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>
			<div class="price">
				<strike>
				{if $product->variant->compare_price > 0}
					{$product->variant->compare_price|convert}
				{/if}
				</strike>
				<span>{$product->variant->price|convert}</span>
				<i>{$currency->sign|escape}</i>
			</div>
		<!-- ПОМЕНЯНО (The End)-->		
			<input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>
		</form>
		<!-- Выбор варианта товара (The End) -->

 

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

Прочитайте первый пост. Моего решения вполне хватает чтобы решить задачу топикстартера.

Согласен, его задача решена.

Приведу другой пример, компьютерная мышка белая и красная, характеристики одни, цена одна, а клиенту на цвет хочется глянуть, сравнить.

Есть два варианта: в галерею фото добавить мышь и белого и красного цвета или делать 2 разных товара, т.е. создаешь копию красной мышки и меняешь там фото мышки на белый цвет. (в названии отмечаешь)

Вот тут бы и пригодилось бы смена фото при смене варианта, я имел ввиду это.

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

подскажите решение пожалуйста.

Используйте решение то которое я дал, а для того чтобы не выводилась цена с нулем сделайте проверку в html:
<div class="prc-old">
{if $product->variant->compare_price}
{$product->variant->compare_price|convert} {$currency->sign|escape}
{/if}
</div>
и вот это data-compare-price="{$v->compare_price|convert} {$currency->sign|escape}" измените на:
data-compare-price="{if $product->variant->compare_price}{$v->compare_price|convert} {$currency->sign|escape}{/if}"
Link to post
Share on other sites

 

Используйте решение то которое я дал, а для того чтобы не выводилась цена с нулем сделайте проверку в html:

<div class="prc-old">
{if $product->variant->compare_price}
{$product->variant->compare_price|convert} {$currency->sign|escape}
{/if}
</div>
и вот это data-compare-price="{$v->compare_price|convert} {$currency->sign|escape}" измените на:
data-compare-price="{if $product->variant->compare_price}{$v->compare_price|convert} {$currency->sign|escape}{/if}"

Спасибо :)  Спасибки :D Спасибульки Теперь все как надо работает.благодаря Noxter

Link to post
Share on other sites

Нашли кого слушать. Там полностью код для html не правильный.

Можно узнать что именно не правильно? У меня на сайте работает без проблем. Цена меняется, старая не отображается как и хотелось. Версия симплы 2.3.6

Link to post
Share on other sites

Вопрос тогда такой: Анимация при добавлении в корзину не работает!

Вопрос решен: скрипт по изменению цены надо было подключить после подключения скрипта аяксовой корзины

Link to post
Share on other sites

Еще один важный момент: если имеется в одном из вариантов старая цена, то при выборе селектом другого варианта у которого нет старой цены, то выводится 0,00 руб

 

Попробовал решить проблему в самом скрипте добавив проверку значения compare_price

if(s = Math.round(compare_price.replace(/[^\d]/gi, '')) != '0' )
  $(this).closest('form.variants').find('.price-old').html(compare_price);
else 
  $(this).closest('form.variants').find('.price-old').html('');

Если что-то не так прошу поправить!

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...