Jump to content

Метка "Скидка" для варианта товара


Recommended Posts

Потребовалось указать у товара что "скидочный" по стандартному функционалу старая цена.

 

{if $product->variant->compare_price > 0} СКИДКА {/if}

На странице товара выводим вот таким способом. Все хорошо, работает пока не вывожу товар с 2 вариантами и первый вариант не имеет старой цены, а второй имеет.

 

Получается что лейбл СКИДКА не выводится совсем

 

Товар 2 - 600 руб  ( )

Товар 2 - 500 руб  (1000р )

 

Если так, 

 

А если первый вариант по скидке, то без проблем выводит. 

 

Сам же выбор варианта на сайте реализован через js 

 

$('input[name=variant]').change(function(){
    price = $(this).attr('data-price');
    compare_price = $(this).attr('data-compare-price');
	text_variant = $(this).attr('data-text');
	
    $(this).closest('form.variants').find('.price').html(price);
    $(this).closest('form.variants').find('.old-price').html(compare_price);
	$('.content').find('.text_variant').html(text_variant);	
    return false;
});

получается при выборе радиокнопки меняется цена из data атрибутов. 

 

Как мне реализовать чтоб появлялась скидка при выборе варианта? можно через js? или придется допиливать симплу?

Link to post
Share on other sites
Posted (edited)

По аналогии с тем, как меняется сейчас, например, text_variant...

 

ну text_variant отдельным data атрибутом, я думаю что скидку можно проверять с помощью data-compare-price ,верно? 

 

Просто пока мысли такие, что если присваивать класс , если старая цена > 0

Edited by megauser
Link to post
Share on other sites
<span class="compare-text {if $product->variant->compare_price > 0}compare-show{/if}">СКИДКА</span>

в css

.compare-text {
display: none;
}
.compare-show {
 display: block !important; 
}

А в js делаете проверку и добавляете или убираете класс compare-show.

Link to post
Share on other sites

 

<span class="compare-text {if $product->variant->compare_price > 0}compare-show{/if}">СКИДКА</span>

в css

.compare-text {
display: none;
}
.compare-show {
 display: block !important; 
}

А в js делаете проверку и добавляете или убираете класс compare-show.

 

Спасибо, сделал проверку вот так,  все вроде работает. 

 

	if($(this).attr('data-compare-price') > '0'){
    $('.relative').find('.sale_label').addClass('sale-show');
	} else
	{$('.relative').find('.sale_label').removeClass('sale-show');}	

правильно?

Link to post
Share on other sites

Вариантов реализации много, я просто подсказал один из них. Проверьте сами себя, сделайте несколько вариантов товара с старой ценой и без.

Link to post
Share on other sites

Вариантов реализации много, я просто подсказал один из них. Проверьте сами себя, сделайте несколько вариантов товара с старой ценой и без.

 

вышла проблема на странице товаров , где их несколько 

 

		<div class="relative">
		<span class="sale_label {if $product->variant->compare_price > 0}sale-show{/if}"><img src="design/{$settings->theme|escape}/images/sale.png"></span>
Товар 1		
</div>	

		<div class="relative">
		<span class="sale_label {if $product->variant->compare_price > 0}sale-show{/if}">СКИДКА</span>
Товар 2		
</div>	

При смене варианта "СКИДКА" появляется и исчезает у обоих товаров, как сделать чтоб скрипт обращался к текущему блоку где я меняю варианты

 

$('input[name=variant]').change(function(){
    price = $(this).attr('data-price');
	compare_price = $(this).attr('data-compare-price');
	text_variant = $(this).attr('data-text');
	
	if($(this).attr('data-compare-price') > '0'){
    $('.relative').find('.sale_label').addClass('sale-show');
	} else
	{$('.relative').find('.sale_label').removeClass('sale-show');}	

    $(this).closest('form.variants').find('.price').html(price);
    $(this).closest('form.variants').find('.old-price').html(compare_price);
	$('.content').find('.text_variant').html(text_variant);	
    return false;
});
Link to post
Share on other sites

Это уже сложнее, нужно при каждой смене варианта забирать id товара, в html у каждого блока с скидкой указывать id товара, и в js добавлять или убирать класс в нужном месте. К примеру:

<span class="compare-{$product->id} compare-text {if $product->variant->compare_price > 0}compare-show{/if}">СКИДКА</span>

А в js

var id = $(this).attr('data-product-id');
$('.compare-'+id).find.....

 

 

Link to post
Share on other sites

 

Это уже сложнее, нужно при каждой смене варианта забирать id товара, в html у каждого блока с скидкой указывать id товара, и в js добавлять или убирать класс в нужном месте. К примеру:

<span class="compare-{$product->id} compare-text {if $product->variant->compare_price > 0}compare-show{/if}">СКИДКА</span>

А в js

var id = $(this).attr('data-product-id');
$('.compare-'+id).find.....

 

а data-product-id откуда он брать будет?

Link to post
Share on other sites

а data-product-id откуда он брать будет?

 

Пропишите в input с вариантом, например

<input name="variant" value="{$v->id}" data-product-id="{$product->id}" type="radio">

Link to post
Share on other sites

а data-product-id откуда он брать будет?

 

Попробуйте так

$('.класс-блока-товаров-в-каталоге, .класс-блока-товара-на-странице-товара').each(function(){
    var $item = $(this),
        $price = $item.find('.price'),
        $priceOld = $item.find('.old-price'),
        $variantName = $item.find('.text_variant'),
        $label = $item.find('.sale_label');

    $price.on('change', 'input[name=variant]', function(){
        var $variant = $item.find('input[name=variant]:checked'),
            price = $variant.data('price'),
            priceOld = $variant.data('compare-price'),
            variantName = $variant.data('text');

        $label.toggleClass('sale-show', priceOld != 0);
        
        $price.html(price);
        
        $priceOld.html(priceOld);
        
        $variantName.html(variantName);
    });
});
Edited by chocolate_moles
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...