How can I create multiple pages with friendly URLs based on my collections

VTEX in your native language 🌎 Portuguese
, , ,
1

Hey everyone!

I have a question about creating pages in the VTEX admin.
I need to create some pages with friendly URLs based on collections. For example:

The medicine collection page is: https://www.saraiva.com.br/186?map=productClusterIds&utm_source=site&utm_medium=banner&utm_campaign=saldao_livros_de_medicina_ate_70_porcento_de_desconto

But I’d like it to be https://www.saraiva.com.br/saldao-medicina

So far so good — we can use search-result-layout.customQuery and in the props set the collection ID, then configure the route so the page lives at /saldao-medicina

My question is: if I need 20 pages with custom URLs based on different collections — or if the client needs that down the road — would I have to create 20 separate routes in my routes.jsonc file? Is there another way to handle this?

2

Hey @Fehgodoy, how’s it going?

As you did for the first page, using this documentation here will generate a default template that has the props for the blocks you want, such as the one that fetches the collection ID.

After that, you use the PAGES module → https://i.imgur.com/N3EnBnq.png

Then you create a new page with the friendly name you want, for example → https://i.imgur.com/N3EnBnq.png

See more details in this documentation.

Hope this helps.

Cheers,
Estevão.

3

Hey @estevao_santos, how’s it going?!

Thanks for the reply, but it wouldn’t quite solve my question. I did create a template based on the id of a collection X and already created that page in the VTEX admin itself. My question is whether I could create just a single default template that works across other collections, you know?!

Example:
My route template:

“store.custom#collection-page-custom”: {
“path”: “{URL}”,
}
And inside the VTEX admin under the ‘Pages’ module, I create several pages with a URL:
‘/medicina’
‘/carnaval’
‘/saldao’

And all 3 of those pages, each one being directed to the page of their respective collections.

In that case, would I have to create 3 store.custom entries in my routes.jsonc file for each page created based on the collection id using search-result-layout.customQuery, or is there a more concise way to do it?

4

@Fehgodoy I understood what you want, and we actually did it in another store here.

You don’t need to create 3 store.custom. We only created 1.

We use it like this:

{
  "store.custom#lp-colecoes": {
    "blocks": [
      "search-result-layout.customQuery#colecoes"
    ]
  },
  "search-result-layout.customQuery#colecoes": {
    "title": "PUT THE TITLE OF AN INITIAL COLLECTION TO CREATE THE TEMPLATE", 
    "props": {
      "querySchema": {
        "orderByField": "OrderByReleaseDateDESC",
        "hideUnavailableItems": true,
        "maxItemsPerPage": 12,
        "skusFilter": "ALL",
        "simulationBehavior": "skip",
        "mapField": "productClusterIds",
        "queryField": "COLLECTION ID" //SET ONE AND THEN YOU CAN CHANGE IT THROUGH THE SITE EDITOR
      }
    },
    "blocks": [
      "search-result-layout.desktop#lp-colecoes",
      "search-result-layout.mobile#lp-colecoes"
    ]
  },

Once you’ve put together the first version with this part of the store blocks, you can create new URLs as you want through the PAGES module as I mentioned and you’re already aware of. Then it’s just a matter of updating the new pages via SITE EDITOR by creating new versions of the fields to pull the NEW COLLECTION IDs, since they’ll come with the template you initially set up.

Hope that’s clearer for you now.

Cheers,
Estevão.

5

Aaaah @estevao_santos, now I get it, what a great idea you guys had, thanks man!!