Jump to content

Search the Community

Showing results for tags 'logos'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


WHMCS.Community

  • The latest WHMCS Release
  • The Latest from the WHMCS Team
    • News & Announcements
  • WHMCS.Community
    • Community Announcements
    • Introduce Yourself
  • Using WHMCS
    • Pre-Sales Questions
    • Admin & Configuration Questions
    • Installation, Upgrade, and Import Support
    • Using WHMCS
    • Troubleshooting Issues
    • Vendor Discussions
  • WHMCS Beta Program
  • WHMCS Showcase
    • Showcase Your Site
    • Share Your Best Practices & Tips
  • Developing & Extending WHMCS
    • Third Party Add-ons
    • Service Offers & Requests
    • Developer Corner
    • Building Modules
    • Share Ideas for WHMCS Modules
  • Community Competitions
    • Competitions
  • General Discussions
    • General Discussion
  • General Feedback & Assistance
    • WHMCS.Community Tips & Tricks
  • Third Party Developers's Topics
  • Turkish International Discussions's Topics
  • Russian International Discussions's Topics
  • Spanish International Discussions's Topics
  • Portuguese International Discussions's Topics
  • French International Discussions's Topics
  • Italian International Discussions's Topics
  • German International Discussions's Topics
  • WHMCS Brasil's Topics
  • WHMCS Brasil's Tópicos
  • ModulesGarden Club's Topics
  • Hungarian International Discussions's Segítség
  • ThemeMetro Club's Topics

