domain tld flag/ image add

[dewdropz]

Hello,

Anyone can tell me how i can give flag/image before domain tld like this https://prnt.sc/l02hp8

anyone can help about this?

[dewdropz]

anyone can not help?

[WHMCS John]

Hi @dewdropz,

You'll most likely need to edit /templates/orderforms/*your custom template*/domainregister.tpl and adjust the table which starts at line 200.

[dewdropz]

can give any example code?for specific tld i want to give specific image

[Kian]

Prepare CSS Image Sprites so that you have all flags in one png file like follows.

Please ignore the fact that the background is black. I created the image on Paint. The background is supposed to be transparent. Once done, create a CSS like follows.

.flag {
	background-image: url(PATH/TO/YOUR/flags.png);
	height: 12px;
	font-size: inherit;
	display: inline-block;
	vertical-align: middle;
	border: 1px solid #bbb;
	box-sizing: content-box !important;
	position: relative;
	top: -.085em
}
.flag-ad {
	background-position: 0 -0px;
	width: 17px;
}
.flag-ae {
	background-position: 0 -12px;
	width: 24px;
}
.flag-af {
	background-position: 0 -24px;
	width: 17px;
}
.flag-ag {
	background-position: 0 -36px;
	width: 17px;
}
.flag-ai {
	background-position: 0 -48px;
	width: 24px;
}
.flag-al {
	background-position: 0 -60px;
	width: 16px;
}
.flag-am {
	background-position: 0 -72px;
	width: 24px;
}
.flag-an {
	background-position: 0 -84px;
	width: 18px;
}
.flag-ao {
	background-position: 0 -96px;
	width: 17px;
}
.flag-aq {
	background-position: 0 -108px;
	width: 12px;
}
.flag-ar {
	background-position: 0 -120px;
	width: 19px;
}

Like @WHMCS John said, open domainregister.tpl and find on the foreach on $pricing. It should be around line 210. Focus on this column:

<strong>.{$tld}</strong>

Change it to:

<strong><i class="flag flag-{$tld}"></i> .{$tld}</strong>

This way you'll have flags right before TLD. To achieve this goal don't forget to:

• Add reference to flags style sheet in your WHMCS
• Change PATH/TO/YOUR/flags.png accordingly
• Include "exceptions". I mean for .eu domain put the EU flag, for .net a router, for .sexy the face of Berlusconi and so on
• Make sure that every TLD has a corresponding CSS class
• Be prepared for TLDs like .co.uk. You'll have to replace dots with something else (eg. flags-co-uk) since in CSS dots have a different meaning

Edited October 4, 2018 by Kian

[brian!]

On 01/10/2018 at 05:17, dewdropz said:

Anyone can tell me how i can give flag/image before domain tld like this https://prnt.sc/l02hp8

unless i'm mistaken, @dewdropz question is about adding the flags to the search results, not to the domain pricing matrix table - which all the other answers seem to refer to so far (though granted it's easier to put the flags in the pricing table!)...

I took a look at this on Monday and you can certainly do it the long way (which I would define as editing the .js file) - there should be a way to do it just using a clientareaheaderoutput hook without editing the template, but I haven't had the time to look into writing the hook yet - was planning on returning to it when I get the chance.

[dewdropz]

yes right i want flag for suggestion domain

[dewdropz]

Hello mate, i make this code

 

r=a.replace(/\./g,"-");o.addClass("clone").find("span.domain").html(n.sld).end().find("span.extension").html("."+a).end().find("span.flagext").html('<i class="flag flag-'+r+'"></i>').end(),

r=i.replace(/\./g,"-");o.addClass("clone").find("span.domain").html(n.sld).end().find("span.extension").html("."+i).end().find("span.flagext").html('<i class="flag flag-'+r+'"></i>').end()

but here something wrong. when i gives this then add to cart button not works .showing contact to support please help me anyone where i do mistake?

[brian!]

if it helps, i'll tell you the long-winded way I did it on Monday when testing - I was editing standard_cart/js/scripts.js, making my changes, minifying it and saving it as scripts.min.js.. so around line ~2289, I changed...

.find('span.domain').html(domain.sld).end()

to...

.find('span.domain').html('<img src="assets/img/tld_logos/' + tld.replace(/[^0-9a-z]/gi, '') + '.png"> ' + domain.sld).end()

the real pain with this issue will be making the icons the same size for all TLDs - it'd slightly easier if you were purely using flag icons for all TLDs as there are plenty of places to get flag icon sets... but TLD logos come in all shapes and sizes, so you may need to spend some time resizing those TLD logos you offer so they're consistently the same size... you could use a css class in the code, but that won't really help because of the variety of TLD logo sizes.

a couple of things to note - i'm using actual .png images as opposed to Kian's idea of sprites - nothing wrong with his idea, but this way you only have to edit the js (ideally you can write that into a hook at some future point) and create/find the TLD logos... no further editing of the template or css files required.

also, for simplicity sake, I used the existing 'tld_logos' image folder - in practice, you probably shouldn't do this because I think the WHMCS auto-updater would replace (during a WHMCS update) any existing image files in there that you have changed - so create a new folder in the assets/img folder (or anywhere), reference that folder in the code and then your images should be safe from the auto-updater.

hopefully this will help you towards your ultimate solution. 🙂