Compare commits
4 Commits
389cf1c856
...
f6f1f6286c
| Author | SHA1 | Date |
|---|---|---|
 namds29
|
f6f1f6286c | |
 Nam Doan
|
15011607ae | |
|
Nam Doan
|
005b10484b | |
|
Nam Doan
|
6912f2605c |
|
|
@ -1,4 +1,5 @@
|
|||
[
|
||||
{
|
||||
"layout": [
|
||||
{
|
||||
"Header": {
|
||||
"config": {
|
||||
|
|
@ -13,30 +14,9 @@
|
|||
"className": "h-12 bg-[#009b93] text-[#fff] gap-12",
|
||||
"speed": 24,
|
||||
"items": [
|
||||
{
|
||||
"Link": {
|
||||
"config": {
|
||||
"label": "NEU: Overnight Oats – Sallys Nussecke 😍",
|
||||
"href": "/"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Link": {
|
||||
"config": {
|
||||
"label": "Versandkostenfrei ab 45 € 💛",
|
||||
"href": "/"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Link": {
|
||||
"config": {
|
||||
"label": "Gratis Geschenk ab 60 € Warenkorbwert 🎁",
|
||||
"href": "/"
|
||||
}
|
||||
}
|
||||
}
|
||||
{ "Link": { "config": { "label": "NEU: Overnight Oats – Sallys Nussecke 😍", "href": "/" } } },
|
||||
{ "Link": { "config": { "label": "Versandkostenfrei ab 45 € 💛", "href": "/" } } },
|
||||
{ "Link": { "config": { "label": "Gratis Geschenk ab 60 € Warenkorbwert 🎁", "href": "/" } } }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -46,130 +26,18 @@
|
|||
"config": {
|
||||
"className": "h-24 bg-white text-[#003F31] gap-12",
|
||||
"left": [
|
||||
{
|
||||
"Logo": {
|
||||
"config": {
|
||||
"src": "/3bear-logo.png",
|
||||
"alt": "MyShop",
|
||||
"className": "h-[150px] w-[180px]",
|
||||
"objectFit": "contain"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtMegaMenu": {
|
||||
"config": {
|
||||
"navLabel": {
|
||||
"text": "Shop",
|
||||
"className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]",
|
||||
"isShowArrow": true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Dropdown": {
|
||||
"config": {
|
||||
"trigger": {
|
||||
"text": "Über Uns",
|
||||
"className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]",
|
||||
"isShowArrow": true
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"text": "Unser Unternehmen",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "Loren ipsum",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "Not a Link"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Dropdown": {
|
||||
"config": {
|
||||
"trigger": {
|
||||
"text": "Über unsere Produkte",
|
||||
"className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]",
|
||||
"isShowArrow": true
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"text": "Unser Unternehmen",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "Loren ipsum",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "Not a Link"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Link": {
|
||||
"config": {
|
||||
"label": "Rezepte",
|
||||
"href": "/",
|
||||
"className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Link": {
|
||||
"config": {
|
||||
"label": "Triff Harry Kane",
|
||||
"href": "/",
|
||||
"className": "font-bold text-[1rem] text-[#003F31] flex items-center gap-1 hover:text-[#009b93]"
|
||||
}
|
||||
}
|
||||
}
|
||||
{ "Logo": { "config": { "src": "/3bear-logo.png", "alt": "MyShop", "className": "h-[150px] w-[180px]", "objectFit": "contain" } } },
|
||||
{ "VtMegaMenu": { "config": { "navLabel": { "text": "Shop", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]", "isShowArrow": true } } } },
|
||||
{ "Dropdown": { "config": { "trigger": { "text": "Über Uns", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]", "isShowArrow": true }, "items": [ { "text": "Unser Unternehmen", "href": "/" }, { "text": "Loren ipsum", "href": "/" }, { "text": "Not a Link" } ] } } },
|
||||
{ "Dropdown": { "config": { "trigger": { "text": "Über unsere Produkte", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]", "isShowArrow": true }, "items": [ { "text": "Unser Unternehmen", "href": "/" }, { "text": "Loren ipsum", "href": "/" }, { "text": "Not a Link" } ] } } },
|
||||
{ "Link": { "config": { "label": "Rezepte", "href": "/", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]" } } },
|
||||
{ "Link": { "config": { "label": "Triff Harry Kane", "href": "/", "className": "font-bold text-[1rem] text-[#003F31] flex items-center gap-1 hover:text-[#009b93]" } } }
|
||||
],
|
||||
"right": [
|
||||
{
|
||||
"VtCountryCodeSelect": {
|
||||
"config": {
|
||||
"trigger": {
|
||||
"className": "w-auto font-bold text-[13px] text-[#11314E] flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent",
|
||||
"isFlag": true,
|
||||
"isDisplayFullname": true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Button": {
|
||||
"config": {
|
||||
"icon": "MagnifyingGlass",
|
||||
"className": "shadow-none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"AccountButton": {
|
||||
"config": {
|
||||
"icon": "User",
|
||||
"className": " flex items-center gap-1 shadow-none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtCartButton": {
|
||||
"config": {
|
||||
"icon": "ShoppingBag",
|
||||
"className": "shadow-none bg-transparent text-black w-[50px]"
|
||||
}
|
||||
}
|
||||
}
|
||||
{ "VtCountryCodeSelect": { "config": { "trigger": { "className": "w-auto font-bold text-[13px] text-[#11314E] flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent", "isFlag": true, "isDisplayFullname": true } } } },
|
||||
{ "Button": { "config": { "icon": "MagnifyingGlass", "className": "shadow-none" } } },
|
||||
{ "AccountButton": { "config": { "icon": "User", "className": " flex items-center gap-1 shadow-none" } } },
|
||||
{ "VtCartButton": { "config": { "icon": "ShoppingBag", "className": "shadow-none bg-transparent text-black w-[50px]" } } }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -177,53 +45,7 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"Hero": {
|
||||
"config": {
|
||||
"className": "h-[35rem]",
|
||||
"ImageDisplayer": {
|
||||
"config": {
|
||||
"duration": 0,
|
||||
"images": ["./banner-hero.webp"],
|
||||
"links": ["/account"]
|
||||
}
|
||||
},
|
||||
"left": [
|
||||
{
|
||||
"VtCtaBanner": {
|
||||
"config": {
|
||||
"className": "left-[120px] top-[80px] relative w-full p-12 flex flex-col items-start justify-center text-left bg-transperant border-none shadow-none",
|
||||
"buttonTextClassName": "inline-flex items-center justify-center bg-[#FCEE56] hover:bg-[#FCEE56]/90 text-[#0D382E] px-8 py-3 rounded-full font-bold text-lg shadow-none border-none",
|
||||
"tagTextClassName": "text-[#0D382E] text-lg font-medium mb-2 bg-transparent",
|
||||
"tagText": "So einfach kann Frühstück sein – mit unseren leckeren Overnight Oats.",
|
||||
"titleText": "breakfast made easy.",
|
||||
"buttonText": "Jetzt entdecken"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"center": [],
|
||||
"right": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"CartMismatchBanner": {
|
||||
"config": {
|
||||
"show": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"FreeShippingPriceNudge": {
|
||||
"config": {
|
||||
"variant": "popup"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"PropsChildren": {}
|
||||
},
|
||||
{ "PropsChildren": {} },
|
||||
{
|
||||
"Footer": {
|
||||
"config": {
|
||||
|
|
@ -232,122 +54,13 @@
|
|||
"centerClassName": "",
|
||||
"rightClassName": "flex gap-[10rem] mr-[80px]",
|
||||
"left": [
|
||||
{
|
||||
"VtFooterHero": {
|
||||
"config": {
|
||||
"logoClassName": "h-[100px] w-[200px]",
|
||||
"logoSrc": "/3bear-white-logo.avif",
|
||||
"logoAlt": "3Bear",
|
||||
"title": "Melde dich für unsere Oatnews an 💛",
|
||||
"email": {
|
||||
"emailInputClassName": "w-[300px] ml-8"
|
||||
},
|
||||
"socials": [
|
||||
{
|
||||
"icon": "Twitter",
|
||||
"href": "/",
|
||||
"className": "w-5 h-5 text-white"
|
||||
},
|
||||
{
|
||||
"icon": "Twitter",
|
||||
"href": "/",
|
||||
"className": "w-5 h-5 text-white"
|
||||
},
|
||||
{
|
||||
"icon": "Twitter",
|
||||
"href": "/",
|
||||
"className": "w-5 h-5 text-white"
|
||||
},
|
||||
{
|
||||
"icon": "Twitter",
|
||||
"href": "/",
|
||||
"className": "w-5 h-5 text-white"
|
||||
}
|
||||
],
|
||||
"socialsClassName": "ml-8 mt-10",
|
||||
"className": "",
|
||||
"ctaClassName": "ml-8",
|
||||
"titleClassName": "ml-8 text-white w-full",
|
||||
"descriptionClassName": "ml-8"
|
||||
}
|
||||
}
|
||||
}
|
||||
{ "VtFooterHero": { "config": { "logoClassName": "h-[100px] w-[200px]", "logoSrc": "/3bear-white-logo.avif", "logoAlt": "3Bear", "title": "Melde dich für unsere Oatnews an 💛", "email": { "emailInputClassName": "w-[300px] ml-8" }, "socials": [ { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }, { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }, { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }, { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" } ], "socialsClassName": "ml-8 mt-10", "className": "", "ctaClassName": "ml-8", "titleClassName": "ml-8 text-white w-full", "descriptionClassName": "ml-8" } } }
|
||||
],
|
||||
"center": [],
|
||||
"right": [
|
||||
{
|
||||
"VtMenuItem": {
|
||||
"config": {
|
||||
"title": "Information",
|
||||
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white",
|
||||
"itemClassName": "text-[1rem] font-[400] opacity-70 hover:text-white",
|
||||
"items": [
|
||||
{
|
||||
"text": "Über Uns",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "Placeholder",
|
||||
"href": "/categories/shoes"
|
||||
},
|
||||
{
|
||||
"text": "Placeholder",
|
||||
"href": "/categories/accessories"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtMenuItem": {
|
||||
"config": {
|
||||
"title": "Kundendienst",
|
||||
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white",
|
||||
"itemClassName": "text-[1rem] font-[400] flex items-center opacity-70 hover:text-white",
|
||||
"items": [
|
||||
{
|
||||
"text": "Twitter",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "Facebook",
|
||||
"href": "/categories/shoes"
|
||||
},
|
||||
{
|
||||
"text": "Pinterest",
|
||||
"href": "/categories/accessories"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtMenuItem": {
|
||||
"config": {
|
||||
"title": "Weiteres",
|
||||
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white",
|
||||
"itemClassName": "text-[1rem] font-[400] w-[150px] opacity-70 hover:text-white",
|
||||
"items": [
|
||||
{
|
||||
"text": "Karriere",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "Unser Team",
|
||||
"href": "/categories/shoes"
|
||||
},
|
||||
{
|
||||
"text": "B2B",
|
||||
"href": "/categories/accessories"
|
||||
},
|
||||
{
|
||||
"text": "Presse",
|
||||
"href": "/categories/accessories"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
{ "VtMenuItem": { "config": { "title": "Information", "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white", "itemClassName": "text-[1rem] font-[400] opacity-70 hover:text-white", "items": [ { "text": "Über Uns", "href": "/" }, { "text": "Placeholder", "href": "/categories/shoes" }, { "text": "Placeholder", "href": "/categories/accessories" } ] } } },
|
||||
{ "VtMenuItem": { "config": { "title": "Kundendienst", "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white", "itemClassName": "text-[1rem] font-[400] flex items-center opacity-70 hover:text-white", "items": [ { "text": "Twitter", "href": "/" }, { "text": "Facebook", "href": "/categories/shoes" }, { "text": "Pinterest", "href": "/categories/accessories" } ] } } },
|
||||
{ "VtMenuItem": { "config": { "title": "Weiteres", "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white", "itemClassName": "text-[1rem] font-[400] w-[150px] opacity-70 hover:text-white", "items": [ { "text": "Karriere", "href": "/" }, { "text": "Unser Team", "href": "/categories/shoes" }, { "text": "B2B", "href": "/categories/accessories" }, { "text": "Presse", "href": "/categories/accessories" } ] } } }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -360,24 +73,51 @@
|
|||
"left": [],
|
||||
"center": [],
|
||||
"right": [
|
||||
{ "VtFooterBottom": { "config": { "className": " mr-[80px]", "icons": [ "Mastercard", "PayPal", "Visa", "Mastercard", "Mastercard", "Mastercard", "Mastercard" ] } } }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"pages": {
|
||||
"Home": [
|
||||
{
|
||||
"VtFooterBottom": {
|
||||
"Hero": {
|
||||
"config": {
|
||||
"className": " mr-[80px]",
|
||||
"icons": [
|
||||
"Mastercard",
|
||||
"PayPal",
|
||||
"Visa",
|
||||
"Mastercard",
|
||||
"Mastercard",
|
||||
"Mastercard",
|
||||
"Mastercard"
|
||||
"className": "h-[35rem]",
|
||||
"ImageDisplayer": { "config": { "duration": 0, "images": ["./banner-hero.webp"], "links": ["/account"] } },
|
||||
"left": [ { "VtCtaBanner": { "config": { "className": "left-[120px] top-[80px] relative w-full p-12 flex flex-col items-start justify-center text-left bg-transperant border-none shadow-none", "buttonTextClassName": "inline-flex items-center justify-center bg-[#FCEE56] hover:bg-[#FCEE56]/90 text-[#0D382E] px-8 py-3 rounded-full font-bold text-lg shadow-none border-none", "tagTextClassName": "text-[#0D382E] text-lg font-medium mb-2 bg-transparent", "tagText": "So einfach kann Frühstück sein – mit unseren leckeren Overnight Oats.", "titleText": "breakfast made easy.", "buttonText": "Jetzt entdecken" } } } ],
|
||||
"center": [],
|
||||
"right": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtFeaturedProducts": {
|
||||
"config": {
|
||||
"title": "best-seller",
|
||||
"styles": {
|
||||
"container": "content-container py-12 small:py-20",
|
||||
"header": { "container": "hidden", "title": "hidden", "isShowViewAll": false },
|
||||
"list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
|
||||
"productCard": {
|
||||
"badgeText": "Bestseller",
|
||||
"card": "relative flex flex-col items-center bg-transparent shadow-none border-none p-0",
|
||||
"badge": { "container": "absolute top-4 left-4", "text": "px-3 py-1 rounded-full bg-[#009b93] text-white text-[12px] font-semibold" },
|
||||
"thumbnail": { "className": "rounded-2xl bg-white h-[320px] object-contain", "size": "full" },
|
||||
"content": "flex flex-col items-center justify-start text-center p-0 mt-6",
|
||||
"title": "text-[#003F31] text-[28px] font-semibold",
|
||||
"description": "order-3 text-[#003f31b3]",
|
||||
"price": "mt-2 text-[#0D382E] text-[24px] font-bold order-2 flex gap-2",
|
||||
"reviews": { "container": "mt-3 flex items-center gap-2 order-1", "stars": "flex gap-1", "star": "text-[#F59E0B] text-xl leading-none", "emptyStar": "text-[#F59E0B] text-xl opacity-30 leading-none", "text": "text-[#003F31] text-[14px]", "rating": 4.5, "count": 38 },
|
||||
"button": { "addToCart": "hidden", "moreInfo": "hidden", "isShowIcon": false }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{ "CartMismatchBanner": { "config": { "show": true } } },
|
||||
{ "FreeShippingPriceNudge": { "config": { "variant": "popup" } } }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -168,6 +168,52 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtFeaturedProducts": {
|
||||
"config": {
|
||||
"title": "drsquatch-best-seller",
|
||||
"styles": {
|
||||
"container": "content-container py-12 px-[100px] small:py-24",
|
||||
|
||||
"header": {
|
||||
"container": "flex justify-center mb-8",
|
||||
"title": "text-[28px] font-bold text-[#1f3521]",
|
||||
"isShowViewAll": false
|
||||
},
|
||||
"list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
|
||||
"productCard": {
|
||||
"card": "shadow-none border-none",
|
||||
"className": "relative overflow-hidden rounded-2xl bg-white shadow-elevation-card-rest h-full flex flex-col",
|
||||
"badgeText": "LIMITED EDITION",
|
||||
"badge": {
|
||||
"container": "absolute z-[1] top-0 left-0 pt-4",
|
||||
"text": "uppercase px-4 py-2 bg-[#3B6F47] text-white"
|
||||
},
|
||||
"thumbnail": {
|
||||
"className": "rounded-none h-[300px] shadow-none",
|
||||
"size": "full"
|
||||
},
|
||||
"content": " flex flex-col flex-1",
|
||||
"title": "mt-2 text-[#1f3521] text-[22px] font-bold",
|
||||
"price": "mt-2 text-[#3B6F47] font-bold text-[20px] flex gap-3 flex-row-reverse justify-end",
|
||||
"reviews": {
|
||||
"container": "mt-3 flex items-center gap-2",
|
||||
"stars": "flex gap-1",
|
||||
"star": "text-[#C4622C] text-xl leading-none",
|
||||
"emptyStar": "text-[#C4622C] text-xl opacity-30 leading-none",
|
||||
"text": "text-[#1f3521]",
|
||||
"rating": 3.6,
|
||||
"count": 59
|
||||
},
|
||||
"button": {
|
||||
"addToCart": "mt-6 w-full bg-[#C4622C] hover:bg-[#C4622C]/90 shadow-none text-white rounded-none h-fit font-bold",
|
||||
"moreInfo": "hidden"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"CartMismatchBanner": {
|
||||
"config": {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
[
|
||||
{
|
||||
"layout": [
|
||||
{
|
||||
"Header": {
|
||||
"config": {
|
||||
|
|
@ -134,31 +135,7 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"Hero": {
|
||||
"config": {
|
||||
"variant": "default",
|
||||
"className": "bg-custom-gradient"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"CartMismatchBanner": {
|
||||
"config": {
|
||||
"show": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"FreeShippingPriceNudge": {
|
||||
"config": {
|
||||
"variant": "popup"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"PropsChildren": {}
|
||||
},
|
||||
{ "PropsChildren": {} },
|
||||
{
|
||||
"Footer": {
|
||||
"config": {
|
||||
|
|
@ -171,18 +148,9 @@
|
|||
"className": "flex flex-col gap-y-2",
|
||||
"itemClassName": "text-ui-fg-subtle txt-small ml-3",
|
||||
"items": [
|
||||
{
|
||||
"text": "Clothing",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "Shoes",
|
||||
"href": "/categories/shoes"
|
||||
},
|
||||
{
|
||||
"text": "Accessories",
|
||||
"href": "/categories/accessories"
|
||||
}
|
||||
{ "text": "Clothing", "href": "/" },
|
||||
{ "text": "Shoes", "href": "/categories/shoes" },
|
||||
{ "text": "Accessories", "href": "/categories/accessories" }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -196,18 +164,9 @@
|
|||
"className": "flex flex-col gap-y-2",
|
||||
"itemClassName": "text-ui-fg-subtle txt-small ml-3",
|
||||
"items": [
|
||||
{
|
||||
"text": "Clothing",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "Shoes",
|
||||
"href": "/categories/shoes"
|
||||
},
|
||||
{
|
||||
"text": "Accessories",
|
||||
"href": "/categories/accessories"
|
||||
}
|
||||
{ "text": "Clothing", "href": "/" },
|
||||
{ "text": "Shoes", "href": "/categories/shoes" },
|
||||
{ "text": "Accessories", "href": "/categories/accessories" }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -226,4 +185,52 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"pages": {
|
||||
"Home": [
|
||||
{
|
||||
"Hero": {
|
||||
"config": {
|
||||
"variant": "default",
|
||||
"className": "bg-custom-gradient"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtFeaturedProducts": {
|
||||
"config": {
|
||||
"title": "best-seller"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"CartMismatchBanner": {
|
||||
"config": { "show": true }
|
||||
}
|
||||
},
|
||||
{
|
||||
"FreeShippingPriceNudge": {
|
||||
"config": { "variant": "popup" }
|
||||
}
|
||||
}
|
||||
],
|
||||
"Product": [
|
||||
{
|
||||
"VtFeaturedProducts": {
|
||||
"config": {
|
||||
"title": "best-seller"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"StorePage": [
|
||||
{
|
||||
"VtFeaturedProducts": {
|
||||
"config": {
|
||||
"title": "best-seller"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
[
|
||||
{
|
||||
"layout": [
|
||||
{
|
||||
"Header": {
|
||||
"config": {
|
||||
|
|
@ -176,58 +177,7 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"Hero": {
|
||||
"config": {
|
||||
"className": "h-[35rem]",
|
||||
"ImageDisplayer": {
|
||||
"config": {
|
||||
"duration": 5,
|
||||
"images": [
|
||||
"./banner-hero.webp",
|
||||
"./banner-hero-1.webp",
|
||||
"./banner-hero-2.webp"
|
||||
],
|
||||
"links": ["/", "/account", "/product"]
|
||||
}
|
||||
},
|
||||
"left": [
|
||||
{
|
||||
"VtCtaBanner": {
|
||||
"config": {
|
||||
"variant": "default",
|
||||
"className": "left-[120px] top-[80px]",
|
||||
"titleTextClassName": "leading-normal",
|
||||
"tagText": "Besonders Aktion",
|
||||
"titleText": "Willkommen in Vibentec IT Shop",
|
||||
"descriptionText": "Insert the accordion description here. It would look better as two lines of text or more.",
|
||||
"buttonText": "Zum Einkaufen"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"center": [],
|
||||
"right": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"CartMismatchBanner": {
|
||||
"config": {
|
||||
"show": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"FreeShippingPriceNudge": {
|
||||
"config": {
|
||||
"variant": "popup"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"PropsChildren": {}
|
||||
},
|
||||
{ "PropsChildren": {} },
|
||||
{
|
||||
"Footer": {
|
||||
"config": {
|
||||
|
|
@ -264,18 +214,9 @@
|
|||
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
||||
"itemClassName": "text-[1rem] font-[400]",
|
||||
"items": [
|
||||
{
|
||||
"text": "Über Uns",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "Placeholder",
|
||||
"href": "/categories/shoes"
|
||||
},
|
||||
{
|
||||
"text": "Placeholder",
|
||||
"href": "/categories/accessories"
|
||||
}
|
||||
{ "text": "Über Uns", "href": "/" },
|
||||
{ "text": "Placeholder", "href": "/categories/shoes" },
|
||||
{ "text": "Placeholder", "href": "/categories/accessories" }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -287,21 +228,9 @@
|
|||
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
||||
"itemClassName": "text-[1rem] font-[400] flex items-center",
|
||||
"items": [
|
||||
{
|
||||
"text": "Twitter",
|
||||
"href": "/",
|
||||
"icon": "X"
|
||||
},
|
||||
{
|
||||
"text": "Facebook",
|
||||
"href": "/categories/shoes",
|
||||
"icon": "X"
|
||||
},
|
||||
{
|
||||
"text": "Pinterest",
|
||||
"href": "/categories/accessories",
|
||||
"icon": "X"
|
||||
}
|
||||
{ "text": "Twitter", "href": "/", "icon": "X" },
|
||||
{ "text": "Facebook", "href": "/categories/shoes", "icon": "X" },
|
||||
{ "text": "Pinterest", "href": "/categories/accessories", "icon": "X" }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -313,18 +242,9 @@
|
|||
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
||||
"itemClassName": "text-[1rem] font-[400] w-[150px]",
|
||||
"items": [
|
||||
{
|
||||
"text": "Hopfenstr. 10c76185 Karlsruhe Deutschland",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "+497271 5970098",
|
||||
"href": "/categories/shoes"
|
||||
},
|
||||
{
|
||||
"text": "info@vibentec-it.io",
|
||||
"href": "/categories/accessories"
|
||||
}
|
||||
{ "text": "Hopfenstr. 10c76185 Karlsruhe Deutschland", "href": "/" },
|
||||
{ "text": "+497271 5970098", "href": "/categories/shoes" },
|
||||
{ "text": "info@vibentec-it.io", "href": "/categories/accessories" }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -337,18 +257,9 @@
|
|||
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
||||
"itemClassName": "text-[1rem] font-[400] w-[150px]",
|
||||
"items": [
|
||||
{
|
||||
"text": "Datenschutz",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"text": "Impressum",
|
||||
"href": "/categories/shoes"
|
||||
},
|
||||
{
|
||||
"text": "Installation Info",
|
||||
"href": "/categories/accessories"
|
||||
}
|
||||
{ "text": "Datenschutz", "href": "/" },
|
||||
{ "text": "Impressum", "href": "/categories/shoes" },
|
||||
{ "text": "Installation Info", "href": "/categories/accessories" }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -367,11 +278,7 @@
|
|||
"VtFooterBottom": {
|
||||
"config": {
|
||||
"text": "©2025 Vibentec IT. All rights reserved",
|
||||
"icons": [
|
||||
"Mastercard",
|
||||
"PayPal",
|
||||
"Visa"
|
||||
]
|
||||
"icons": ["Mastercard", "PayPal", "Visa"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -379,4 +286,74 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"pages": {
|
||||
"Home": [
|
||||
{
|
||||
"Hero": {
|
||||
"config": {
|
||||
"className": "h-[35rem]",
|
||||
"ImageDisplayer": {
|
||||
"config": {
|
||||
"duration": 5,
|
||||
"images": ["./banner-hero.webp", "./banner-hero-1.webp", "./banner-hero-2.webp"],
|
||||
"links": ["/", "/account", "/product"]
|
||||
}
|
||||
},
|
||||
"left": [
|
||||
{
|
||||
"VtCtaBanner": {
|
||||
"config": {
|
||||
"variant": "default",
|
||||
"className": "left-[120px] top-[80px]",
|
||||
"titleTextClassName": "leading-normal",
|
||||
"tagText": "Besonders Aktion",
|
||||
"titleText": "Willkommen in Vibentec IT Shop",
|
||||
"descriptionText": "Insert the accordion description here. It would look better as two lines of text or more.",
|
||||
"buttonText": "Zum Einkaufen"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"center": [],
|
||||
"right": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtFeaturedProducts": {
|
||||
"config": {
|
||||
"title": "best-seller",
|
||||
"styles": {
|
||||
"container": "content-container py-12 px-[100px] small:py-24",
|
||||
"header": {
|
||||
"container": "flex justify-between mb-8",
|
||||
"title": "text-[56px] text-[#11314E]",
|
||||
"isShowViewAll": false
|
||||
},
|
||||
"list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
|
||||
"productCard": {
|
||||
"card": "relative overflow-hidden rounded-2xl border border-[#285A86] bg-ui-bg-base shadow-elevation-card-rest h-full flex flex-col",
|
||||
"badge": {
|
||||
"container": "p-4",
|
||||
"text": "z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86]"
|
||||
},
|
||||
"thumbnail": { "className": "rounded-none h-[240px]", "size": "full" },
|
||||
"subtitle": "text-ui-fg-subtle text-[14px]",
|
||||
"content": "flex flex-col flex-1 justify-between p-4",
|
||||
"title": "text-ui-fg-subtle text-[18px]",
|
||||
"price": "flex items-center gap-x-1 text-[#285A86] font-bold border-b pb-4",
|
||||
"button": {
|
||||
"addToCart": "w-fit h-[40px] bg-black text-white rounded-md",
|
||||
"moreInfo": "w-fit h-[40px] border border-[#285A86] text-[#285A86] rounded-md"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{ "CartMismatchBanner": { "config": { "show": true } } },
|
||||
{ "FreeShippingPriceNudge": { "config": { "variant": "popup" } } }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,22 @@ import { retrieveCustomer } from "@lib/data/customer"
|
|||
import { getBaseURL } from "@lib/util/env"
|
||||
import { StoreCartShippingOption } from "@medusajs/types"
|
||||
import { DynamicLayoutRenderer } from "../../../vibentec/renderer"
|
||||
import { LayoutContext, LayoutComponentNode, } from "../../../vibentec/component-map"
|
||||
import { loadDesignConfig } from "vibentec/configloader"
|
||||
import { LayoutContext, LayoutComponentNode } from "../../../vibentec/component-map"
|
||||
import { loadLayoutConfig } from "vibentec/configloader"
|
||||
|
||||
import { getRegion } from "@lib/data/regions"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL(getBaseURL()),
|
||||
}
|
||||
|
||||
export default async function PageLayout(props: { children: React.ReactNode }) {
|
||||
export default async function PageLayout(props: {
|
||||
children: React.ReactNode
|
||||
params: Promise<{ countryCode: string }>
|
||||
}) {
|
||||
const params = await props.params
|
||||
const { countryCode } = params
|
||||
const region = await getRegion(countryCode)
|
||||
const customer = await retrieveCustomer()
|
||||
const cart = await retrieveCart()
|
||||
let shippingOptions: StoreCartShippingOption[] = []
|
||||
|
|
@ -23,12 +31,14 @@ export default async function PageLayout(props: { children: React.ReactNode }) {
|
|||
shippingOptions = shipping_options
|
||||
}
|
||||
|
||||
const nodes: LayoutComponentNode[] = await loadDesignConfig()
|
||||
const nodes: LayoutComponentNode[] = await loadLayoutConfig()
|
||||
const context: LayoutContext = {
|
||||
customer,
|
||||
cart,
|
||||
shippingOptions,
|
||||
contentChildren: props.children,
|
||||
countryCode,
|
||||
region,
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@ import FeaturedProducts from "@modules/home/components/featured-products"
|
|||
import Hero from "@modules/home/components/hero"
|
||||
import { listCollections } from "@lib/data/collections"
|
||||
import { getRegion } from "@lib/data/regions"
|
||||
import VtFeaturedProducts from "@modules/home/components/vt-featured-products"
|
||||
import { DynamicLayoutRenderer } from "@vibentec/renderer"
|
||||
import { LayoutContext, LayoutComponentNode } from "@vibentec/component-map"
|
||||
import { loadPageConfig } from "@vibentec/configloader"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Medusa Next.js Starter Template",
|
||||
|
|
@ -23,22 +27,26 @@ export default async function Home(props: {
|
|||
const { collections } = await listCollections({
|
||||
fields: "id, handle, title",
|
||||
})
|
||||
const res = await listCollections({
|
||||
fields: "id, handle, title",
|
||||
})
|
||||
|
||||
console.log('collections:',collections)
|
||||
|
||||
if (!collections || !region) {
|
||||
return null
|
||||
}
|
||||
console.log(res, '--------------')
|
||||
return (
|
||||
<>
|
||||
{/* <Hero /> */}
|
||||
<div className="py-12">
|
||||
<ul className="flex flex-col gap-x-6">
|
||||
<FeaturedProducts collections={collections} region={region} />
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
const nodes: LayoutComponentNode[] = await loadPageConfig("Home")
|
||||
|
||||
if (!region) {
|
||||
return null
|
||||
}
|
||||
|
||||
const context: LayoutContext = {
|
||||
customer: null,
|
||||
cart: null,
|
||||
shippingOptions: [],
|
||||
contentChildren: null,
|
||||
countryCode,
|
||||
region,
|
||||
}
|
||||
|
||||
return <DynamicLayoutRenderer nodes={nodes} context={context} />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ import { notFound } from "next/navigation"
|
|||
import { listProducts } from "@lib/data/products"
|
||||
import { getRegion, listRegions } from "@lib/data/regions"
|
||||
import ProductTemplate from "@modules/products/templates"
|
||||
import { DynamicLayoutRenderer } from "@vibentec/renderer"
|
||||
import { LayoutContext, LayoutComponentNode } from "@vibentec/component-map"
|
||||
import { loadPageConfig } from "@vibentec/configloader"
|
||||
|
||||
type Props = {
|
||||
params: Promise<{ countryCode: string; handle: string }>
|
||||
|
|
@ -96,11 +99,25 @@ export default async function ProductPage(props: Props) {
|
|||
notFound()
|
||||
}
|
||||
|
||||
const nodes: LayoutComponentNode[] = await loadPageConfig("Product")
|
||||
|
||||
const context: LayoutContext = {
|
||||
customer: null,
|
||||
cart: null,
|
||||
shippingOptions: [],
|
||||
contentChildren: null,
|
||||
countryCode: params.countryCode,
|
||||
region,
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProductTemplate
|
||||
product={pricedProduct}
|
||||
region={region}
|
||||
countryCode={params.countryCode}
|
||||
/>
|
||||
<DynamicLayoutRenderer nodes={nodes} context={context} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ import { Metadata } from "next"
|
|||
|
||||
import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
|
||||
import StoreTemplate from "@modules/store/templates"
|
||||
import { LayoutComponentNode, LayoutContext } from "@vibentec/component-map"
|
||||
import { getRegion } from "@lib/data/regions"
|
||||
import { loadPageConfig } from "@vibentec/configloader"
|
||||
import { DynamicLayoutRenderer } from "@vibentec/renderer"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Store",
|
||||
|
|
@ -19,15 +23,28 @@ type Params = {
|
|||
}
|
||||
|
||||
export default async function StorePage(props: Params) {
|
||||
const params = await props.params;
|
||||
const searchParams = await props.searchParams;
|
||||
const params = await props.params
|
||||
const searchParams = await props.searchParams
|
||||
const region = await getRegion(params.countryCode)
|
||||
const { sortBy, page } = searchParams
|
||||
const nodes: LayoutComponentNode[] = await loadPageConfig("Store")
|
||||
|
||||
const context: LayoutContext = {
|
||||
customer: null,
|
||||
cart: null,
|
||||
shippingOptions: [],
|
||||
contentChildren: null,
|
||||
countryCode: params.countryCode,
|
||||
region,
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<StoreTemplate
|
||||
sortBy={sortBy}
|
||||
page={page}
|
||||
countryCode={params.countryCode}
|
||||
/>
|
||||
<DynamicLayoutRenderer nodes={nodes} context={context} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@ export const listCollections = async (
|
|||
{
|
||||
query: queryParams,
|
||||
next,
|
||||
cache: "force-cache",
|
||||
}
|
||||
)
|
||||
.then(({ collections }) => ({ collections, count: collections.length }))
|
||||
|
|
|
|||
|
|
@ -63,12 +63,11 @@ export const listProducts = async ({
|
|||
offset,
|
||||
region_id: region?.id,
|
||||
fields:
|
||||
"*variants.calculated_price,+variants.inventory_quantity,+metadata,+tags",
|
||||
"*variants.calculated_price,+variants.inventory_quantity,*metadata,+tags",
|
||||
...queryParams,
|
||||
},
|
||||
headers,
|
||||
next,
|
||||
cache: "force-cache",
|
||||
}
|
||||
)
|
||||
.then(({ products, count }) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
import { HttpTypes } from "@medusajs/types"
|
||||
import ProductRail from "./product-rail"
|
||||
import { listCollections } from "@lib/data/collections"
|
||||
import { LayoutComponentDefinition, LayoutContext } from "@vibentec/component-map"
|
||||
|
||||
export default async function VtFeaturedProducts(props: {
|
||||
collections?: HttpTypes.StoreCollection[]
|
||||
region?: HttpTypes.StoreRegion
|
||||
countryCode?: string
|
||||
nodes?: LayoutComponentDefinition
|
||||
context?: LayoutContext
|
||||
}) {
|
||||
let { collections, region, countryCode } = props
|
||||
const { nodes, context } = props
|
||||
|
||||
if (context) {
|
||||
if (!region) region = context.region
|
||||
if (!countryCode) countryCode = context.countryCode
|
||||
}
|
||||
|
||||
if (!collections && region) {
|
||||
const result = await listCollections({
|
||||
fields: "id, handle, title",
|
||||
})
|
||||
collections = result.collections
|
||||
}
|
||||
|
||||
if (!collections || !region || !countryCode) {
|
||||
return null
|
||||
}
|
||||
|
||||
const configTitle = nodes?.config?.title
|
||||
const styles = nodes?.config?.styles
|
||||
|
||||
let displayCollections = collections
|
||||
if (configTitle) {
|
||||
displayCollections = collections.filter(
|
||||
(c) => c.handle === configTitle || c.title === configTitle
|
||||
)
|
||||
}
|
||||
|
||||
return displayCollections.map((collection) => (
|
||||
<li key={collection.id}>
|
||||
<ProductRail
|
||||
collection={collection}
|
||||
region={region}
|
||||
countryCode={countryCode}
|
||||
styles={styles}
|
||||
/>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import { listProducts } from "@lib/data/products"
|
||||
import { HttpTypes } from "@medusajs/types"
|
||||
import { Text, clx } from "@medusajs/ui"
|
||||
|
||||
import InteractiveLink from "@modules/common/components/interactive-link"
|
||||
import ProductCard from "@modules/products/components/vt-product-card"
|
||||
|
||||
export default async function ProductRail({
|
||||
collection,
|
||||
region,
|
||||
countryCode,
|
||||
styles,
|
||||
}: {
|
||||
collection: HttpTypes.StoreCollection
|
||||
region: HttpTypes.StoreRegion
|
||||
countryCode: string
|
||||
styles?: any
|
||||
}) {
|
||||
const {
|
||||
response: { products: pricedProducts },
|
||||
} = await listProducts({
|
||||
regionId: region.id,
|
||||
queryParams: {
|
||||
collection_id: collection.id,
|
||||
fields: "*variants.calculated_price",
|
||||
},
|
||||
})
|
||||
|
||||
if (!pricedProducts) {
|
||||
return null
|
||||
}
|
||||
|
||||
const classes = {
|
||||
container: styles?.container ?? "content-container py-12 px-[100px] small:py-24",
|
||||
header: {
|
||||
container: styles?.header?.container ?? "flex justify-between mb-8",
|
||||
title: styles?.header?.title ?? "txt-xlarge",
|
||||
isShowViewAll: styles?.header.isShowViewAll ?? true,
|
||||
},
|
||||
list: styles?.list ?? "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.container}>
|
||||
<div className={classes.header.container}>
|
||||
<Text className={classes.header.title}>{collection.title}</Text>
|
||||
{classes.header.isShowViewAll && (
|
||||
<InteractiveLink href={`/collections/${collection.handle}`}>
|
||||
View all
|
||||
</InteractiveLink>
|
||||
)}
|
||||
</div>
|
||||
<ul className={classes.list}>
|
||||
{pricedProducts &&
|
||||
pricedProducts.map((product) => (
|
||||
<li key={product.id}>
|
||||
<ProductCard
|
||||
product={product}
|
||||
countryCode={countryCode}
|
||||
styles={styles?.productCard}
|
||||
badgeText={styles?.productCard?.badgeText}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@ export default async function PreviewPrice({ price }: { price: VariantPrice }) {
|
|||
)}
|
||||
<Text
|
||||
className={clx("text-ui-fg-muted", {
|
||||
"text-ui-fg-interactive": price.price_type === "sale",
|
||||
"text-green-700": price.price_type === "sale",
|
||||
})}
|
||||
data-testid="price"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,208 @@
|
|||
import { HttpTypes } from "@medusajs/types"
|
||||
import { Button, Heading, Text, clx } from "@medusajs/ui"
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
import Divider from "@modules/common/components/divider"
|
||||
import PreviewPrice from "@modules/products/components/product-preview/price"
|
||||
import { getProductPrice } from "@lib/util/get-product-price"
|
||||
import { addToCart } from "@lib/data/cart"
|
||||
import VtThumbnail from "../vt-thumbnail"
|
||||
import { Plus, ChevronRight } from "@medusajs/icons"
|
||||
type ProductCardProps = {
|
||||
product: HttpTypes.StoreProduct
|
||||
badgeText?: string
|
||||
deliveryTime?: string
|
||||
className?: string
|
||||
countryCode: string
|
||||
styles?: any
|
||||
}
|
||||
|
||||
export default function ProductCard({
|
||||
product,
|
||||
badgeText = "Saved up to 20%",
|
||||
deliveryTime = "2-4 Wochen",
|
||||
className,
|
||||
countryCode,
|
||||
styles,
|
||||
}: ProductCardProps) {
|
||||
const firstVariant = product.variants?.[0]
|
||||
|
||||
const inStock = (() => {
|
||||
if (!firstVariant) return false
|
||||
if (!firstVariant.manage_inventory) return true
|
||||
if (firstVariant.allow_backorder) return true
|
||||
return (firstVariant.inventory_quantity || 0) > 0
|
||||
})()
|
||||
console.dir(product, { depth: null })
|
||||
const { cheapestPrice } = getProductPrice({ product })
|
||||
|
||||
async function handleAddToCart() {
|
||||
"use server"
|
||||
if (!firstVariant?.id) return
|
||||
await addToCart({
|
||||
variantId: firstVariant.id,
|
||||
quantity: 1,
|
||||
countryCode,
|
||||
})
|
||||
}
|
||||
|
||||
const description = (() => {
|
||||
const prodDescription = product.description || ""
|
||||
const textSlice =
|
||||
prodDescription.length > 120
|
||||
? prodDescription.slice(0, 117) + "…"
|
||||
: prodDescription
|
||||
return textSlice
|
||||
})()
|
||||
|
||||
const classes = {
|
||||
card: styles?.card ?? className ?? "",
|
||||
badge: {
|
||||
container: styles?.badge?.container ?? "p-4",
|
||||
text:
|
||||
styles?.badge?.text ??
|
||||
"z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86] ",
|
||||
},
|
||||
thumbnail: {
|
||||
className: styles?.thumbnail?.className ?? "rounded-none h-[240px]",
|
||||
size: styles?.thumbnail?.size ?? "full",
|
||||
},
|
||||
subtitle: styles?.subtitle ?? "",
|
||||
content: styles?.content ?? "p-6 flex flex-col flex-1",
|
||||
title: styles?.title ?? "mt-2 text-ui-fg-base",
|
||||
price: styles?.price ?? "mt-2 flex items-baseline gap-2",
|
||||
description: styles?.description ?? "txt-small text-[#285A86] my-4",
|
||||
reviews: {
|
||||
container: styles?.reviews?.container ?? undefined,
|
||||
stars: styles?.reviews?.stars ?? "flex gap-1",
|
||||
star: styles?.reviews?.star ?? "text-[#C4622C] text-xl leading-none",
|
||||
emptyStar:
|
||||
styles?.reviews?.emptyStar ??
|
||||
"text-[#C4622C] text-xl opacity-30 leading-none",
|
||||
text: styles?.reviews?.text ?? "txt-small text-ui-fg-subtle",
|
||||
rating: styles?.reviews?.rating,
|
||||
count: styles?.reviews?.count,
|
||||
},
|
||||
button: {
|
||||
addToCart: styles?.button?.addToCart ?? "flex-1",
|
||||
moreInfo: styles?.button?.moreInfo ?? "w-full",
|
||||
isShowIcon: styles?.button?.isShowIcon ?? true,
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={clx(classes.card)}>
|
||||
<LocalizedClientLink href={`/products/${product.handle}`} className="block">
|
||||
<div className="relative">
|
||||
{badgeText && (
|
||||
<div className={classes.badge.container}>
|
||||
<span className={classes.badge.text}>{badgeText}</span>
|
||||
</div>
|
||||
)}
|
||||
<VtThumbnail
|
||||
thumbnail={product.thumbnail}
|
||||
className={classes.thumbnail.className}
|
||||
images={product.images}
|
||||
size={classes.thumbnail.size}
|
||||
isFeatured
|
||||
/>
|
||||
</div>
|
||||
</LocalizedClientLink>
|
||||
|
||||
<div className={classes.content}>
|
||||
{classes.subtitle && product.collection && (
|
||||
<LocalizedClientLink
|
||||
href={`/collections/${product.collection.handle}`}
|
||||
className="txt-small text-ui-fg-muted hover:text-ui-fg-subtle"
|
||||
>
|
||||
{product.subtitle}
|
||||
</LocalizedClientLink>
|
||||
)}
|
||||
|
||||
<LocalizedClientLink href={`/products/${product.handle}`} className="block">
|
||||
<Heading
|
||||
level="h3"
|
||||
className={classes.title}
|
||||
data-testid="product-card-title"
|
||||
>
|
||||
{product.title}
|
||||
</Heading>
|
||||
</LocalizedClientLink>
|
||||
|
||||
<div className={classes.price}>
|
||||
{cheapestPrice && <PreviewPrice price={cheapestPrice} />}
|
||||
</div>
|
||||
|
||||
{(classes.reviews.rating !== undefined ||
|
||||
classes.reviews.count !== undefined) && (
|
||||
<div
|
||||
className={
|
||||
classes.reviews.container || "mt-2 flex items-center gap-3"
|
||||
}
|
||||
>
|
||||
<div className="relative inline-block">
|
||||
<div className={classes.reviews.stars}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<span
|
||||
key={`star-empty-${i}`}
|
||||
className={classes.reviews.emptyStar}
|
||||
>
|
||||
★
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
className="absolute inset-0 overflow-hidden"
|
||||
style={{
|
||||
width: `${Math.max(
|
||||
0,
|
||||
Math.min(
|
||||
100,
|
||||
(((classes.reviews.rating as number) ?? 0) / 5) * 100
|
||||
)
|
||||
)}%`,
|
||||
}}
|
||||
>
|
||||
<div className={classes.reviews.stars}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<span
|
||||
key={`star-fills-${i}`}
|
||||
className={classes.reviews.star}
|
||||
>
|
||||
★
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{typeof classes.reviews.count === "number" && (
|
||||
<span className={classes.reviews.text}>
|
||||
{classes.reviews.count} Reviews
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Text className={clx(classes.description, "txt-small my-4")}>{description}</Text>
|
||||
|
||||
<div className="flex gap-3 mt-auto">
|
||||
<Button
|
||||
formAction={handleAddToCart}
|
||||
disabled={!inStock}
|
||||
variant="primary"
|
||||
className={classes.button.addToCart}
|
||||
>
|
||||
Add to cart {classes.button.isShowIcon && <Plus />}
|
||||
</Button>
|
||||
<LocalizedClientLink
|
||||
href={`/products/${product.handle}`}
|
||||
className="flex-1"
|
||||
>
|
||||
<Button variant="secondary" className={classes.button.moreInfo}>
|
||||
More Info {classes.button.isShowIcon && <ChevronRight />}
|
||||
</Button>
|
||||
</LocalizedClientLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import { Container, clx } from "@medusajs/ui"
|
||||
import Image from "next/image"
|
||||
import React from "react"
|
||||
|
||||
import PlaceholderImage from "@modules/common/icons/placeholder-image"
|
||||
|
||||
type ThumbnailProps = {
|
||||
thumbnail?: string | null
|
||||
// TODO: Fix image typings
|
||||
images?: any[] | null
|
||||
size?: "small" | "medium" | "large" | "full" | "square"
|
||||
isFeatured?: boolean
|
||||
className?: string
|
||||
"data-testid"?: string
|
||||
}
|
||||
|
||||
const VtThumbnail: React.FC<ThumbnailProps> = ({
|
||||
thumbnail,
|
||||
images,
|
||||
size = "small",
|
||||
isFeatured,
|
||||
className,
|
||||
"data-testid": dataTestid,
|
||||
}) => {
|
||||
const initialImage = thumbnail || images?.[0]?.url
|
||||
|
||||
return (
|
||||
<Container
|
||||
className={clx(
|
||||
"relative w-full overflow-hidden p-4 bg-ui-bg-subtle shadow-elevation-card-rest group-hover:shadow-elevation-card-hover transition-shadow ease-in-out duration-150",
|
||||
className,
|
||||
{
|
||||
"aspect-[11/14]": isFeatured,
|
||||
"aspect-[9/16]": !isFeatured && size !== "square",
|
||||
"aspect-[1/1]": size === "square",
|
||||
"w-[180px]": size === "small",
|
||||
"w-[290px]": size === "medium",
|
||||
"w-[440px]": size === "large",
|
||||
"w-full": size === "full",
|
||||
}
|
||||
)}
|
||||
data-testid={dataTestid}
|
||||
>
|
||||
<ImageOrPlaceholder image={initialImage} size={size} />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const ImageOrPlaceholder = ({
|
||||
image,
|
||||
size,
|
||||
}: Pick<ThumbnailProps, "size"> & { image?: string }) => {
|
||||
return image ? (
|
||||
<Image
|
||||
src={image}
|
||||
alt="Thumbnail"
|
||||
className="absolute inset-0 object-cover object-center"
|
||||
draggable={false}
|
||||
quality={50}
|
||||
sizes="(max-width: 576px) 280px, (max-width: 768px) 360px, (max-width: 992px) 480px, 800px"
|
||||
fill
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full absolute inset-0 flex items-center justify-center">
|
||||
<PlaceholderImage size={size === "small" ? 16 : 24} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default VtThumbnail
|
||||
|
|
@ -25,6 +25,7 @@ import VtFooterSignUp from "@modules/layout/templates/vt-footer/vt-footer-signup
|
|||
import Hero from "@modules/layout/templates/hero"
|
||||
import { VtCarousel } from "@modules/layout/templates/vt-carousel"
|
||||
import { VtCtaBanner } from "@modules/layout/templates/vt-cta-banner"
|
||||
import VtFeaturedProducts from "@modules/home/components/vt-featured-products"
|
||||
|
||||
type ComponentConfig = Record<string, any>
|
||||
|
||||
|
|
@ -38,6 +39,8 @@ export interface LayoutContext {
|
|||
cart: any
|
||||
shippingOptions: any[]
|
||||
contentChildren: React.ReactNode
|
||||
countryCode?: string
|
||||
region?: any
|
||||
}
|
||||
|
||||
export type ComponentRenderer = {
|
||||
|
|
@ -97,6 +100,7 @@ export const componentMap: Record<string, ComponentRenderer> = {
|
|||
VtFooterSignUp: nodesContextRenderer(VtFooterSignUp),
|
||||
Footer: nodesContextRenderer(VtFooter),
|
||||
ImageDisplayer: nodesContextRenderer(VtCarousel),
|
||||
VtFeaturedProducts: nodesContextRenderer(VtFeaturedProducts),
|
||||
}
|
||||
|
||||
export type ComponentName = keyof typeof componentMap
|
||||
|
|
|
|||
|
|
@ -1,11 +1,28 @@
|
|||
import fs from "fs"
|
||||
import path from "path"
|
||||
import { jsonFileNames } from "./devJsonFileNames";
|
||||
import { jsonFileNames } from "./devJsonFileNames"
|
||||
|
||||
const fileName = jsonFileNames.namStarter;
|
||||
const fileName = jsonFileNames.nam3Bear
|
||||
|
||||
export async function loadDesignConfig() {
|
||||
async function readDesignFile() {
|
||||
const filePath = path.join(process.cwd(), "config", fileName)
|
||||
const fileData = await fs.promises.readFile(filePath, "utf-8")
|
||||
return JSON.parse(fileData)
|
||||
}
|
||||
|
||||
export async function loadLayoutConfig() {
|
||||
const config = await readDesignFile()
|
||||
if (Array.isArray(config)) return config
|
||||
return config.layout ?? []
|
||||
}
|
||||
|
||||
export async function loadPageConfig(pageKey: string) {
|
||||
const config = await readDesignFile()
|
||||
if (Array.isArray(config)) return []
|
||||
const pages = config.pages ?? {}
|
||||
return pages[pageKey] ?? []
|
||||
}
|
||||
|
||||
export async function loadDesignConfig() {
|
||||
return loadLayoutConfig()
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue