How to configure a product addon with a dropdown selector?

[namhost]

I am trying to offer the user the option to select an addon during checkout. I've spent a day on this now and I've come to conclusion I have to use a Product addon and not a configurable option, but let me explain.

I want to offer cWatch licenses to clients. During checkout, they must be able to select one of these:
 - cWatch Basic (FREE)
 - cWatch Starter (10 USD p/m)
 - cWatch Pro (20 USD p/m)

I was able to get the menu working with configurable options, but then the product is tied to the billing cycle of what they order. For example, if they order linux hosting for 3 years, then they would have to pay for cWatch for 3 years. So the only way to do this, is to add cWatch as a configurable option. But then I don't have a dropdown! Then I end up with what is in the attachment. Which is not what I want. I want the user to be able to select either package from a dropdown, and not show a radio button. But only for this specific case.

How is this done? It almost feels like product addons also need groupings. I can't see how it can work without it. 

Can anyone steer me in the right direction? Thanks!

[brian!]

6 hours ago, namhost said:

Can anyone steer me in the right direction? Thanks!

if you can't use configurable options, can this cWatch addon be it's own product ?

if so, then perhaps you could create a product bundle containing the hosting product, the cwatch product - each product could have it's own different billing cycle, e.g the hosting can be 3 years, cwatch can be annual.

I suppose grouping addons into a dropdown could be done, but that's not a quick and simple customisation.

[namhost]

 

 

 

1

6 minutes ago, brian! said:

I suppose grouping addons into a dropdown could be done, but that's not a quick and simple customisation.

I don't mind taking a stab at it, but I don't know where to begin. I assume some sort of hook, but which one. Which hook would allow me to change the display of addon products? Because then I can add them all as addon products, but hide them using css and add my own custom selector that just checks or unchecks them. But where would I add this? 

[brian!]

31 minutes ago, namhost said:

I don't mind taking a stab at it, but I don't know where to begin. I assume some sort of hook, but which one.

for that template, it would be ClientAreaPageCart.

32 minutes ago, namhost said:

Which hook would allow me to change the display of addon products?

there isn't one - you'd have to edit the configureproduct.tpl template because you're changing the output... actually, you could output it with a hook if you outputted them with any MC addons, but then you'd also have to remove them from the addons array to avoid duplication... also, don't forget that you can't change the cycle of an addon in the cart, it will default to the lowest cycle that is priced.

37 minutes ago, namhost said:

Because then I can add them all as addon products, but hide them using css and add my own custom selector that just checks or unchecks them. But where would I add this? 

in the template or the hook.

[namhost]

#nailedit

Check the attachments! 

Thanks for the help! 🤙

[brian!]

3 minutes ago, namhost said:

Thanks for the help!

I would hope that you're going to share the coding for others who may want to do the same.

[namhost]

What I did is a bit hacky, but here goes:

From this part:

{foreach $addons as $addon}

In configureproduct.tpl. I first try to identify the items that has "WHMCS" in it:

{if strpos($addon.name, 'WHMCS') !== false}
    {$isGroupable = true}
    {$hasWhmcsAddons = true}
    {$isWhmcsItem = true}
    {$extraClass = 'isWHMCS'}
{/if}

Then I hide those addons:

<div class="col-sm-12 {if $isGroupable}hiddenToBeGrouped{/if} {$extraClass}">

the "hiddenToBeGrouped" css entry is simply:

.hiddenToBeGrouped {
  display: none;
}

And then I simply create a new select option using the items with "WHMCS" in it:

<select name="whmcsLicenseSelect" onchange="whmcsLicenseChanged(this)">
	<option value="">No WHMCS License</option>
	{foreach $addons as $addon}
		{$isWhmcsItem = false}
		{if strpos($addon.name, 'WHMCS') !== false}
			{$isWhmcsItem = true}
		{/if}

		{if $isWhmcsItem}
			<option value="{trim(substr($addon.name, 5))}" {if $inCartWHMCSItem == $addon.name}selected{/if}>
				{trim(substr($addon.name, 5))}
				-
				{str_replace(" Monthly", " p/m", $addon.pricing)}
			</option>
		{/if}
	{/foreach}
