B4J Tutorial [Web][SithasoDaisy5] Designing an eCommerce Store That Thinks in Data – The SithasoDaisy5 eCommerce Story

Hi Fam



Intro music fades in
Host: (Mashy)

Welcome to the show. Today we’re unpacking something deceptively simple—but incredibly powerful: the data model behind an ecommerce store, more specifically, the SithasoDaisy5 eCommerce b4xtemplate, a modern store template inspired by DaisyUI’s online store concept—but reimagined through a structured, developer-first lens, powered by b4x and BANano.

This isn’t just about products. It’s about how data becomes experience.


Segment 1: The Product as a First-Class Citizen​


At the heart of SithasoDaisy5 eCommerce Store b4xtemplate is a clear philosophy:

Every product is a self-contained object with everything the UI needs—nothing more, nothing less.
Click to expand...

Each product isn’t just a name and a price. It’s a rich, composable entity:
  • Identity (id, slug)
  • Presentation (name, description, thumbnails, galleries)
  • Commerce (price, currency, formatted values, sale flags)
  • Merchandising (categories, bestsellers, trending, newarrival)
  • Variants (size, extendable to materials, colors, etc.)
  • Trust signals (availability, return policy, care instructions)
What’s clever here is that pricing logic is already UI-aware: you don’t calculate discounts in templates — you declare intent in data.

That makes this store:
  • predictable
  • cache-friendly
  • and trivial to port to other frontends later

Segment 2: Categories as Navigation and Meaning​


Categories in SithasoDaisy5 eCommerce store aren’t just filters.

They act as:
  • navigation targets
  • merchandising signals
  • and marketing hooks

  • A single tag like "trending" simultaneously drives:
  • hero banners
  • countdown offers
  • menu links
  • product grids

That’s powerful because it means one concept, many surfaces.

Instead of hard-coding pages like:

“Trending Page”, “Men’s Page”, “Sale Page”
Click to expand...

You let data decide what belongs where.

This mirrors how large ecommerce platforms scale without collapsing under template logic.


Segment 3: UI Sections as Declarative Data​


What really elevates SithasoDaisy5 eCommerce Store is how non-product UI is handled.

You don’t bake content into components. You define intent:

  • Hero items define campaigns
  • Featured items communicate store promises
  • Offers control urgency and countdowns
  • Footer links express site structure
Each section is:
  • data-driven
  • reorderable
  • replaceable

  • The UI becomes a renderer — not a decision-maker.
That’s a subtle shift, but it’s the difference between a template and a platform.


Segment 4: Why This Works So Well​


This structure works because it follows a few quiet but important rules:

  1. No derived state in UI
    Everything is pre-shaped for consumption.
  2. No implicit coupling
    Menus, categories, heroes, and products connect via shared IDs—not assumptions.
  3. Extensible by default
    Want reviews? Stock levels? Multi-currency?
    You add fields—no refactors.
  4. Framework-agnostic thinking
    Today it’s DaisyUI + Banano.
    Tomorrow it could be Web Components, Vue, or a mobile app.
This is what headless commerce looks like when stripped to its essentials.


Segment 5: Creative Thoughts — Where This Can Go​


Here’s where it gets exciting. With this model, you could easily add:
  • seasonal collections driven by date ranges
  • AI-curated “recommended for you” sections
  • CMS-style admin editing without changing UI code
  • multi-store theming using the same data contract
And because everything is already structured, you’re not fighting the system — you’re extending it. That’s the mark of a good data design.



Closing​


SithasoDaisy5 eCommerce b4xtemplate isn’t just a store template. It’s a data contract between intent and interface.

And when data is designed this thoughtfully, the UI becomes effortless — almost inevitable.

If you’re building ecommerce today, this is the direction forward: clean data, declarative UI, and zero guesswork.

Outro music fades out

Disclaimer: Generated with AI

Related Content:

[Web][SithasoDaisy5] eCommerce/Online Store b4xtemplate

Hi Fam Vercel Demo We are starting 2026 with a bang, a new SithasoDaisy5 eCommerce / Online Store b4xtemplate (for a certificate of appreciation) for all your eCommerce needs. This project has been inspired by the Online Store from the DaisyUI Store which is completely developed with NextJS...
www.b4x.com

[Web][SithasoDiasy5] eCommerce / Online Store b4xTemplate - Questions & Answers

