X-Cart forums - Adding Images to the Invoice

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (X-Cart 5) (https://forum.x-cart.com/forumdisplay.php?f=56)

- - Adding Images to the Invoice (https://forum.x-cart.com/showthread.php?t=70618)

minfinger

11-25-2014 09:55 AM

Adding Images to the Invoice

How would I go about adding images to the email invoice and the online Invoice?

tony_sologubov

11-26-2014 06:21 AM

Re: Adding Images to the Invoice

You should edit the notification template according to:
http://kb.x-cart.com/display/XDD/Basic+guide+to+theme+creation#Basicguidetothemecre ation-UsingCustomSkinmodule

As for pulling product image, you can do this like this in template:
{product.getImage()}

minfinger

11-30-2014 05:23 PM

Re: Adding Images to the Invoice

So how do I determine which tpl to look for...There are hundreds of them. I'd like the picture to show up everywhere it shows information about the order, on the admin, the front end, and in the email notification. How do I figure all that out without spending hours poking through tpls?

tony_sologubov

12-01-2014 04:57 AM

Re: Adding Images to the Invoice

You can use Webmaster Kit module on the Order invoice page in admin area.

If you find that you need to put your image into, let's say, admin/en/order/invoice/body.tpl template, it means that you need to actually insert an image into skins/mail/en/order/invoice/body.tpl template in order to add image to an email notification.

Anyway, if you tell me where exactly you want to show an image in the notification, I will be able to tell you a specific template.

minfinger

12-04-2014 05:06 PM

Re: Adding Images to the Invoice

I want to insert a Column next to Item in the Order Details in the Admin area and the end user view. It's also import that when the emails get generate that go to the user and various departments that the Column with the image be there as well.
http://i21.photobucket.com/albums/b298/fasterthanyours/Invoiceinemail.jpg

tony_sologubov

12-05-2014 01:21 AM

Re: Adding Images to the Invoice

Does it mean that your product image should be displayed in an area marked by red on my snapshot?
http://awesomescreenshot.com/0453z4fac3

minfinger

12-05-2014 01:58 AM

Re: Adding Images to the Invoice

No on the left of the Item Column in a new Column.

tony_sologubov

12-09-2014 04:59 AM

Re: Adding Images to the Invoice

OK, in this case you mod will work as follows:

0) The product's table is rendered according to the skins/admin/en/order/invoice/parts/items/items.tpl template. Of course, I am talking about admin area right now, but let's solve the problem for invoice in admin area first, so you could get an idea of approach and then you will be able to simply re-apply change to mail notifications.

1) You need to insert a template that will define a new column of the table into the "invoice.items.head" view list. The process is described here: http://kb.x-cart.com/display/XDD/Step+2+-+applying+design+changes#Step2-applyingdesignchanges-Addingnewtemplatesandwidgets

The code of such template will be something really easy like:

Code:

{* vim: set ts=2 sw=2 sts=2 et: *}



{**

 * @ListChild (list="invoice.items.head", weight="5")

 *}

<th class="item">Image</th>

2) Then, you need to insert a template into "invoice.item" view list. This template code will be simple as well:

Code:

{* vim: set ts=2 sw=2 sts=2 et: *}



{**

 * @ListChild (list="invoice.item", weight="5")

 *}

<th class="item"><widget class="\XLite\View\Image" image="{item.getImage()}" 

     alt="{item.getName()}" maxWidth="80" maxHeight="80" /></th>

Please, let me know if it makes sense to you.

minfinger

12-11-2014 04:43 PM

Re: Adding Images to the Invoice

It makes sense, but I'm still lost. I used the webmaster tools, but I don't understand how to figure out which tpl the columns are in. I'ts not clear to me whether or not this is a Module or if I'm modding the files on the server.

tony_sologubov

12-16-2014 05:06 AM

Re: Adding Images to the Invoice

Hi Michael!

Let us add a product image for product table for order invoice that displayed in admin area first. It will be an example of you, so you could grasp an idea.

I assume, you create a mod with developer ID DevId and module ID ModuleId

1) Create the skins/admin/en/modules/DevId/ModuleId/head.tpl template with the content:

Code:

{* vim: set ts=2 sw=2 sts=2 et: *}



{**

 * @ListChild (list="invoice.items.head", weight="5")

 *}

<th class="item">Image</th>

2) Create the skins/admin/en/modules/DevId/ModuleId/image.tpl template with the content:

Code:

{* vim: set ts=2 sw=2 sts=2 et: *}



{**

 * @ListChild (list="invoice.item", weight="5")

 *}

<widget class="\XLite\View\Image" image="{item.getImage()}" 

     alt="{item.getName()}" maxWidth="80" maxHeight="80" />

After you do this, your order invoices in admin area will start displaying product images.

Try this and let me know if it works for you.

topspin6711

12-21-2014 09:29 AM

Re: Adding Images to the Invoice

Tony, thank you for this. It didn't work as written, I had to make two changes to image.tpl:

