MODUL: Rechnung, Lieferschein, Bestellung und Produktansicht als PDF

[karsta.de]

Nachdem ich das jetzt mal auf meiner anderen Domain mit unterschiedlichen Shopversionen getestet habe, kann ich mitteilen, es funktioniert. Scheinbar war es auf der Testdomain ein .htaccess-Problem.
Also super Erweiterung > funktioniert   

BG Karsta

[hpzeller]

Hallo Community

Habe jetzt mal das Modul in das Template "tpl_modified_responsive" und zwar jeweils in die modified Versionen 2.0.5.0 und 2.0.5.1 eingebaut, dabei habe ich festgestellt, dass die generierten PDF's nicht gerade schön aussehen. Der Grund dafür ist das im CSS des Templates "tpl_modified_responsive" die Regel "font-weight: 300;" vorkommt, welche das Dompdf nicht versteht, deshalb hier folgender Tipp. Wenn man das Template "tpl_modified_responsive" einsetzt sollte man in den Dateien

/templates/tpl_modified_responsive/admin/print_order.html
/templates/tpl_modified_responsive/admin/print_packingslip.html
/templates/tpl_modified_responsive/module/print_order.html
/templates/tpl_modified_responsive/module/print_product_info.html

jeweils vor

Code: XML  [Auswählen]

</head>

anstatt diesen Code

Code: XML  [Auswählen]

  {load_outputfilter_html2pdf}
  <style>
    body {
      font-family: DejaVu Sans !important;
    }
  </style>

folgenden Code einfügen.

Code: XML  [Auswählen]

  {load_outputfilter_html2pdf}
  <style>
    {literal}
    body {
      font-family: DejaVu Sans !important;
      font-weight: normal !important;
      line-height:17px !important;  
    }
    {/literal}
  </style>

Ausserdem habe ich das Modul mit der aktuellen Dompdf Version 0.8.6 neu zusammengestellt.

Gruss
Hanspeter

