Szablony wydruków to narzędzie, dzięki któremu
w pełni dostosujesz dokumenty sprzedażowe do własnych potrzeb. Dzięki szablonom dodasz istotne informacje, usuniesz zbędne elementy albo całkowicie zmienisz układ, aby dokument spełniał wszystkie wymogi Twojej firmy.
Uwaga: Poniższa instrukcja dotyczy wyłącznie dodawania i edycji szablonów wydruków. Pełną instrukcję konfiguracji nowych dokumentów sprzedażowych znajdziesz
tutaj.
Wskazówka: Aby w pełni wykorzystać możliwości szablonów, niezbędna jest przynajmniej podstawowa znajomość HTML i CSS. Jeśli nie masz doświadczenia w tym zakresie, rozważ zlecenie konfiguracji.
Dodawanie szablonu wydruku
1. W menu głównym panelu przejdź do Administracja → Szablony wydruków i kliknij przycisk Dodaj szablon.
2. Wybierz z listy moduł szablonu Dokumenty i kliknij przycisk Dodaj szablon.
3. Wypełnij podstawowe dane dla nowego szablonu i kliknij przycisk Przeglądaj, aby wybrać jeden z gotowych wzorów.
4. Wybierz z listy szablon dokumentu, który chcesz zmodyfikować i zatwierdź wybór.
5. W oknie Skonfiguruj wydruk zobaczysz kod wybranego szablonu. W razie potrzeby, w tym miejscu możesz edytować kod (więcej o tym w następnej sekcji), a następnie zapisać gotowy szablon, klikając przycisk Zapisz.
6. Aby aktywować nowy szablon dla konkretnej serii dokumentów, w menu głównym panelu przejdź do Dokumenty [Nowe] → Serie dokumentów i otwórz wybraną pozycję za pomocą przycisku z ikoną ołówka. Następnie w sekcji Ustawienia serii znajdź opcję Szablon wydruku dokumentu, wybierz z listy nowy szablon i kliknij przycisk Zapisz znajdujący się na samym dole strony.
Edycja szablonów wydruków
Uwaga: W szablonach wydruków znacznik script jest niedozwolony, a obsługa kodu JavaScript jest wyłączona.
W każdej chwili możesz dostosować wygląd poszczególnych elementów szablonu, modyfikując kod w oknie konfiguracji wydruku (poprzednia sekcja, pkt 5). Poniżej znajdziesz kilka przykładowych, prostych modyfikacji.
Usunięcie kolumny "Rabat"
Przed modyfikacją:
Jeśli nie planujesz żadnych rabatów, możesz całkowicie usunąć tę kolumnę. W tym celu znajdź i usuń oba wiersze zaznaczone poniżej na czerwono.
Wskazówka: Aby szybciej znaleźć wskazane elementy, skorzystaj z kombinacji klawiszy Ctrl+F i wyszukaj frazę. Dodatkowo, zawsze podglądaj wprowadzone zmiany przed ich zapisaniem.
Po modyfikacji:
Powiększenie tekstu dla całkowitej wartości zamówienia
Przed modyfikacją:
Aby wyróżnić kluczowe dane na dokumencie, możesz zmienić styl wybranych elementów, np. powiększyć i pogrubić tekst w wierszu tabeli z łączną wartością zamówienia. W tym celu znajdź trzy wskazane poniżej wiersze i w każdym z nich zmodyfikuj zaznaczony na czerwono atrybut style, dodając między cudzysłowy wartości font-size: 12px; font-weight: bold;.
Wskazówka: Przykładowy, poprawnie zmodyfikowany atrybut powinien wyglądać tak: style="font-size: 12px; font-weight: bold; width: 65px;".
Po modyfikacji:
Dodanie kolorowych akcentów
Przed modyfikacją:
Jeśli chcesz dodać do dokumentu kilka akcentów w firmowym kolorze, możesz np. zmienić kolor nagłówka tabeli na pomarańczowy, edytując właściwości w konkretnej klasie CSS. W tym przypadku, w zaznaczonej na czerwono klasie o nazwie .m-document__table th, zmień wartość parametru background z #D9D9D9 na #FF590A (lub dowolny inny) i dodaj parametry color: #FFF; font-weight: bold; (opcjonalna poprawa widoczności tekstu na kolorowym nagłówku).
Wskazówka: Przykładowa, poprawnie zmodyfikowana klasa powinna wyglądać tak (zwróć uwagę na trzy ostatnie właściwości):
.m-document__table th {
font-size: var(--table-heading-font-size);
border-right: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;
font-style: normal;
font-weight: 400;
line-height: normal;
background: #FF590A;
color: #FFF;
font-weight: bold;
}
Jeśli chcesz, możesz także zmienić kolor tekstu dla całkowitej wartości zamówienia edytowanego w poprzednim kroku. W tym celu wróć do trzech zmodyfikowanych wcześniej atrybutów style i dodaj w cudzysłowach jeszcze jedną wartość: color: #FF590A;. Wtedy przykładowy atrybut będzie wyglądał następująco: style="color: #FF590A; font-size: 12px; font-weight: bold; width: 65px;".
Po modyfikacji:
Dzięki szablonom wydruków dopasujesz każdy dokument sprzedażowy zarówno do wymogów formalnych, jak i charakteru Twojej firmy. To wszechstronne narzędzie pozwala zmienić standardowy wydruk w spójny element identyfikacji wizualnej i profesjonalnej obsługi klienta.
Zmodyfikowany szablon a kody QR KSeF
Upewnij się, że Twój zmodyfikowany szablon wydruku posiada fragment kodu odpowiadający za umieszczenie na nim wymaganych kodów QR KSeF.
Fragment HTML
Jeśli nie posiadasz poniższego fragmentu kodu w swoim szablonie, skopiuj go i wklej tuż pod ostatnim blokiem warunkowym if.
{% if document.ksef_is_active %}
<div class="m-document__qr-code">
<div class="m-document__qr-codes-container">
<div class="m-document__qr-code-wrapper">
<div class="m-document__text m-document__text--featured">
Sprawdź w KSeF
</div>
<div class="m-document__qr-code-image">
<img src="{{ document.ksef_qr_code }}" />
</div>
<div class="m-document__text m-document__text--featured">
{% if document.ksef_number is not null %}
{{ document.ksef_number }}
{% else %}
OFFLINE
{% endif %}
</div>
</div>
{% if document.ksef_number is null %}
<div class="m-document__qr-code-wrapper">
<div class="m-document__qr-code-image">
<img src="{{ document.ksef_qr_code_cert }}" />
</div>
<div class="m-document__text m-document__text--featured">
CERTYFIKAT
</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
Fragment CSS
Jeśli nie posiadasz poniższego fragmentu kodu w swoim szablonie, skopiuj go i wklej tuż nad tagiem </style>.
.m-document__qr-codes-container {
display: flex;
flex-direction: row;
gap: 24px;
justify-content: center;
align-items: flex-start;
}
.m-document__qr-code-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
}
.m-document__qr-code-wrapper:last-child {
margin-top: 16px;
}
.m-document__qr-code-image {
display: flex;
align-items: center;
justify-content: center;
}
.m-document__qr-code-image img {
width: 100px;
height: 100px;
display: block;
}
Powiązane artykuły