Hi Fam Demo on Vercel We are starting 2026 with a bang, a new SithasoDaisy5 eCommerce / Online Store b4xtemplate (for a certificate of appreciation) for all your eCommerce needs. This thread is dedicated to all your Q&A in relation to the template. This project has been inspired by the Online...
www.b4x.com


 
Last edited:
Click to expand...

Mashiane

Expert
Licensed User
Longtime User
Now that we spoke a little about the data, let's see the data and its structure from the horses mouth. Here we go.



B4X: 
'Static code module
#IgnoreWarnings:12
Sub Process_Globals
End Sub

Sub Products As List
    Dim items As List
    items.Initialize
    '
    ' Product 1
    Dim p1 As ProductType
    p1.Initialize("1")
    p1.Name = "Grey Plain T-shirt"
    p1.Slug = "grey-plain-tshirt"
    p1.Description = "Sample description text"
    p1.ThumbUrl = "./assets/handsome-bearded-young-man-looking-camera-isolated-green_155003-26452.jpg"
    p1.LargeThumbUrl = "./assets/handsome-bearded-young-man-looking-camera-isolated-green_155003-26452.jpg"
    p1.Price = 4900
    p1.Currency = "USD"
    p1.PriceFormatted = "$49"
    p1.FromPrice = "4900"
    p1.ToPrice = ""
    p1.FromPriceFormatted = "$49"
    p1.ToPriceFormatted = ""
    p1.AddCategory(Array As String("menswear", "trending", "bestsellers", "tshirt"))
    p1.Sale = True
    p1.OriginalPrice = "$59"
    p1.AddVariant("size", "s", "")
    p1.AddVariant("size", "m", "")
    p1.AddVariant("size", "l", "")
    p1.AddVariant("size", "xl", "")
    p1.AddVariant("size", "xxl", "")
    'p1.AddVariant("material", "cotton", "")
    p1.Availability = True
    p1.AddImage("./assets/close-up-portrait-man-shirt-mockup_23-2149260918.jpg")
    p1.AddImage("./assets/close-up-portrait-man-shirt-mockup_23-2149260920.jpg")
    p1.AddImage("./assets/close-up-portrait-man-shirt-mockup_23-2149260915.jpg")
    p1.AddImage("./assets/close-up-portrait-man-shirt-mockup_23-2149260916.jpg")
    p1.AddImage("./assets/close-up-portrait-man-shirt-mockup_23-2149260914.jpg")
    p1.AddInfo("material", "Cotton")
    p1.AddInfo("care", "Machine Wash")
    p1.AddInfo("return_policy", "Easy returns & exchange upto 15 days of delivery.")
    items.Add(p1)

    ' Product 2
    Dim p2 As ProductType
    p2.Initialize("2")
    p2.Name = "Red Full Sleeve T-shirt"
    p2.Slug = "red-full-sleeve-tshirt"
    p2.Description = "Sample description text"
    p2.ThumbUrl = "./assets/young-man-sitting-small-stool-against-white-wall_231208-1174.jpg"
    p2.LargeThumbUrl = "./assets/young-man-sitting-small-stool-against-white-wall_231208-1174.jpg"
    p2.Price = 7900
    p2.Currency = "USD"
    p2.PriceFormatted = "$79"
    p2.FromPrice = ""
    p2.ToPrice = ""
    p2.FromPriceFormatted = ""
    p2.ToPriceFormatted = ""
    p2.AddCategory(Array As String("menswear", "bestsellers", "newarrival", "tshirt"))
    p2.Sale = False
    p2.OriginalPrice = ""
    p2.AddVariant("size", "s", "")
    p2.AddVariant("size", "m", "")
    p2.AddVariant("size", "xl", "")
    'p2.AddVariant("material", "cotton", "")
    p2.Availability = True
    p2.AddImage("./assets/close-up-portrait-man-shirt-mockup_23-2149260892.jpg")
    p2.AddImage("./assets/close-up-portrait-man-shirt-mockup_23-2149260888.jpg")
    p2.AddImage("./assets/close-up-portrait-man-shirt-mockup_23-2149260894.jpg")
    p2.AddInfo("material", "Cotton")
    p2.AddInfo("care", "Machine Wash")
    p2.AddInfo("return_policy", "Easy returns & exchange upto 15 days of delivery.")
    items.Add(p2)

    ' Product 3
    Dim p3 As ProductType
    p3.Initialize("3")
    p3.Name = "Black Hoddie"
    p3.Slug = "black-hoddie"
    p3.Description = "Sample description text"
    p3.ThumbUrl = "./assets/young-person-wearing-hoodie-mockup_23-2149246201.jpg"
    p3.LargeThumbUrl = "./assets/young-person-wearing-hoodie-mockup_23-2149246201.jpg"
    p3.Price = 7300
    p3.Currency = "USD"
    p3.PriceFormatted = "$73"
    p3.FromPrice = ""
    p3.ToPrice = ""
    p3.FromPriceFormatted = ""
    p3.ToPriceFormatted = ""
    p3.AddCategory(Array As String("womenswear", "trending", "bestsellers", "hoddie"))
    p3.Sale = False
    p3.OriginalPrice = ""
    p3.AddVariant("size", "s", "")
    p3.AddVariant("size", "l", "")
    p3.AddVariant("size", "xl", "")
    'p3.AddVariant("material", "cotton", "")
    p3.Availability = True
    p3.AddImage("./assets/young-person-wearing-hoodie-mockup_23-2149246201.jpg")
    p3.AddImage("./assets/young-person-wearing-hoodie-mockup_23-2149246196.jpg")
    p3.AddImage("./assets/young-person-wearing-hoodie-mockup_23-2149246212.jpg")
    p3.AddImage("./assets/young-person-wearing-hoodie-mockup_23-2149246215.jpg")
    p3.AddImage("./assets/young-person-wearing-hoodie-mockup_23-2149246214.jpg")
    p3.AddInfo("material", "Cotton")
    p3.AddInfo("care", "Machine Wash")
    p3.AddInfo("return_policy", "Easy returns & exchange upto 15 days of delivery.")
    items.Add(p3)

    ' Product 4
    Dim p4 As ProductType
    p4.Initialize("4")
    p4.Name = "Blazer Coat"
    p4.Slug = "blazer-coat"
    p4.Description = "Sample description text"
    p4.ThumbUrl = "./assets/portrait-young-japanese-woman_23-2148870711.jpg"
    p4.LargeThumbUrl = "./assets/portrait-young-japanese-woman_23-2148870711.jpg"
    p4.Price = 4900
    p4.Currency = "USD"
    p4.PriceFormatted = "$49"
    p4.FromPrice = ""
    p4.ToPrice = ""
    p4.FromPriceFormatted = ""
    p4.ToPriceFormatted = ""
    p4.AddCategory(Array As String("womenswear", "trending", "bestsellers", "coat"))
    p4.Sale = True
    p4.OriginalPrice = "$59"
    p4.AddVariant("size", "s", "")
    p4.AddVariant("size", "xl", "")
    'p4.AddVariant("material", "cotton", "")
    p4.Availability = True
    p4.AddImage("./assets/beautiful-fashion-woman-posing-with-elegant-suit_1328-3296.jpg")
    p4.AddImage("./assets/beautiful-fashion-woman-posing-with-elegant-suit_1328-3295.jpg")
    p4.AddImage("./assets/beautiful-fashion-woman-posing-with-elegant-suit_1328-3282.jpg")
    p4.AddInfo("material", "Cotton")
    p4.AddInfo("care", "Machine Wash")
    p4.AddInfo("return_policy", "Easy returns & exchange upto 15 days of delivery.")
    items.Add(p4)

    ' Product 5
    Dim p5 As ProductType
    p5.Initialize("5")
    p5.Name = "Black Coat"
    p5.Slug = "black-coat"
    p5.Description = "Sample description text"
    p5.ThumbUrl = "./assets/male-dancer-posing-sneakers-suit-without-shirt_23-2148417931.jpg"
    p5.LargeThumbUrl = "./assets/male-dancer-posing-sneakers-suit-without-shirt_23-2148417931.jpg"
    p5.Price = 8900
    p5.Currency = "USD"
    p5.PriceFormatted = "$89"
    p5.FromPrice = ""
    p5.ToPrice = ""
    p5.FromPriceFormatted = ""
    p5.ToPriceFormatted = ""
    p5.AddCategory(Array As String("menswear", "trending", "newarrival", "coat"))
    p5.Sale = False
    p5.OriginalPrice = ""
    p5.AddVariant("size", "s", "")
    p5.AddVariant("size", "m", "")
    p5.AddVariant("size", "l", "")
    p5.AddVariant("size", "xl", "")
    'p5.AddVariant("material", "cotton", "")
    p5.Availability = True
    p5.AddImage("./assets/young-handsome-businessman-black-shirt-black-suit_158595-4799.jpg")
    p5.AddImage("./assets/young-handsome-businessman-black-shirt-black-suit_158595-4784.jpg")
    p5.AddImage("./assets/young-handsome-businessman-black-shirt-black-suit_158595-4808.jpg")
    p5.AddImage("./assets/young-handsome-businessman-black-shirt-black-suit_158595-4782.jpg")
    p5.AddImage("./assets/young-handsome-businessman-black-shirt-black-suit_158595-4781.jpg")
    p5.AddInfo("material", "Cotton")
    p5.AddInfo("care", "Machine Wash")
    p5.AddInfo("return_policy", "Easy returns & exchange upto 15 days of delivery.")
    items.Add(p5)

    ' Product 6
    Dim p6 As ProductType
    p6.Initialize("6")
    p6.Name = "White Shirt"
    p6.Slug = "white-shirt"
    p6.Description = "Sample description text"
    p6.ThumbUrl = "./assets/serious-handsome-young-man-sitting-isolated_171337-10544.jpg"
    p6.LargeThumbUrl = "./assets/serious-handsome-young-man-sitting-isolated_171337-10544.jpg"
    p6.Price = 6200
    p6.Currency = "USD"
    p6.PriceFormatted = "$62"
    p6.FromPrice = ""
    p6.ToPrice = ""
    p6.FromPriceFormatted = ""
    p6.ToPriceFormatted = ""
    p6.AddCategory(Array As String("newarrival", "menswear", "shirt"))
    p6.Sale = True
    p6.OriginalPrice = "$72"
    p6.Availability = False
    p6.AddImage("./assets/analog-portrait-handsome-man-posing-artistically-outdoors_23-2149630142.jpg")
    p6.AddImage("./assets/analog-portrait-handsome-man-posing-artistically-outdoors_23-2149630138.jpg")
    p6.AddImage("./assets/analog-portrait-handsome-man-posing-artistically-outdoors_23-2149630136.jpg")
    p6.AddImage("./assets/analog-portrait-handsome-man-posing-artistically-outdoors_23-2149630144.jpg")
    p6.AddInfo("material", "Cotton")
    p6.AddInfo("care", "Machine Wash")
    p6.AddInfo("return_policy", "Easy returns & exchange upto 15 days of delivery.")
    items.Add(p6)

    ' Product 7
    Dim p7 As ProductType
    p7.Initialize("7")
    p7.Name = "Black Jacket"
    p7.Slug = "black-jacket"
    p7.Description = "Sample description text"
    p7.ThumbUrl = "./assets/handsome-guy_144627-5593.jpg"
    p7.LargeThumbUrl = "./assets/handsome-guy_144627-5593.jpg"
    p7.Price = 11900
    p7.Currency = "USD"
    p7.PriceFormatted = "$119"
    p7.FromPrice = ""
    p7.ToPrice = ""
    p7.FromPriceFormatted = ""
    p7.ToPriceFormatted = ""
    p7.AddCategory(Array As String("newarrival", "menswear", "bestsellers", "jacket"))
    p7.Sale = True
    p7.OriginalPrice = "$129"
    p7.AddVariant("size", "s", "")
    p7.AddVariant("size", "m", "")
    p7.AddVariant("size", "xl", "")
    'p7.AddVariant("material", "polyester", "")
    p7.Availability = True
    p7.AddImage("./assets/portrait-young-handsome-male_23-2148884392.jpg")
    p7.AddImage("./assets/cyclist-man-spending-time-with-his-bike_23-2148828190.jpg")
    p7.AddImage("./assets/afro-american-man-his-bicycle_23-2148828194.jpg")
    p7.AddInfo("material", "Polyester")
    p7.AddInfo("care", "Wash With Cold Water")
    p7.AddInfo("return_policy", "Easy returns & exchange upto 15 days of delivery.")
    items.Add(p7)

    ' Product 8
    Dim p8 As ProductType
    p8.Initialize("8")
    p8.Name = "Grey Coat"
    p8.Slug = "grey-coat"
    p8.Description = "Sample description text"
    p8.ThumbUrl = "./assets/young-woman-model-wearing-long-gray-coat_1303-21155.jpg"
    p8.LargeThumbUrl = "./assets/young-woman-model-wearing-long-gray-coat_1303-21155.jpg"
    p8.Price = 9500
    p8.Currency = "USD"
    p8.PriceFormatted = "$95"
    p8.FromPrice = ""
    p8.ToPrice = ""
    p8.FromPriceFormatted = ""
    p8.ToPriceFormatted = ""
    p8.AddCategory(Array As String("newarrival", "womenswear", "trending", "coat"))
    p8.Sale = False
    p8.OriginalPrice = ""
    p8.AddVariant("size", "s", "")
    p8.AddVariant("size", "m", "")
    p8.AddVariant("size", "l", "")
    p8.AddVariant("size", "xl", "")
    'p8.AddVariant("material", "polyester", "")
    p8.Availability = True
    p8.AddImage("./assets/portrait-young-japanese-woman-with-jacket_23-2148870732.jpg")
    p8.AddImage("./assets/portrait-young-japanese-woman-with-jacket_23-2148870737.jpg")
    p8.AddImage("./assets/portrait-young-japanese-woman_23-2148870716.jpg")
    p8.AddImage("./assets/portrait-young-japanese-woman-with-jacket_23-2148870725.jpg")
    p8.AddInfo("material", "Polyester")
    p8.AddInfo("care", "Wash With Cold Water")
    p8.AddInfo("return_policy", "Easy returns & exchange upto 15 days of delivery.")
    items.Add(p8)

    ' Product 9
    Dim p9 As ProductType
    p9.Initialize("9")
    p9.Name = "White Hoddie"
    p9.Slug = "white-hoddie"
    p9.Description = "Sample description text"
    p9.ThumbUrl = "./assets/female-model-posing-sportswear_23-2148872400.jpg"
    p9.LargeThumbUrl = "./assets/female-model-posing-sportswear_23-2148872400.jpg"
    p9.Price = 11900
    p9.Currency = "USD"
    p9.PriceFormatted = "$119"
    p9.FromPrice = ""
    p9.ToPrice = ""
    p9.FromPriceFormatted = ""
    p9.ToPriceFormatted = ""
    p9.AddCategory(Array As String("newarrival", "womenswear", "trending", "hoddie"))
    p9.Sale = True
    p9.OriginalPrice = "$129"
    p9.Availability = False
    p9.AddImage("./assets/young-person-wearing-hoodie-mockup_23-2149246233.jpg")
    p9.AddImage("./assets/young-person-wearing-hoodie-mockup_23-2149246232.jpg")
    p9.AddImage("./assets/young-person-wearing-hoodie-mockup_23-2149246234.jpg")
    p9.AddInfo("material", "Cotton")
    p9.AddInfo("care", "Machine Wash")
    p9.AddInfo("return_policy", "Easy returns & exchange upto 15 days of delivery.")
    items.Add(p9)

    ' Product 10
    Dim p10 As ProductType
    p10.Initialize("10")
    p10.Name = "Black T-shirt"
    p10.Slug = "black-tshirt"
    p10.Description = "Sample description text"
    p10.ThumbUrl = "./assets/close-up-portrait-man-shirt-mockup_23-2149260951.jpg"
    p10.LargeThumbUrl = "./assets/close-up-portrait-man-shirt-mockup_23-2149260951.jpg"
    p10.Price = 5900
    p10.Currency = "USD"
    p10.PriceFormatted = "$59"
    p10.FromPrice = ""
    p10.ToPrice = ""
    p10.FromPriceFormatted = ""
    p10.ToPriceFormatted = ""
    p10.AddCategory(Array As String("menswear", "bestsellers", "tshirt"))
    p10.Sale = False
    p10.OriginalPrice = ""
    p10.AddVariant("size", "s", "")
    p10.AddVariant("size", "m", "")
    p10.AddVariant("size", "l", "")
    p10.AddVariant("size", "xl", "")
    'p10.AddVariant("material", "cotton", "")
    p10.Availability = True
    p10.AddImage("./assets/sensual-portrait-handsome-muscular-young-african-american-model-slim-gray-jeans-plain-black-cotton-t-shirt-standing-white-wall_346278-1018.jpg")
    p10.AddImage("./assets/dreamy-athletic-relaxed-black-young-man-wearing-torn-jeans-unlabeled-black-t-shirt-sitting-small-stool-white-wall_346278-1009.jpg")
    p10.AddImage("./assets/full-body-portrait-young-african-american-model-unlabeled-black-cotton-t-shirt-jeans-sitting-black-chair-with-white-walls_346278-1012.jpg")
    p10.AddImage("./assets/smiling-athletic-young-african-american-man-blank-black-cotton-t-shirt-jeans-sitting-white-wall_346278-1019.jpg")
    p10.AddImage("./assets/moving-playful-athletic-black-model-with-afro-wearing-blank-black-t-shirt-grey-skinny-jeans-white-wall_346278-1030.jpg")
    p10.AddInfo("material", "Cotton")
    p10.AddInfo("care", "Machine Wash")
    p10.AddInfo("return_policy", "Easy returns & exchange upto 15 days of delivery.")
    items.Add(p10)

    Return items
End Sub


Sub SiteData As Map
    Dim sd As Map = CreateMap()
    sd.Put("siteTitle", "SD5 eCommerce Store")
    sd.Put("siteDescription", "Welcome to SD5 eCommerce Store, start shopping now!")
    Return sd
End Sub   

'these are menu items in the navigation bar and side drawer
Sub MenuItems As List
    Dim shopMenu As List
    shopMenu.Initialize
    shopMenu.Add(CreateMap("id": "bestsellers", "title": "Best Sellers", "type":"normal"))
    shopMenu.Add(CreateMap("id": "menswear", "title": "Men's Wear", "type":"normal"))
    shopMenu.Add(CreateMap("id": "womenswear", "title": "Women's Wear", "type":"normal"))
    '
    Dim children As List
    children.Initialize
    children.Add(CreateMap("id":"tshirt", "title": "T-shirt"))
    children.Add(CreateMap("id":"shirt", "title": "Shirt"))
    children.Add(CreateMap("id":"hoddie", "title": "Hoddie"))
    children.Add(CreateMap("id":"jacket", "title": "Jacket"))
    children.Add(CreateMap("id":"coat","title": "Coat"))
    '
    shopMenu.Add(CreateMap("id": "shop", "title": "Shop", "type":"dropdown", "items": children))
    shopMenu.Add(CreateMap("id": "trending", "title": "Trending Collections", "type":"normal", "short":"Trending"))
    Return shopMenu
End Sub

'these are the items showing in the hero card (main swiper)
Sub HeroItems As List
    Dim Items As List
    Items.Initialize
    Items.Add(CreateMap("id":"newarrival", _
    "short":"New Arrivals", _
    "title": "Level Up Your Style With Our New Arrivals", _
    "image":"./assets/hero-1.jpg", _
    "desc": "Discover the latest trends crafted for your unique style. Elevate your wardrobe with pieces that redefine elegance."))
    '
    Items.Add(CreateMap("id":"menswear", _
    "short":"Men's Wear", _
    "title": "Exclusive Men's Wear Collections", _
    "image": "./assets/hero-2.jpg", _
    "desc": "Upgrade your wardrobe with our exclusive menswear collection. Find timeless styles crafted For every occasion."))
    '
    Items.Add(CreateMap("id":"womenswear", _
    "short":"Women's Wear", _
    "title": "Exclusive Women's Wear Collections", _
    "image": "./assets/hero-3.jpg", _
    "desc": "Discover stylish And exclusive womenswear For every occasion. Feel confident And look your best effortlessly."))
   
    Return Items
End Sub


Sub FeaturedItems As List
    Dim items As List
    items.Initialize
    '
    items.Add(CreateMap("id":"freeshipping", _
    "title": "Free Shipping", _
    "desc": "Free shipping on order above $100", _
    "icon": "./assets/freeshipping.svg"))
    '
    items.Add(CreateMap("id":"payments", _
    "title": "Flexible Payments", _
    "desc": "Pay with multiple credit cards", _
    "icon": "./assets/payments.svg"))
    '
    items.Add(CreateMap("id":"easyreturn", _
    "title": "Easy Return", _
    "desc": "15 Days easy return", _
    "icon": "./assets/easyreturn.svg"))
    '
    items.Add(CreateMap("id":"newarrivals", _
    "title": "New Arrivals Everyday", _
    "desc": "We update our collection everyday", _
    "icon": "./assets/newarrivals.svg"))
   
    Return items
