diff --git a/src/css/style.css b/src/css/style.css index cfe8c3a..0e91200 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,6 +1,6 @@ :root { --custom-light-red: #ff0000; - --flagged-item-box-shadow: 0px 0px 5px 2px var(--custom-light-red, #ff0000) !important; + --flagged-item-box-shadow: 0px 0px 5px 2px var(--custom-light-red) !important; } .display-none { @@ -47,10 +47,9 @@ text-black { .label-text { border-radius: 2px !important; padding: 8px 12px !important; - background-color: #ffdbdf !important; font-weight: bold !important; - color: red !important; + color: var(--custom-light-red) !important; } .price-checker-outline { @@ -59,8 +58,42 @@ text-black { padding: 20px 24px !important; } -.info-label-positive { +.go-to-shop-button-positive:hover { + background-color: var(--color-text-marketplace-strong) !important; + transition: background-color 0.3s ease; +} + +.go-to-shop-button-positive { border: 1px solid var(--color-text-success-default) !important; + border-radius: 32px !important; + padding: 8px 12px !important; + font-weight: 400 !important; + background-color: var(--color-text-success-default) !important; + color: var(--color-text-base-default) !important; +} + +.go-to-shop-button-negative:hover { + background-color: #db791a !important; + transition: background-color 0.3s ease; +} + +.go-to-shop-button-negative { + border: 1px solid var(--color-text-accent-default) !important; + border-radius: 32px !important; + padding: 8px 12px !important; + font-weight: 400 !important; + background-color: var(--color-text-accent-default) !important; + color: var(--color-text-base-default) !important; +} + +.lowest-price-store-highlight { + border: 2px solid var(--color-text-success-default) !important; + box-shadow: 1px 1px 0 var(--color-text-success-default) !important; +} + +.info-label-positive { + /* border: 1px solid var(--color-text-success-default) !important; */ + border: 1px solid var(--color-background-success-weak) !important; line-height: 1.4 !important; font-size: 16px !important; font-weight: 500 !important; @@ -69,7 +102,8 @@ text-black { } .info-label-negative { - border: 1px solid var(--custom-light-red, #ff0000) !important; + /* border: 1px solid var(--color-text-accent-default) !important; */ + border: 1px solid var(--color-background-accent-weak) !important; line-height: 1.4 !important; font-size: 16px !important; font-weight: 500 !important; diff --git a/src/decorators/PriceCheckerIndicator.ts b/src/decorators/PriceCheckerIndicator.ts index 7f354d7..53fcea6 100644 --- a/src/decorators/PriceCheckerIndicator.ts +++ b/src/decorators/PriceCheckerIndicator.ts @@ -4,6 +4,7 @@ import { State } from "../types/State"; interface LowestPriceData { formatted: string; unformatted: number; + shopId: number; } export class PriceCheckerIndicator { @@ -54,8 +55,6 @@ export class PriceCheckerIndicator { return parseFloat(priceValue); } - // - private getSKU(): string | null { const metaTag = document.querySelector("meta[itemprop=\"sku\"]") as HTMLMetaElement | null; return metaTag ? metaTag.content : null; @@ -85,17 +84,20 @@ export class PriceCheckerIndicator { const responseJSON = await response.json(); const productCards = responseJSON.product_cards as { raw_price: number, + shop_id: number, shipping_cost: number, final_price_formatted?: string, price: number, }[]; const currency = responseJSON.price_min.trim().slice(-1); + let shopId = 0; let lowestPrice = Number.MAX_VALUE; Object.values(productCards).forEach(card => { const totalCost = card.raw_price + card.shipping_cost; if (totalCost < lowestPrice) { lowestPrice = totalCost; + shopId = card.shop_id; } }); @@ -106,6 +108,7 @@ export class PriceCheckerIndicator { return { formatted: `${lowestPrice} ${currency}`, unformatted: lowestPrice, + shopId, }; } catch (error) { console.error("There was a problem with the fetch operation:", error); @@ -122,17 +125,17 @@ export class PriceCheckerIndicator { const priceIndication = document.createElement("div"); const colFlex = document.createElement("div"); - const status = this.btsPrice && this.lowestPriceData && this.btsPrice <= this.lowestPriceData.unformatted - ? "info-label-positive" - : "info-label-negative"; + const isLowestPrice = !!this.btsPrice && !!this.lowestPriceData && this.btsPrice <= this.lowestPriceData.unformatted; + const checkerStyle = isLowestPrice ? "info-label-positive" : "info-label-negative"; - priceIndication.classList.add("display-padding", "inline-flex-row", "price-checker-outline", status); + priceIndication.classList.add("display-padding", "inline-flex-row", "price-checker-outline", checkerStyle); colFlex.classList.add("inline-flex-col"); const icon = document.createElement("div"); const information = document.createElement("div"); const disclaimer = document.createElement("div"); - information.classList.add("font-bold"); + + information.classList.add("align-center", "font-bold"); disclaimer.classList.add("align-end", "text-black"); const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); @@ -156,11 +159,36 @@ export class PriceCheckerIndicator { : `${formattedLowestPrice}€ είναι η χαμηλότερη τιμή με μεταφορικά εκτός "Αγορά μέσω Skroutz"`; colFlex.appendChild(information); - // colFlex.appendChild(img); + + const goToStoreButton = this.goToStoreButtonCreator(isLowestPrice); + colFlex.appendChild(goToStoreButton); priceIndication.appendChild(icon); priceIndication.appendChild(colFlex); return priceIndication; } + + private goToStoreButtonCreator(isLowestPrice: boolean): HTMLButtonElement { + const goToStoreButton = document.createElement("button"); + const buttonStyle = isLowestPrice ? "go-to-shop-button-positive" : "go-to-shop-button-negative"; + + goToStoreButton.classList.add(buttonStyle); + goToStoreButton.textContent = this.state.language === Language.ENGLISH + ? "Go to Shop" + : "Μετάβαση στο κατάστημα"; + goToStoreButton.classList.add("custom-button-class"); + + goToStoreButton.addEventListener("click", () => { + const targetId = `shop-${this.lowestPriceData?.shopId}`; + const targetElement = document.getElementById(targetId); + + if (targetElement) { + targetElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" }); + targetElement.classList.add("lowest-price-store-highlight"); + } + }); + + return goToStoreButton; + } }