Sitecore XM Cloud - Links not editable in Pages or Experience Editor

Question

I'm working on a Sitecore XM Cloud project and we're creating front-end react components in Next.js. We're using the Sitecore Next.js JSS SDK for rendering the component data. That said, if we have a component for a Banner, which contains a Title, Description, PrimaryCTA, and SecondaryCTA fields, the CTA's are not editable in either Pages or Experience Editor.

From both Pages and Experience Editor, I can click the Title or Description and edit the text right where it sits. It also surrounds the field with a border to show it's actively being edited. If I view the source, I can also see that the field is surrounded by extra markup from Sitecore to indicate the field is editable. I do not see that same markup surrounding any links. I will try to attach a video for reference.

I've included some screenshots... In the last one, with the props being passed to the component, it should usually contain an letting you know it's editable... this does not happen, but you can also see that the "editable" prop is true.

Update We are rendering the the CTA links as follows:

import { Link as SitecoreLink } from '@sitecore-jss/sitecore-jss-nextjs';

if (field) {
  return <SitecoreLink field={field} className={classNames} />;
}

We've removed all front-end logic, checks, css, everything so it is just rendering a Sitecore Link using the sitecore-jss-nextjs Link component as shown above.

I'm hoping it's a setting somewhere, but I am un-sure. Any help would be greatly appreciated!

Answer 1

In the XM Cloud version of Play Summit, there are several CTA buttons with Editable Links. One example is the Hero Section CTA component whose code looks like this:

import { ComponentProps } from 'lib/component-props';
import { LinkField, Link, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';

export type HeroSectionCtaProps = ComponentProps & {
  fields: {
    Link: LinkField;
  };
};

const HeroSectionCta = ({ fields, params }: HeroSectionCtaProps): JSX.Element => {
  const sxaStyles = `${params?.styles || ''}`;

  return (
    <div className={`btn-area ${sxaStyles}`}>
      <Link field={fields.Link} className="btn-main" />
    </div>
  );
};

export const Default = withDatasourceCheck()<HeroSectionCtaProps>(HeroSectionCta);

Here's a screenshot of the editable component in action:

Using your code example from above...what happens if you make this update?

import { LinkField as SitecoreLink } from '@sitecore-jss/sitecore-jss-nextjs';

if (field) {
  return <SitecoreLink field={field} className={classNames} />;
}

Answer 2

try this code (the className is just for demo purposes), You should check your template, the field has to be a link (eg. General Link), and you should have no problems:

import { Field, Link, LinkField } from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';

type CTAProps = ComponentProps & {
  fields: {
    ctaHeadline: Field<string>;
    cta: LinkField;
  };
  type: string;
};

const CallToAction = (props: CTAProps): JSX.Element => {
  
  return (
    <>
    <h2>Sample for CTA</h2>
    <Link field={props.fields?.cta} className="cta cta-btn cta-btn--primary cta--arrow">
      {props.fields?.cta?.value?.text}
      <span className="arrow"></span>
    </Link>
    </>
  );
};

export default CallToAction;

Then in Pages, the CTA will be editable:

Hope this helps!