End Sub



'these are items to show in the categories card
Sub Categories As List
    Dim items As List
    items.Initialize
    '
    items.Add(CreateMap("id":"bestsellers", _
    "name": "Best Sellers", _
    "image": "./assets/millennial-fashion-couple-white-studio_158595-5457.jpg", _
    "slug": "bestsellers", _
    "featured": True))
    '
    items.Add(CreateMap("id":"menswear", _
    "name": "Men's Wear", _
    "image": "./assets/low-angle-boy-holding-cassette_23-2148478735.jpg", _
    "slug": "menswear", _
    "featured": True))
    '
    items.Add(CreateMap("id":"womenswear", _
    "name": "Women's Wear", _
    "image": "./assets/elegant-fashionable-woman-white-jacket-dress-posing-ankle-boot-black-leather-full-length_273443-3841.jpg", _
    "slug": "womenswear", _
    "featured": True))
    '
    items.Add(CreateMap("id":"trending", _
    "short": "Trending", _
    "name": "Trending Collections", _
    "image": "./assets/young-japanese-couple_23-2148870759.jpg", _
    "slug": "trending", _
    "featured": True))
   
    Return items
End Sub


'these are the details that will show on the offer card
Sub Offer As Map
    Dim offerBannerData As Map
    offerBannerData.Initialize
    offerBannerData.Put("endDate", "2026-01-05T23:59:00.000000Z")
    offerBannerData.Put("badge", "LIMITED TIME OFFER")
    offerBannerData.Put("title", "50% Off On All Trending Collections")
    offerBannerData.Put("countdownHeader", "Hurry Up! Offer Ends In")
    offerBannerData.Put("buttonText", "Shop Now")
    offerBannerData.Put("link", "trending")
    Return offerBannerData