Code:

{* vim: set ts=2 sw=2 sts=2 et: *}



{**

 * @ListChild (list="invoice.item", weight="5")

 *}

<th class="item">

    <widget class="\XLite\View\Image" image="{item.getImage()}" 

     alt="{item.getName()}" maxWidth="80" maxHeight="80" centerImage="0" />

</th>

First, changed "invoice.items" to "invoice.item".

Figured this out looking at the other items.tpl files /skins/admin/en/order/invoice/parts/items/

Second, seems you have to call the image widget class as you see. I don't really understand this so if you can explain I would appreciate it. Found this looking at another tpl using the getImage function, namely item.image.tpl.

Haven't tested, but I assume everything after the alt tag is optional.

tony_sologubov

12-24-2014 05:32 AM

Re: Adding Images to the Invoice

Hi topspin6711!

You are totally right about my mistakes in the code. Sorry for that and corrected my initial code.

The thing about calling <widget> is you basically saying "OK, X-Cart, you have to display an image with source passed in image param, alt from alt param and dimensions defined in height/width params". Of course, you can do the same by specifying this code in template:

<img src="{item.getImage()}" alt="item.getName()" max-width="80" max-height="80">

but X-Cart will slice an image on fly if you call it via widget, so if you call <widget> your notification will have 80x80 image, while if you call <img src>, your notification will have big image resized by mail client.

Hopefully, it helps. Let me know if it is still unclear why <widget> is used.

minfinger

03-08-2015 08:10 AM

Re: Adding Images to the Invoice

Here are the results that I got. I know what's wrong, but I'm not 100% sure how to fix it.

Single Item in the Cart:
http://i21.photobucket.com/albums/b298/fasterthanyours/Images%20On%20Invoice%2001%20-%20Single%20Item.jpg

Multiple Items in Cart:
http://i21.photobucket.com/albums/b298/fasterthanyours/Images%20On%20Invoice%2002%20-%20Multiple%20Items.jpg

tony_sologubov

03-10-2015 12:04 PM

Re: Adding Images to the Invoice

It looks like <td></td> tags are missed in the template that renders a product image. If you can send me your module, I will be able to say what is wrong exactly.

Tony.

minfinger

03-12-2015 05:08 PM

Re: Adding Images to the Invoice

Tony,

Here is the current package
https://www.dropbox.com/s/itzoohn09ofan0z/FasterThanYours-ImagesOnInvoice-v5_1_8.tar?dl=0

minfinger

03-16-2015 06:37 PM

Re: Adding Images to the Invoice

Tony,

I figured it out. you were right about the td missing.

Now how do I got about getting it on the General Info Tab?

I suppose I need to know all of the other places that an Admin or user would be viewing an invoice or detailed order information.

tony_sologubov

03-17-2015 11:07 AM

Re: Adding Images to the Invoice

Hi Michael!

I have an article that explains the whole process here:
http://kb.x-cart.com/display/XDD/Adding+product+images+to+order+notifications

Please have a look and let me know if it helps.

Tony.

minfinger

03-22-2015 06:08 AM

Re: Adding Images to the Invoice

Tony,

In the Admin area, how do I make the images clickable?

In the Thank you Page area, how do I make the images clickable?

Also in the Admin Area, I'd like to have the images on the General Info Tab. It's working fine on the Invoice Tab. Most likely my client's employees will only use the General Info Tab and then the Invoice as a final reference. If you're on the Invoice Tab and and you click the Name of the Product it take you to the edit product page. I would like that to be the same on the Image in the General Info Tab and the Invoice Tab.

http://i21.photobucket.com/albums/b298/fasterthanyours/General%20Info%20Tab%20-%20No%20Image.jpg

tony_sologubov

03-23-2015 05:30 AM

Re: Adding Images to the Invoice

1) Making images clickable is basically to wrap them into <a></a> tags. I believe, you already know that, so I am not sure what piece of advice I can give you here aside from just adding <a></a> tags.

2) In order to add images to Order Items section in General info tab, you need to decorate the \XLite\View\ItemsList\Model\OrderItem viewer class and add new image field to the defineColumns() method similar to how it is done here:
http://kb.x-cart.com/display/XDD/ItemsList+in+admin+area

Please, let me know if it makes sense to you.

Tony.

minfinger

04-03-2015 09:43 AM

Re: Adding Images to the Invoice

Tony,

Does this look right?

PHP Code:


		
			
namespace XLite\Module\FasterThanYours\ImagesOnGeneralInfoTab\View;

class OrderItem extends \XLite\View\ItemsList\Model\OrderItem implements \XLite\Base\IDecorator
{
    protected function defineRepositoryName()
    {
        return '\XLite\Model\Product';
    }
    
    protected function defineColumns()
    {
        return array(
            'image' => array(
                static::COLUMN_NAME     => 'Image',
                static::COLUMN_ORDERBY  => 100,
            ),
        );
    }
}

minfinger

04-04-2015 04:25 AM