WHMCS Version

  • V7 Hotfixes
  • V7.1.x Hotfixes
  • V7.2.x Hotfixes
  • V7.3.x Hotfixes
  • V7.4.x Hotfixes
  • V7.5.x Hotfixes
  • V7.6.x Hotfixes
  • V7.7.x Hotfixes

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Found 1 result

  1. When displaying your payment options during the final stages of the checkout process, the available payment gateway options are shown as text – in a number of different ways based upon the order form template being used. If we wanted to make this more attractive, we could replace the text of any or all of the gateways, with an image or logo, by editing the viewcart.tpl template within the active order form template. In order to do this, we can use one of the WHMCS variables that we have access to during the checkout process - $gateway.sysname - the variable stores in lowercase, the unique name used by WHMCS for the payment gateway. This is not the value you entered for the gateway in the “Display Name” field in the “Payment Gateways” section of the Admin Area. The next step is to create or find images for each of the gateways that you wish to replace with a graphic, all in the same graphic format (PNG, JPG or GIF) and save them with a lowercase filename. For example, if you were using PNG format, then your “PayPal” image would be called ‘paypal.png’; your “Bank Transfer” image is called ‘banktransfer.png’; and the “Mail-In Payment” gateway (in the above example, named ‘Cheque’) would be ‘mailin.png’. I believe the filename to be used is based upon the filename of the gateway file in ‘modules/gateways’, but you should be able to find its value by viewing the source of your cart page in your browser... [<label><input type="radio" name="paymentmethod" value="paypal" onclick="hideCCForm()" /> <img src=images/paypal.png /> So the part of interest above is: value=”paypal”. You would then upload these images to your “images” directory within WHMCS. If you wanted to put them in their own folder within the “images” directory, you can – but you will need to adjust the URL in the code below to take account of the slightly different path (see end of tutorial). The images directory i'm using in these examples is whmcs/images - and not the template(s) images folder. The replacement code works by first creating a new variable to store the URL of the gateway logo, then it will check to see if the image exists in the “images” folder (remember that it must have a lowercase filename on the server otherwise it will not be found) – if the image exists, it will display the image; if no image is found, it will display the text (as it does now). In the examples above, I have only uploaded a ‘paypal’ logo and hence only that gateway is using a replacement image – if I were to upload logos for the other two gateways, they would also be used instead of their text names. So, I will now go through each of the eight existing order form templates and show the code to be replaced, the replacement code and an image of how the cart checkout page looks when the new code is added. Ajaxcart Replace.... <div class="cartbox">{foreach key=num item=gateway from=$gateways} <label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} /> {$gateway.name}</label>{/foreach}</div> With... <div class="cartbox">{foreach key=num item=gateway from=$gateways} <label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} /> {assign var="paylogo" value="images/`$gateway.sysname`.png"} {if file_exists($paylogo)} <img src={$paylogo} /> {else} {$gateway.name}{/if}</label> {/foreach}</div> Boxes Replace.... <p align="center">{foreach key=num item=gateway from=$gateways}<label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} />{$gateway.name}</label> {/foreach}</p> With... <p align="center">{foreach key=num item=gateway from=$gateways}<label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} /> {assign var="paylogo" value="images/`$gateway.sysname`.png"} {if file_exists($paylogo)} <img src={$paylogo} /> {else} {$gateway.name}</label> {/foreach}</p> Cart Replace... <p align="center">{foreach key=num item=gateway from=$gateways}<label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} />{$gateway.name}</label> {/foreach}</p> With... <p align="center">{foreach key=num item=gateway from=$gateways}<label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} />{assign var="paylogo" value="images/`$gateway.sysname`.png"} {if file_exists($paylogo)} <img src={$paylogo} /> {else} {$gateway.name}{/if}</label> {/foreach}</p> Comparison Replace... <p class="paymentmethods">{foreach key=num item=gateway from=$gateways}<label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} />{$gateway.name}</label><br />{/foreach}</p> With... <p class="paymentmethods">{foreach key=num item=gateway from=$gateways}<label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} />{assign var="paylogo" value="images/`$gateway.sysname`.png"} {if file_exists($paylogo)} <img src={$paylogo} /> {else} {$gateway.name}{/if}</label><br />{/foreach}</p> Modern Replace... {foreach key=num item=gateway from=$gateways}<label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" id="pgbtn{$num}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} /> {$gateway.name}</label> {/foreach} With... {foreach key=num item=gateway from=$gateways}<label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" id="pgbtn{$num}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} /> {assign var="paylogo" value="images/`$gateway.sysname`.png"} {if file_exists($paylogo)} <img src={$paylogo} /> {else} {$gateway.name}{/if}</label> {/foreach} Slider Replace... {foreach key=num item=gateway from=$gateways}<label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} />{$gateway.name}</label> {/foreach} With... {foreach key=num item=gateway from=$gateways}<label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} />{assign var="paylogo" value="images/`$gateway.sysname`.png"} {if file_exists($paylogo)} <img src={$paylogo} /> {else} {$gateway.name}{/if}</label> {/foreach} Verticalsteps Replace... <p align="center">{foreach key=num item=gateway from=$gateways}<input type="radio" name="paymentmethod" value="{$gateway.sysname}" id="pgbtn{$num}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} /><label for="pgbtn{$num}">{$gateway.name}</label> {/foreach}</p> With... <p align="center">{foreach key=num item=gateway from=$gateways}<input type="radio" name="paymentmethod" value="{$gateway.sysname}" id="pgbtn{$num}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} /><label for="pgbtn{$num}">{assign var="paylogo" value="images/`$gateway.sysname`.png"} {if file_exists($paylogo)} <img src={$paylogo} /> {else} {$gateway.name}{/if}</label> {/foreach}</p> Web20Cart Replace... <div class="cartbox">{foreach key=num item=gateway from=$gateways} <label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} /> {$gateway.name}</label> {/foreach}</div> With... <div class="cartbox">{foreach key=num item=gateway from=$gateways} <label><input type="radio" name="paymentmethod" value="{$gateway.sysname}" onclick="{if $gateway.type eq "CC"}showCCForm(){else}hideCCForm(){/if}"{if $selectedgateway eq $gateway.sysname} checked{/if} /> {assign var="paylogo" value="images/`$gateway.sysname`.png"} {if file_exists($paylogo)} <img src={$paylogo} /> {else} {$gateway.name}{/if}</label> {/foreach}</div> Customised Order Form Templates If you are using a customised order form, perhaps supplied with a purchased WHMCS theme, this solution may still work with your template - in viewcart.tpl, you simply replace... {$gateway.name} With... {assign var="paylogo" value="images/`$gateway.sysname`.png"} {if file_exists($paylogo)} <img src={$paylogo} /> {else} {$gateway.name}{/if} In these examples, I have used .PNG images - if you wanted to use .JPG or .GIF instead, then you would replace .png in the code with .jpg or .gif - remember, they must all use the same format! if you wanted to put the gateway images in their own folder, e.g 'paylogos', then you would replace the code... {assign var="paylogo" value="images/`$gateway.sysname`.png"} with... {assign var="paylogo" value="images/paylogos/`$gateway.sysname`.png"} I hope this helps anyone who wants to replace their payment gateways text with images. I should also add that this is tested and working on the latest WHMCS release as of this tutorial - v5.3.3
×

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated