Layout van facturen en pakbonnen wijzigen

Bent u niet tevreden met de lay-out van bijvoorbeeld uw facturen? Ga dan naar ALGEMEEN > Design > Content editor, te bereiken in de backoffice via het menu aan de linkerkant van uw scherm. De content editor biedt u de mogelijkheid om de lay-out van uw e-mails, facturen, pakbon en offertes naar wens aan te passen. Dit gaat door middel van HTML en CSS.

De content editor is pas beschikbaar vanaf een XL-pakket. Wilt u toch gebruik maken van de content editor neem dan contact op met onze salesafdeling te bereiken via 020 820 23 91, optie 2. 

Lay-out bewerken

U dient wel verstand te hebben van HTML en CSS. Zo niet, dan raden wij u sterk af om in de content editor te gaan werken. SEOshop biedt hiervoor geen ondersteuning.

Of u nou de pakbon of de factuur bewerkt, ieder bewerkingsgedeelte werkt hetzelfde. Als voorbeeld is daarom de factuur bewerken aangehouden. Ga naar Algemeen > Design > Content editor en klik vervolgens op Factuur. U komt uit op de bewerkingspagina van de factuur. In het grote zwarte vlak is de code van de factuur te zien. Rechtsboven in het zwarte vlak staan een aantal drop-downmenu’s:

  • Editor theme: Dark of Light – hier kunt u kiezen welke achtergrond kleur u wilt hebben bij het bewerken van uw code. Standaard staat deze ingesteld op Dark (zwart). Heeft u liever een witte achtergrond, zet het drop-downmenu dan op Light.
  • Indent mode: Tabs of Spaces – om de code overzichtelijk te houden wordt er veel met tabs gewekt. Dit zijn insprongen in de tekst om te laten zien welk niveau de code heeft. Dit geldt zowel voor Tabs als voor spaces. Met dit drop-downmenu kun je het gedrag van de tab bepalen. Als je tab selecteert, dan is de tab een insprong, zoals u wellicht gewend bent bij het schrijven in documentenprogramma’s als wordt. Haalt u de tab weg, dan verdwijnt de hele insprong. Bijvoorbeeld: Om een insprong in de tekst te creëren kunt u werken met tabs.

    Bij de optie Spaces wordt een insprong onderverdeeld in spaties. Met het gebruik van Spaces is het mogelijk om een insprong te maken van normale grootte en vervolgens één spatie terug te gaan. Bijvoorbeeld: Normale insprong Normale insprong min één spatie

    Let op! Deze functie werkt alleen voor nieuwe tabs. Insprongen die er al staan voor bewerken staan ingesteld als tab.
  • Indent size: 2, 4 of 8 – dit is de afstand tussen de verschillende codes waarbij duidelijk wordt waar een codefragment begint en waar het ophoudt, bijvoorbeeld:
    <header data-repeat="true">
     <div class="clearfix">
       <img class="pull-right" src="{{ invoice.barcode }}" width="284"  height="20" alt="Barcode" />
     </div>
     <div class="spacer"></div>
    </header>
    

    De streepjes voor de code laat de indent size zien. Zo heeft de div class clearfix een insprong van 2 spaties ten opzichte van de header code en de img class code weer 2 spaties meer ten opzicht van de div class.

  • Line wrap mode – No wrap of Soft wrapping – wrapping creëert een kader. Kiest u voor Soft wrapping, dan vallen alle regels binnen het kader. Wanneer een regel te lang is voor het kader, gaat deze op de volgende regel verder. Bij No wrapping zal de regel buiten het scherm vallen en dient u heen en weer te scrollen.

In het menu aan de rechterkant van het scherm vindt u alle codes die zijn gebruikt en/of gebruikt kunnen worden in een codefragment. Als u bijvoorbeeld op Land klikt onder het uitklapmenu Winkel, dan wordt {{ shop.region }} in de code ingevoegd, op de locatie waar de cursor zich op dat moment bevindt.

Voorvertoning

Zodra u rechts onderin uw scherm op Opslaan klikt worden de wijzigingen doorgevoerd en in gebruik genomen. Kleine fouten in de code kunnen voor veel problemen zorgen. Voorkom fouten door altijd eerst de voorvertoning te bekijken van uw aanpassingen. Dit kunt u doen door rechts onderin uw scherm op de knop Voorvertoning te klikken. Er opent een pop-upvenster waarin een voorbeeld wordt weergegeven.

Variabelen 

 Array
(
    [shop] => Array
        (
            [name] => 
            [logo] => 
            [url] => 
            [domain] => 
            [email] => 
            [phone] => 
            [fax] => 
            [street] => 
            [postcode] => 
            [city] => 
            [region] => 
            [country] => 
            [accountholder] => 
            [bankaccount] => 
            [bankcode] => 
            [bankname] => 
            [iban] => 
            [swift] => 
            [paymentreference] => 
            [cocnumber] => 
            [coccity] => 
            [vatnumber] => 
            [nationalid] => 
            [companyowner] => 
        )

    [theme] => Array
        (
            [color_1] => 
            [color_2] => 
            [color_3] => 
            [color_4] => 
        )

    [order] => Array
        (
            [id] => 
            [number] => 
            [date] => 
            [comment] => 
            [memo] => 
            [products] => Array
                (
                    [0] => Array
                        (
                            [id] =>
                            [articlecode] => 
                            [name] => 
                            [variant] => 
                            [sku] => 
                            [ean] => 
                            [hs] => 
                            [vat] => 
                            [unitprice] => 
                            [unitprice_ex] => 
                            [discount] => 
                            [quantity] => 
                            [subtotal] => 
                        )

                    [1] => Array
                        (
                            [id] => 
                            [articlecode] => 
                            [name] => 
                            [variant] => 
                            [sku] => 
                            [ean] => 
                            [hs] => 
                            [vat] => 
                            [unitprice] => 
                            [unitprice_ex] => 
                            [discount] => 
                            [quantity] => 
                            [subtotal] => 
                        )

                    [_shippingcosts_] => Array
                        (
                            [id] => 
                            [articlecode] => 
                            [name] => 
                            [variant] => 
                            [sku] => 
                            [ean] => 
                            [hs] => 
                            [vat] => 
                            [unitprice] => 
                            [unitprice_ex] => 
                            [discount] => 
                            [quantity] => 
                            [subtotal] => 
                        )

                )

            [discount] => 
            [is_vatshifted] => 1
        )

    [invoice] => Array
        (
            [id] => 
            [number] => 
            [date] => 
            [price] => 
            [price_ex] => 
            [taxes] => 
            [barcode] => 
            [deliverytime] => 
            [deliverydate] => 
            [legalnote] => 
            [note] => 
            [footer] => 
            [is_credit] => 
        )

    [payment] => Array
        (
            [method] =>
        )

    [customer] => Array
        (
            [id] => 334
            [firstname] => 
            [middlename] => 
            [lastname] => 
            [phone] => 
            [mobile] => 
            [email] => 
            [nationalid] => 
            [is_company] => 
            [company] => 
            [cocnumber] => 
            [vatnumber] => 
        )

    [billingaddress] => Array
        (
            [company] => 
            [name] => 
            [address] => 
            [zipcode] => 
            [city] => 
            [region] => 
            [country] => 
        )

    [shippingaddress] => Array
        (
            [company] => 
            [name] => 
            [address] => 
            [zipcode] => 
            [city] => 
            [region] => 
            [country] => 
        )

    [language] => Array
        (
            [language] => 1
        )

    [options] => Array
        (
            [hide_customer_details] => 
        )

) 
Hebt u meer vragen? Een aanvraag indienen