Dynamic routes with firebase

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. :blush: