Skip to content

Instantly share code, notes, and snippets.

@Markkop
Last active April 11, 2023 17:02

Revisions

  1. Markkop revised this gist Apr 11, 2023. 1 changed file with 0 additions and 5 deletions.
    5 changes: 0 additions & 5 deletions fipe.js
    Original file line number Diff line number Diff line change
    @@ -57,14 +57,9 @@ const addButton = () => {
    button.className = 'Button';
    button.innerText = 'Mostrar FIPE';
    button.addEventListener('click', runLoopCode);

    // Add CSS styles to position the button on top of the document
    button.style.zIndex = '1000';
    button.style.width = '100px';
    button.style.margin = 'auto';


    // append into the first chield of the header
    document.querySelector('header div').appendChild(button);

    };
  2. Markkop created this gist Apr 11, 2023.
    73 changes: 73 additions & 0 deletions fipe.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    // ==UserScript==
    // @name Show FIPE Price on WebMotors Car Card
    // @namespace Violentmonkey Scripts
    // @match https://www.webmotors.com.br/*
    // @grant none
    // @version 1.0
    // @author Marcelo "Mark" Kopmann
    // ==/UserScript==

    (async () => {
    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

    const processVehicleCard = async (vehicleCard) => {
    async function getTabelaFipe(carId) {
    const response = await fetch(`https://www.webmotors.com.br/api/detail/averageprice/car/${carId}`);
    const json = await response.json();
    const fipePrice = json.FipePrice
    return fipePrice
    }

    const addFipePrice = (fipePrice) => {
    const priceElement = vehicleCard.querySelector('#valorVerParcelas');
    const fipePriceElement = document.createElement('p');
    const formattedFipePrice = fipePrice.toLocaleString('pt-BR', {
    style: 'currency',
    currency: 'BRL',
    });
    fipePriceElement.innerText = `FIPE: R$ ${formattedFipePrice}`;
    fipePriceElement.style.marginBottom = '1rem';
    fipePriceElement.style.marginLeft = 'auto';
    fipePriceElement.style.marginRight = 'auto';
    fipePriceElement.style.paddingLeft = '13px';
    priceElement.parentElement.insertBefore(fipePriceElement, priceElement);
    };

    try {
    await delay(1000);
    const link = vehicleCard.querySelector('a').href;
    const carId = link.split('/').pop().split('?')[0];
    const tabelaFipe = await getTabelaFipe(carId);
    console.log({ tabelaFipe });
    addFipePrice(tabelaFipe);
    } catch (error) {
    console.error('Error:', error);
    }
    };
    const runLoopCode = async () => {
    const vehicleCards = document.querySelectorAll('[data-qa^="vehicle_card_"]')

    for (const vehicleCard of vehicleCards) {
    await processVehicleCard(vehicleCard);
    }
    };

    const addButton = () => {
    const button = document.createElement('button');
    button.className = 'Button';
    button.innerText = 'Mostrar FIPE';
    button.addEventListener('click', runLoopCode);

    // Add CSS styles to position the button on top of the document
    button.style.zIndex = '1000';
    button.style.width = '100px';
    button.style.margin = 'auto';


    // append into the first chield of the header
    document.querySelector('header div').appendChild(button);

    };
    await delay(2000)
    addButton();
    })();