feat: Support for cross selling API

[tlgimenes]

What's the purpose of this pull request?

As the title says, this PR adds support for cross selling API into @faststore/api.

Cross selling API allow developers to cross and upsell products with "Who say also say", "Who bought also bough" for a given product. To learn more about the API, check the official API docs and the release note

How it works?

We had to possible was for implementing cross selling at @faststore/api.

The first one consisted in using a schema.org's product field called https://schema.org/isRelatedTo. With this, I'd have to create a new query on our starters and a specific shelf component for displaying cross selling data. I thought it would generate more code in our starters and could lead to some errors, like SSGing shelf data.

The second solution consisted in adding special facets to the existing search query. With this, no new code needs to be done on our starters and all existing tests work. This solution, for me, makes the Query.search loose sense a bit, and I think Query.search could be renamed for Query.products in a future PR.

I ended up choosing the second solution and made the search query to accept the following new special facets:

• buy
• view
• similars
• viewAndBought
• accessories
• suggestions

These facet accept productId as the facet's value. To query for a cross selling product list, just:

query ProductsQuery($first: Int!, $after: String, $sort: StoreSort!, $term: String!, $selectedFacets: [IStoreSelectedFacet!]!) {
  search(first: $first, after: $after, sort: $sort, term: $term, selectedFacets: $selectedFacets) {
    products {
      edges {
        node {
          slug
        }
      }
    }
  }
}

with the following variables:

{
  "first": 12,
  "after": "0",
  "sort": "price_desc",
  "term": "",
  "selectedFacets": [
    {
      "key": "buy",
      "value": "99995946"
    },
    {
      "key": "channel",
      "value": "{\"salesChannel\":\"1\",\"regionId\":\"\"}"
    },
    {
      "key": "locale",
      "value": "en-US"
    }
  ]
}

How to test it?

Perform the aforementioned query and check that product pages on the starters render correctly with the new cross selling shelves

Starters Deploy Preview

• https://github.com/vtex-sites/nextjs.store/pull/159
• feat: Support for cross selling API vtex-sites/gatsby.store#137

References

• Cross selling release note
• API docs

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
faststore	✅ Ready (Inspect)	Visit Preview	Jul 5, 2022 at 5:58PM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a990bd4:

Sandbox	Source
Store UI Typescript	Configuration

[icazevedo]

I agree it makes the search query lose a bit of sense, but not entirely. After all, you're still searching for related products hahah.