[MGNLPN-599] Page preview does not display component when variant is selected Created: 21/Oct/21  Updated: 18/Nov/21  Resolved: 27/Oct/21

Status: Closed
Project: Magnolia Personalization
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Bug Priority: Critical
Reporter: Christopher Zimmermann Assignee: Lam Nguyen Bao
Resolution: Outdated Votes: 0
Labels: VN-Analysis, VN-Implementation, VN-Testing
Remaining Estimate: Not Specified
Time Spent: 1d
Original Estimate: Not Specified

Issue Links:
Cloners
is cloned by MGNLFE-139 CLONE - Page preview does not display... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Epic Link: Headless p13n
Sprint: HL & LD 40

 Description   

I'm not sure if this is a problem with the product, the frontend helpers, or the demo project.

ON the react-minimal SPA demo in https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/browse

When a component variant is selected in the Page Editor, then the Page Preview and the "Preview as Visitor" feature do not display the component at all.

To reproduce:

  • Edit a page which haas component variants, such as teh "Personalization" page in the demo.
  • Select the component in the main area.
  • Use the dropdown to switch from "Original" to "Adult"
  • use the "Preview page" action.

Expected: Normal preview including the component.

Actual: The component is not displayed at all.

See video: https://magnolia-cms.slack.com/files/UDET3BAAG/F02KA7W0PQQ/p13n-preview-problem-when-variant_chosen.mov

 



 Comments   
Comment by Christopher Zimmermann [ 22/Oct/21 ]

When the default "Original" variant is selected (the case where the preview works) the JSON response is.

// code placeholder
{
  "@name": "personalization",
  "@path": "/react-minimal/personalization",
  "@id": "d83c1b65-1fab-4cdd-879f-b3b799cfe4d0",
  "@nodeType": "mgnl:page",
  "title": "Personalization",
  "mgnl:lastModified": "2021-10-15T09:24:06.074+02:00",
  "mgnl:template": "react-minimal-lm:pages/personalization",
  "mgnl:created": "2021-10-14T10:48:15.258+02:00",
  "main": {
    "@name": "main",
    "@path": "/react-minimal/personalization/main",
    "@id": "1e792b7d-ca96-4d4a-a35d-4fc6b3fce8ea",
    "@nodeType": "mgnl:area",
    "mgnl:created": "2021-10-14T10:48:15.258+02:00",
    "0": {
      "@name": "0",
      "@path": "/react-minimal/personalization/main/0",
      "@id": "e254b7bc-bac6-4569-a287-f532a84e8bba",
      "@nodeType": "mgnl:component",
      "richText": "<p>Enter your age to see a personalized activity.</p>\n",
      "mgnl:template": "spa-lm:components/paragraph",
      "mgnl:created": "2021-10-14T10:48:15.258+02:00",
      "@nodes": []
    },
    "@nodes": ["0"]
  },
  "extras": {
    "@name": "extras",
    "@path": "/react-minimal/personalization/extras",
    "@id": "1d294fc8-b627-4279-8d74-fbfdfa684a6d",
    "@nodeType": "mgnl:area",
    "mgnl:created": "2021-10-14T10:48:15.258+02:00",
    "@nodes": []
  },
  "@nodes": ["main", "extras"]
}

Whe the "Adult" variant is selected (where the preview for the component does not render, the JSON reponse is:

// code placeholder
{
  "@name": "personalization",
  "@path": "/react-minimal/personalization",
  "@id": "d83c1b65-1fab-4cdd-879f-b3b799cfe4d0",
  "@nodeType": "mgnl:page",
  "title": "Personalization",
  "mgnl:lastModified": "2021-10-15T09:24:06.074+02:00",
  "mgnl:template": "react-minimal-lm:pages/personalization",
  "mgnl:created": "2021-10-14T10:48:15.258+02:00",
  "main": {
    "@name": "main",
    "@path": "/react-minimal/personalization/main",
    "@id": "1e792b7d-ca96-4d4a-a35d-4fc6b3fce8ea",
    "@nodeType": "mgnl:area",
    "mgnl:created": "2021-10-14T10:48:15.258+02:00",
    "0": {
      "@name": "0",
      "@path": "/react-minimal/personalization/main/0",
      "@id": "ddf31eeb-e560-4ca9-94d0-e3d6123ee7ed",
      "@nodeType": "mgnl:component",
      "@variantNodeName": "variant-1",
      "@variantPath": "/react-minimal/personalization/main/0/variants/variant-1",
      "richText": "<p>Hey grown-up, how about a mountain bike ride?&quot;</p>\n",
      "mgnl:template": "spa-lm:components/paragraph",
      "mgnl:created": "2021-10-14T10:48:15.258+02:00",
      "mgnl:ruleSet": {
        "@name": "mgnl:ruleSet",
        "@path": "/react-minimal/personalization/main/0/mgnl:ruleSet",
        "@id": "7f44123f-8f7d-4b19-8f15-f09e6edfc64d",
        "@nodeType": "mgnl:contentNode",
        "@variantNodeName": "mgnl:ruleSet",
        "@variantPath": "/react-minimal/personalization/main/0/variants/variant-1/mgnl:ruleSet",
        "class": "info.magnolia.personalization.RuleSet",
        "mgnl:created": "2021-10-14T10:48:15.258+02:00",
        "voters": {
          "@name": "voters",
          "@path": "/react-minimal/personalization/main/0/mgnl:ruleSet/voters",
          "@id": "8550290d-3bb9-42e4-b779-eaa17375f186",
          "@nodeType": "mgnl:contentNode",
          "@variantNodeName": "voters",
          "@variantPath": "/react-minimal/personalization/main/0/variants/variant-1/mgnl:ruleSet/voters",
          "mgnl:created": "2021-10-14T10:48:15.258+02:00",
          "voter0": {
            "@name": "voter0",
            "@path": "/react-minimal/personalization/main/0/mgnl:ruleSet/voters/voter0",
            "@id": "06b58673-6f2e-4b1f-9d0c-84c215757d7e",
            "@nodeType": "mgnl:contentNode",
            "@variantNodeName": "voter0",
            "@variantPath": "/react-minimal/personalization/main/0/variants/variant-1/mgnl:ruleSet/voters/voter0",
            "value": "Adult",
            "traitId": "x-mgnl-age",
            "class": "info.magnolia.personalization.traits.voter.NameAndValueVoter",
            "mgnl:created": "2021-10-14T10:48:15.258+02:00",
            "@nodes": []
          },
          "@nodes": ["voter0"]
        },
        "@nodes": ["voters"]
      },
      "@nodes": ["mgnl:ruleSet"]
    },
    "@nodes": ["0"]
  },
  "extras": {
    "@name": "extras",
    "@path": "/react-minimal/personalization/extras",
    "@id": "1d294fc8-b627-4279-8d74-fbfdfa684a6d",
    "@nodeType": "mgnl:area",
    "mgnl:created": "2021-10-14T10:48:15.258+02:00",
    "@nodes": []
  },
  "@nodes": ["main", "extras"]
}
Comment by Lam Nguyen Bao [ 27/Oct/21 ]

The fixed was moved to MGNLFE-139.
This should be converted to MGNLFE instead, I'm a little confused and clone a new one (misunderstanding).

 
 

Generated at Mon Feb 12 06:39:14 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.