Shop
/
Shop-Storefront
4
0
Fork 0
Code Issues 25 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: created Drsquatch header component and json file

This commit is contained in:
Nam Doan 2025-11-27 15:04:56 +07:00
parent b76719fb32
commit 09b01f1d6b
9 changed files with 194 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config/nam.3bear.design.json
View File

@ -156,7 +156,7 @@
"href": "/"
},
{
"icon": "https://upload.wikimedia.org/wikipedia/commons/8/88/Flag_of_Australia_%28converted%29.svg",
"icon": "https://cdn.shopify.com/s/files/1/0275/7784/3817/files/Australia_Flag.svg?v=1657674627",
"text": "Australia (AUD)",
"href": "/"
}
@ -183,7 +183,7 @@
{
"VtCartButton": {
"config": {
"variant": "button",
"variant": "shoppingBagbutton",
"className": "shadow-none"
}
}

176
config/nam.drsquatch.design.json Normal file
View File

@ -0,0 +1,176 @@
[
{
"Header": {
"config": {
"sticky": true
},
"children": [
{
"Banner": {
"config": {
"variant": "nav",
"className": "h-12 bg-[#e6c981] text-black gap-12",
"center": [
{
"Link": {
"config": {
"label": "BLACK FRIDAY",
"href": "/",
"className": "font-bold text-[1rem] flex items-center gap-1"
}
}
},
{
"Link": {
"config": {
"label": "Up to 55% off Bundles",
"href": "/",
"className": "text-[1rem] flex items-center gap-1"
}
}
},
{
"Link": {
"config": {
"label": "SHOP NOW",
"href": "/",
"className": "font-bold text-[1rem] flex items-center gap-1 underline"
}
}
}
]
}
}
},
{
"Nav": {
"config": {
"className": "h-24 bg-[#1f3521] text-white gap-12",
"left": [
{
"Image": {
"config": {
"src": "/drsquatch-logo.webp",
"alt": "MyShop",
"className": "h-[150px] w-[180px] mr-24",
"objectFit": "contain"
}
}
},
{
"Link": {
"config": {
"label": "SUBCRIBE",
"href": "/",
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]"
}
}
},
{
"Link": {
"config": {
"label": "REWARD",
"href": "/",
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]"
}
}
},
{
"VtMegaMenu": {
"config": {
"navLabel": {
"text": "SHOP",
"className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:text-[#009b93]"
}
}
}
},
{
"VtMegaMenu": {
"config": {
"navLabel": {
"text": "OUR STORY",
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]"
}
}
}
}
],
"right": [
{
"Dropdown": {
"config": {
"trigger": {
"icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png",
"text": "DE",
"className": "font-bold text-[1rem] text-white flex items-center gap-1 hover:text-[#009b93]",
"isShowArrow": true
},
"items": [
{
"icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png",
"text": "DE",
"href": "/"
},
{
"icon": "https://cdn.shopify.com/s/files/1/0275/7784/3817/files/EU_Flag.svg?v=1652208424",
"text": "EU",
"href": "/"
},
{
"icon": "https://cdn.shopify.com/s/files/1/0275/7784/3817/files/Australia_Flag.svg?v=1657674627",
"text": "AU",
"href": "/"
}
]
}
}
},
{
"IconButton": {
"config": {
"variant": "user",
"className": "shadow-none bg-transparent text-white"
}
}
},
{
"VtCartButton": {
"config": {
"variant": "cartIconButton",
"className": "shadow-none bg-transparent text-white"
}
}
}
]
}
}
}
]
}
},
{
"CartMismatchBanner": {
"config": {
"show": true
}
}
},
{
"FreeShippingPriceNudge": {
"config": {
"variant": "popup"
}
}
},
{
"PropsChildren": {}
},
{
"Footer": {
"config": {
"copyrightText": "© 2025 MyShop"
}
}
}
]

BIN
public/drsquatch-logo.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

14
src/modules/layout/components/vt-cartbutton/index.tsx
View File

@ -6,12 +6,17 @@ import {
import { clx, IconButton } from "@medusajs/ui"
import { Suspense } from "react"
import CartButton from "@modules/layout/components/cart-button"
import { ShoppingBag } from "@medusajs/icons"
import { ShoppingBag, ShoppingCart } from "@medusajs/icons"
const CartIconButtonComponent = ({ className }: { className?: string }) => {
const IconButtonComponent = ({ className, variant }: { className?: string; variant?: "shoppingBag" | "cart" }) => {
const variants = {
shoppingBag: ShoppingBag,
cart: ShoppingCart,
}
const Icon = variants[variant ?? "shoppingBag"]
return (
<IconButton className={className}>
<ShoppingBag />
<Icon />
</IconButton>
)
}
@ -28,7 +33,8 @@ export const VtCartButton = ({
const variants = {
link: <CartButton />,
button: <CartIconButtonComponent className={className} />,
shoppingBagbutton: <IconButtonComponent className={className} variant="shoppingBag" />,
cartIconButton: <IconButtonComponent className={className} variant="cart" />,
}
if (!props.variant) return null
const fallBackComp = variants[props.variant as keyof typeof variants]

2
src/modules/layout/components/vt-mega-menu/mega-menu.tsx
View File

@ -101,7 +101,7 @@ const MegaMenu = ({
key={category.id}
href={`/categories/${category.handle}`}
className={clx(
"hover:bg-neutral-100 hover:cursor-pointer rounded-full px-3 py-2 w-fit font-medium",
"hover:bg-neutral-100 text-black hover:cursor-pointer rounded-full px-3 py-2 w-fit font-medium",
selectedCategory === category.id && "bg-neutral-100"
)}
onMouseEnter={() => handleCategoryHover(category.id)}

2
src/modules/layout/templates/vt-banner/banner-nav.tsx
View File

@ -10,7 +10,7 @@ export default function BannerNav({ node, context }: { node: LayoutComponentDefi
const props = node.config as BannerNavProps ?? {};
return (
<nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
<nav className="content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular">
<div className="flex items-center gap-x-4">
{props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
</div>

3
src/modules/layout/templates/vt-nav/index.tsx
View File

@ -1,5 +1,6 @@
import { DynamicLayoutRenderer } from "vibentec/renderer"
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
import { clx } from "@medusajs/ui";
interface BannerNavProps {
className?: string;
@ -12,7 +13,7 @@ export default function VtNav({ nodes, context }: { nodes: LayoutComponentDefini
return (
<div className="relative mx-auto border-b duration-200 bg-white border-ui-border-base">
<nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
<nav className={clx("content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular", props.className)}>
<div className="flex items-center gap-x-4">
{props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
</div>

2
src/vibentec/configloader.ts
View File

@ -2,7 +2,7 @@ import fs from "fs"
import path from "path"
import { jsonFileNames } from "./devJsonFileNames";
const fileName = jsonFileNames.nam3Bear;
const fileName = jsonFileNames.namDrsquatch;
export async function loadDesignConfig() {
const filePath = path.join(process.cwd(), "config", fileName)

1
src/vibentec/devJsonFileNames.ts
View File

@ -2,4 +2,5 @@ export const jsonFileNames = {
steMedusaStarter: "ste.medusa-starter.design.json",
stePlayGround: "ste.playground.design.json",
nam3Bear: "nam.3bear.design.json",
namDrsquatch: "nam.drsquatch.design.json",
};