InitialCommit

2026-05-12 13:17:44 +01:00
commit 4847365f99
18 changed files with 684 additions and 0 deletions
@@ -0,0 +1,55 @@
+/* no CSS is needed for this but this just gives it structure */
+.VFlexBox{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+}
+.CartContainer{
+    width: 100vw;
+    min-height: 50vh;
+    margin-top: 10vh;
+}
+.ExampleText{
+    font-size: 4vh;
+    font-family: Arial,serif;
+    font-weight: normal;
+    text-align: center;
+}
+.ExampleText2{
+    font-size: 4vh;
+    font-family: "Monotype",serif;
+    font-weight: bold;
+    text-align: center;
+}
+.ExampleButton:hover{
+    color:white;
+    background-color: black;
+    transform: scale(1.1);
+}
+.ExampleButton{
+    color:black;
+    background-color: white;
+    transition: 0.25s;
+    cursor: pointer;
+    width: 10vw;
+    height: 5vh;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    text-align: center;
+}
+
+
+/*Not needed but is good for setting up the web page */
+*{
+    box-sizing: border-box;
+    margin:0;
+    padding:0;
+    border:1px black solid; /*set this to none in the actual site if you dont plan on a border */
+    background-color: transparent;
+}
+body{
+    max-width: 100vw;
+    overflow-x:hidden;
+}
@@ -0,0 +1,18 @@
+<head>
+  <link rel="stylesheet" href="CartCSS.css">
+</head>
+
+<script src="CartManager.js"></script>
+<!-- load what's in cart -->
+<div class="CartContainer VFlexBox" id="CartContainer">
+    <script>
+        LoadWhatsInCart(document.getElementById('CartContainer'));
+    </script>
+</div>
+
+<!-- Button to add something to cart -->
+<div class="VFlexBox">
+  <p class="ExampleText">SomeItem</p>
+  <!-- the first value in the AddToCart function is the actual cart item itself, you can load these with JS or just do it manually like here -->
+  <button class="ExampleButton" id="CartButton1" onclick="AddToCart('Name=SuperAwesomeItem&Description=EpicDescription&Delivery=NextDay&Price=£30','CartButton1','ProductCategory1');">Add to Cart</button>
+</div>
@@ -0,0 +1,39 @@
+function AddToCart(object, buttonID, type){
+    if(object !== "null" && object !== null) {
+        if (sessionStorage.getItem("CartObjects") === null || sessionStorage.getItem("CartObjects") === '' || !sessionStorage.getItem("CartObjects").includes(object)) {
+            sessionStorage.setItem("CartObjects", sessionStorage.getItem("CartObjects") + "?Type=" + type + "&" + object);
+        }
+        document.getElementById(buttonID).classList.add("ClickedBtn");
+        document.getElementById(buttonID).innerHTML = 'Added <img alt="" class="NavIcon" src="/Assets/Icons/shopping-cart-solid.svg" style=" margin:0 0.5vh; width: 4vh; height: 4vh;">'
+        document.getElementById(buttonID).onclick = null;
+    }
+}
+
+function LoadWhatsInCart(SourceContainer){
+    if(sessionStorage.getItem("CartObjects") !== null && sessionStorage.getItem("CartObjects") !== ''){
+        let CartItems = sessionStorage.getItem("CartObjects").split("?");
+        for(let i = 0; i < CartItems.length; i++){
+           if(CartItems[i] !== null && CartItems[i] !== "null" && CartItems[i] !== '') {
+               let ElementToDisplay = "<div class='VFlexBox'  id='CartListing" + i + "' style='margin:2vh;'>"
+               let ItemsInsideCart = CartItems[i].split("&");
+               for (let Item = 0; Item < ItemsInsideCart.length; Item++) {
+                   let Variable = ItemsInsideCart[Item].split("=");
+                   ElementToDisplay += "<div class='HFlexBox'><p class='ExampleText'>" + Variable[0] + ":</p>"
+                   ElementToDisplay += "<p class='ExampleText2'>&emsp;" + Variable[1] + "</p></div>";
+               }
+               ElementToDisplay += '<button class="ExampleButton" onclick="RemoveFromCart(' + "'" + CartItems[i] + "','" + i + "'" + ');">Remove</button></div>';
+               SourceContainer.innerHTML += ElementToDisplay;
+           }
+        }
+    }
+}
+function RemoveFromCart(object, index){
+    if(sessionStorage.getItem("CartObjects").includes(("?" + object))) {
+        sessionStorage.setItem("CartObjects", sessionStorage.getItem("CartObjects").replace(("?" + object), ""));
+    }
+    let buttonID = "CartListing" + index;
+    let ListingID = "CartListing" + index;
+    document.getElementById(buttonID).onclick = null;
+    document.getElementById(buttonID).remove();
+    document.getElementById(ListingID).remove();
+}