I have a problem using routes in Framework7. I have an app with 4 products in the product page, so if i click product001 from 4 products, then the page will display the details of product001 with showing 3 other products in the bottom of product01 description, oke… then if I click product002 in the product001 detail page then the page will display the details of the product002. I have tried several ways, but the page does not display images for the second detail.
My code app.js :
var app = new Framework7({
// App root element
root: '#app',
name: 'pagol.id',
theme: 'auto',
id: 'com.myapp.test',
ignoreCache: true,
precompileTemplates: true,
template7Pages: true,
// Enable swipe panel
panel: {
swipe: 'left',
},
// Add default routes
routes: [
{
path: '/all-categories/',
url: './all-categories/',
},
{
path: '/categories-details/',
url: './categories-details/',
},
{
path: '/',
url: '/',
master: true,
allowDuplicateUrls: true,
detailRoutes: [
{
/* We need to specify detail route path from root */
path: '/product-details/:id',
async: function (routeTo, routeFrom, resolve, reject) {
var id = routeTo.params.id;
app.request.getJSON('json/product/' + id, function (data) {
resolve(
{
templateUrl:'product-details/' + id
},
{
context: { product:data }
}
);
});
},
on: {
pageInit: function(e, page){
var imgArray = [];
for(var i=0; i<page.route.context.product.images.length; i++){
var imgPath = "uploads/" + page.route.context.product.images[i];
var imgDiv = '<div class="swiper-slide"><div class="content"><div class="mask"></div><img style="height:250px; object-fit:cover" src="'+imgPath+'" alt=""></div></div>';
imgArray.push(imgDiv);
}
$('#display-img').html(imgArray);
var swiper = app.swiper.create('.swiper-container', {
speed: 1000,
slidesPerView: 'auto',
loopedSlides: page.route.context.product.images.length,
observer: true,
});
var imgArray = [];
for (var i = 0; i < page.route.context.product.seller_product.length; i++) {
var img = page.route.context.product.seller_product[i].images.split(",");
var imgPath = "uploads/" + img[0];
var imgDiv = '<div class="swiper-slide">'+
'<div class="content content-shadow-product">'+
'<a href="/product-details/'+ page.route.context.product.seller_product[i].id +'">'+
'<img style="height:80px; object-fit:cover" src="'+imgPath+'" alt="">'+
'</a>'+
'<div class="text">'+
'<a href="/product-details/'+ page.route.context.product.seller_product[i].id +'">'+
'<p class="title-product">'+
page.route.context.product.seller_product[i].name+
'</p>'+
'</a>'+
'<p class="price">Rp. '+
Intl.NumberFormat('de-DE').format(page.route.context.product.seller_product[i].price)+
'</p>'+
'</div>'+
'</div>'+
'</div>';
imgArray.push(imgDiv);
}
$('#latest-product').html(imgArray);
var imgArray = [];
for (var i = 0; i < page.route.context.product.category_product.length; i++) {
var img = page.route.context.product.category_product[i].images.split(",");
var imgPath = "uploads/" + img[0];
var imgDiv = '<div class="swiper-slide">'+
'<div class="content content-shadow-product">'+
'<a href="/product-details/'+ page.route.context.product.category_product[i].id +'">'+
'<img style="height:80px; object-fit:cover" src="'+imgPath+'" alt="">'+
'</a>'+
'<div class="text">'+
'<a href="/product-details/'+ page.route.context.product.category_product[i].id +'">'+
'<p class="title-product">'+
page.route.context.product.category_product[i].name+
'</p>'+
'</a>'+
'<p class="price">Rp. '+
Intl.NumberFormat('de-DE').format(page.route.context.product.category_product[i].price)+
'</p>'+
'</div>'+
'</div>'+
'</div>';
imgArray.push(imgDiv);
}
$('#recommended-product').html(imgArray);
},
}
},
],
},
{
path: '/all-reviews/',
url: './all-reviews/',
},
{
path: '/account-seller/',
url: './account-seller/',
},
{
path: '/account-buyer/',
url: './account-buyer/',
},
{
path: '/settings/',
url: './settings/',
},
{
path: '/edit-profile/',
url: './edit-profile/',
},
{
path: '/notification-settings/',
url: './notification-settings/',
},
{
path: '/faq/',
url: './faq/',
},
{
path: '/wishlist/',
url: './wishlist/',
},
{
path: '/transaction/',
url: './transaction/',
},
{
path: '/blog/',
url: './blog/',
},
{
path: '/blog-single/',
url: './blog-single/',
},
{
path: '/sign-in/',
url: './sign-in/',
},
{
path: '/sign-up/',
url: './sign-up/',
},
{
path: '/notification/',
url: './notification/',
},
{
path: '/checkout/',
url: './checkout/',
},
{
path: '/shipping-details/',
url: './shipping-details/',
},
{
path: '/shipping-options/',
url: './shipping-options/',
},
{
path: '/payment-method/',
url: './payment-method/',
},
{
path: '/email-settings/',
url: './email-settings/',
},
{
path: '/email-change-settings/',
url: './email-change-settings/',
},
{
path: '/password-settings/',
url: './password-settings/',
},
{
path: '/contact-seller/',
url: './contact-seller/',
},
{
path: '/tracking-order/',
url: './tracking-order/',
},
{
path: '/shipping-information/',
url: './shipping-information/',
},
{
path: '/order-history/',
url: './order-history/',
},
{
path: '/shopping-cart/',
url: './shopping-cart/',
},
],
// ... other parameters
});
var mainView = app.views.create('.view-main');
var $ = Dom7;
my product detail code :
<div class="page" data-page="about">
<div class="navbar navbar-page">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="fas fa-arrow-left"></i>
</a>
</div>
<div class="right nav-product-detail">
<a href="#"><i class="fas fa-share-alt"></i></a>
<a href="#" @click="showToastBottom"><i class="fas fa-heart"></i></a>
<a href="/shopping-cart/"><i class="fas fa-shopping-cart"></i></a>
</div>
</div>
</div>
<div class="page-content">
<!-- product details -->
<div class="product-details segments">
<div class="container">
<!-- slider product details -->
<div class="slider-p-details">
<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="10" class="swiper-container swiper-init swiper-container-horizontal">
<div class="swiper-pagination"></div>
<div class="swiper-wrapper" id="display-img"></div>
</div>
</div>
<!-- end slider product details -->
<!-- wrap content product details -->
<div class="wrapper-content">
<div class="wrap-title-product wrap-c-margin">
<h4 class="title"></h4>
<p class="price"></p>
</div>
<div class="wrap-info">
<div class="section-title">
<h3>Keterangan</h3>
</div>
<div class="content">
<div class="text description">{{$route.context.product.description}}</div>
</div>
<!-- related products -->
<div class="related-products segments no-pd-b">
<div class="section-title">
<h3>Jualan yang lain <a href="#" class="see-all-link">See All</a></h3>
</div>
<div data-speed="900" data-space-between="50" class="swiper-container">
<div class="swiper-wrapper" id="latest-product"></div>
</div>
</div>
<!-- end related products -->
</div>
<!-- end wrap content product details -->
</div>
<!-- wrap store -->
<div class="wrap-store">
<div class="container">
<div class="row">
<div class="col-120">
<div class="user-caption">
<img src="images/user-seller1.png" alt="">
<div class="title-name">
<h4>{{$route.context.product.store_name}}</h4>
<p class="date"><i class="fas fa-map-marker-alt"></i> {{$route.context.product.seller_address}}</p>
<p class="date"><i class="fas fa-phone-alt"></i> {{$route.context.product.seller_phone}}</p>
</div>
</div>
</div>
<div class="col-120">
<div class="user-button">
<a href="#" class="button primary-button">WhatsApp</a>
<a href="/account-seller/" class="button secondary-button">Telepon</a>
</div>
</div>
</div>
</div>
</div>
<!-- end wrap store -->
<!-- product review -->
<div class="product-review segments">
<div class="container">
<div class="section-title">
<h3>Product Reviews</h3>
</div>
<div class="content">
<img src="images/user-buyer2.png" alt="">
<div class="text">
<h6>Rashaad</h6>
<ul class="rate-product">
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star-half-alt"></i></li>
</ul>
<p class="date">3 min ago</p>
<i class="fas fa-thumbs-up like-button"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, explicabo.</p>
</div>
</div>
<!-- divider -->
<div class="divider-line-half"></div>
<!-- end divider -->
<div class="content">
<img src="images/user-buyer1.png" alt="">
<div class="text">
<h6>Aamir</h6>
<ul class="rate-product">
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star-half-alt"></i></li>
</ul>
<p class="date">3 min ago</p>
<i class="fas fa-thumbs-up like-button"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, explicabo.</p>
</div>
</div>
<!-- divider -->
<div class="divider-line-half"></div>
<!-- end divider -->
<div class="content">
<img src="images/user-buyer3.png" alt="">
<div class="text">
<h6>Kemal</h6>
<ul class="rate-product">
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star-half-alt"></i></li>
</ul>
<p class="date">3 min ago</p>
<i class="fas fa-thumbs-up like-button"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, explicabo.</p>
</div>
</div>
<!-- view all reviews -->
<div class="view-all-review">
<a href="/all-reviews/">View All Reviews</a>
</div>
<!-- end view all reviews -->
</div>
</div>
<!-- end product review -->
<!-- divider -->
<div class="divider-line-full"></div>
<!-- end divider -->
<!-- recommended for you -->
<div class="recommended-you">
<div class="container">
<div class="section-title">
<h3>Recommended</h3>
</div>
<div data-space-between="10" data-slides-per-view="auto" class="swiper-container swiper-init">
<div class="swiper-wrapper" id="recommended-product">
<div class="swiper-slide">
</div>
</div>
</div>
</div>
</div>
<!-- end recommended for you -->
</div>
<!-- end product details -->
<!-- action product details -->
<div class="wrap-action-product-d">
<div class="container">
<div class="row">
<div class="col-60">
<div class="content-button">
<a href="#" class="button secondary-button"><i class="fas fa-cart-arrow-down"></i>Masukan ke Keranjang</a>
</div>
</div>
<div class="col-40">
<div class="content-button">
<a href="#" class="button primary-button"><i class="fas fa-cart-plus"></i>Beli</a>
</div>
</div>
</div>
</div>
</div>
<!-- end action product details -->
</div>
</div>
anyone can help me ? Thanks a lot!