End Sub

Sub FooterItems As List
    Dim items As List
    items.Initialize
    '
    Dim links As List
    links.Initialize
    links.add(CreateMap("id":"menswear", "name": "Men's Wear"))
    links.Add(CreateMap("id":"womenswear", "name": "Women's Wear"))
    links.Add(CreateMap("id":"trending", "name": "Trending Collections", "short":"Trending"))
    links.Add(CreateMap("id":"bestsellers", "name": "Best Sellers"))
    items.Add(CreateMap("title": "Collections", "links": links))
    '
    Dim links2 As List
    links2.Initialize
    links2.Add(CreateMap("id":"about", "name": "About Us"))
    links2.Add(CreateMap("id":"contact", "name": "Contact Us"))
    items.Add(CreateMap("title": "Pages", "links":links2))
    '
    Dim links3 As List
    links3.initialize
    links3.Add(CreateMap("id":"terms", "name": "Terms of Service"))
    links3.Add(CreateMap("id":"privacy", "name": "Privacy Policy"))
    links3.Add(CreateMap("id":"cookies", "name": "Cookie Policy"))
    items.Add(CreateMap("title": "Legal", "links":links3))
    Return items
End Sub

This is all that one needs to change with own store content to have their own store UI up and running.

#SharingTheGoodness.
 

