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

[megauser]

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

 

{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? или придется допиливать симплу?

[phukortsin]

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

[MStyle28]

Напишите в skype - mstyle28 помогу

[megauser]

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

 

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

 

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

Edited March 10, 2020 by megauser

[MStyle28]

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

[megauser]

 

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

правильно?

[MStyle28]

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

[megauser]

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

 

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

 

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

[MStyle28]

Это уже сложнее, нужно при каждой смене варианта забирать 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.....

 

 

[alexivchenko]

Попробуйте 

{if $v->compare_price > 0} (  {$v->compare_price|convert}  ) {/if}

[megauser]

 

Это уже сложнее, нужно при каждой смене варианта забирать 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 откуда он брать будет?

[MStyle28]

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

 

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

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

[chocolate_moles]

а 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 March 11, 2020 by chocolate_moles