Как присвоить переменной js цену товара

334

15 ноября 2021, 02:40

На странице выведено несколько товаров в каталоге (Woocommerce), мне нужно на этой же странице вывести по клику на "Добавить в корзину" цену именно того товара, по чьей кнопке "Добавить в корзину" кликнуть.

Нашел два варианта кода, но первый вариант

 $('.add_to_cart_button').click(function() { 
 
var price = $('.woocommerce-Price-amount').html(); 
        $("#summ2").text(price + ' руб.' ); 
	})

выдает html-код первого товара на странице, а не того, по чьей кнопке был клик -

<span class="woocommerce-Price-currencySymbol">£</span>77.00 руб.

А второй вариант

$('.add_to_cart_button').click(function() { 
 
   var price = $('.woocommerce-Price-amount').text(); 
   
        $("#summ2").text(price + ' руб.' ); 
		 
	})

выдает все цены товаров с этой страницы:

£77.00£32,333.00£777.00£555.00 руб.

Вопрос: как здесь вывести цену именно того товара, по чьей кнопке "Добавить в корзину" был клик.

Всем огромное спасибо за ответ.

update

teran, извиняюсь за вид кода, просто спешу ответить

<div class="woocommerce columns-4 "><ul class="products columns-4"> 
 
<li class="product type-product post-846 status-publish instock product_cat-osnhands shipping-taxable purchasable product-type-simple"> 
	<a href="http://wp-test.mccol.com.ua/?product=%d0%be%d1%81%d0%bd%d0%b0%d1%81%d1%82%d0%ba%d0%b0-%d1%80%d1%83%d1%87%d0%bd%d0%b0%d1%8f-2" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img width="250" height="250" src="http://wp-test.mccol.com.ua/wp-content/uploads/woocommerce-placeholder-250x250.png" class="woocommerce-placeholder wp-post-image" alt="Заполнитель" srcset="" sizes="(max-width: 250px) 85vw, 250px" /><h2 class="woocommerce-loop-product__title">Оснастка ручная 2 груп</h2> 
	<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>777.00</span></span> 
</a><a href="?add-to-cart=846" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="846" data-product_sku="" aria-label="Добавить &quot;Оснастка ручная 2 груп&quot; в корзину" rel="nofollow">В корзину</a></li> 
<li class="product type-product post-845 status-publish instock product_cat-osnhands shipping-taxable purchasable product-type-simple"> 
	<a href="http://wp-test.mccol.com.ua/?product=%d0%be%d1%81%d0%bd%d0%b0%d1%81%d1%82%d0%ba%d0%b0-%d1%80%d1%83%d1%87%d0%bd%d0%b0%d1%8f-1" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img width="250" height="250" src="http://wp-test.mccol.com.ua/wp-content/uploads/woocommerce-placeholder-250x250.png" class="woocommerce-placeholder wp-post-image" alt="Заполнитель" srcset="" sizes="(max-width: 250px) 85vw, 250px" /><h2 class="woocommerce-loop-product__title">Оснастка ручная 1 груп</h2> 
	<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>555.00</span></span> 
</a><a href="?add-to-cart=845" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="845" data-product_sku="" aria-label="Добавить &quot;Оснастка ручная 1 груп&quot; в корзину" rel="nofollow">В корзину</a></li> 
</ul> 
</div>

Answer 1

Если не менять верстку, то код будет примерно следующий:

$(".add_to_cart_button").click(function(){
    let price = $(this).closest('li').find(".price").text();
    $("#summ2").text( price );
});

вы получите результат вместе с символом фунтов. но можете либо заменить его с помощью replace, либо выдрать из этой строки цену с помощью регулярок.

но оптимальнее было бы изменить верстку и к самой ссылке по которой кликаете добавить атрибут data-price со значением цены, либо к li.

Answer 2

var list = document.querySelector('.list'); 
 
list.addEventListener('click', getPrice); 
 
function getPrice({target}) { 
  if (target.classList.contains('list__item')) { 
    var price = target.dataset.price; 
    target.innerText = price; 
  } 
}

body { 
  margin: 0; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
.list { 
  list-style: none; 
} 
 
.list__item { 
  cursor: pointer; 
  font-size: 3rem; 
  text-align: center; 
}

<ul class="list"> 
  <li class="list__item" data-price="30$">get price</li> 
  <li class="list__item" data-price="10$">get price</li> 
  <li class="list__item" data-price="20$">get price</li> 
</ul>

Answer 3

Так попробуйте:

var myButtons = document.getElementsByClassName("yourButtons");
    for(var x=0; x<myButtons.length; x++) {
         myButtons[x].addEventListener("click", function() { 
            var price = this.innerHTML;
            // далее с ценой делайте что угодно
    })};

Answer 4

огромное спасибо за ответ.

var myButtons = document.getElementsByClassName("add_to_cart_button"); 
    for(var x=0; x<myButtons.length; x++) { 
         myButtons[x].addEventListener("click", function() {  
            var price = this.innerHTML; 
            // далее с ценой делайте что угодно 
$("#summ2").text(price + ' руб.' ); 
    })};

Но результат этого кода -

В корзину руб.

Цена товара не выводится...(

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Реализация кнопки "показать еще"

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

130

javascript