Frontend API - How do I get the slugs of a categories, based on a Product?

[leonkosterss]

Hello,

I want to create a link to a product page on a News article. I build the website with Nuxt.

I use await swell.products.get('blue-shoes') to get the product data, but I don't get the slugs of the categories and/or subcategories that are linked to the product.

Is this possible with the Frontend API?

[sags95]

await swell.products.get('blue-shoes', {
  expand: ['categories']
});

[leonkosterss]

Nice! Is it possible to get the subcategories in the array of Categories?

In that case i can build the slug like /products/{category-slug}/{subcategory-slug}/{product-slug}

[leonkosterss]

I think I already got it!

Is this like you would do it too?

// Get a slug based on the Product ID with the following Actions:
    // 1. Get the product with the categories
    // 2. Get the category of the product
    // 3. Get the subcategory of the product
    // 4. Get the slug of the subcategory
    
    const productWithCategories = await swell.products.get('63a55af6ae83d900120c949a', {
        expand: ['categories']
    });

    // Get the subcategory of the product
    const getSubcategories = await swell.categories.get(productWithCategories?.categories[0].id);

    // Computed property from productWithCategories
    const productSlug = computed(() => {
        return '/' + productWithCategories?.categories[0].slug + '/' +
               getSubcategories.children.results[0].slug + '/' + productWithCategories?.slug
    })

The only problem is that I need to build a url based on the main categories. A product can be in 2 categories and/or 2 subcategories. How do I build the slug based on a Main category? I get the general sorting of categories, but I dont get the sorting of the categories added on the product itself.

This is to sort it based on general sorting:

// Sort the results array based on the 'sort' property in ascending order
    getSubcategories.children.results.sort((a, b) => a.sort - b.sort);
    

[logeshswell]

@leonkosterss You can also try a single query as follows:

const productWithSubCategories = await swell.products.get('63a55af6ae83d900120c949a', {
  expand: ['categories.parent.parent']
});

[leonkosterss]

That would be nice! I only get an error.

You can only expand fields configured in api.json (categories.parent.parent)

Where can I change this? And is there documentation which fields I can configure?

I mean with the main categories: I need 1 main category to build a slug for a product. For SEO. Also for the sitemap.xml.

I want to that based on the sorting / added categories on a product, like the screenshot below. The problem is I don't get the result based on I sorted the categories: Equipment, Posters (A1) & Posters (A2).

[logeshswell]

Oops! I forgot to mention the documentation to include permissions.
You can follow this doc to add permission for the field categories.parent.parent in the products model.
https://developers.swell.is/guides/opening-content-permissions

[logeshswell]

@leonkosterss You can fetch categories in the same sorted order as follows:

let params = {
  "fields": ["name", "category_index"],
  "include": {
    "categories": {
      "url": "/categories",
      "params": {
        "id": { "$in": "category_index.id" }
      },
      "data": {
        "fields": ["parent_id", "name", "parent.name"],
        "expand": "parent"
      }
    }
  }
}
await swell.products.get('632c3f960be8e30012950136', params)

But, this will work only in swell-node (or backend APIs) and it won't work in swell-js (or frontend APIs) as you will get a similar permission error.