1

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! enter image description here enter image description here enter image description here enter image description here enter image description here

5
  • How did you render the CTA's? Can you show the code?
    – Gatogordo
    Jul 28, 2023 at 16:16
  • @Gatogordo I have added an update to the original post showing the code. We have stripped out all other logic, css, etc and are just rendering the link in Next.js with the sitecore-jss-nextjs Link component.
    – Matthew G
    Jul 28, 2023 at 18:14
  • In your code above, what is field ?
    – Richard Seal
    Jul 28, 2023 at 18:36
  • field is the entire Sitecore field... It gets passed to the component. We setup our fields object in a component manifest, we add the component to the component factory and then that component receives a fields object. that fields object will contain all the fields for the component, so fields.Title, fields.Description, fields.PrimaryCTA. So to your question, field is the PrimaryCTA field.
    – Matthew G
    Jul 28, 2023 at 21:06
  • @RichardSeal I work for Merkle, Inc and I believe you are our Sitecore Partner Technical Advisor... We could really use your help... Maybe we can connect Monday? [email protected]
    – Matthew G
    Jul 28, 2023 at 21:45

2 Answers 2

0

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:

HeroSectionCTAEditableLink

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} />;
}
0

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:

CTA on Pages

Hope this helps!

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.