Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement go to store button #31

Merged
merged 1 commit into from
Dec 9, 2023
Merged

Implement go to store button #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 39 additions & 5 deletions src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand Down
44 changes: 36 additions & 8 deletions src/decorators/PriceCheckerIndicator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { State } from "../types/State";
interface LowestPriceData {
formatted: string;
unformatted: number;
shopId: number;
}

export class PriceCheckerIndicator {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
});

Expand All @@ -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);
Expand All @@ -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");
Expand All @@ -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;
}
}
Loading