B4J Tutorial [Web][SithasoDaisy] Creating a Product Listing

Hi

By the end of this tutorial, you will be able to create this output.

1. We use a grid with 3 columns so that we can have each product.

Code Module is: pgBasicCardsMultiple on the SithasoDaisyDemo App.

Add a SDUIPage in a layout and set these properties. Other properties should be blank/unchecked

• Set the page name to be basiccards
• Set Gap = 3
• Grid should be checked
• Grid Cols = 1
• Set Device Grid Cols = xs=?; sm=12; md=3; lg=3; xl=3
• Set Paddings = a=5; x=?; y=?; t=?; b=?; l=?; r=?

We then create the layout for the product. We will use a single layout and then use BANano.LoadLayoutArray

we call this layout, eachcardlayout. This is the basic card layout.

Please note the settings for the controls.

 

[Mashiane]

The next step is to get our product listing and then update each product in our form.
This will happen when we build the page.

'start building the page
private Sub BuildPage
    app.PagePause
    'load the page layout to the pageviewwe
    banano.LoadLayout(app.PageViewer, "basiccardslayoutmultiple")
    'define our products, these can be obtained from the database
    Dim items As List
    items.Initialize
    items.Add(CreateMap("id":1, "title":"Puss in Boots", "description":"Product 1", "price":299.00, "img":"./assets/m1.jpg"))
    items.Add(CreateMap("id":2, "title":"Dragon Hunting", "description":"Product 2", "price":99.00, "img":"./assets/m2.jpg"))
    items.Add(CreateMap("id":3, "title":"Avengers Infinity War", "description":"Product 3", "price":399.00, "img":"./assets/m3.jpg"))
    items.Add(CreateMap("id":4, "title":"Bumble Bee", "description":"Product 4", "price":499.00, "img":"./assets/m4.jpg"))
    items.Add(CreateMap("id":5, "title":"Fast n Furious 6", "description":"Product 5", "price":599.00, "img":"./assets/m5.jpg"))
    items.Add(CreateMap("id":6, "title":"Avatar", "description":"Product 6", "price":699.00, "img":"./assets/m6.jpg"))
    items.Add(CreateMap("id":7, "title":"Die Hart", "description":"Product 7", "price":199.00, "img":"./assets/m7.jpg"))
    items.Add(CreateMap("id":8, "title":"Blood Shot", "description":"Product 8", "price":98.00, "img":"./assets/m8.jpg"))
    '
    'load each card using banano loadlayoutarray
    For Each item As Map In items
        Dim Ret As Long
        Dim AllViews As Map
           'load each generic product
        Ret = banano.LoadLayoutArray("#basiccards", "eachcardlayout", False)
        'get all the views in the layout
        AllViews = banano.GetAllViewsFromLayoutArray(Me, "eachcardlayout", Ret)
        'get the image layout
        Dim img1 As SDUIImage = AllViews.Get("img1")
        'assign the product image from the list
        img1.Src = item.Get("img")
        'get the title & update it
        Dim title1 As SDUICardTitle = AllViews.Get("title1")
        title1.Caption = item.Get("title")
        Dim p1 As SDUILabel = AllViews.Get("p1")
        p1.Caption = item.Get("description")
        'get the buy button and set its tag to be the product
        Dim buy1 As SDUIButton = AllViews.Get("buy1")
        buy1.Tag = item
        'add a click event to the button
        buy1.On("click", Me, "buy_click")
        'get and update the price badge
        Dim price1 As SDUIBadge = AllViews.Get("price1")
        price1.Caption = "R " & SDUIShared.NiceMoney(item.Get("price"))
        'get the wish button and assign the product
        Dim wishlist1 As SDUIButton = AllViews.Get("wishlist1")
        wishlist1.Tag = item
        'assign a click event to the wish button
        wishlist1.On("click", Me, "wishlist_click")
        'set color to red
        wishlist1.HoverBGColor = "#ff0000"
        wishlist1.BGColor = "#ff0000"
    Next
    app.PageResume
End Sub

 

[Mashiane]

We also want to trap the click button of the wishlist and buy buttons.

We have defined 2 events for fhis, wishlist_click and buy_click

'when a wish button is clicked
Sub wishlist_click(e As BANanoEvent)
    e.PreventDefault
    'get the sender
    Dim btnWish As SDUIButton = Sender
    'get the tag from the button
    app.ShowSwal("Wish: " & banano.ToJson(btnWish.Tag))
End Sub

'when the buy button is clicked
Sub buy_click(e As BANanoEvent)
    e.PreventDefault
    'get the sender
    Dim btnBuy As SDUIButton = Sender
    'get the tag
    app.ShowSwal("Buy: " & banano.ToJson(btnBuy.Tag))
End Sub

We get the clicked buttons by getting the sender, which is the SDUIButton and then get its tag property.

We can then process the next steps of what we want to do with the wish / buy click.

Enjoy

!Check this on the updated SithasoDaisy Demo WebApp.

 

[Mashiane]

Related Content:

SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)

https://www.b4x.com/android/forum/threads/sithasodaisy-drawer-item-management-conditional-visibility.148436/

www.b4x.com