Linking a column to a link!

Hello guys!

Could someone explain to me how to link a column with a url? Im trying to do this:
https://www.getyourguide.com/discovery/?utm_force=0
Those blocks are clickable! I can do it on the code but not on blocs :frowning:

Maybe give the card, div or column an ID then do what @Norm suggests: Clickable DIV unless there is an easier way now.

Good spot @Hypnoman, where would you paste that javascript?

Thank you @Hypnoman! The way Im doing it now its by adding a reference link for example on the link I post as reference would be:

<a href="https://www.getyourguide.com/paris-l16/ultimate-louvre-2-hour-skip-the-line-guided-tour-t175122/" target="_blank" data-activity-id="175122" class="baseline-activity-card__container js-activity-card">

But that mean you need to edit the code once you export! Is there a way to do this directly on blocs? @Norm?

Simply select your column and add a custom attribute in the properties panel. The name of the Attributes should be onclick and the value should be location.href=‘https://google.com’; Change the URL to whatever you want. Now, anything that is clicked in the column will divert to the stated url. This will retain the information in your blocs project and doesn’t require any coding after exporting.

I tried this but it didn’t work!

I just tried and it works just fine - maybe there is something not right with the name and value information - for example, there is no need to add double quotes in the value field etc. It also requires the column to have some content.

1 Like

so it like this no? location.href=https://google.com

No, it should be like this location.href=‘https://google.com’; Note the SINGLE quotes around the URL and the final semi-colon.

weird! It doesn’t work for me!

Check out the example I uploaded HERE. Click anywhere on the content. You should get diverted to google.

If you want. I can post the project file so you can check it out on your system. EDIT, added the project below

columnClick.bloc

The method Hendon shows works. Here is my example:

https://dacsecure.com/t/card-example/

I added a cursor pointer and a slight change in shadow for hover.

2 Likes

@Hypnoman Maybe you could post the bloc file so @Stewie_Griffin can try it in his blocs app.

Well done.
How did you add the cursor pointer?

@Bootsie just change the colour of the hover!
Thank you so much @hendon52 I will try it and let you know!

1 Like

Ah ok got it! but why I can’t get the mouse over effect?

How you do that?

I added some custom CSS to the Project code editor:

<style>
.card-look {
	cursor: pointer;
}
</style>

Then use that style on the Card

Here’s the Bloc file for you to investigate @Stewie_Griffin

Card Link.bloc (1.4 MB)

Hat tip to @hendon52

Works perfect.
Thanx a lot.