Generera PDF:er i butiken
Skapa PDF-filer från vilken sida som helst i butiken.
Möjligheter?
Det vanligaste och mest uppenbara är att man genom denna funktion kan designa och skapa helt unika produktblad baserat på den data som finns i butikens databas. Du kan därmed använda all information som finns tillgänglig på produktsidan för att bygga ett produktblad.
Lite ovanligare men helt möjligt är att skapa PDF:er från andra sidor. Exempelvis:
- Produktkatalog från en produktlista
- Produkturval från ett varumärke
- Offert från varukorgen
- Informationsblad baserat på informationssidor
Systemets standard
I standardutförandet av detta tillägg så kan du använda produktblad med en enklare uppsättning. De andra sakerna går att bygga ut men måste estimeras av en utvecklare på Vendre utifrån era önskemål på lösning.
Implementation
Börja med att skapa en sida som heter samma som den sida du önskar kopiera men med ändelsen .pdf.html istället för bara .html. Det gör att systemet kommer att godkänna att generera en PDF istället för att skicka ut filen som en vanlig sida.
Ex.
pages/product.html > Vanlig sida som visas i webbläsaren
pages/product.pdf.html > Filen som körs genom DomPDF om sidan genereras som en pdf (Se nedan)
Generera PDF
PDF:en genereras om URL-strängen innehåller .pdf i slutet eller lägg till ?pdf_template i URL:en
http://www.butiken.se/p/url-till-produkt.pdfGenerera länk från produktsidan
Om du för alla produkter vill generera en länk från produktsidan till pdf-produktbladet så att det blir .pdf på slutet kan du använda följande kodsträng. Fungerar dock bara i product.html och filer inkluderade från den
{{ request.path|split('?')[0] }}.pdfBegränsningar i dompdf
Bilder fungerar bara med hela addressen för att dompdf ska kunna hinna ladda in dem och rendera dem korrekt. Förslagsvis inkluderar man sin css style för att lättare kunna arbeta med båda filerna samtdigt.
Float left fungerar men verkar vara buggigt med bilder. Bilder kan behöva clear:both för att de inte ska hamna efter varandra på samma rad i oändlighet.
Man kan köra background: url men inte background-size: cover. Så lösningen är att lägga in bakgrunder som bilder med img taggen i absoluta element. Dompdf har inget stöd för gradients.
Dompdf kan kännas lite buggigt då det inte har full support på allt, men det går att komma runt det mesta. I många fall får man använda position: absolute på många element. Man kan även behöver köra display: inline-block eller display: block på många element för att de ska ta upp sin yta och för att de ska fungera med sina margins.
Då detta gäller för utskrift rekommenderas det att köra med måttenheten mm istället för px. Vi har tidigare gjort en helsida bakgrundsbild där vi satt måtten 1190px * 1686px för att täcka en hel A4 som är 210mm * 297mm.
{% import "helpers/html.html" as html %}
{% set my_host = "https://"~request.host %}
{% set my_template = my_host~template %}
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>{{ product.product.name }}</title>
{{ include("pages/product.pdf.css.html") }}
</head>
<body>{% spaceless %}
<div class="a4">
Din data här
Exempel på templatebild:
<img src="{{ my_template }}/images/pdf/logo.jpg">
Exempel på produktbild om detta är kopplat till produktsidan:
<img src="{{ my_host }}{{ product.product.image }}">
</div>
<div class="a4">
Detta är A4 sida nr. 2
</div>
{% endspaceless %}</body>
</html>CSS
Då dompdf vill ha sin style i samma dokument så måste vi använda css. Därför kör vi en include på egen css.html fil där vi egentligen bara lägger in css i en style tag. Detta för att hålla isär dokumentet och göra det snabbare att koda.
Det går att avända font-face, men bara med formatet truetype. Så om man inte har det formatet får man använda något woff till truetype konverterare. Viktigt är att man sätter både korrekt font-family och font-weight om man vill att fonten ska renderas. Utan font-weight så fungerar kanske inte fonten ens.
Det finns några fonter som är förinstallerade för dompdf och här är en liten lista:
- Courier (Normal, Bold, Oblique, and BoldOblique variants)
- Helvetica (Normal, Bold, Oblique, and BoldOblique variants)
- Times (Normal, Bold, Oblique, and BoldOblique variants)
- Symbol
- ZapfDingbats
Den första och mer "uppdaterade" koden för produktblad har gjorts på cardi.se och går att tjuvkika där om man vill ha mer inspiration.
MM eller PX
Vi har valt att köra på mm då pdf används för utskrift. Vanligt är att sätta en a4 class som representerar en hel A4 på de satta 210mm*297mm. Om man får en design i px så får man använda en miniräknare för att ta reda på hur stora olika element ska vara. Men om en snar framtid kommer vi fixa en twig funktion som gör om px till mm i förhållande till den design man fått. Typ en mm-calc istället för rem-calc. Om vi inte kan få design i mm enheter.
POST GET COOKIES
Vi har tidigare försökt skickat formulärdata men som sedan har gett en network error för chrome. Ska man skicka med data till pdf behöver man sätta det som js-cookies innan man kommer till dompdf. För då har twig fångat upp den datan och satt det i sin cookie variabel. Exempelvis request.cookie.dompdf_title om du döpt cookien till dompdf_title via js tidigare.
Men sedan för att skriva ut den behöver du använda följande i twig:
{{ request.cookie.dompdf_title|convert_encoding('UTF-8', 'ISO-8859-1') }}
<style>
/* GothamBook */
@font-face {
font-family: "GothamBook";
font-style: normal;
font-weight: 400;
src: url("{{ my_template }}/scss/fonts/gotham-book/gotham-book.ttf")
format('truetype');
}
* {
margin: 0;
padding: 0;
outline: 0;
border: none;
}
body {
width: 100%;
font-family: "GothamBook","Helvetica";
font-weight: 400;
letter-spacing: 0.2mm;
font-size: 2.8mm;
line-height: 3.2mm;
}
h1, h2 {
font-family: "GothamBook";
font-weight: 400;
font-size: 5mm;
line-height: 6mm;
}
p {
font-family: "Helvetica";
}
.example img {
display: block;
max-width: 73mm;
margin-bottom: 6mm;
clear: both;
}
.a4 {
display: block;
position: relative;
top: 0;
left: 0;
width: 210mm;
height: 297mm;
}
.a4 .background {
position: absolute;
width: 210mm;
height: 297mm;
}
.a4 .background img {
width: 210mm;
height: 297mm;
}
</style>