Display coloricon on the pdf invoice

  • Posts: 54
  • Thank you received: 0
7 years 5 months ago #271416

-- url of the page with the problem -- : localhost
-- HikaShop version -- : 3.1.1
-- Joomla version -- : 3.7.2
-- PHP version -- : 7.0.13
-- Browser(s) name and version -- : firefox 53

Hi,
The coloricon is not displayed on the pdf invoice. I did tests with absolute path and url path, but it didn't work.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
7 years 5 months ago #271421

Hi,

What do you mean by "coloricon" ? Could you provide more context please ?

Please Log in or Create an account to join the conversation.

  • Posts: 54
  • Thank you received: 0
7 years 5 months ago #271444

Hi,
I mean colored tiles from your tutorial "display by color"

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
7 years 5 months ago #271454

Hi,

The CSS you added in your template for the color blocks is only available on the website when the template is displaying the page.
The PDF invoice plugin has an HTML to PDF library which it uses by feeding to it the HTML/CSS output of the invoice.php of the plugin. So the CSS you added in your template is not taken into account when generating the PDF.
So in that case, you need to add that CSS in the invoice.php file. Then, it will be taken into account.
You can see near the beginning of that file a bunch of CSS code where you can add yours.

Please Log in or Create an account to join the conversation.

  • Posts: 54
  • Thank you received: 0
7 years 5 months ago #271523

Hi.
The only ccs that has been added regarding tiled display I have in ccs front-end file in the back-end of the hikashop component:

.hikashop_product_characteristics_table td label {display:inline !important; padding-left: 5px;}
label.radio input.inputbox, span.hikashop_filter_checkbox input {display: none;}
Is this code I have to paste into the file invoice.php?

Last edit: 7 years 5 months ago by Wrosch.

Please Log in or Create an account to join the conversation.

  • Posts: 26159
  • Thank you received: 4028
  • MODERATOR
7 years 5 months ago #271574

Hello,

As Nicolas wrote:

So in that case, you need to add that CSS in the invoice.php file. Then, it will be taken into account.
You can see near the beginning of that file a bunch of CSS code where you can add yours.


I don't know how you set-up HikaShop to display the "color icons" but you would need some customization of the PDF invoice to display such kind of content.
That customization can be regarding CSS as explained by Nicolas ; or PHP modifications.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 54
  • Thank you received: 0
7 years 5 months ago #271590

Hi.
I set the color icons by following the step by step tutorial Display by color
The only css code I used was inserted at the end of the file frontend_custom.css

.hikashop_product_characteristics_table td img {border: 2px groove black;}
.hikashop_product_characteristics_table td label {display:inline !important; padding-left: 5px;}
.hikashop_filter_color br{ display: none;}
.hikashop_filter_checkbox label{border: 2px solid black; display: inline-block !important; margin: 4px;}
.hikashop_filter_checkbox a {display: none;}
.hikashop_filter_checkbox input{ margin-right:5px; display:none;}
label.radio input.inputbox, span.hikashop_filter_checkbox input {display: none;}

So I really do just what I read on your site. I was hoping that you already have a ready-made solution that would be an extension of this tutorial, to use the effect "color icon" also for the pdf invoice.
If you gave some more detailed hint of what to do to modify php, because for now I do not know where to start.

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
7 years 5 months ago #271628

Hi,

I suppose you're using the URLs of the images like:
<img src=" www.yoursite.com/medias/coloricon/black.png"/ >
in your characteristic values.
I suppose that the issue is that the HTML to PDF library the PDF invoice plugin is using is not able to download the images.
I would recommend instead to use instead relative image paths like that:
<img src="/medias/coloricon/black.png"/>

Please Log in or Create an account to join the conversation.

  • Posts: 54
  • Thank you received: 0
7 years 5 months ago #271705

Hi.
With relative image paths (sample path: <img src="/images/sampledata/coloricon/black.png" /> the effect is the same. The image is displayed everywhere except the pdf invoice.

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
7 years 5 months ago #271732

Then how about having a <span class="coloricon_black"></span>
and then some CSS to set the image in CSS:
.coloricon_black{
background:url(' www.yoursite.com/medias/coloricon/black.png ');
width:16px;
height:16px;
display: block;
}

Please Log in or Create an account to join the conversation.

  • Posts: 54
  • Thank you received: 0
7 years 5 months ago #271793

Hi.
I did some tests but without the expected effect. I put this class in the css section of the invoice.php file and test the span element (<span class="coloricon_black">test</span>) somewhere between the tables, but only the text was displayed.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 26159
  • Thank you received: 4028
  • MODERATOR
7 years 5 months ago #271919

Hello,

It will be difficult for us to know what exactly is the issue ; the PDF invoice is using the lib HTML2PDF and sometimes it got really strict rules for CSS and accessing files/images.

Here a stackoverflow topic with talks about a similar issue :
stackoverflow.com/questions/33781821/dis...groud-image-html2pdf

And here a (French, sorry) subject where we can see that relative and absolute path might not be handle the same in HTML2PDF.
forum.alsacreations.com/topic-1-77518-1-...-charger-limage.html

Maybe more CSS rules are required to allow the lib to display what you want correctly ; I hope that you can find topics over the Internet which would help to understand how to handle that specific case.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

Time to create page: 0.067 seconds
Powered by Kunena Forum