Creating an {if} statement based on $configurableoptions selection, how?

I tried a few things and thought I nailed it, but apparently I am not doing it correctly.

I am trying to create an alert-info DIV with some information in it, but only when they select a particular configuration option.

This is what I did (and probably wrong):

{if $configurableoptions.options.name.{'Anti-Spam complete solution - Protect your email'}}
    <div class="alert alert-info info-text-sm">
         <i class="fa fa-question-circle"></i> TEST MESSAGE
    </div>
{/if}

This doesn't work. The order form doesn't break, but nothing shows up either.

...is this even possible? If so, what's the correct way to do this.

FYI: the alert-info DIV should only show up when that option is selected and if they switch to a different one it should go away again.

Thank you in advance.

What page?

Any (template) page (with the necessary variables). It was a general question.

Then it depends since your $configurableoptions may vary from page to page and it could be inside different kind of foreach loops. That said, the syntax should be something like this (I'm taking invoicepdf.tpl as example):

{foreach from=$customfields item=customfield}
{$customfield.fieldname}: {$customfield.value}
{if $customfield.fieldname eq 'Anti-Spam'}
<div class="alert alert-info info-text-sm">
	<i class="fa fa-question-circle">TEST MESSAGE</i>
</div>
{if}<br />
{/foreach}

as a general rule, never (or at least try hard not to!) build conditions based on something that is not unique - names are not necessarily unique, id will (should!) always be unique... product/config options can have the same names, but won't have the same IDs.

taking a config option as an example, the following would display an alert for one specific option (if added inside the $options loop)...

{if $options.id eq "14"}<div class="alert alert-info info-text-sm"><i class="fa fa-question-circle"></i> TEST MESSAGE</div>{/if}

if you want to hide/show based on the config option value, you'll need to use jquery/js to do that - Smarty variables don't change during enabling config options, only upon submission.

as a general rule, never (or at least try hard not to!) build conditions based on something that is not unique - names are not necessarily unique, id will (should!) always be unique... product/config options can have the same names, but won't have the same IDs.

 

taking a config option as an example, the following would display an alert for one specific option (if added inside the $options loop)...

 

{if $options.id eq "14"}<div class="alert alert-info info-text-sm"><i class="fa fa-question-circle"></i> TEST MESSAGE</div>{/if}

if you want to hide/show based on the config option value, you'll need to use jquery/js to do that - Smarty variables don't change during enabling config options, only upon submission.

Thank you explaining and giving an example, Brian.

...didn't know you had to do that with jQuery. Will have to look into that one.

Anyways, thank you for answering. Also Kian.

Okay. Well since I don't know much about jQuery and/or JS in general. I decided to ask people for help on Stackoverflow.

They came up with the following:

<script>
$("input[type='radio'").change(function(){
$label = $.trim($(this).parents('label').text());
 if($label == "No anti-spam solution"){
   $target = $("#noSolution");
 $(".info").not($target).fadeOut();
 $target.fadeIn();
 }else if($label == "Default anti-spam filters"){
   $target = $("#defaultSolution");
 $(".info").not($target).fadeOut();
 $target.fadeIn();
 }
})
</script>

<style>
.additional-info{
position:relative;  
}
.info{
 display:none;
 position:absolute;
}
</style>

<div class="additional-info">
<div id="noSolution" class="info">
This is the info for No anti-spam solution!
</div>
<div id="defaultSolution" class="info">
This is the info for Default anti-spam filters!
</div>
</div>

In his JSFiddle it works, however it doesn't work on my WHMCS site. To be honest; it doesn't do anything. Nothing is showing up.

And he also mentioned it wasn't smart to target text labels?

Can you give an example of achieving this or point me in the right direction? Or is that a lot of coding in general?

All I want to achieve is that a DIV is shown if they select the option "Default anti-spam filters" (example) and hide it otherwise. If I can get an example, I can modify it to my own needs (and for other options as well).

for the benefit of others, the stackoverflow thread is...

http://stackoverflow.com/questions/32987990/show-hide-div-based-on-radio-button-selection-in-whmcs-bootstrap

frustratingly, I can get similar code to work fine on the "six" homepage and in "modern" order form, but not in standard_cart - either i'm not pasting the .js code into the correct file, or probably more likely, there is a js/jquery clash somewhere.

http://screencast.com/t/aF5SHIOL

in the example video above, i've used buttons to display the text - but you could use normal text, or info boxes if you wish... and you could add a default message instead of it starting blank and then shifting down to display the appropriate message (I did that after making the video!) - the solution is based on the code @ http://jsfiddle.net/DmWxt/

I don't know how to fix it to work in "Standard Cart", but if you can live with using "Modern", it would work in there... perhaps the other older order-form templates too.

btw - I forget to mention that you can add IDs to the input fields by editing the template - but you won't need to with the above solution.

Small update. I think the problem is the following parts in base.js:

jQuery('input').iCheck({
   inheritID: true,
   checkboxClass: 'icheckbox_square-blue',
   radioClass: 'iradio_square-blue',
   increaseArea: '20%'
});

jQuery.post("cart.php", 'a=cyclechange&ajax=1&i='+i+'&billingcycle='+billingCycle,
   function(data) {
       jQuery("#productConfigurableOptions").html(jQuery(data).find('#productConfigurableOptions').html());
       jQuery('input').iCheck({
           inheritID: true,
           checkboxClass: 'icheckbox_square-blue',
           radioClass: 'iradio_square-blue',
           increaseArea: '20%'
       });
   }
);

Because if I remove, in Firefox (Element Inspector), the div class 'iradio_square-blue' it works.

Actually I am pretty sure this is causing issues, because I removed both parts from base.js (for testing) and it works.

Anyone knows a workaround for this?

Regards