Understanding components (or not) -- SOLVED!

Almost a year of using PG and i’m still trying to wrap my head around how components work.

Here is an attempt to layout my understanding to date in hopes that someone might see where i’m going wrong.

COMPONENT

Created a PG project for the component and defined it as shown leaving the update box unchecked so the component won’t get swept up by the Update whole project Shift-CTRL-U action later.

Within the component, an editable area is defined for the 2nd list item where everything inside the element is editable.

MASTER / FOLLOWER PROJECT

Now, in a separate PG project I’ve created a master page that uses the component in which i leave the Don’t update box as is, and have already made changes to the editable area that have survived the Shift-CTRL- U as well as Actions, Update component instance from the context menu. Everything is saved at this point. So far so good.

The 2nd page of my demo uses the master page which brings the component and a <p> element that is editable as indicated by the blue pencil icon. Edits to both of these are shown surviving an Update component instance from the context menu, but this is where it gets weird.

When the Shift-CTRL-U command is used, it resets the component edit back to the master page, and leaves the paragraph alone. So it’s working as expected with the paragraph, but not with the component.

WHAT I TRIED

On the master page, i tried adding another editable area to the component and/or the list item element, and no matter what setting i chose they all get wiped clean back to the comp def when i use the Update component instance from the context menu.

Now, i did note that these new area definitions would ride out a Shift-CTRL-U, but still the editable properties of the list item would be returned too the master page version (11111).

I even tried going back to the original component definition and adding an editable area there, so it would ride out the Update component instance operation, and they did… but Shift-CTRL-U would sill take out the item changes (22222) on the follower page.

How do i get a nested component within a master page to protect the edits made on follower pages?

For clarity these are the two component update functions that are being used

Shift-CTRL U /----------------------------------------/ Update component instance

shift-ctrl-u /-----------------/

@droidgoo relationship between master page and components can sometimes get tricky. But the behavior you’re describing is correct.

The basic principle of master pages is that they have two parts:

  • Fixed, un-editable parts
  • Editable parts

Fixed parts will be the same on the master page and on all its child pages. It doesn’t really matter what you put in them. In your case you have a component with editable areas. But because the master page section itself is not editable, whatever is in the component on the master page will be displayed on child pages as well.

To have different versions of the component on master and child pages, the area of the master page where the component is placed must be editable.

I prepared a quick example project that shows these 2 situations:
http://download.pinegrow.com.s3.amazonaws.com/docsmedia/ComponentsAndMasterPages.zip

2 Likes

Ka-LICK!

thank you so much for that example… it works exactly as i was thinking it should, but the piece i was missing was that the component needs its own container to make it editable.

click

I was trying to do it right on the component, and PG let me do it, but as soon as i updated the editable area went away (as it should because that area got replaced :man_facepalming:

what’s more, if i want to limit the editable area to just the component, i can uncheck the box on the master page and add the component from the dropdown.

Click2

nice.

thanks again for taking the time to explain this, it’s really helped un-stick me. i know this is a busy support time for you guys right now.

now that that’s sorted in my head, i can move on to making my website more maintainable.

2 Likes