Hide icon when there is no hyperlink

Ask us anything Tips and Hacks
1

Hi there,
1- Is it possible to hide icons (FB, twitter, reddit, etc…) when there is no pointing hyperlink behind them?
2- Can we set-up a paywall?
3- Can we collect payment with a stripe integration?

Thanks,
JM

2

Hi @JMV :wave:

1- Here’s an example where we hide a container when there’s no image. The same logic could be applied to hide icons when there is no pointing hyperlink behind them.

We’re currently working on a Stripe integration.

In the meantime, you could setup a workaround with a link to a stripe checkout, create an automation between Stripe and your backend with the user table, and setup authentication in WeWeb to gate content based whether the user is authenticated or not or based on user roles (e.g. Premium or not).

I don’t have an exact date for the Stripe integration but I’ve added your feedback to our user research to help us prioritize!

1 Like
3

Hi, thanks for the reply.
I’ll try that. Super helpful!

1 Like
4

Hi @Joyce I have a question about the display:“off” state. When the state is off, will the component be loaded in the browser/data fetched? I mean if a put a whole page on conditional display, will it be bad for speed or load? I mean I want to show a whole different page for if a user select something in their settings, and show a whole different page for another, with the same URL.

5

Hi @khairul, yes, the component will be loaded in the browser if the display property is “off”

If you had a lot of hidden components it could affect the page load time, especially if you fetched all the collections automatically (you have the option not to in each collection’s settings but then need to use a workflow to trigger the fetch).

Can you tell me more about your use case?

How different would the page look like depending on the user’s selection?

Would the same collection be loaded either way or different collections?

Don’t hesitate to record a short video to help us understand the context and propose better solutions.

2 Likes
6

thank you for answering joyce, my use case is pretty simple, I want each user to have a profile page, and they can choose a theme/design for their page. So each theme is a whole different design than another. What’s the best method for this since display on/off is not the answer?

1 Like
7

Ah interesting!

Let’s say they chose the Flamingo theme and that affected the color of one section, and the background image of another.

When they select the Flamingo theme and save their settings, you could have a workflow that updates that user’s information. In your user table, you would have three columns:

  • one column with the theme_choice (e.g. Flamingo)
  • one column with the theme_color (e.g. #fc8eac), and
  • one column with the theme_img (e.g. https://cln.sh/Mv5N5a)

Then on the page in WeWeb, you could bind the background color of the section with a formula that would look something like if (user.theme_choice = "Flamingo", user.theme_color, "white" )

The user. here refers to the variable of the authenticated user where you will be able to access the user’s theme choice if you’ve added the information to the database.

Does that make sense?

2 Likes
8

Yes I understand that part, but I think I would need to bind more than styles, because most layouts are affected, and it is easier I have separate components for every theme, thats why Im thinking about display

9

Actually scratch that, I would only have one column in the “user” table, with the theme the user chose and I would have a separate “theme” table with as many columns as I needed to define each theme

1 Like
10

Maybe do a test with the display off for two themes with very different layouts and see if it negatively impacts your loading time

2 Likes
11

If you have loading and/or seo issue, we can probably guide you for developping a custom Weweb component which will load differents elements dependings on your theme (like a tab without a tab header).

2 Likes
12

Hey @aurelie do you think it is possible for me to make a site builder? I think custom js for drag and drop is pretty easy, and I can bind anything that a user sets to all my CSS and inputs. My only problem is I don’t know how to make another static site after a user has design his/her page.

14

Hi @Joyce I think the display:none feature is good, but I think it still takes a lot of space and makes a difference in load time for my use case. I think what’s the best method is manipulating the dom and use create/remove element. It would be crazy if weweb have that feature and make it as easy as we set the visibility to off now.

1 Like