olliedog Posted February 22, 2014 Share Posted February 22, 2014 Hi, is it possible to have a question mark graphic at the end of each configurable option field the same as the attached graphic, I would like to have a window popup with the details of the configurable option in. Thanks Andy 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted February 22, 2014 Share Posted February 22, 2014 to add the graphic, then you'd need to look at editing configureproduct.tpl in your order form template - specifically the {if $configurableoptions} block of code to cover all the config option types. which order form are you using? 0 Quote Link to comment Share on other sites More sharing options...
olliedog Posted February 22, 2014 Author Share Posted February 22, 2014 to add the graphic, then you'd need to look at editing configureproduct.tpl in your order form template - specifically the {if $configurableoptions} block of code to cover all the config option types. which order form are you using? Hi Brian, Im using web20cart, how do I go about adding the code in? Thanks Andy 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted February 22, 2014 Share Posted February 22, 2014 Hi Andy, do you already have a tooltip script to use? adding the image is the easy part... linking it to the correct tooltip text is the trickier end of the equation! 0 Quote Link to comment Share on other sites More sharing options...
olliedog Posted February 22, 2014 Author Share Posted February 22, 2014 Hi Andy, do you already have a tooltip script to use? adding the image is the easy part... linking it to the correct tooltip text is the trickier end of the equation! Hi Brian, I have the tool tip question marks running on a page already, which is where the screen shot came from, so I should be able to reuse this if i can get it to work, as it came as part of a page with one of the modules I've installed. Unless you know of a better way to get it to work? It has two chances of working Can you point me in the right direction for putting the question mark at the end of the text field? thanks Andy 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted February 22, 2014 Share Posted February 22, 2014 Hi Andy, I have the tool tip question marks running on a page already, which is where the screen shot came from, so I should be able to reuse this if i can get it to work, as it came as part of a page with one of the modules I've installed. ok - that might solve the script issue! Unless you know of a better way to get it to work? I think I can see how you could get this to work... in theory - they're generated in a foreach loop, so I suspect that you may need to use the value of the config option variable to store the content of the tooltip... but without seeing your script, I don't know if it can do that... there may even be an easier way that i'm not realising! Can you point me in the right direction for putting the question mark at the end of the text field? you may have to do this four times (for each of the config format options - dropdown, radio, checkbox and quantity) as each is controlled by a different line of code in that same block... if we take radio.. <label><input type="radio" name="configoption[{$configoption.id}]" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if}> {$options.name}</label><br /> you should just add the image after the {options.name} variable... <label><input type="radio" name="configoption[{$configoption.id}]" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if}> {$options.name} <img scr="images/question.png"></label><br /> obviously, you'll need to hyperlink it to use your script... also, the image path is relative to the whmcs installation directory - so above i've just used the higher images directory... if you wanted to use the template dir, you could use templates/web20cart/images/ as the path. there's another field that uses {options.name} and two that use {$configoption.options.0.name} - the image should be added as per above after the variable. 0 Quote Link to comment Share on other sites More sharing options...
olliedog Posted February 22, 2014 Author Share Posted February 22, 2014 Hi Andy, ok - that might solve the script issue! I think I can see how you could get this to work... in theory - they're generated in a foreach loop, so I suspect that you may need to use the value of the config option variable to store the content of the tooltip... but without seeing your script, I don't know if it can do that... there may even be an easier way that i'm not realising! you may have to do this four times (for each of the config format options - dropdown, radio, checkbox and quantity) as each is controlled by a different line of code in that same block... if we take radio.. <label><input type="radio" name="configoption[{$configoption.id}]" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if}> {$options.name}</label><br /> you should just add the image after the {options.name} variable... <label><input type="radio" name="configoption[{$configoption.id}]" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if}> {$options.name} <img scr="images/question.png"></label><br /> obviously, you'll need to hyperlink it to use your script... also, the image path is relative to the whmcs installation directory - so above i've just used the higher images directory... if you wanted to use the template dir, you could use templates/web20cart/images/ as the path. there's another field that uses {options.name} and two that use {$configoption.options.0.name} - the image should be added as per above after the variable. Thanks for all your help with this. This is the code the other page uses so i guess is a modal script $licenses[] = 'Softaculous <a data-controls-modal="show-softaculous" href="#"><img src="./modules/servers/cloud/assets/images/help_16x16.png" border="0" align="absmiddle"></a>'; I will have to find out how this works, will let you know how I get on Andy 0 Quote Link to comment Share on other sites More sharing options...
olliedog Posted February 22, 2014 Author Share Posted February 22, 2014 Hi Brian this is the code, but the image does not show up, have i got them in the right place? If i type the path in the browser the question mark image is there, so I know the path is correct {if $configurableoptions} <h3>{$LANG.orderconfigpackage}</h3> <p>{$LANG.cartconfigoptionsdesc}</p> <div class="cartbox"> <table class="noborders"> {foreach key=num item=configoption from=$configurableoptions} <tr> <td class="fieldlabel">{$configoption.optionname}:</td> <td>{if $configoption.optiontype eq 1} <select name="configoption[{$configoption.id}]"> {foreach key=num2 item=options from=$configoption.options} <option value="{$options.id}"{if $configoption.selectedvalue eq $options.id} selected="selected"{/if}>{$options.name}<img scr="templates/dir/img/question.png"></option> {/foreach} </select> {elseif $configoption.optiontype eq 2} {foreach key=num2 item=options from=$configoption.options} <label><input type="radio" name="configoption[{$configoption.id}]" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if}> {$options.name}<img scr="templates/dir/img/question.png"></label><br /> {/foreach} {elseif $configoption.optiontype eq 3} <label><input type="checkbox" name="configoption[{$configoption.id}]" value="1"{if $configoption.selectedqty} checked{/if}> {$configoption.options.0.name}<img scr="templates/dir/img/question.png"></label> {elseif $configoption.optiontype eq 4} <input type="text" name="configoption[{$configoption.id}]" value="{$configoption.selectedqty}" size="5"> x {$configoption.options.0.name} {/if}</td> </tr> {/foreach} </table> </div> {/if} 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted February 22, 2014 Share Posted February 22, 2014 apologies - when I typed 'templates/web20cart/images/'... it should have been templates/orderforms/web20cart/images/ or if you're using the image from the module, modules/servers/cloud/assets/images/help_16x16.png might work. 0 Quote Link to comment Share on other sites More sharing options...
olliedog Posted February 22, 2014 Author Share Posted February 22, 2014 Hi Brian, the path to the image is ok as i can paste it in the browser. Have i put the three links in the configure template in the correct place? thanks Andy 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted February 22, 2014 Share Posted February 22, 2014 Andy, I replied to your PM... just seen that you were copying my error! told you it was easily done! Brian 0 Quote Link to comment Share on other sites More sharing options...
olliedog Posted February 22, 2014 Author Share Posted February 22, 2014 Andy, I replied to your PM... just seen that you were copying my error! told you it was easily done! Brian Perfect, thanks for the help:!: the question marks are now there, I just need to get the popup windows to work Thanks again Andy 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.