Add icon on payment page

Hello,

i am trying to add an icon on this payment page

at the place of the Arrow i want the mistercash logo

i have added this code to include the icon (last line) but this don't seems to do the trick, any ideas what i can do to make this work?

$this->code = 'idealcheckoutmistercash';
		$this->title = 'iDEAL Checkout - Mister Cash';
		$this->description = $sHtml;
		$this->payment = 'Mister Cash';
		$this->enabled = ((MODULE_PAYMENT_IDEALCHECKOUTMISTERCASH_STATUS == 'True') ? true : false);
		$this->sort_order = MODULE_PAYMENT_IDEALCHECKOUTMISTERCASH_SORT_ORDER;
		$this->icon = idealcheckout_getRootUrl(1) . 'idealcheckout/images/mistercash.png';

A simple (but hacky) way of doing this is to put an <img src> tag into the DEFINE statement.

Use Developer Toolkit to find the LANGUAGE DEFINE for - iDeal Checkout - Mister Cash .

It will probably be in the includes/languages/english/modules/payment/... (this payment module) file.

and be written like:

define('MODULE_PAYMENT_IDEAL_TEXT_TITLE', 'iDeal Checkout - Mister Cash');

You could do this - and it's better to host the icon image on your server...

define('MODULE_PAYMENT_IDEAL_TEXT_TITLE', '<img-src="images/icons/ideal.jpg" title="iDeal Checkout" alt="iDeal Checkout" width="10" height ="10" /> iDeal Checkout - Mister Cash');

Of course, you will need to adjust all the path references and other ALT ad SIZE parameters - just apply the rules of HTML.

Thanks, that is exactly what i needed!

I've done it in a similar way.
Unfortunately the Path is shown at "payment method" at the invoice created by the PDF Exporter.

Shop Suey:

I've done it in a similar way.
Unfortunately the Path is shown at "payment method" at the invoice created by the PDF Exporter.

Generally something like PDF Exporter needs to be given different instruction in order to process html code like what is associated with images. That is more of a safety/security concern because otherwise any such tag entered into the stream would be processed rather than just those planned to be processed.

Shop Suey:

I've done it in a similar way.
Unfortunately the Path is shown at "payment method" at the invoice created by the PDF Exporter.
Try adding the icon image to YOUR_ADMIN\images\OPTIONAL_FOLDER\YOUR_ICON.EXT, because the payment modules are looking for the store image folder, so you need to trick them a bit.
Where "OPTIONAL_FOLDER" are additional folders you may have used.

I will try to change it !

It has been set till now at /includes/languages/german/modules/payment/eustandardtransfer.php

->

define('MODULE_PAYMENT_EUTRANSFER_TEXT_TITLE', '<img src="/images/vorkasse.png"> Vorkasse / Banküberweisung</a>');

mc12345678:

Generally something like PDF Exporter needs to be given different instruction in order to process html code like what is associated with images. That is more of a safety/security concern because otherwise any such tag entered into the stream would be processed rather than just those planned to be processed.

I understand. E.g. I see that the integration of the paypal icon is better than my approach to add an icon to the other Payment Method. But I haven't been able yet to manage it.

Design75:

Try adding the icon image to YOUR_ADMIN\images\OPTIONAL_FOLDER\YOUR_ICON.EXT, because the payment modules are looking for the store image folder, so you need to trick them a bit.
Where "OPTIONAL_FOLDER" are additional folders you may have used.

I 've moved vorkasse.png from /images/vorkasse.png to /<admin>/images/vorkasse.png
Should I really do the following change?

define('MODULE_PAYMENT_EUTRANSFER_TEXT_TITLE', '<img src="/images/vorkasse.png"> Vorkasse / Banküberweisung</a>');

define('MODULE_PAYMENT_EUTRANSFER_TEXT_TITLE', '<img src="/<my-admin>/images/vorkasse.png"> Vorkasse / Banküberweisung</a>');

Shop Suey:

I 've moved vorkasse.png from /images/vorkasse.png to /<admin>/images/vorkasse.png
Should I really do the following change?

define('MODULE_PAYMENT_EUTRANSFER_TEXT_TITLE', '<img src="/images/vorkasse.png"> Vorkasse / Banküberweisung</a>');

> ```
define('MODULE_PAYMENT_EUTRANSFER_TEXT_TITLE', '<img src="/<my-admin>/images/vorkasse.png"> Vorkasse / Banküberweisung</a>');

The define should be left as it was. The path is relative, so the module will look automatically in the admin image folder.

Isn't it unsecure to link to that icon inside the admin?
Looking at the source code would show the folder name of the admin

Shop Suey:

Isn't it unsecure to link to that icon inside the admin?
Looking at the source code would show the folder name of the admin
Where are you using html from the backend for the customers? The only possibility might be a html e-mail.

There must be something wrong with my configuration.
Unfortunately the icon isn't being loaded.

schoolboy:

A simple (but hacky) way of doing this is to put an <img src> tag into the DEFINE statement.

Use Developer Toolkit to find the LANGUAGE DEFINE for - iDeal Checkout - Mister Cash .

It will probably be in the includes/languages/english/modules/payment/... (this payment module) file.

and be written like:

define('MODULE_PAYMENT_IDEAL_TEXT_TITLE', 'iDeal Checkout - Mister Cash');

> 
> You could do this - and it's better to host the icon image on your server...
> 
> ```php
define('MODULE_PAYMENT_IDEAL_TEXT_TITLE', '<img-src="images/icons/ideal.jpg" title="iDeal Checkout" alt="iDeal Checkout" width="10" height ="10" /> iDeal Checkout - Mister Cash');

Of course, you will need to adjust all the path references and other ALT ad SIZE parameters - just apply the rules of HTML.

Shop Suey:

I will try to change it !

It has been set till now at /includes/languages/german/modules/payment/eustandardtransfer.php

->

define('MODULE_PAYMENT_EUTRANSFER_TEXT_TITLE', '<img src="/images/vorkasse.png"> Vorkasse / Banküberweisung</a>');

> **Shop Suey:**
>
> There must be something wrong with my configuration.
> Unfortunately the icon isn't being loaded.
Not sure if it is specifically the cause, but there are a few basic html errors in the new/modified language define. 

There's no close for the img tag (necessary for XHTML stylw documents) and the img tag only has a src parameter (required to have at least src and alt). The parameters that schoolboy suggested are important/generally expected by browsers and are an improvement, but not necessarily the solution.  

The other thing it appears to be is the actual placement of the image on the server in the location where it is sought. When you view the source code for the page, you should at the top of the page see a base tag with a path to your store's site: ```
<base href="https://mysite.com/myfolder/">
``` where myfolder is a subdirectory or subdirectories for your store. If you have installed your ZC store to be your only customer interface and don't have your store in some sub-directory then you would not see the part of myfolder/ and the above path would end with a slash.

Now, the other part though, is that your img tag src should provide information relative to that base path, by it beginning with a slash ("/images/whatever.jpg") it is as if trying to pull the picture from: ```
https://mysite.com/myfolder//images/whatever.jpg
``` notice the double slash in the middle? That is an incorrect path and can cause problems displaying the image.

Of course then having the image at the described location also helps greatly if it is not there yet.

mc12345678:

Not sure if it is specifically the cause, but there are a few basic html errors in the new/modified language define.

There's no close for the img tag (necessary for XHTML stylw documents) and the img tag only has a src parameter (required to have at least src and alt). The parameters that schoolboy suggested are important/generally expected by browsers and are an improvement, but not necessarily the solution.

I have fixed these two aspects now. Thanks for the hints.
I can see the alt text now.

define('MODULE_PAYMENT_EUTRANSFER_TEXT_TITLE', '<img src="/images/vorkasse.png" alt ="Logo Vorkasse" /> Vorkasse / Banküberweisung</a>');

mc12345678:

The other thing it appears to be is the actual placement of the image on the server in the location where it is sought. When you view the source code for the page, you should at the top of the page see a base tag with a path to your store's site: ```

Yes, it does. The shop has been installed in the document root.

mc12345678:

Now, the other part though, is that your img tag src should provide information relative to that base path, by it beginning with a slash ("/images/whatever.jpg") it is as if trying to pull the picture from: ```
https://mysite.com/myfolder//images/whatever.jpg

I already have tried that. It's a good explanation you give. It's good to follow!
But in this case it seems it's not this kind of error.

> **mc12345678:**
>
> Of course then having the image at the described location also helps greatly if it is not there yet.

The image definitely is here: /<renamed-admin-folder>/images/vorkasse.png

I'm using a modified german version from <http://zen-cart-pro.at/>
Could there be a change in one of the core files which disturbs the image from the admin folder being read?

The paypal module has another define system.

I have modified it to read the image from the local server instead of the paypal servers.
It does not show the <src> code in the PDF Exporter.

define('MODULE_PAYMENT_EUTRANSFER_MARK_BUTTON_IMG', '/images/PayPal_mark_37x23.gif');