I have created a content template using visual composer and inserted all fields in Html element of visual composer. In this template i have many fields that users could leave empty. How do i hide those fields if they are empty?
If you are familiar with the PHP conditions (if, else, equal, greater, etc etc) then this will look very familiar to you.
Basically, you can insert (with a Guided User Interface's help) several conditions, that can check what your data is, and compare it to something, and then either display or hide something.
For example, if you have single Line field and that could be empty, but you want to show it only if it's populated:
[wpv-conditional if="( $(wpcf-your_field_slug) ne '' )"]
this is the Field's value: [types field="your_field_slug"][/types]
[/wpv-conditional]
1- In the content template of a single post type created with visual composer i have added the code you just sent me to a new Visual composer Text Editer. This works just fine and shows the Value (see image 1)
2- although i have already created a custom HTML of an Accordion and inserted it into an HTML element in visual composer. So if i add the code you have sent into the HTML element of visual composer it doesn't work. (see image 2+3)
I used content Template because i am familiar with Visual composer and in some cases i needed to add an HTML code in the HTML element of visual composer.
The question is if there is a way to implement the HTML Conditional statements in the HTML element of Visual composer (not the Text editor of Visual composer)?
______
If not what you suggest? i remember i started creating my Single post with Layout and then stopped and moved to Content Template using visual composer. I did this because some scripts/php/CSS code i have added to CSS/JS editor didn't allow me to save the layout.
for example i wanted to add the source link of Material icons but couldn't save the Layout it showed me error!! Maybe i added the source link in the wrong place? where should i normally add it?
<link rel="stylesheet" href="hidden link">
I also tried to save a script in JS editor and this wasn't possible too!
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
OR this i dont remember!
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";
}
</script>
I actually want to use just your Layouts plugin because if you look at how i used visual composer for now in content templates you will be surprised with how much HTML code i have added there.
The first issue you report, which is the topic of this thread, may be due to the nature of that element.
It's as said an HTML editor and may bypass certain filters that are needed to expand shortcodes.
Do other shortcodes even work in that module?
Or is only the conditional that fails in there?
Note that several types of modules (Globals, as for example) will present issues as they simply bypass important filters.
Another thing is, when you use the Page builders you will usually use another Syntax.
Please try this:
{!{wpv-conditional if="( $(wpcf-your_field_slug) ne '' )"}!}
this is the Field's value: {!{types field="your_field_slug"}!}{!{/types}!}
{!{/wpv-conditional}!}
It'll make sure the ShortCode is not expanded too early - but again, if the module is not applying filters then we cannot expand them in there.
As for the layouts issue, please open a new ticket for that.
It is surely not expected that you cannot save things.
How to enqueue style and script in WordPress is outlined here: hidden link
All other fields work just fine the way i added them in HTML. The only field that fails is the conditional.
BTW when i generate a new Toolset Shortcode > Views and Fields
i get always such shortcode {!{types field='air-bags' output='raw'}!}{!{/types}!}
why i dont get [types field='air-bags'][/types]
I tried to add the last code you have sent but this doesn't work too
Please open the link and go to the button 5 in the accordion you will see the issue there.
hidden link
Does'nt work!
{!{wpv-conditional if="( $(wpcf-your_field_slug) ne '' )"}!}
this is the Field's value: {!{types field="your_field_slug"}!}{!{/types}!}
{!{/wpv-conditional}!}
In the Admin Menu "Toolset Shortcode > Views and Fields" this is native because that is used to insert ShortCodes everywhere.
In Content templates, for example, the GUI "Fields and View" will produce the "normal" syntax.
To solve the issue you mention, please send me:
- the link and a screenshot marking where I should (and should not) see the field
- the link of the same page or post in the backend to edit it.
- the link to the Content Template you use here
- The Link to the Edit Screen of that Content Template when you edit it with the Builder.
- A screenshot depicting the location of the cell so I can find it quickly.
The Login form is enabled.
I have no reports of similar issues. Maybe we can determine what it's due to and fix right there.
BTW: If you have improvement idea for the conditional i have created would be also nice.
This conditional works well when i add it to an Text Editor in Visual composer but not the HTML RAW of VC.
Please see screenshots Backend and Front end. it seems like the HTML RAW read this " {!{types field='air-bags'}!}{!{/types}!} " as a text and not as a value.
I would like to have a solution for this since I dont want to create a Templates with Layouts because Bootstrap 3.0 doesn't support RTL yet!
So my only solution for now is as i have made, to create content template built with visual composer and HTML Raw.
