Помогите Пожалуйста

[Chudo]

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

 

Вот код внешней карточки товара
 

<a class="product-image">
	{if $product->image}
		<img src="{$product->image->filename|resize:600:600}" alt="{$product->name|escape}" class="img-responsive">
	{else}
		<img src="design/{$settings->theme}/images/no_image_510x600.jpg" alt="{$product->name|escape}" class="img-responsive">
	{/if}
	
	{if $smarty.get.module != 'MainView'}
		{if $product->featured}
			<span class="bullet"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span></span>
		{elseif $product->variant->compare_price}
			<span class="bullet label-sale">−{(100-$product->variant->price * 100 / $product->variant->compare_price)|ceil}%</span>
		{/if}
	{/if}
</a>

<div class="product-detail">
	<div class="pull-left price-shop text-left" data-product="{$product->id}">
	<p>{$product->name|escape}</p>
	</div>
	{if $product->variants|count > 0}
	<div class="pull-right price-shop text-right">
		<ins><span id="product-price" itemprop="price">{$product->variant->price|convert}</span> {$currency->sign|escape}</ins>
		<del id="product-compare">{if $product->variant->compare_price}{$product->variant->compare_price|convert} {$currency->sign|escape}{/if}</del>
	</div>
		
	<form class="variants" action="/cart" data-name="{$product->name|escape}">
		<div class="row">
			<div class="col-md-7 col-sm-12 sep-top-sm">
				<button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-shopping-cart"></i> В корзину</button>
			</div>
							
			<div class="col-md-5 col-sm-12 sep-top-sm {if $product->variants|count<2} hidden{/if}">
				<select name="variant" class="color-product form-control variant input-sm" style="height: 40px;">
					{foreach $product->variants as $v}
						<option value="{$v->id}" 
							data-price="{$v->price|convert}" 
							{if $v->name}data-name="{$v->name}"{/if}
							{if $v->compare_price} data-compare="{$v->compare_price|convert} {$currency->sign|escape}"{/if}
							{if $product->variant->id==$v->id}selected="selected"{/if}>{$v->name}
						</option>
					{/foreach}
				</select>
			</div>
		</div>
	</form>
	{/if}		
</div>

Вот js-ник который отвечает за выборку
 

$('select[name=variant]').on('change', function() {
	var price = $(this).find('option:selected').data('price');
	var compare = '';
	if( typeof $(this).find('option:selected').data('compare') == 'string' ) {
		var compare = $(this).find('option:selected').data('compare');
	}
	$('#product-price').html(price)
	$('#product-compare').html(compare)
	return false;	
});

В самой карточке товара этот метод работает отлично, а в общем каталоге нет. Если вам не сложно, помогите пожалуйста.

[ps-simpla]

$('#product-price').html(price)
$('#product-compare').html(compare)

 

Проблема кроется в уникальности id куда должны подставляться значения цены, ID - это уникальное название блока, т.е. в HTML разметке он может встречаться один раз. А вот CLASS - можно использовать для всех блоков одинаковые, просто надо в js правильно выставить иерархию (вложенность) 

.closest и .find - вам в помощь + GOOGLE

 

и поправьте верстку  class="product-image"> как бы не правильное применение тега

Изменено 18 марта, 2017 пользователем ps-simpla

[Chudo]

 

$('#product-price').html(price)
$('#product-compare').html(compare)

 

Проблема кроется в уникальности id куда должны подставляться значения цены, ID - это уникальное название блока, т.е. в HTML разметке он может встречаться один раз. А вот CLASS - можно использовать для всех блоков одинаковые, просто надо в js правильно выставить иерархию (вложенность) 

.find и .parent - вам в помощь + GOOGLE

 

и поправьте верстку <a class="product-image"> как бы не правильное применение тега <a>

 

Я пробовал делать тоже самое, но с классами, менялись цены везде. У меня знаний не совсем хватает на большее. Если тебе не сложно, можешь помочь?

 

С вёрсткой, это не проблема, тут ссылка далее будет, пока не дописал)

[ps-simpla]

пиши в скайп ps-avatar

[ps-simpla]

<ins><span class="product-price info-price" itemprop="price">{$product->variant->price|convert}</span> {$currency->sign|escape}</ins>
        <del class="info-compare">{if $product->variant->compare_price}{$product->variant->compare_price|convert} {$currency->sign|escape}{/if}</del>
 

и

 

$(this).closest('.product-detail').find('.info-price').html(price);
$(this).closest('.product-detail').find('.info-compare').html(compare); 

 

[Chudo]

 

<ins><span class="product-price info-price" itemprop="price">{$product->variant->price|convert}</span> {$currency->sign|escape}</ins>
        <del class="info-compare">{if $product->variant->compare_price}{$product->variant->compare_price|convert} {$currency->sign|escape}{/if}</del>
 

и

 

$(this).closest('.product-detail').find('.info-price').html(price);
$(this).closest('.product-detail').find('.info-compare').html(compare); 

 

 

 

Спасибо большое за помощь!