implement single page application in orders dashboard
I have a shop page and when I click on "My Orders", it brings me to the orders page. And within that page, I have different tab or filter where it looks like a typical dashboard order page.
All Orders Order Status Open Orders ........etc
It returns All Orders by default and if I click on Order Status tab, it should loads dynamic data based on what I desired. Now the way I do it is to implement href on it and of course it works but it's basically loading a new page.
I am not using any front-end framework so SPA is out of the question. Rather I was wondering would it be possible if I want to implement the same functionality without reloading the page.
The Order dashboard all share the same navigation ,footer and sidebar with the content of each tab only being different. I figured the only way is to use jquery AJAX as I am not so familiar with it.
Are there any other possible alternatives?
Just for reference:
This is my Order Blade (returns ALL Orders view):
@extends('layouts.management.main-customer')
@section('content')
<div class="mt-3" style="min-height: 100vh;">
<div class="container" style="margin-top: 50px;">
<div class="row">
<div class="col-md-9 mt-4">
<h3 style="font-size:40px; font-family: Nunito;"><strong>Value Records</strong></h3>
</div>
<div class="col-md-3 mt-5"><strong>3</strong> orders placed in
<select style="background-color:lightgrey" name="year">
<option value="year">2020 </option>
<option value="year">2019 </option>
<option value="year">2018 </option>
</select>
</div>
</div>
<div class="container-fluid" style="margin-top:20px;">
<a href="/shop/dashboard/orders/index" class="orders-text-style " style="border-bottom: 2px solid rgb(250, 172, 24);"><i><strong>All
Orders</strong></i></a>
<a href="#" class="orders-text-style"><i><strong>Open Orders</strong></i></a>
<a href="/shop/dashboard/orders/orders-status" class="orders-text-style"><i><strong>Order Status</strong></i></a>
<a href="#" class="orders-text-style"><i><strong>Return Orders</strong></i></a>
<a href="#" class="orders-text-style"><i><strong>Pending Star Ratings</strong></i></a>
</div>
<hr>
<div class="card shadow-sm">
<div class="card-body">
@foreach($purchases as $purchase)
<h4 style="font-weight:bold; color:rgb(250, 172, 24);">Purchase #: {{ $purchase->purchase_number }}</h4>
@foreach($purchase->orders as $order)
<table class="table ">
<tr style="background-color:rgba(0, 0, 0, 0.05);">
<td style="font-weight: bold;">
<div> Order #:{{ $order->order_number }}</div>
<div> Order Date:{{ $purchase->purchase_date }}</div>
</td>
<td style="font-weight: bold;">
<div>Courier Service: xxxxxxxx</div>
<div>WayBill No: xxxxxxxxx</div>
</td>
<td style="font-weight: bold;">
<div>Order Total: <?php echo 'RM ' . number_format(($order->order_amount / 100), 2); ?>
</div>
<div>Order Status: {{$order->order_status}}</div>
</td>
<td style="">
<div><a href="/orders/invoice/{{$purchase->purchase_number}}">Invoice</a></div>
<div><a href="#">Receipt</a></div>
</td>
</tr>
<!-- Starting Item Template -->
@foreach($order->items as $item)
<tr>
<td class="align-top" style="max-width: 400px;">
<div class="row mb-5">
<div class="col-4 my-auto">
<a href="/shop/product/{{ $item->product->parentProduct->name_slug}}?panel={{$item->product->panel_account_id}}">
<img class="responsive-img p-1"
style="height:100px;width:100px; max-width:200px;"
src="{{ asset('storage/' . $item->product->parentProduct->images[0]->path . $item->product->parentProduct->images[0]->filename) }}"
alt="Product Image">
</a>
</div>
<div class="col-8 my-auto">
<a style="color:black; font-weight:bold;" href="/shop/product/{{ $item->product->parentProduct->name_slug}}?panel={{$item->product->panel_account_id}}">{{ $item->product->parentProduct->name }}</a>
<p class="text-capitalize">Sold by:
{{ $item->product->panel->company_name }}</p>
<p class="text-capitalize">Unit Price:
<?php echo 'RM ' . number_format(($item->product->price / 100), 2); ?>
</p>
<button class="text-capitalize bjsh-btn-gradient"><a style="color:black; text-decoration:none;" href="/shop/product/{{ $item->product->parentProduct->name_slug}}?panel={{$item->product->panel_account_id}}"> Buy It Again</a></button>
</div>
</div>
</td>
<td class="font-weight-bold" style=" max-width: 300px;">
<div class="row mb-5">
<div class="col-12 ">
<p>Quantity: {{$item->quantity}}</p>
</div>
<div class="col-12 ">
<p style="font-family:cursive;">Estimate Delivery Date: {{$order->delivery_date}} </p>
</div>
</div>
</td>
<td colspan="2" class="font-weight-bold">
<div class="row">
<div class="col-12 ">
<span style="min-width:87px; display:inline-block">Rate Product</span>
<span class="fa fa-star-o "></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<span class="fa fa-star-o"></span>
<button class="text-capitalize bjsh-btn-gradient">Submit</button>
</div>
</div>
<div class="row">
<div class="col-12">
<span style="min-width:87px; display:inline-block;">Rate Supplier</span>
<span class="fa fa-star-o "></span>
<span class="fa fa-star-o "></span>
<span class="fa fa-star-o "></span>
<span class="fa fa-star-o "></span>
<span class="fa fa-star-o "></span>
<button class="text-capitalize bjsh-btn-gradient">Submit</button>
</div>
</div>
<div class="row">
<div class="col-12">
<span style="min-width:87px; display:inline-block;">Rate Dealer</span>
<span class="fa fa-star-o "></span>
<span class="fa fa-star-o "></span>
<span class="fa fa-star-o "></span>
<span class="fa fa-star-o "></span>
<span class="fa fa-star-o "></span>
<button class="text-capitalize bjsh-btn-gradient">Submit</button>
</div>
</div>
</td>
</tr>
@endforeach
<!-- Ending Item Template -->
</table>
@endforeach
@endforeach
</div>
</div>
</div>
</div>
<style>
.orders-text-style {
color: rgb(250, 172, 24);
margin-right: 45px;
}
.fa.fa-star-o {
color: rgb(250, 172, 24);
}
</style>
@endsection
Considering all orders is the master table so if I click on order status or any other tab, it should filter and display according. Would it be possible?
If so, please guide me to the correct resources or documentation to work with it.
Please or to participate in this conversation.