I created a ‘Projects’ collection within the WIX Studio CMS. I would like some of the projects to have a different individual page design than others within this collection. Currently, I am only seeing one option connection which is called “Projects (Item)”. In other words, I don’t want all the individual pages in the ‘Projects’ collection to use the same design template. Is this possible?
Yes, can be done. Here’s how:
In your Projects collection, add a new column which you can call Design Style. This can be a text field which you can set to A, B or C depending on how many different deisgn templates you want to have. So all of your pages following one template should be marked as A. Rest as B, and so on…
Then design one dynamic page for each of these templates. And simply set each of their filters under the Dataset Settings, so that Design Style equals to A. Repeat the same process for the other templates.
And there you have it. Different designs for the specified items.
Do note that the URL for each template will be different in this case, since every dynamic page needs to have its own unique URL.
2 Likes
Thank you for the information! I was able to create two separate template designs, Template A and Template B, based on your input.
- Project 06 is using Template A. URL structure follows: /projects/project-name-06
- Project 05 is using Template B. URL structure follows: /projects-1/project-name-05
As you mentioned, I noticed the URL structure differs between the two which is ok.
Currently, the Dynamic page titled Projects (List), which contains a repeater for the projects, is displaying all projects. Here’s the link for your reference: https://liset560.wixstudio.io/my-site/projects However, only the URLs for projects using Template A are working, while those for Template B are not.
When I attempt to connect the images to link to the project pages within the Link connects to field, it only allows me to make one selection. I chose Template A. Could you please advise on how I can adjust the repeater to display both URL structures, rather than just Template A’s? When you click on Project 05’s image you’ll notice it does not work because the URL does not follow Template A’s format. It follows template B. This is the correct URL for https://liset560.wixstudio.io/my-site/projects-1/project-name-05
Any information would be appreciated. Thanks again!
Hey Liset,
I see the issue being faced here. A few lines of code would solve this - sitewide. If you follow the steps mentioned below carefully, you can get it working in no time:
- In the Studio editor, click on the Code icon { } on the left side panel, and then click on Start Coding.
- From the panel that opens up, click on Databases.
- Under Your Collections, choose the Projects collection.
- Click on the three dots and then select Add Data Hooks.
- Select the After Query hook and then click on Add & Edit Code. This will add default code in the code panel, something like this:
export function Projects_afterQuery(item, context) {
//TODO: write your code here...
}
- Now carefully copy paste the code provided below exactly under the TODO line:
const cloumnId = "DESIGN-STYLE-ID"; //Replace with your Design Style Column ID
const linkId = "DYNAMIC-LINK-ID"; //Replace with your copied Dynamic Link ID
const urlSlugA = "/projects";
const urlSlugB = "/projects-1";
const urlSlugC = "/projects-2";
if (item[cloumnId].trim() == "B") {
item[linkId] = item[linkId].replace(urlSlugA, urlSlugB);
}
if (item[cloumnId].trim() == "C") {
item[linkId] = item[linkId].replace(urlSlugA, urlSlugC);
}
return item;
- Now once again from the side panel, under Databases > Your Collections, click on the three dots on your Projects collection and then click on Open Collection. This will pull up the CMS.
- Now choose the Dynamic URL column for Template A, click on Edit, and copy the Field ID. Paste this in the code, in place of Dynamic Link ID.
- Repeat the same step as above for the Design Style column.
- Finally, make sure there are no red lines in your code and hit PUBLISH.
And there you have it! You’ve just created a data hook that will intercept any query made to the CMS database. This hook will modify and return the correct link for all your created dynamic templates. And this works sitewide, and in the CMS database as well.
In layman terms, we’ve now chosen the Dynamic Link column for Template A to function as the default URL column. So you can now freely link any button / image / text / repeater to the Template A dynamic item page anywhere throughout your site and the users will be redirected to the correct URL as per the design style you’ve chosen.
This may look like a lengthy / complicated process, but if followed correctly, this will work like a charm. In case you’re unable to make it work, feel free to reply to this thread - I’ll be happy to assist you further.
Have fun coding!
That did the trick! I really appreciate your help—thank you!
1 Like
It would be so much easier if you design 2 separate sections on the same page and simply collapse/expand the corresponding section via code.
if A expand section A, etc.
No messy url patterns that are messy for SEO.
1 Like
Hi, wixstudio doesn’t like this code … and would not open the collection. any idea?
If the collection is not opening, that means either there’s an error in your code or the field IDs are not correct.
In this case, simply clear all the code in the data.js backend file and you will be able to access up your CMS collection just as before.
If you want this code to work for you, you will need to have the design style column and the logic set up correctly, and you will have to follow step numbers 8 & 9 and insert the relevant column IDs for the code to work perfectly.
I’d also recommend trying out the alternative solution provided by @codequeen instead, which would be less complicated and would not require multiple dynamic pages and data hooks to handle the URLs.
1 Like
Thanks, I just couldn’t get the code running … so I opted for the alternative solution and it works just fine. Thank you so much.
Hi, I’ve been trying this solution but I can’t make it work 
Can someone help me? Is there another solution with less code?
Tks!