Client side product list with filtering

Discussion in 'HTML & Website Design' started by malana, Jul 23, 2023.

  1. #1
    I need to create a web page that has similar functionality as Amazon. Basically, it will list a few dozen products. On the left side there need to be filters. Lets assume the products are PCs. So it will list for instance 30 PCs. Then on the left I can filter on price range, size of SSD (multiple selections possible), size of memory (multiple selections possible), etc Ideally, when a filter option doesn't apply anymore due to previous selected filters, those filter options are grayed out.

    All of this has to be local, i.e. without talking to some web server. The products and their properties can be coded within the HTML page or in an external (XML) file. Same goes for the filters, i.e. they can be hard-coded in the HTML page. Same for css. The page needs to look reasonably attractive but shouldn't be completely bloated and again, must run without contacting some server.

    Should I just use plain HTML with css and JavaScript or use some client side framework like bootstrap? I tried to google for some project that does something like that but 1+h search didn't bring up anything good. I would also be fine purchasing a book if part of the book is building just such a web page.
     
    malana, Jul 23, 2023 IP
  2. kennedygitahi

    kennedygitahi Active Member

    Messages:
    48
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    63
    Articles:
    2
    #2
    You can extend this if you know how to write JavaScript
    https://www.freecodecamp.org/news/how-to-add-filtering-functionality-to-your-application/

    Or this if you want to work with PHP. (Yes, I know you said you do not want to fectch from a web server. This is just an alternative)
    https://www.webslesson.info/2021/10/php-project-how-to-create-ecommerce-product-filter-with-pagination-using-vanilla-javascript.html
     
    kennedygitahi, Jul 24, 2023 IP