Re: Adding Images to the Invoice

[quote=tony_sologubov]1) Making images clickable is basically to wrap them into <a></a> tags. I believe, you already know that, so I am not sure what piece of advice I can give you here aside from just adding <a></a> tags.[/quote

Tony,

I know how to use <a> lol I just have no idea with the proper code would be to do that.

tony_sologubov

04-07-2015 05:59 AM

Re: Adding Images to the Invoice

Quote:

Originally Posted by minfinger

Tony,

I know how to use <a> lol I just have no idea with the proper code would be to do that.

Makes sense now :- )

You can specify it as

Code:

?target=product&product_id=#PRODUCT ID#

of course #PRODUCT ID# part will be taken from the {item} object.

The code you shown previously does not make a lot of sense to me as I am not quite following what you are trying to achieve by it.

minfinger

04-11-2015 02:05 PM

Re: Adding Images to the Invoice

I'm trying to get the image load on the General Info Tab on when you look at the order information. You originally said:

Quote:

In order to add images to Order Items section in General info tab, you need to decorate the \XLite\View\ItemsList\Model\OrderItem viewer class and add new image field to the defineColumns() method similar to how it is done here:
http://kb.x-cart.com/display/XDD/Ite...+in+admin+area

And that's what I was trying to do. I was asking your opinion before I tried the code.

tony_sologubov

04-15-2015 04:47 AM

Re: Adding Images to the Invoice

Quote:

Originally Posted by minfinger

I'm trying to get the image load on the General Info Tab on when you look at the order information. You originally said:

And that's what I was trying to do. I was asking your opinion before I tried the code.

Thanks for the explanation, Michael. Now your idea is clear to me.

Your code should look as follows:

PHP Code:


		
			
namespace XLite\Module\FasterThanYours\ImagesOnGeneralInfoTab\View;



class OrderItem extends \XLite\View\ItemsList\Model\OrderItem implements \XLite\Base\IDecorator

{

    protected function defineColumns()

    {

        $return = parent::defineColumns();



        $return += array(

            'image' => array(

                static::COLUMN_NAME     => 'Image',

                static::COLUMN_ORDERBY  => 100,

            ),

        );

    }

}

Because, you only need to add one more field to an array returned by defineColumns() method, not to overwrite this array completely.

minfinger

08-01-2015 07:37 PM

Re: Adding Images to the Invoice

Tony,

This may have broken with the latest release. I have duplicate logos on my invoices and the Image column is there, but the image is not. The Image is showing up on the "Thank your for your order" screen after checkout.

I am working on something unique with Olesya that modifies the Invoice Email. You may want to chat with her.

Packed Mod:
https://www.dropbox.com/s/6pih1imkjzinhog/FasterThanYours-ImagesOnInvoice-v5_2_0.tar?dl=0

Image of the Invoice in Email
http://i21.photobucket.com/albums/b298/fasterthanyours/Images%20On%20Invoice%2003%20-%20Double%20Logos%20a...20pictures.jpg

qualiteam

08-03-2015 11:43 PM

Re: Adding Images to the Invoice

Quote:

Originally Posted by minfinger

This may have broken with the latest release.

It works on our local installation. Some other module (perhaps, a custom one) seems to cause the problem.

minfinger

08-04-2015 01:54 AM

Re: Adding Images to the Invoice

I think the core installation is corrupt. I disabled all mods and it's still producing the problem. How can i replace just the files that this mod affects or even all of the files that generate that emails?

razortw

08-05-2015 12:02 AM

Re: Adding Images to the Invoice

Quote:

Originally Posted by minfinger

That's kind of a known issue with the latest version of X-Cart. However, this is not a bug.
The invoice logo duplicates because you have one piece of code that add a logo in the .tpl template of the invoice (templates can be found in /skins/default/en/order/invoice) and one in the header of the invoice.
Go to the "Store setup" > "Email notifications" > "Headers and signatures" and remove everything from the "Header" section.
That is how you eliminate one of the logos.
About the "Image" column on the invoice, most likely one of your templates is customized, and it mistakenly adds this.
This should be looked into thoroughly on your server.

minfinger

11-05-2015 05:21 AM

Re: Adding Images to the Invoice

Igor,

Actually I had this problem in 5.2.6. I haven't checked in 5.2.9 yet. In the old version I was able to remove the logo, but the remainder of the text kept reproducing itself.

Tony,

Since upgrading to 5.2.9, the Images on Invoice Mod has stopped working.

razortw

11-05-2015 05:40 AM

Re: Adding Images to the Invoice

Quote:

Originally Posted by minfinger

Sorry, I won't be able to tell anything for sure without investigating this in your X-Cart installation.
Please submit a support ticket at https://secure.x-cart.com

minfinger

11-05-2015 06:10 AM

Re: Adding Images to the Invoice

Tony,

Nevermind. I removed and reinstalled the Mod, it's working now.

All times are GMT -8. The time now is 12:12 PM.