Manipulating the URL in the clicked link

[bozdevs]

I want to manipulate the "href" attribute in a link with a hook.

<a href="/about" data-preview>About</a>

When the above link is clicked, if that link has the "data-preview" attribute, I want swup to "visit" the link as "current_url/?preview=target_url.path".

Description:

target_url: ".../about"
current_url: ".../example"
new_visit_url: ".../example?preview=about"

I used "link:click" and "visit:start" event hooks for this, but I couldn't figure out how to change the URL. Can you help?

[daun]

What have you tried inside those hooks? Setting visit.to.url should get you there.

[daun]

In link:click and visit:start, there should definitely not be any html, the new page hasn't loaded yet at this point.

[daun]

Swup doesn't specifically handle 404s, it treats them just like 200s and only handles 500s with special logic.

[bozdevs]

In link:click and visit:start, there should definitely not be any html, the new page hasn't loaded yet at this point.

Probably because I used console.log(), and probably because "promise" was used in the swup project, it adds the html into the log afterwards. Otherwise, I couldn't make much sense of it either.

[bozdevs]

Finally now the functionality I wanted works, thank you for everything.

[daun]

Great. Please post the working solution here for others and your future self :)

[bozdevs]

Manipulating the URL in the clicked link

1- For SEO, we add the permalink directly to the link.

<a href="localhost/about">About</a>

2- To differentiate we add a data-preview attribute.

<a href="localhost/about" data-preview>About</a>

3- By taking advantage of Swup's hooks, we actually create the connection we want.

swup.hooks.on('link:click', (visit) => {
   const element = visit.trigger.el;
   if (document.contains(element)) {
      if (element.hasAttribute("data-preview") || element.closest("[data-preview]")) {
         var target_url = new URL(element.href),
                current_url = new URL(window.location.href);
         current_url.searchParams.set("preview", target_url.pathname);
         visit.to.url = current_url;
      }
   }
});

In this way, when the link is clicked, instead of visiting the "localhost/about" link, it visits the "localhost/current_url?preview=/about" link.

4- (Optional) Keeping scroll position, "if you are going to open the target in a modal like me"

// if (document.contains(element)) {
// ....
   visit.scroll.reset = false;
// }