School project to create a modern webshop
by Sven Eichelberg, Henrik L. Hermann und Paul Schröder
SF-Bernieware is the renewal of the old redundant BRG webshop under the managment of the school firm Bernieware. The goal is to create a functional, modern, intuitive webshop using only pure HTML, CSS, JS. The limitations are:
- Avoiding over-useage of HTML div elements
- Using only let type variables
- Using only arrow functions
- Only using AI when reasonable
SF-Bernieware currently is a full stack consisting of a standard front end, composed of HTML sites, styled using CSS and given functionality using standard JS and a node.js based back end.
To save the available products, the known users and the orders we used CSV,TSV and generic .list files.
-
Main site containing all categories of products available and all information about Bernieware, as well as the school contact details.
-
Shows all products matching the selected category or search query and filters. Depending on the amount of unique product properties allows for filtering by:
- type
- fit
- main color
- motive
- price range
-
Shows the details of the selected products, foremost the description. Also allows for switching to related products.
-
WIP
-
Defines how the detail view of each product should be styled
-
Defines how the main page should be styled
-
Supplies styling information, that all pages have in common, is referenced in all other CSS sheets
-
Defines how the overview should be styled
-
WIP
-
Allows for user to add, remove, clear all and display items in their virtual shooping cart. Opens on PC by hovering over the icon, on mobile devices with a tap to the icon.
-
Checks the user preferences of the device if dark mode is selected, if so, changes CSS root variables depending on state.
-
Fetches the information about the selected product from the CSV and fills it into the webpage, also checks for similar products, which the user is able to select.
-
Fetches all products from the CSV and fills the page with them. Also checks for available filters and possible filter values, dynamically creating the filters depending on the contents of the CSV.
-
Fetches the available categories and their images from the node.js back end to dynamically create the category selection field on the page.
-
Allows the user to submit an order through a form, which is then sent to the node.js back end using POST to be handled there. Also dynamically generates a table from the contents of the cart. Can be accessed by tapping the green button in the cart pop-up.
-
Allows the user to search by passing the search term to the gen.js script and displaying the fetched products on a sub.html. Can be accessed by clicking on the magnifying glass icon.
-
Stores the global settings, such as back end server adress and websocket adress.
-
Stores all products as a simple table sorted by ID.
ID CATEGORY TYPE FIT MAIN COLOR MOTIVE ACCENT COLOR AVAILABLE SIZES PRICE IMAGE LOCATION DESCRIPTION BACKSIDE 1 Kleidung Hoodie Unisex Rot Hände Blau XS/S/M/L/XL/XXL 35€ Medien/Kleidung/Haende/ ... j -
Stores the orders in a simple table sorted by the time the order has been received.
UUID SURNAME NAME CLASS EMAIL ADRESS ORDERS 6cf17a40-d7ff-4e98-a778-4a710a17b499 Ruben von Albersmann IV 3a ruben-abs@web.de {"data":["{"id":"93","type":"Teddy","size":"","amount":1,"price":"26€"}"]}
-
Handles all requests made to the backend, like the categories and products available, saves orders and updates the admin-view using the ws framework.
For features currently in development or to be developed in the near future see the GitHub issues section
SF-Bernieware seeks to be modern, intuitive, inclusive and efficient. The usage should be easy for each and every user and also for the admin. This should be achieved through a intuitive GUI for browsing, filtering and ordering and for adding new products, as well as viewing orders created by the shoppers. This could and may in the future even be achieved through a BernieWare admin Android/IOS Application, or at least a Web applet.