Hi, all!
I am starting with framewort7, which I am really enjoying. I have installed the starting and it brings an example catalog.svelte and product.svelte, in which it has a code:
catalog.svelte
<Page name="catalog">
<Navbar title="Catalog" />
<List>
{#each products as product, index (product.id)}
<ListItem
title={product.title}
link={`/product/${product.id}/`}
/>
{/each}
</List>
</Page>
<script>
import { f7ready, f7, Page, Navbar, List, ListItem } from 'framework7-svelte';
let products = [];
f7ready(() => {
products = f7.data.products;
});
</script>
product.svelte
<Page name="product">
<Navbar title={currentProduct.title} backLink="Back" />
<BlockTitle>About {currentProduct.title}</BlockTitle>
<Block strong>
{currentProduct.description}
</Block>
</Page>
<script>
import { f7, Page, Navbar, BlockTitle, Block } from 'framework7-svelte';
export let f7route;
const productId = f7route.params.id;
let currentProduct;
f7.data.products.forEach(function (product) {
if (product.id === productId) {
currentProduct = product;
}
});
</script>
Catalog.svelte yes I have managed to replicate it with firebase, but product.svelte I have not been able.
I would like to know if someone who has done something similar could give me any help. Or can it only be done with a data api?
thx very much
Maybe you can post a more complete examples? With what is in your routes, how do you pass data to product page, etc.
my catalog.svelte with firebase is this:
<script>
import { f7ready, f7, Page, Navbar, List, ListItem } from "framework7-svelte";
import { db } from "../js/firebase";
export var catalog = [];
const querySnapShot = db
.collection("restaurant/catalog/cartaentrantes")
.onSnapshot((querySnapShot) => {
let docs = [];
querySnapShot.forEach((doc) => {
docs.push({ ...doc.data(), id: doc.id });
});
catalog = [...docs];
//
});
f7ready(() => {
catalog = db.collection("restaurant/catalog/cartaentrantes");
});
</script>
<style>
:global(.lista) {
/* background-color: gray; */
box-shadow: slategrey;
}
:global(.lista .ListItem .after) {
color: rgb(112, 7, 7);
}
:global(.list .item-after) {
color: sandybrown;
font-weight: 600;
}
</style>
<Page name="catalog">
<Navbar title="catalog" backLink="Volver" />
<List inset class="lista elevation-3">
{#each catalog as product, index (product.id)}
<ListItem
title={product.name}
after="{product.price} €"
link={`/product/${product.name}/`} />
{/each}
</List>
</Page>
product.svelte It is the one that I do not know how to do, I do not know how to do the currentProduct part, so that it generates the routes…
You can just pass product object directly, for example:
<List inset class="lista elevation-3">
{#each catalog as product, index (product.id)}
<ListItem
title={product.name}
after="{product.price} €"
link={`/product/`}
routeProps={{ product }}
/>
{/each}
</List>
And in your product page:
<Page>
Product name is {product.name}
</Page>
<script>
// register and catch "product" prop
export let product;
</script>
And keep route simple
{
path: '/product/',
component: ProductPage,
},
1 Like
Thanks for you attention but it gives me the following error:
./src/pages/product.svelte
Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ParseError: Identifier ‘product’ has already been declared (8:13)
6:
7:
8: export let product;
^
9:
10:
my code now:
<script>
import { f7, Page, Navbar, BlockTitle, Block } from "framework7-svelte";
import { product } from "./catalog.svelte";
import "./catalog.svelte";
export let product;
</script>
<Page name= {product.nombre}>
<Navbar title="Product" backLink="Back"/>
<Navbar title={product.name} backLink="Back" />
<BlockTitle>Estás en {product.name}</BlockTitle>
<Block strong>{product.description}</Block>
</Page>
This line for sure need to be removed:
import { product } from "./catalog.svelte";
1 Like
Thank you very much, for now it seems that it is working, I am going to do some more test in case something new comes up, very grateful, really.