DEV Community

Ashish R Bhandari
Ashish R Bhandari

Posted on • Edited on

Get Product Prices via JS

#css #cssselectors

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)