I have a dynamic list of CMS case-studies excerpts that need to link to their corresponding section on page that contains all the case-studies.
eg. the ‘view case study’ buttons on the home page (under the brand logos) need to link to this CMS driven case studies page but the anchor needs to be an in-page link to jump to the appropriate case study clicked.
I would usually do this by adding page section IDs on the anchors eg. /case-studies#study1, /case-studies#study2 etc. but from what I can see this is not possible to do dynamically using the CMS.
Can anybody help with a javascript/JQuery solution?
I guess unique dynamic IDs would need adding to the items on the case studies page, eg #casestudy1, #casestudy2 etc then these IDs would need appending to the case study links on the home page, eg. /case-studies#casestudy1, /case-studies#casestudy2 ? But I don’t know how to achieve this?
Is there a way to do it that doesn’t rely on the order the items appear on the page too eg. /casestudy#1 needing to link the first case study on the page or /casestudy#2 needing to link to the second etc?
What if the ID is declared in a field of the collection for case study?
Then, on the cs page, you can add a div with such ID, using custom code, at the top of the item in the list. Here you get your anchor.
Now, in the page where you set the link, use only custom code to declare it (<a>...</a>), with a combination of 2 dynamic fields: the URL to the node and the ID field.
For those that are looking how to do this. @vincent 's solution indeed worked perfectly.
1. Add an Embed custom code element at the top in the Collection item with code <section id="{{wf {"path":"slug","type":"PlainText"\} }}"></section>
2. To link a button to the section. Add an Embed custom code element in a div (not in a link block) with code And then add a