Navigating from a single dynamic page to the ALL page

Discussion Ask a question
,
1

Scenario:
I have the main dynamic page (profiles) connected to a data set (ds_profiles).
I’ve designed and able to see all profiles in a repeater based on my data set (Photo, name, title).
Each profile has a button, leading to its single dynamic page.
On the single page, I want to be able to click on the back button, and be redirected to the exact location of the profile I’ve originally chose.

If a user is scrolling down through many profiles (let’s say, 100), and chooses a specific one, I want them to be able to click Back and return to where they were before, and not to the top of the page (which is what it does now). Current way will annoy them as they need to scroll again to where they were and lead them out of my website.

Any thoughts on how to do it? No code please.

2

I don’t see a way without code, and even with code it depends on the layout of your site.

3

Is it worth opening a ticket with Wix support?

4

You said no code but as the other reply has said that is the only way to make a specific “back” button as opposed to just going back to “a page” as determined by link or CMS connection. Maybe using a back code and including “scrollTo” with the item in the repeater or avatar or button or whatever they clicked to to get them to the single page they came from would be your best bet (with masterPage code)… I don’t know, that depends on your site layout as they also said.

But what website do you use where you don’t get lost in navigation with stuff like this? It is annoying but even if you are browsing the YouTube homepage and click a video and then go back you’ll not only lose your place (scrollwise) but also you’ll unhelpfully be met with a new set of videos/ordering! People still use YouTube though, and so on.

I’d say if you are displaying 100’s of profiles you probably need to think of a better system that will allow users to easily narrow down those 100’s of profiles to a manageable/relevant amount (via filters, search etc) and then when those parameters get reset upon their return they can just filter the results again with a click or so and scroll through another minimal relevant selection.

It might not be the advice you want but any overwhelming and unwieldy amount of any data upon page entry (especially on tablet/mobile views) is going to ensure many users won’t even get to the part where they click a profile and need to return if it takes so long to find what they want in the first place, so you probably need to work around that aspect.

Depending what your site is like you could also add a “related profiles” section on the single profile page that shows a few (3, 5 etc…) other profiles that meet similar criteria, even if that was purely alphabetical or latest added or whatever you want to base that on. You’ll see stuff like that on those Wikia type pages for instance (or YouTube sidebar suggestions) and it’s no different to creating “Related Blog Posts” on here, no code needed for that and that sort of thing might help keep people on your site going down the rabbit hole as they say going profile to profile. Obviously that’s not suitable for all websites so you might need to get extra creative with it for your specific needs to come up with an alternative…

Hopefully something in there might be helpful for you at least or give you inspiration for a better solution!

5

Thanks heaps @themusingsofmaars ,
I was actually after any feedback and people’ thoughts… not necessarily what I “want” to hear :slight_smile: as I can always learn from others and get new perspectives.
Your suggestion of “related profiles” is actually quite interesting and I’d love to give it a go. Not sure how to do it yet, but I’ll figure it out. Thanks you for mentioning that :+1:
Regarding the design of my website, I do offer filtering options but many users prefer to just scroll down the list of profiles, click on one and read their info. Then they would like to continue scrolling and if by going back, they start over, they won’t proceed.
I get what you’re saying and it is common, but I have seen sites where navigating back and forth and continue from where you left it, exists. Problem is, I’m trying to avoid coding as much as I can as I don’t have a team of developers, only designers, so we’ve maximized the out-of-the-box features… was hoping to continue doing that.

6

Thinking about the ‘related profiles’ option, is there a certain object other than ‘products’? I am not using the wix stores app and not trying to use ‘related products’.
Any advice would be much appreciated.
Thanks

7

I don’t use any of the built in apps since they’re rarely customisable enough so for any “related pages” type elements I create a repeater, connect it to a new dataset (connected to the same collection as your profiles) and filter it to whatever you like (say a job title or whatever your filter options on the main profiles page are for instance) and limit it to a small amount, like 3 or whatever will work on your page so we now have a repeater showing 3 similar profiles to the current dynamic profile page and then finally add another filter to the new dataset against the original profiles dataset so it’ll never show the current profile item itself. That’s all I do really, doubling up datasets from the same collection is a very handy thing for many uses besides this with a little tweaking here and there it’s a great thing to have nailed in your toolkit!

