1

I have a situation. We have built our Magento site as headless (data is provided from GQL). Category pages, PDP, catalog search result pages, etc all are headless except CMS pages because of product-related widgets.

We built all our components in Next JS with our business logic in GQL for the product query. However, because CMS page content with widgets is output as plain HTML via GQL, we cannot use our components meaning our business logic is ignored. It looks like we will have to do our logic in the PHTML again (redundant), which we want to avoid.

Has anyone done this in their project? If so, how did you avoid this situation?

This is standard GQL query for CMS page:

{
  cmsPage(identifier: "my-page-route") {
    identifier
    url_key
    title
    content
    content_heading
    page_layout
    meta_title
    meta_description
    meta_keywords
  }
}
6
  • CMS page content with widgets is output as plain HTML In what format would you expect or prefer the output be?
    – dotancohen
    Jul 6, 2022 at 6:20
  • The output is correct, but this leads us to double work to implement business logic in two places, ie, GQL and the LUMA theme. I was hoping if someone has a better idea to deal with it. One of the ideas I have is to just output SKUS in place of HTML for those widgets and when NodeJS is rendering the JS, extract the SKUs and make another query and then replace that block of html. Jul 6, 2022 at 6:27
  • Can you not request the SKU field via GraphQL?
    – dotancohen
    Jul 6, 2022 at 6:30
  • I can. I think I need to better explain it. CMS page can have content in it and a widget of recently added products. When GQL responses the content of this page, it will parse the output based on LUMA theme. Our business logic (show/hide price, add to cart button etc) are in GQL, not in LUMA theme. Because of this the HTML response is wrong. Yes, we can add the business logic in Luma Theme but that means it's redundant work (in GQL and in Luma Theme). Hope this makes sense. Jul 6, 2022 at 6:36
  • I see what you're saying. Post your GraphQL query to the question. Thanks.
    – dotancohen
    Jul 6, 2022 at 6:41

1 Answer 1

0

You should not be querying the CMS page for the widget contents if you don't want HTML. If the widget doesn't have GraphQL access (I think it doesn't) then you need to query for products and sort by recent.

{
  products(sort: "created_at") {
    identifier
    url_key
    title
    sku
  }
}
2
  • I'm not actually sure which field to sort on, but this is the basic idea. Salt to taste.
    – dotancohen
    Jul 6, 2022 at 7:38
  • Ok, then how would you get the products that are in the widgets? This query will require you to pass on filter fields. Otherwise, it will give you entire catalog. The widget might have rules to display produts (new, recently viewed, specific category etc). Jul 6, 2022 at 22:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.