msaunders Posted July 29, 2016 Share Posted July 29, 2016 Hello I want to add an info tooltip to one of the config options being displayed during the order process. I am guessing I need to replace the config name and use something like {if $configoption.optionname eq 'CONFIGNAME'} MY CODE IS HERE TO REPLACE CONFIG NAME AND ADD TOOL TIP {/if} Has anyone done anything like this before ? Its a pity this is not a feature already where it will auto add a 'more info' tooltip configurable from WHMCS. Thanks in advance Martin 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted July 29, 2016 Share Posted July 29, 2016 Martin, they'd be a few ways to do this... one of which will be to determine which tooltip method you want to use - e.g browser, jquery tooltip, 3rd-party plugin, css etc... the first thin you'd have to do is identify what config option type it is and add your code to the appropariate block of code... e.g if it was a slider (quantity with max limit), it would be type 4... you could then modify configureproduct.tpl and change... <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label> to... <label for="inputConfigOption{$configoption.id}" {if $configoption.id eq '33'}title="This is my tooltip message!"{/if}>{$configoption.optionname}</label> and when the mouse runs over the config option name, a tooltip will appear... two things to note with this... you can, in theory, use the configoption.optionname to identify your specific config option - but be aware that option names don't need to be unique (you can have multiple config options with the same name) - BUT their ID values will be unique, so to be more accurate, it's safer to use their ID values in your if statements. secondly, if you were going to use this extensively (e.g on more than one config option), you could use the Language Overrides functionality to simplify your tooltip code and/or make them multilingual... <label for="inputConfigOption{$configoption.id}" {assign tooltip 'configoptiontooltip'|cat:$configoption.id} title="{$LANG.{$tooltip}}">{$configoption.optionname}</label> this would add tooltips for all config options in type 4... however, only if there is an entry in the language override file(s) for that config option will it be visible on-screen. $_LANG['configoptiontooltip33'] = "Hello World"; obviously, if you want to make the tooltips more visible by using jquery, css etc, you can do so (though there would be too many different options to go into detail here) - each would probably require a slightly different technique (and you may run into alignment issues), but in terms of the Smarty, the above code should be a good starting point. 0 Quote Link to comment Share on other sites More sharing options...
msaunders Posted July 29, 2016 Author Share Posted July 29, 2016 Hi Brian Fantastic reply as always ! The tooltip I wanted to use was an icon with popover so its something like: <i class="ftable-icon-tooltip icon-line2-info" data-toggle="tooltip" data-placement="top" title="" data-original-title="An Explanation"></i> So I would want this icon to appear after the config option name e.g config option name is Dedicated IP and I want an info icon after it so customer can mouse over it . Make sense? p.s check your pm's 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted July 29, 2016 Share Posted July 29, 2016 The tooltip I wanted to use was an icon with popover so its something like: <i class="ftable-icon-tooltip icon-line2-info" data-toggle="tooltip" data-placement="top" title="" data-original-title="An Explanation"></i> So I would want this icon to appear after the config option name e.g config option name is Dedicated IP and I want an info icon after it so customer can mouse over it . Make sense? you can put your code inside the {if} statement, then move the entire if statement to before </label> chances are the alignment will be off, but have a go and see what happens. 0 Quote Link to comment Share on other sites More sharing options...
msaunders Posted July 29, 2016 Author Share Posted July 29, 2016 Hi Brian That worked out perfectly , nice one ! Regarding your suggestion withe language overrides, I assume I can do this and still use my own tooltip code ? Have a great weekend. Martin 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted July 30, 2016 Share Posted July 30, 2016 Regarding your suggestion withe language overrides, I assume I can do this and still use my own tooltip code ? I don't see why not... looking at your code, I think you'd just need to change... title="{$LANG.{$tooltip}}"> to... data-original-title="{$LANG.{$tooltip}}"> though it might equally work with title - anyway, it should certainly work with one of them! 0 Quote Link to comment Share on other sites More sharing options...
msaunders Posted July 31, 2016 Author Share Posted July 31, 2016 Hi Brian Yes it worked fine - thanks again . Brian do you offer coding services ? If so can you PM me ? 0 Quote Link to comment Share on other sites More sharing options...
Atomic Posted October 21, 2016 Share Posted October 21, 2016 Hi Brian, I'm unable to find this code in the configureproduct.tpl in /modern: <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label> Could you give me a starting point? 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted October 21, 2016 Share Posted October 21, 2016 you should just need to change... <tr><td class="fieldlabel">{$configoption.optionname}</td><td class="fieldarea"> to... <tr><td class="fieldlabel" {assign tooltip 'configoptiontooltip'|cat:$configoption.id} title="{$LANG.{$tooltip}}">{$configoption.optionname}</td><td class="fieldarea"> 0 Quote Link to comment Share on other sites More sharing options...
Atomic Posted October 21, 2016 Share Posted October 21, 2016 I don't think a tooltip is going to work. How can I get a link to appear under a config option of "Backups"? Problem is I have multiple config groups for Backups depending on which product is selected. 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted October 21, 2016 Share Posted October 21, 2016 I don't think a tooltip is going to work. How can I get a link to appear under a config option of "Backups"? Problem is I have multiple config groups for Backups depending on which product is selected. it would work - it's just a case of deciding what it is you want to tooltip. Unable to display content. Adobe Flash is required. also, this technique is using IDs rather than names - and in this context, IDs will be unique - - so it wouldn't matter how many configurable options had the same name, any specific option could always be identified. however, depending on exactly what you're trying to do, you're certainly not going to be able to access configurable option GROUPS in this way, without additional action hook coding, because the cart doesn't have direct access to that information. when it has, then you could tooltip on the configurable option groups - either by name or ID... or you could replace your idea of using an image for config option groups and add the tooltip text in there instead. 0 Quote Link to comment Share on other sites More sharing options...
Atomic Posted October 21, 2016 Share Posted October 21, 2016 How did you get the text displaying under the operating system? That would certainly be preferable. 0 Quote Link to comment Share on other sites More sharing options...
brian! Posted October 21, 2016 Share Posted October 21, 2016 How did you get the text displaying under the operating system? That would certainly be preferable. Magic. it's basically the same as the above code, but instead of outputting the language override as a tooltip, it's outputting it normally... plus of course, it's using a hook to get the config group names. 0 Quote Link to comment Share on other sites More sharing options...
Atomic Posted October 21, 2016 Share Posted October 21, 2016 Aww, such a tease. 0 Quote Link to comment Share on other sites More sharing options...
Atomic Posted October 24, 2016 Share Posted October 24, 2016 Any chance you feel like sharing the template code and hook? Hate to ask as you've been more than helpful. 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.