I also understand your plight, I love the archival flow of a good website which are unfortunately rare now, it is a shame things don’t work like that for the most part and most companies and developers and so on want simplistic eye-catching garish “pleasant” websites rather than ones you can actually dig into, we’ve just got to be clever on how to implement details I guess and think up ways to compromise but still meet the criteria needed…

Something I’ve been working on lately is to not use a dynamic item page at all and have the single page info built into the main page so in your case when someone clicks a profile that whole profile list section would collapse and the “single profile” would expand and when you close the profile it collapses and shows the profile list auto scrolling to where you left off…

This works for some things (for me it’s opening detailed dynamic image and video items without leaving the page, you can also do this with lightboxes on Editor X and Wix Editor, it’s broken currently on Studio hence me coming up with an alternative since they are dragging their heels looking into it), it might not be such a good option for you if you want users to also be able to go directly to a profile url, although you could make a whole profile page (which you already have) and copy that exact layout and design to your profiles list page too using something like my collapse/expand idea so if they are visiting profiles via the list page they won’t lose their place but if they go directly to a profile URL link from google or whatever they’ll have to go back to the generic start of the profiles list page like you have it now, that’s the sort of compromises we have to think about with this stuff I suppose!

Also what I’m talking about here requires a little bit of code, but it’s nothing too bad and would be very easy for you to implement once on that specific profiles list page. IF Wix Studio fixes the lightbox issue I think they are planning on enabling the use of CMS without coding for lightboxes, but I wouldn’t hold your breath for that either since I’ve been waiting for them to fix it since we were able to use the platform lol… Also popup lightbox profiles would be cool in theory and solve your issue but from experience previously it is hard to get a lot of info into a lightbox, so that would be a hassle if your profile pages tend to be expansive… but there’s some more thoughts, I think you can come up with something that’ll work with a bit of trial and error and if you like the sound of any of the stuff I’ve mentioned I can show you how I’ve done it and we can try to come up with something that would possibly suit you more! :slight_smile:

1 Like
8

Honestly, your idea of collapse/expand is EXACTLY what I wanted to do for long time, but it took me literally hours to explain my wish to the support reps (it’s even worst over the phone, with everything being “escalated” to an expert), only to end up with “it’s a great idea, but at the moment, can’t be done. we’ll look into it” :face_with_raised_eyebrow:

To give a bit of context of what I have and what I want to do:
I currently have a static page with a repeater looking at a collection. The repeater presents the list of profiles (image, name, title, company and a description which is approx. 800 characters and a URL to their LinkedIn). For performance reasons, I only retrieve 9 records at a time, with a “Load More” at the bottom of the page, to load 9 more.
This is nice, but as more profiles are added weekly, scrolling and scrolling is not user-friendly and wouldn’t be what I consider good UX.

I wanted to have the “Expand/Collapse” feature where I only show the photo and name, and when hovering over (or clicking on), it will expand on the same page with all other profiles remain collapsed. After numerous calls with the support team, I was told it can’t be done (or they don’t know how to… same same), so I had to think of alternatives…

I then decided to try dynamic pages, with the ALL page, presenting all profiles (image, name, URL to LinkedIn and a button to the single profile). The single profile doesn’t have a lot of info in it so I’m struggling to pour enough stuff to make it look reasonable and not empty.

That’s where my problem is… I don’t like the use of the dynamic page, but with no alternatives, I’m trying to find the way to make its UX appropriate.

Would love to get your guidance on how to go back to static page with “Expand/Collapse” as this would be my ideal way forward.

Preferably with no code.

What do you say? Is there any light at the end of the tunnel? :grinning:

1 Like
9

Wouldn’t it always show the same 3 profiles? Let’s say I have a total of a 100. for 97 of them, I will always have the same 3 “related profiles”, right?
A random or more flexible filtering would be amazing but I doubt it if they allow it. Happy to stand corrected.

10

Unfortunately not without (a tiny one time piece of) coding! What you want is actually probably easier than my way, let me know if this example I just made is basically what you want and I’ll show you how to do it in detail (obviously ignore the design etc it’s a 5 minute rush job afterall, lol… but if you click the profile picture it should work how I think you might want it:

11

Yep, that’s the idea.
I’ve done it once with the FAQ feature, but the design options are limited with it, and I can’t use for a lot of rows (again, poor UI/UX).
Happy to give your solution a go and see what it turns out to be.
Thank you,

1 Like
12

Even if you don’t need this functionality (hopefully you won’t need the unique profile pages for what you need in the end if we can work something else out) it’s still worth knowing how it works, but basically it depends what you filter + sort by, you can sort by “latest created” and it’ll show the latest 3 that meet your filter criteria and you could add multiple filters I guess to make that even more unique. If your profiles had a ranking for example you could make sure only the ones ranked the same would show in the suggested profiles of that profile for instance, obviously not helpful for your specific needs here, but you can see how you can definitely get clever with this idea. With a bit of extra code you could probably set it to randomise too, but like you I’d rather not add code if I can help it, so I’ve never gone that deep with what would be possible or found out how that’d work!

Again, hopefully you won’t need this for your issue here but it’s cool for other uses too so worth playing around with if you ever need that sort of functionality for something else! :slight_smile:

13

Actually, using another dataset looking at the same CMS gave me an idea for something creative (in case I’m forced to use the dynamic pages).
When in the single profile page, I added at the bottom, alongside the Next and Previous buttons, a snippet of what’s out there. A small photo, name and role of the next profile, and the same for the previous one. So the user will be intrigued and hopefully keen to continue looking.
I’ve done it with additional 2 datasets, filtering by the original dataset, where ID is greater then current ID, sort by ID ASC, and the other one with ID Lower then current ID, sort by ID DESC.
It turns out pretty cool. Thanks for the tip :slight_smile:

1 Like
14

Ok, I’m using an old Editor X project but this will work just the same in Studio, just the layout might be a bit different and I’ll try and remember to point out where…

Here’s the design in the editor:

design
design1618×758 101 KB

Just a normal repeater but it has EVERYTHING you want in it, I seperated it so the name and image are 1 section and I’ve added all the extra stuff to a stack called “moredetails” this means we can treat it as 1 item rather than a bunch of pieces.

Once that’s all connected up to the repeater how you want it I then opened the code panel (bottom of the screen for Editor X and Left hand side panel for Studio) and click on the profile picture in the editor (or “name” button if you want that to activate the profile, you could do both if you want) you’ll see your options:

codeprep
codeprep1900×1068 152 KB

You’ll need to click the onClick button as I’ve circled and then click the + to create the event. It’ll add some empty code there for you in the main code panel, but you can delete that since I’ll give you the actual full code needed in a minute. Also do this for the Close Profile Button. The key thing to remember here is to name these things well in the ID entry the arrow is pointing to since that will be included in the code. So I called the profile image profileimage and the close button closeprofile.

The final thing to do is to click on the stack which I’ve ID’d to be “moredetails” and in the code section make sure you set it to “collapsed” so it won’t show on the live page until we expand it.

moredetails
moredetails1371×700 90.1 KB

That’s basically it now, you just need to add this code to the main code panel:

export function profileimage_click(event) {
let $item = $w.at(event.context);
$item(“#moredetails”).expand();
}

export function closeprofile_click(event) {
let $item = $w.at(event.context);
$item(“#moredetails”).collapse();
}

The first piece expands our extra details when the #profileimage is clicked and the #closeprofile will collapse it when clicked. And hopefully unless I’ve missed anything you should be good to go! Let me know if you have any trouble! :smiley:

1 Like
15

Thanks a lot for spending the time creating it.
I’ll give it a go and see which option works best for me.
Out of curiosity, I don’t believe it can be presented in cubics, rather than rows, right?
Anyway, that’s for me to figure out :slight_smile:
Thanks again and I’ll keep you posted once I manage to actually do it…

1 Like
16

No worries at all! I’m not sure about the cubics, is that the repeater style? If so it would work best in rows how I have it but the theory will still work in other layouts like cards and so on but I think it’d be harder to get it to look nice when 1 profile is expanded and the others are collapsed, but with some extra design time to iron that out it shouldn’t be an issue. Hope it’s all smooth sailing and you can get something awesome put together the way you want it!