DEV Community

Ashish R Bhandari
Ashish R Bhandari

Posted on • Updated on

Get Product Prices via JS

Get the Amazon Product Price (& Highlight The Price)
A Quick One that I Figured Out

let price_of_product = document.querySelector(`span[id*="priceblock_"][class*="a-size"][class*="priceBlock"]`);

price_of_product.style.backgroundColor = "blue";   

console.log(price_of_product.innerText);
Enter fullscreen mode Exit fullscreen mode

OutPut:

Amazon Price Fetch 1 via JS

A Bit More Styling

Below i am using cssText, This helps to Set the Style Attribute with Plain CSS way of Styling
Rather then using backgroundColor (JS way) as Normal CSS attr background-color (CSS way)

let price_of_product = document.querySelector(`span[id*="priceblock_"][class*="a-size"][class*="priceBlock"]`);

price_of_product.style.cssText = "background-color: orange; padding: 5px; border-radius: 10px; font-size: 24px!important;";   

console.log(price_of_product.innerText);
Enter fullscreen mode Exit fullscreen mode

Output:

Amazon Price Fetch 2 via JS

+++ Added For Flipkart

Worst JS Snippet But Still

let price_el = document.querySelector("#container>div>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)");
if (price_el) {
    price_el.style.backgroundColor = "red";
} else {
    let price_el2 = document.querySelector("#container>div>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)");
    price_el2.style.backgroundColor = "red";
}
Enter fullscreen mode Exit fullscreen mode

Copy this and add it in the console of any Flipkart Product Page it will highlight the Product Price...

Later u can use it in Python Script
Mainly the CSS Selector Path

and then can automate the process...

Top comments (0)