Вывод фото варианта товара [Нужна помощь]
Есть скрипт:
$('#pic-changer').change(function(){ //if the select value gets changed
var imageSource = $(this).find(':selected').data('picture'); //get the data from data-picture attribute
if(imageSource){ //if it has data
$('#image-location').html('<img src="/files/downloads/'+imageSource+'">'); // insert image in div image-location
} else {
$('#image-location').html(''); //remove content from div image-location, thus removing the image
}
})
И вывод в шаблоне
<select name="variant" id="pic-changer" class="fn_variant variant_select {if $product->variants|count == 1}hidden{/if}">
{foreach $product->variants as $v}
<option value="{$v->id}" data-picture="{$v->attachment}" data-price="{$v->price|convert}" data-stock="{$v->stock}"{if $v->compare_price > 0} data-cprice="{$v->compare_price|convert}"{/if}{if $v->sku} data-sku="{$v->sku|escape}"{/if}>{if $v->name}{$v->name|escape}{else}{$product->name|escape}{/if}</option>
{/foreach}
</select>
<div id="image-location"></div>
Вот когда выводятся много товаров то на странице продукта скрипт обрабатывает только первый товар и выводит фото к нему, на других товарах только выводятся значения option но не фото, можно ли как-то заставить работать скрипт по допустим:
<div id="image-location" value="{$v->id}" >
Или любое другое значение, в {$v->id} идет генерация от движка ВариантАйди. В js полный нуб и не знаю :cray: А интересует заставить скрипт работать на всех товарах... |
Вероятно элементы имеют один и тот же id. Не php код надо показывать, а результирующий html, из которого бы можно было понять в чем проблема.
|
Цитата:
Сам html на выходе имеет:
<form class="fn_variants preview_form" action="/cart">
<button class="button buy fn_is_preorder hidden" type="submit" data-language="pre_order">Предзаказ</button>
<button class="button buy fn_is_stock" type="submit"><span data-language="add_to_cart">В корзину</span></button>
<select name="variant" id="pic-changer" class="fn_variant variant_select ">
<option value="21" data-picture="0-02-04-25a8cf755ac0a7b49c90ea9220a17416e17e64ebb8f2d5c9b8501b1472739332_full.jpg" data-price="2 899" data-stock="555" data-sku="wer">qwdqwdd</option>
<option value="117" data-picture="0-02-04-0171597cbb26cc1ded86ab5a78699bbd925c458ed448d4f4025dfc3ab4912d2f_full.jpg" data-price="2 899" data-stock="444" data-sku="ffff">цвет 2</option>
<option value="118" data-picture="0-02-04-95763fcaba4a54041db7de7e6872478b5ec5d6d9d509788f70d8debddad53eee_full.jpg" data-price="2 899" data-stock="33" data-sku="вввыы">вввыыыы</option>
</select>
<div id="image-location" data-id="118"></div>
</form>
второй товар...
<form class="fn_variants preview_form" action="/cart">
<button class="button buy fn_is_preorder hidden" type="submit" data-language="pre_order">Предзаказ</button>
<button class="button buy fn_is_stock" type="submit"><span data-language="add_to_cart">В корзину</span></button>
<select name="variant" id="pic-changer" class="fn_variant variant_select ">
<option value="20" data-picture="55-belyj.75x75.jpg" data-price="2 899" data-stock="8" data-sku="123">цвет 32</option>
<option value="119" data-picture="166-lilovyj.75x75.jpg" data-price="2 899" data-stock="44" data-sku="321">цвет 443</option>
<option value="120" data-picture="610-izumrud.75x75.jpg" data-price="2 899" data-stock="44" data-sku="431">цввет 34</option>
</select>
<div id="image-location" data-id="120"></div>
</form>
|
wisma,
id должны быть уникальными
<form class="fn_variants preview_form" action="/cart">
<button class="button buy fn_is_preorder hidden" type="submit" data-language="pre_order">Предзаказ</button>
<button class="button buy fn_is_stock" type="submit"><span data-language="add_to_cart">В корзину</span></button>
<select name="variant" class="fn_variant variant_select ">
<option value="21" data-picture="http://s1.iconbird.com/ico/2013/8/428/w128h1281377930292cattied2.png" data-price="2 899" data-stock="555" data-sku="wer">qwdqwdd</option>
<option value="117" data-picture="http://s1.iconbird.com/ico/2013/8/428/w128h1281377930213catbox2.png" data-price="2 899" data-stock="444" data-sku="ffff">цвет 2</option>
<option value="118" data-picture="http://s1.iconbird.com/ico/2013/9/430/w128h1281378622418catlaptop.png" data-price="2 899" data-stock="33" data-sku="вввыы">вввыыыы</option>
</select>
<div class="image-location" data-id="118"></div>
</form>
<form class="fn_variants preview_form" action="/cart">
<button class="button buy fn_is_preorder hidden" type="submit" data-language="pre_order">Предзаказ</button>
<button class="button buy fn_is_stock" type="submit"><span data-language="add_to_cart">В корзину</span></button>
<select name="variant" class="fn_variant variant_select ">
<option value="20" data-picture="http://s1.iconbird.com/ico/2013/8/428/w128h1281377930224catdrunk2.png" data-price="2 899" data-stock="8" data-sku="123">цвет 32</option>
<option value="119" data-picture="http://s1.iconbird.com/ico/2013/8/428/w128h1281377930234catfight2.png" data-price="2 899" data-stock="44" data-sku="321">цвет 443</option>
<option value="120" data-picture="http://s1.iconbird.com/ico/2013/9/430/w128h1281378622451catrascal.png" data-price="2 899" data-stock="44" data-sku="431">цввет 34</option>
</select>
<div class="image-location" data-id="120"></div>
</form>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(".fn_variant.variant_select").change(function() { //if the select value gets changed
var imageSource = $(this).find(':selected').data('picture'); //get the data from data-picture attribute
if (imageSource) { //if it has data
$(this).next().html('<img src=' + imageSource + '>'); // insert image in div image-location
} else {
$(this).next().html(''); //remove content from div image-location, thus removing the image
}
})
</script>
|
Можно же просто по имени тега - select, если есть другие, использовать имя списка.
$('select[name=variant]').change(function(){ //if the select value gets changed
var o = $(this), im = o.find(':selected').data('picture'); //get the data from data-picture attribute
o.next().html(im ? '<img src="/files/downloads/'+im+'">' : ''); // insert image in div image-location
})
С какой целю вообще даются спискам идентификаторы? |
Цитата:
а спискам даются по функционалу движка замена артикула. цены и прочее при выборе определенного варианта, нашел даже где...
/* Смена варианта в превью товара и в карточке */
$(document).on('change', '.fn_variant', function() {
var selected = $( this ).children( ':selected' ),
parent = selected.closest( '.fn_product' ),
price = parent.find( '.fn_price' ),
cprice = parent.find( '.fn_old_price' ),
sku = parent.find( '.fn_sku' ),
stock = parseInt( selected.data( 'stock' ) ),
amount = parent.find( 'input[name="amount"]' ),
camoun = parseInt( amount.val()),
units = selected.data('units');
price.html( selected.data( 'price' ) );
amount.data('max', stock);
/* Количество товаров */
if ( stock < camoun ) {
amount.val( stock );
} else if ( okay.amount > camoun ) {
amount.val( okay.amount );
}
else if(isNaN(camoun)){
amount.val( okay.amount );
}
/* Цены */
if( selected.data( 'cprice' ) ) {
cprice.html( selected.data( 'cprice' ) );
cprice.parent().removeClass( 'hidden' );
} else {
cprice.parent().addClass( 'hidden' );
}
/* Артикул */
if( typeof(selected.data( 'sku' )) != 'undefined' ) {
sku.text( selected.data( 'sku' ) );
sku.parent().removeClass( 'hidden' );
} else {
sku.text( '' );
sku.parent().addClass( 'hidden' );
}
/* Наличие на складе */
if (stock == 0) {
parent.find('.fn_not_stock').removeClass('hidden');
parent.find('.fn_in_stock').addClass('hidden');
} else {
parent.find('.fn_in_stock').removeClass('hidden');
parent.find('.fn_not_stock').addClass('hidden');
}
/* Предзаказ */
if (stock == 0 && okay.is_preorder) {
parent.find('.fn_is_preorder').removeClass('hidden');
parent.find('.fn_is_stock, .fn_not_preorder').addClass('hidden');
} else if (stock == 0 && !okay.is_preorder) {
parent.find('.fn_not_preorder').removeClass('hidden');
parent.find('.fn_is_stock, .fn_is_preorder').addClass('hidden');
} else {
parent.find('.fn_is_stock').removeClass('hidden');
parent.find('.fn_is_preorder, .fn_not_preorder').addClass('hidden');
}
if( typeof(units) != 'undefined' ) {
parent.find('.fn_units').text(', ' + units);
} else {
parent.find('.fn_units').text('');
}
});
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 12:57. |