</select>

And then I manipulate the hidden buttons with javascript:

<script>
	function whmcsLicenseChanged(caller)
	{
		var selectedVal = jQuery(caller).val().trim();

		// Unset All
		jQuery("span.singleAddonName").each(function()
		{
			var thisItem = jQuery(this);
			var title = thisItem.html().trim();
			if(thisItem.parent().find('input').is(':checked') && title.indexOf("WHMCS") >= 0)
			{
				thisItem.parent().find('.iCheck-helper').click();
			}
		});

		// Set relevant selected one
		if (selectedVal != "")
		{
			jQuery("span.singleAddonName").each(function()
			{
				var thisItem = jQuery(this);
				var title = thisItem.html().trim();
				if (title.indexOf(selectedVal) >= 0)
				{
					thisItem.parent().find('.iCheck-helper').click(); //attr("checked", "checked");
				}
			});
		}
	}
</script>

Not sure if it's the most elegant solution, but it works perfectly! :-)

[brian!]

16 hours ago, namhost said:

What I did is a bit hacky

you should have seen some of the code I posted here in my early days *shudders* 😲

[namhost]

2 hours ago, brian! said:

you should have seen some of the code I posted here in my early days *shudders* 😲

Haha. Its not that bad! :P

But I'll come back and post an update once it's in a production state. Might even turn some of these features into modules once I get the hang of whmcs. We've been using another frontend and whmcs as backend only. We are now switching to only using WHMCS and I'm pretty sure it's the best decision we've made in years!

[zitu4life]

23 minutes ago, namhost said:

Haha. Its not that bad! 😛

But I'll come back and post an update once it's in a production state. Might even turn some of these features into modules once I get the hang of whmcs. We've been using another frontend and whmcs as backend only. We are now switching to only using WHMCS and I'm pretty sure it's the best decision we've made in years!

 Would be a lot a work, No?? I guess there are a template out there that looks like a native frontend some even with blogs, and more futures...using modules is fine but sometimes security issues let me in doubt 😖...

Sometimes I think would be easyer for my clients if I had just WHMCS with customized frontend inbuild instead of having 2. WHMCS and Main Website...on WHMCS footer emails has url saying visit my website, login to client are....so sometimes it is like 2 different thing Main Website and Portal for clients understanding. For my needs having only WHMCS looks better, but I did not take that decision yet...Others says for SEO only WHMCS is not so good, but since my core market is not massive sold online, having only WHMCS looks interisting option to take in consideration.

Why do you think that is the best  decision made in years? Please share your experience and let others learn with that.

[namhost]

I've been using a Drupal bridge that I built for years. And I am telling you, it's better to go with WHMCS. Any SEO tweaks you need to make you can do yourself. There are no limitations. It might just take you longer if you need to learn your way around whmcs. I've been at it for about a month now and I've already built a few custom modules and can do pretty much anything in WHMCS that I could do in Drupal. 

[zitu4life]

can you share a url of your site o even print screen, I have been thinking of have just WHMCS and bring some of those things on main website to WHMCS, if I have only WHMCS  live chat will be on main WHMCS, but having 2 websites it is a litle confusing...

 

[namhost]

1 minute ago, zitu4life said:

can you share a url of your site o even print screen, I have been thinking of have just WHMCS and bring some of those things on main website to WHMCS, if I have only WHMCS  live chat will be on main WHMCS, but having 2 websites it is a litle confusing...

 

Not sure if I am allowed to post a link but check out namhost dot com. That's the current Drupal solution that will be replaced with a far superior WHMCS solution in the next few months.

[zitu4life]

17 minutes ago, namhost said:

Not sure if I am allowed to post a link but check out namhost dot com. That's the current Drupal solution that will be replaced with a far superior WHMCS solution in the next few months.

😉😉