6

I need to limit the number of cards displayed in the layout response of a card carousel and sort it by the most recent one first. Can I do this in Sitecore without making any code changes?

Improve this question

2 Answers 2

Reset to default
1

I believe the cards in the carousel in your case are set as child of the datasource item and you would like to get the first n cards sorted by date. In that case you can below GraphQL query and attach it the Component GraphQL Query inside the json rendering.

query( $datasource: String!, $language: String!){ search(where: { AND:[ { name: "_parent" value: $datasource operator: CONTAINS } { name: "_language" value: $language } ] } first: 5 orderBy: { name: "__smallcreateddate", direction: DESC } ){ results{ id name } } }

GraphQL Endpoint Output:

enter image description here

You will need to pass Query variable 'datasource' and 'language' as below.

enter image description here

Note: While you add this query inside Component GraphQL section inside the json rendering, variable datasource and language are automatically injected.

This will make sure inside the layout service output of the rendering, the first 5 cards are rendered order by creation date. You can find more details on Integrated GraphQL here.

Hope this helps!!! Let me know in case you have any queries.

Improve this answer
14
  • Thanks for your response. Im having few issues using graphql query . Im wondering if you can help me with an alternative, probably a datasource query or parameter query? Commented Jan 24 at 10:47
  • @user16172 Can you please share the issue you are facing with graphql query... Commented Jan 24 at 10:49
  • The issue is not with your query. It seems like a configuration issue. Im not able to open the xGraph browser. I get an error saying "The JSS application Card was not registered with Sitecore." Commented Jan 24 at 10:54
  • @user16172 The only viable way to achieve this is through graphql query. This is the preferred way too while working on JSS to avoid code change. I would recommend you to address the issue you are getting... Commented Jan 24 at 10:58
  • @user16172 Check this link https://www.addact.net/jss-app-feature-not-registered-with-sitecore-error-solved. This will solve your issue for The JSS application Card was not registered with Sitecore. Let me know in case you face any issue. Commented Jan 24 at 11:05
2

In Sitecore 10.3, you can control card display by limiting their number and sorting them from newest to oldest. This can be done through the Rendering parameters , Query options or using Custom data source .

These methods can be configured in Sitecore's platform without writing new code.

1. Use Rendering Parameters to Control Card Carousel Content:

If your Sitecore component allows rendering parameter configuration, you can control item display. Adjust parameters to limit and sort items directly. Use Query or Item Query fields with ORDER BY and LIMIT to specify exactly which items appear and in what order like below query

/sitecore/content/Home/CardCarousel/*[datefield >= '2025-01-01'] ORDER BY @datefield DESC LIMIT 5

2. When setting up a card carousel in Sitecore, you can use the Data Source or DataSource Query field to control how items are selected and sorted. This lets you choose which items appear in the carousel and in what order, typically configured in the rendering settings. Like below query for sorting

/sitecore/content/Home/CardCarousel/*[@template='Card Template'] ORDER BY @date DESC LIMIT 10

3. Use GraphQL: Create a GraphQL query to fetch cards, apply sorting by most recent first, and restrict the number of results. This approach lets you manage card display without custom code.

GraphQL Query: If your cards are stored in a Sitecore item (or a custom content type), and you want to sort by a date field (createdDate) in descending order and limit the result to 5 cards, you could do something like this:

 query SearchItemsByParentAndLanguage($datasourceItem: String!, $lang: String!) { search( where: { AND: [ { name: "_parent", value: $datasourceItem, operator: CONTAINS }, { name: "_language", value: $lang } ] }, first: 5, orderBy: { name: "__smallcreateddate", direction: DESC } ) { results { id name } } }

For Graphql Query you can update accordingly. for reference

4. If the previous methods fail, you'll need to design a custom content resolver to handle the specific content processing requirements.

Updates

Here when you are working with graphql Playground then you need to pass your API key in HTTP Header section and You need to pass your data Source Item in the Query Variable section as shown in image

enter image description here Hope This help!!

Improve this answer
8
  • Thanks for your response. Im having few issues using graphql query . So I have not tried your graphql response but the datasource query you provided doesnt seem to work. I dont see any change in my layout response Commented Jan 24 at 10:48
  • You can check this blog for your graphql setup medium.com/@praveensharma6019/… Commented Jan 24 at 11:03
  • Try to do graphql running also let me know if you will face any issue Commented Jan 24 at 11:04
  • { "error": { "errors": [ { "message": "SSC API key is required. Pass with 'sc_apikey' query string or HTTP header." } ] } } This is the error Im getting after following all the steps mentioned in your link. Commented Jan 24 at 11:35
  • You need to pass api key and data source in header for this you can check this blog medium.com/@praveensharma6019/… Commented Jan 24 at 11:44

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.