Skip Navigation

[Resolved] Adding a class to button when a certain condition is false

This support ticket is created 3 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 22 replies, has 2 voices.

Last updated by AlimB3245 3 years, 6 months ago.

Assisted by: Waqar.

Author
Posts
#1753361

I have a condition applied on a profile page.. and based on this condition being true I want to apply a certain class to an element

#1755039

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for waiting.

I've done some testing on my website and the best workaround to achieve this would be to use two separate buttons and show/hide them based on the output from the view "Related Brand Distributor Eyewear Brand Brand IDs".

The first button which is already added won't have the class "no-brand". But below this button, you can include another button block and add the class "no-brand" to it.

Once the button block has been added, you're welcome to let me know and I'll be able to share some suggestions on custom CSS code.

regards,
Waqar

#1756421

Hi Waqar

Before I go ahead with your instructions, I just wanted to confirm if maybe I am overthinking this ..;-)..

The distributor-ids are displayed based on the function func_check_user_store_value .. so if this is true then a brand id is displayed.. so instead of worrying if the brand id is displayed or not, can't we just use the function as the basis on which to add the class?

Please don't go by what I am saying if it doesn't make sense as I am not really a developer but it seemed that maybe I was going to the next step where the first step was actually giving me the result.. if at any point the function result is true the brand id is displayed.. so if the function is FALSE and NEVER true, then based on this condition can't we add the class to the button?

Please advise..

Regards,
Alim

#1757667

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Alim,

Thanks for writing back.

I've reviewed this through again and I can confirm that we're not over-thinking this.

At the point where the custom shortcode "check-user-store-value" in being used inside the view "Related Brand Distributor Eyewear Brand Brand IDs", we don't have direct control over the "Purchase Inventory" button's output.

For this reason, it would make sense to add two separate instances of the buttons for each case (i.e. one with the special class and the one without it) and then show/hide the correct button, using custom CSS code.

Please let me know once you've added both these buttons in the "Brand Owner Profile" content template and then I'll suggest the next steps for the CSS code.

regards,
Waqar

#1760889

Hi Waqar

Sorry for the delay.. I've been busy with some other toolset support tickets and I didn't want to get multiple tickets mixed up as each of them is pretty detailed and complicated for me..;-)..

Will get back to you on this by Monday.

Have a nice day..:-)..

Regards,
Alim

#1761741

Hi Waqar

Apologies again for the delay..

I have added the additional button as suggested and you can see it in the front end here..

hidden link

Please do advise what more needs to be done..

Have a nice day..:-)..

P.S.: I had to change the password for the wp-admin provided to you as I had another ticket with Minesh.. but do let me know if you need access (and provide me option to send you a private message) and I'll share the password with you..

Regards,
Alim

#1762085

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Alim,

Thanks for the update and I can see the second button on that page now.

I'm setting your next reply as private so that you can share updated temporary admin login details.

regards,
Waqar

#1762517

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thank you for sharing the admin access.

You can use the same shortcode for the view "Related Brand Distributor Eyewear Brand Brand IDs" in conditional blocks, to show CSS code to show the correct button.

In your content template "Brand Owner Profile", you can add a new "Fields and Text" block, under the two button blocks and add the following code:


<style>
.wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:first-of-type .tb-button {
display:none;
}
</style>

[wpv-conditional if="( '[wpv-view name='related-brand-distributor-eyewear-brand-brand-ids']' ne '' )"]
<style>
.wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:first-of-type .tb-button.purchase-inventory-button {
display:block !important;
}
</style>
[/wpv-conditional]

[wpv-conditional if="( '[wpv-view name='related-brand-distributor-eyewear-brand-brand-ids']' eq '' )"]
<style>
.wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:first-of-type .tb-button.no-brands {
display:block !important;
}
</style>
[/wpv-conditional]

The first CSS block will hide both the buttons.

The second CSS block will only be included when the shortcode for the view "Related Brand Distributor Eyewear Brand Brand IDs" returns some ID, and so it will show only the first button.

The third CSS block will only be included when the shortcode for the view "Related Brand Distributor Eyewear Brand Brand IDs" doesn't any ID, and so it will show only the second button.

Note: Please also remove the "[wpml-string context="wpv-views"]No items found[/wpml-string]" part from the "Loop Editor" section of the view "Related Brand Distributor Eyewear Brand Brand IDs".

#1762971

Bingo!!!..:-).. you are a genius!!!..:-)..

So I could use this method to validate other VIEW conditions too for other pages.. right?

Another thing I wanted to comfirm.. it was the first time I was using the Fields and Text block .. so when I added it I had a classic paragraph block and pasted your code there and then I realised it had the html tags applied and it just showed on the page as text.. then edited it in the HTML view (not visual) and pasted it without the html tags.. and it worked fine..
My question is
'Is this the right way?' or
'Is there some other way to used Fields and text that allows you to paste in styles without using Classic Paragraph?'

Please do advise.

Regards,
Alim

#1762985

Hi Waqar

I am using your solution on another page (an optician profile page) where the condition is similarly based on a view..

hidden link

with this code

<style>
.wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:first-of-type .tb-button {
display:none;
}
</style>
 
[wpv-conditional if="( '[wpv-view name='related-optician-eyewear-brand-brand-ids']' ne '' )"]
<style>
.wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:first-of-type .tb-button.shop-online-button {
display:block !important;
}
</style>
[/wpv-conditional]
 
[wpv-conditional if="( '[wpv-view name='related-optician-eyewear-brand-brand-ids']' eq '' )"]
<style>
.wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:first-of-type .tb-button.optician-no-brands {
display:block !important;
}
</style>
[/wpv-conditional]

The view is this one

hidden link

And the content template is this one.

hidden link

The condition is the same but it's not working and I think I know why.. your first condition requires the value to be '' but i think the view in question will still show a comma (this comma issue was resolved in the other view where Minesh placed it within the conditional statement)

But I am not sure how to remove the comma in the case of this view.. I tried to place it before the closing [/types] but it didn't seem to work..

And as suggested by you in the earlier message I've deleted the "[wpml-string context="wpv-views"]No items found[/wpml-string]" from this one too.. hope that's the right thing to do..

Could you please help resolve this?

Regards,
Alim

#1762991

Also could you please help me understand why the 2 buttons look differently styled.. I have the same styling for both but the top one doesn't seem to have a black background.

Regards,
Alim

#1763245

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thanks for the update and glad that it is working.

1. Yes, whenever we need to save the raw HTML/content/code in the "Fields and Text" block, switching to the "HTML" tab is the right approach. This way the content is saved as it is and the editor doesn't add any styling/formatting on its own.

2. The comma is showing from the output of the "Related Optician Eyewear Brand Brand IDs" view because the first post in the results is "Silhouette Atelier Collection" and that post's "ID" custom field is empty.
( ref: hidden link )

To avoid this, you can wrap the output of this view's loop item in a conditional check for the empty field, by updating content in the "Loop editor", from:


<wpv-loop>
	[wpv-item index=other][types field="id" output="raw"][/types],[wpv-item index=last][types field="id" output="raw"][/types]
</wpv-loop>

To:


<wpv-loop>
[wpv-item index=other]
[wpv-conditional if="( '[types field='id' output='raw'][/types]' ne '' )"][types field='id' output='raw'][/types],[/wpv-conditional]
[wpv-item index=last]
[wpv-conditional if="( '[types field='id' output='raw'][/types]' ne '' )"][types field='id' output='raw'][/types][/wpv-conditional]
</wpv-loop>

After that, it would be a good idea to remove all the extra spaces and line breaks from this view's loop editor section, as it is in the "Related Brand Distributor Eyewear Brand Brand IDs" view.

Note: I noticed that the "Optician Profile" content template, the slider block is showing broken output. You can remove this block and add it again.

3. We can investigate the difference in button styles, once the issues in point 1 and 2, have been fixed.

regards,
Waqar

#1763363

Hi Waqar

Have updated the code and removed the space and this is what is current displayed as the code

[wpv-layout-start][wpv-items-found]<!-- wpv-loop-start --><wpv-loop>[wpv-item index=other][wpv-conditional if="( '[types field='id' output='raw'][/types]' ne '' )"][types field="id" output="raw"][/types],[/wpv-conditional][wpv-conditional if="( '[types field='id' output='raw'][/types]' ne '' )"][wpv-item index=last][types field="id" output="raw"][/types][/wpv-conditional]</wpv-loop><!-- wpv-loop-end -->[/wpv-items-found][wpv-no-items-found][/wpv-no-items-found][wpv-layout-end]

Will change the slider too and confirm.

Regards,
Alim

#1763399

Hi Waqar

I've changed the slider but for some reason it's not displaying on the frontend.

Also the style code that you provided

<style>
.wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:first-of-type .tb-button {
display:none;
}
</style>
 
[wpv-conditional if="( '[wpv-view name='related-optician-eyewear-brand-brand-ids']' ne '' )"]
<style>
.wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:first-of-type .tb-button.shop-online-button {
display:block !important;
}
</style>
[/wpv-conditional]
 
[wpv-conditional if="( '[wpv-view name='related-optician-eyewear-brand-brand-ids']' eq '' )"]
<style>
.wp-block-toolset-blocks-grid .wp-block-toolset-blocks-grid-column:first-of-type .tb-button.optician-no-brands {
display:block !important;
}
</style>
[/wpv-conditional]

It's showing as html on the frontend.. :-(..

Regards,
Alim

#1763401
Screen Shot 2020-09-01 at 9.20.48 PM.png

Hi Waqar

The URL output when I hover over the Shop Online from Magrabi (the one on top) seems to have the brand ids and also the text [/wpv-conditional]

Please check screenshot attached

I can't figure out what I am doing wrong.. please advise.

Regards,
Alim

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.