/
home
/
obinna
/
html
/
mixchief_app
/
templates
/
Default
/
Upload File
HOME
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MixChief Order Checkout</title> <link rel="stylesheet" href="{{ asset('css/checkout.css') }}"> <link rel="shortcut icon" href="{{ asset('images/mixchief-logo.png') }}"> </head> <body> <script> function getOrderItems() { const items_string = localStorage.getItem('items') if (items_string !== null) { try { // console.log({items_string}) return JSON.parse(items_string) } catch (e) { {} } } return {} } let orderItems = getOrderItems(); // redirect to home if no items in cart if (Object.keys(orderItems).length === 0) { window.location.href = '/'; } </script> <nav> <div class="nav-content"> <a href="/"><img src="{{ asset('images/mixchief-logo.png') }}" alt="MixChief Logo"></a> </div> </nav> <header> <h3>Checkout</h3> </header> {% if error %} <div class="error-message"> <p>{{ error }}</p> </div> {% endif %} <main> <section class="checkout-form"> <form class="order-form" action="{{ path('postCheckout') }}" method="post"> <input type="hidden" name="token" value="{{ csrf_token('checkout') }}"> <h5>Contact information</h5> <div class="form-control"> <label for="checkout-email">E-mail</label> <div> <span class="fa fa-envelope"></span> <input type="email" id="checkout-email" name="email" placeholder="Enter your email..." required> </div> </div> <div class="form-control"> <label for="phone">Phone</label> <div> <span class="fa fa-phone"></span> <input type="tel" name="phone" id="phone" placeholder="Enter you phone..." required> </div> </div> <br> <h5>Delivery Information</h5> <p class="delivery-notice"><em>We currently only offer delivery services to Victoria Island, Ikoyi, and Lekki Phase 1. Stay tuned for updates as we plan to expand our delivery locations soon. We apologize for any inconvenience.</em></p> <div class="form-control"> <label for="checkout-name">Full name</label> <div> <span class="fa fa-user-circle"></span> <input type="text" id="checkout-name" name="name" placeholder="Enter you name..." required> </div> </div> <div class="form-control"> <label for="checkout-address">Address</label> <div> <span class="fa fa-home"></span> <input type="text" name="address" id="checkout-address" placeholder="Your address..." required> </div> </div> <div class="form-control"> <label for="landmark">Closest landmark</label> <div> <span class="fa fa-building"></span> <input type="text" name="landmark" id="landmark" placeholder="Closest landmark..."> </div> </div> <div class="extra-inputs"></div> <div class="form-control-btn"> <a href="/"><<< Continue Shopping</a> <button>Proceed to Pay >>></button> </div> </form> </section> <section class="checkout-details"> <div class="checkout-details-inner"> <div class="checkout-lists"> </div> <div class="checkout-shipping"> <p>Delivery</p> <p>₦<span class="delivery-amount"></span></p> </div> <div class="checkout-total"> <h5>Total</h5> <p class="order-items-total-price">₦<span class="order-total"></span></p> </div> </div> </section> </main> <footer> <!-- <p>Created by - <a href="https://vetri-suriya.web.app/"><span>Vetri Suriya</span></a></p> --> </footer> <script> async function initMap() { var input = document.getElementById('checkout-address'); var ne = new google.maps.LatLng(parseFloat(6.944694), parseFloat(5.158188)); var sw = new google.maps.LatLng(parseFloat(6.371805), parseFloat(2.712062)); var bounds = new google.maps.LatLngBounds(sw, ne); var autocomplete = new google.maps.places.Autocomplete(input, {bounds}); autocomplete.addListener('place_changed', function() { var place = autocomplete.getPlace(); console.log(place); }) } const delivery = { amount: 1500 } function deleteItem(id) { const orderItems = JSON.parse(localStorage.getItem('items')); delete orderItems[id]; localStorage.setItem('items', JSON.stringify(orderItems)) listItems(orderItems) } const orderItemTemplate = (item) => ` <div class="card" data-index="${item.index}" style="position: relative"> <div class="card-image"><img src="${item.image || '/images/no-image.png'}" alt=""></div> <div class="card-details"> <div class="card-name">${item.name}</div> <div class="card-price">₦${item.price}</div> <div class="card-wheel"> <button class="minus">-</button> <span>${item.quantity}</span> <button class="plus">+</button> </div> </div> <button class="delete-item" onclick="deleteItem(${item.index})"> <img src="/images/delete_garbage.svg" style="width: 14px;" alt="delete icon"> <span>REMOVE</span> </button> </div> ` document.addEventListener('DOMContentLoaded', function(e) { const orderItems = JSON.parse(localStorage.getItem('items')); const orderItemsArray = Object.keys(orderItems) const itemsObj = {}; // get items from server fetch('/api/items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(orderItemsArray) }) .then(res => res.json()) .then(data => { // console.log({data}) data.items.forEach(item => { itemsObj[item.index] = {...item, quantity: orderItems[item.index].quantity}; }) localStorage.setItem('items', JSON.stringify(itemsObj)) listItems(itemsObj); }) }) function listItems(orderItems) { document.querySelector('.checkout-lists').innerHTML = Object.keys(orderItems).map(i => { return orderItemTemplate(orderItems[i]) }).join(""); document.querySelector('.delivery-amount').innerHTML = delivery.amount; document.querySelector('.order-total').innerHTML = calculateTotal(orderItems) + delivery.amount; document.querySelector('.extra-inputs').innerHTML = ""; Object.keys(orderItems).forEach(i => { const itemInput = document.createElement('input'); const quantityInput = document.createElement('input'); const item = orderItems[i]; quantityInput.type = 'hidden'; quantityInput.name = 'quantity[]'; quantityInput.value = item.quantity; itemInput.type = 'hidden'; itemInput.name = 'item[]'; itemInput.value = i; document.querySelector('.extra-inputs').appendChild(quantityInput); document.querySelector('.extra-inputs').appendChild(itemInput); }) } function calculateTotal(orderItems) { if (orderItems) { return Object.keys(orderItems).reduce((acc, curr) => { return acc + (orderItems[curr].price * orderItems[curr].quantity) }, 0); } else { return 0; } } document.querySelector('.checkout-lists').addEventListener('click', function(e) { const orderItems = JSON.parse(localStorage.getItem('items')); console.log({ds: orderItems}) let total = 0; if (e.target.classList.contains('plus')) { const id = e.target.closest('.card').dataset.index; orderItems[id].quantity += 1; total = calculateTotal(orderItems); } if (e.target.classList.contains('minus')) { const id = e.target.closest('.card').dataset.index; if (orderItems[id].quantity > 1) { orderItems[id].quantity -= 1; } else { delete orderItems[id]; } total = calculateTotal(orderItems); } listItems(orderItems); localStorage.setItem('items', JSON.stringify(orderItems)) }) </script> <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyBISKqcMjACxak-wr_0loOs7YG2y-GU8&libraries=places&callback=initMap"></script> </body> </html>