[EDIT Tomcraft 14.01.2022: Modul in Beitrag 1 aktualisiert.

[hpzeller]

Nachtrag:

In der Datei /templates/tpl_modified_responsive/module/print_order.html ca. Zeile 34 sollte man, damit die Ausgabe nicht wie im Bild unten aussieht, folgenden Code

Code: XML  [Auswählen]

  <div class="printwrap">

mit diesem ersetzen.

Code: XML  [Auswählen]

  <div class="printwrap_admin">

Gruss
Hanspeter

[karsta.de]

Hallo Hanspeter,

man sollte auch noch die Abstände des Dokuments mit in den body hinterlegen, sonst beginnt der Text bei großen Bestellungen oder langen Produktbeschreibungen, die auf die 2. Seite laufen, ganz oben am Seitenrand.

Code: CSS  [Auswählen]

body {
        font-family: DejaVu Sans !important;
        font-weight: normal !important;
        line-height: 17px !important;
        margin-top: 1.5cm;
        margin-left: 50px;
        margin-right: 10px;
        margin-bottom: 1.2cm;
}

Ich persönlich hatte mir für die PDF-Anzeige inzwischen eine eigene css hinterlegt.

Code: XML  [Auswählen]

{if $noprint}<link rel="stylesheet" type="text/css" href="{$tpl_path}stylesheet.css" />{/if}
{if !$noprint}
<link rel="stylesheet" type="text/css" href="{$tpl_path}css/stylesheet_print.css" />
{/if}

Hast du mal getestet wie die templates/tpl_modified_responsive/module/print_product_info.html bei dir mit mehr als 5 Produktbilder umgeht? Ich habe schon fast alles versucht (mit Liste, Display:flex ectr., .moimages:nth-child(3n+1) {clear:both !important;}), aber bei mir umbricht er in der PDF die Bilderreihung einfach nicht. (In der normale Print-Datei wird die Bildreihnung korrekt ausgegeben.)

BG Karsta

[hpzeller]

Hallo Karsta,

hier -> https://github.com/dompdf/dompdf/wiki/CSSCompatibility  kannst du nachschauen was bei Dompdf mit CSS alles funktioniert bzw. funktionieren sollte. Die Eigenschaft "float" funktioniert z.B. nur teilweise.

Wenn das Umbrechen per CSS nicht funktioniert könnte man, da ja das Layout für die Generierung eines PDF's nicht responsive sein muss,  das Problem in der Datei "templates/tpl_modified_responsive/module/print_product_info.html" wie früher, mit Smarty Anweisungen in der "foreach" Schleife lösen.

Gruss
Hanspeter

[karsta.de]

Danke Hanspeter für die Idee.

Ich habe mir in die print_product_info.php die Variable
$info_smarty->assign('PRODUCTS_IMAGE_'.$img['image_nr'], $mo_img);
für die einzelnen Bilder hinzugefügt und so die Möglichkeit an selbstbestimmter Stelle ein break einzusetzen.
Mein Beispiel:

Code: XML  [Auswählen]

<div class="all_img">
{if $PRODUCTS_IMAGE != ''}<div class="moimages"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" border="0" /></div>{/if}
  {if $PRODUCTS_IMAGE_1 != ''}<div class="moimages"><img src="{$PRODUCTS_IMAGE_1}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" border="0" /></div>{/if}
  {if $PRODUCTS_IMAGE_2 != ''}<div class="moimages"><img src="{$PRODUCTS_IMAGE_2}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" border="0" /></div>{/if}
  {if $PRODUCTS_IMAGE_3 != ''}<div class="moimages"><img src="{$PRODUCTS_IMAGE_3}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" border="0" /></div>{/if}
  {if $PRODUCTS_IMAGE_4 != ''}<div class="clear"></div><div class="moimages"><img src="{$PRODUCTS_IMAGE_4}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" border="0" /></div>{/if}
  {if $PRODUCTS_IMAGE_5 != ''}<div class="moimages"><img src="{$PRODUCTS_IMAGE_5}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" border="0" /></div>{/if}
  {if $PRODUCTS_IMAGE_6 != ''}<div class="moimages"><img src="{$PRODUCTS_IMAGE_6}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" border="0" /></div>{/if}
  {if $PRODUCTS_IMAGE_8 != ''}<div class="moimages"><img src="{$PRODUCTS_IMAGE_8}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" border="0" /></div>{/if}
  {if $PRODUCTS_IMAGE_9 != ''}<div class="clear"></div><div class="moimages"><img src="{$PRODUCTS_IMAGE_9}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" border="0" /></div>{/if}
  <div class="moimages qr">{qrcode CODE_CONTENTS=$smarty.const.FILENAME_PRODUCT_INFO|xtc_href_link:"products_id=`$PRODUCTS_ID`" ECLEVEL='1' SIZE='2' MARGIN='1'}</div>

Jetzt passts.

BG Karsta

[hpzeller]

Hallo Karsta,

ersetze doch mal in der Datei templates/tpl_modified_responsive/module/print_product_info.html folgenden Code

Code: XML  [Auswählen]

  {foreach item=more_images_data from=$more_images}
  <div class="moimages cf">
    <img src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" border="0" />
  </div>
  {/foreach}
  <div class="clearer"></div>

  mit diesem Code.

Code: XML  [Auswählen]

  {foreach name=more_images item=more_images_data from=$more_images}
  {if $smarty.foreach.more_images.first || ($smarty.foreach.more_images.iteration - 1) % 5 == 0}
  <div>
  {/if}
    <div class="moimages cf">
      <img src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME|onlytext}" title="{$PRODUCTS_NAME|onlytext}" border="0" />
    </div>
  {if $smarty.foreach.more_images.last || $smarty.foreach.more_images.iteration % 5 == 0}
  </div>
  <div class="clearer"></div>
  {/if}
  {/foreach}

  Gruss
  Hanspeter

[karsta.de]

So macht er 4 Bilder in die erste Reihe, das 5. Bild in die zweite Reihe, aber die restlichen Bilder fehlen.
Eigentlich soll er natürlich alle Bilder listen und nach jedem 4 Bild umbrechen.
Außerdem werden bei mir alle Bilder hintereinander gezeigt vom Bild 0 - Bild QR-Code.
Sieht einfach sauber und übersichtlicher aus.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Mit meiner Lösung passt das für mich. Danke.

BG Karsta

[hpzeller]

Bei mir sieht es so aus.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Wenn man nur 4 Bilder pro Zeile will, muss man einfach die 5 hier

Code: XML  [Auswählen]

   {if $smarty.foreach.more_images.first || ($smarty.foreach.more_images.iteration - 1) % 5 == 0}

und hier

Code: XML  [Auswählen]

  {if $smarty.foreach.more_images.last || $smarty.foreach.more_images.iteration % 5 == 0}

jeweils durch eine 4 ersetzen.

 Gruss
 Hanspeter

[karsta.de]

Nach einer Mütze voll Schlaf habe ich deinen Vorschlag noch einmal getestet.
Sehr gute Lösung, wenn man die more images als einen Block mit jeweils eingegebenen Umbruch anzeigen will .


BG Karsta