JhoeyBoy

Member
Licensed User
Longtime User
Is it possible that the data will be pulled from the database on mysql or sql server? both pictures and other detail information?
 

B4XDev

Active Member
Licensed User
How easy is it to integrate sales with Quickbooks Online? Maybe thru Zapier or some other similar solution? How are payments handled? (Can I use Stripe for payments? Bitcoin?)
 

Mashiane

Expert
Licensed User
Longtime User
B4XDev said:
How easy is it to integrate sales with Quickbooks Online? Maybe thru Zapier or some other similar solution? How are payments handled? (Can I use Stripe for payments? Bitcoin?)
Click to expand...
Hi @B4XDev , good question. I am investigating Stripe via Paystack in South Africa as we can't have a direct Stripe Account over here. I am yet to use Quickbooks and will check that out also. Having used Zapier and PowerAutomate perhaps possible. Will have to investigate other possibilities.

The b4xtemplate is mainly UI so I need to think deeply about the back-end and other integrations and would rather opt for a jServer/jetty (BANanoServer) approach to that with REST API.
 
You must log in or register to reply here.

Similar Threads

  • Article
Share My Creation [Web][SithasoDaisy5] eCommerce/Online Store b4xtemplate
Replies
8
Views
1K
Mashiane
  • Question
B4J Question [Web][SithasoDiasy5] eCommerce / Online Store b4xTemplate - Questions & Answers
Replies
13
Views
1K
Mashiane
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…