fascano/web-menu-react-version
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

extra & variant fixes

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2026-01-14 14:36:32 +03:00
parent 5c7e64b17c
commit e95411460f
6 changed files with 274 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/pages/product/components/Variants.tsx
View File

@@ -26,7 +26,7 @@ export default function Variants({
if (!variantsList || variantsList.length === 0) return [];
const maxOptionsLength = Math.max(
...variantsList.map((v) => v.options.length)
...variantsList.map((v) => v.options.length),
);
const levels: Array<{
level: number;
@@ -45,7 +45,7 @@ export default function Variants({
variantsList
.filter((v) => v.options[i]?.option === optionKey)
.map((v) => v.options[i]?.value)
.filter(Boolean)
.filter(Boolean),
),
];
@@ -112,28 +112,10 @@ export default function Variants({
<>
{!isDesktop && <Divider style={{ margin: "0 0 10px 0" }} />}
<div>
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<ProText style={{ fontSize: "1.25rem" }}>
{t("menu.youMightAlsoLike")}
</ProText>
<div style={{ display: "flex", alignItems: "center" }}>
<ProText strong style={{ fontSize: "0.75rem", color: "red" }}>
<span style={{ color: "red", fontSize: "0.75rem" }}>*</span>
{t("menu.required")}
</ProText>
</div>
</div>
{variantLevels.map((level, index) => {
const filteredVariants = getFilteredVariants(index);
const availableValues = level.availableValues.filter((value) =>
filteredVariants.some((v) => v.options[index]?.value === value)
filteredVariants.some((v) => v.options[index]?.value === value),
);
// Only show this level if there are available values and previous levels are selected
@@ -155,20 +137,40 @@ export default function Variants({
return (
<div key={level.level} style={{ marginBottom: "16px" }}>
<ProText strong style={{ fontSize: "1rem" }}>
{isRTL ? level.optionKeyAR : level.optionKey}
</ProText>
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<ProText strong style={{ fontSize: "1rem" }}>
{isRTL ? level.optionKeyAR : level.optionKey}
</ProText>
<div style={{ display: "flex", alignItems: "center" }}>
<ProText
strong
style={{ fontSize: "0.75rem", color: "red" }}
>
<span style={{ color: "red", fontSize: "0.75rem" }}>
*
</span>
{t("menu.required")}
</ProText>
</div>
</div>
<div className={styles.productContainer}>
<ProRatioGroups
options={availableValues.map((value) => {
const variant = filteredVariants.find(
(v) => v.options[index]?.value === value
(v) => v.options[index]?.value === value,
);
return {
value: value,
label: value,
price: variant ? `+${Number(variant.price).toFixed(2)}` : "",
price: variant
? `+${Number(variant.price).toFixed(2)}`
: "",
};
})}
value={selectedVariants[index] || ""}