Urls + Pagination Help

[asanti]

his is my code for a simple catalog store (no cart and checkout), a listing page that will change the items depending on the category (or subcategory). This is my db structure:

 

prod_id   Primary   bigint(20) AUTO_INCREMENT   
user_id   int(11)               
cat_id    int(11)       
subcat_id   int(11)     
prod_titulo   varchar(250)  
prod_descripcion   varchar(250)

The file that is currently listing all the products (store.php) has this script:

$(document).ready(function(){
    $('#listing_store').empty();
        $.ajax({
            url: 'store-app/db_query.php',
            type: 'GET',
            dataType: 'json',
            //data: ,
            success: function(data){
                for (var i = 0; i < data.length; i++) {
                      var dataHtml = ''
                      + '<div class="col-xs-6 col-md-4 column productbox">'
                            + '<a href="detail.php#' +  + data[i].id +'">'
                            + '</a>'
                            + '<div class="product-info">'
                            + ' <div class="product-title"><a href="detalle_producto.php#' +  + data[i].id +'">' + data[i].titulo + '</a></div>'
                            + '<div class="product-price">'
                            + '<div class="pull-right"><a href="detalle_producto.php#' +  + data[i].id +'" class="btn btn-info btn-sm" role="button">Ver</a></div>'
                            + '<div class="pricetext">$'+ data[i].precio + '</div></div>'
                            + '</div>'
                      + '</div>'
                    $('#listing_store').append(dataHtml);
                }
            }
        });
});

As a result i have the product listed in the listing page. the anchor link for the products to the detail page (detail.php):

<a href="detail.php#' +  + data[i].id +'"></a>

This is the script i have in the detail.php page:

$(document).ready(function() {
    if(window.location.hash){
        var id = window.location.hash.substring(1);
        $('#title').html('cargando...');
        $('#desc').html('cargando...');
    }
    LoadProduct(id);
});
function LoadProduct(id){
    $.ajax({
        url: 'store-app/db_query.php',
        type: 'POST',
        dataType: 'json',
        data: {
            "q": id,
        },  
    }).done(function(aviso){
        var id = aviso.id;
        $('#title').html(aviso.titulo);
        $('#desc').html(aviso.descripcion);
    });
}
}); 

The product loads ok but the url is

mysite/detail.php#1 -> prod_id

Finally, the db query file (db_query.php):

$sql = mysqli_query($dbc, "SELECT * FROM tienda_prod WHERE prod_activo ='1' ORDER BY prod_fechacreado DESC");
$results = array();
while($row = mysqli_fetch_array($sql, MYSQLI_ASSOC)){ 
    $results[] = array(
        'id' => $row["prod_id"], // or smth like $row["video_title"] for title
        'user' => $row["user_id"],
        'categoria' => $row["cat_id"],
        'subcategoria' => $row["subcat_id"],
        'titulo' => $row["prod_titulo"],
        'descripcion' => $row["prod_descripcion"],
    );    
}
header('Content-Type: application/json');
if (isset($_REQUEST["q"])) {
    $busqueda = $_REQUEST["q"];
    $clave = array_search( $busqueda , array_column($results, 'id') );
    echo json_encode( $results[ $clave ] );

} else {
    echo json_encode( $results );

}

What can i do to change product url's to be more friendly/clean:

mystore.com/detail.php#1

to

mystore.com/(category or subcategory name)/(product title + id)

Ex. mystore.com/electric-guitars/fender-telecaster-1

Aclaration: I have other two tables in the db for subcategories and categorias, both with id and name, the product table has both category and subcategory id.