Prepare your theme for multiple languages and countries

Med Lande kan en Shoporama-shop sælge i flere lande fra samme admin, med landets sprog, valuta og egen adresse. Shoporama klarer det meste selv: varer, kategorier og sider vises oversat, priserne regnes om, og links, hreflang og sitemaps får landets adresse. Men et tema har ofte tekster, valuta og talformat skrevet direkte i koden, og dem kan Shoporama ikke oversætte for dig.

Artiklen er til udviklere og bureauer, der har bygget et eget tema til en shop. Den tager dig trin for trin fra en eksisterende shop til et land, der er klar til at blive aktiveret. Hvordan shopejeren opretter og indstiller landene, står i Sælg i flere lande med Lande, og hvordan teksterne oversættes, står i Oversæt din webshop.

Shoporamas egne temaer Montana, MontanaB2B, Delaware, DelawareDK, California, Washington, Alaska2 og Alaska er allerede gjort klar til lande. Massachusetts-temaerne er ikke. Bruger shoppen et af de klare temaer uden egne ændringer, skal du ikke gøre noget af det her.

Før du går i gang

• Opret landet under Webshop → Lande, før du går i gang med temaet. Så bliver temaets tekster oversat, mens du arbejder, og du kan se landet undervejs. Leveringslandet skal findes under Levering → Lande først, for det er dér, moms og fragt til landet sættes op.
• Et nyt land er ikke aktivt. Kunderne kan ikke se det, så du kan arbejde på temaet og teste landet i ro og mag.
• Kører landet på et eget tema, skal det være på prismodellen Pro. Det gælder også, når landet bruger shoppens eget tema. Flex kan ikke vælges, når landet bruger et eget tema.
• Kun brugere med fuld adgang kan oprette, rette og aktivere lande.
• Landene ligger enten på en sti på shoppens domæne (fx dinshop.dk/se) eller på eget domæne (fx dinshop.se). Temaet skal ikke vide hvilket. Adresserne klarer Shoporama.

Det klarer Shoporama uden ændringer i temaet

• Links. Alle links i den færdige HTML (href, action og formaction på fx a, form, link og button), og:url og adresser i JSON-LD får landets adresse. Det gælder også links, du har skrevet direkte, som /basket eller https://dinshop.dk/kontakt. Billeder, CSS, JavaScript, filer og feeds røres ikke, og viderestillinger fra serveren bliver i landet.
• Ajax. Kald fra en side i landet, fx til /ajax, får landet med, fordi Shoporama ser, hvilken side der kaldte.
• Sprog og SEO i head. <html lang> får sidens sprog, og:locale bliver landets (fx sv_SE), hvis temaet har det tag, og der indsættes hreflang-links til alle sprogversioner af siden og x-default til hovedlandet. En side, der endnu ikke er oversat, vises på dansk, får noindex i landet og er ikke med i hreflang eller landets sitemap.
• Indhold. Varer, kategorier, landingssider, sider, blogindlæg, menuer, filtre, fragt- og betalingsmetoder, lande, kundefelter og temaindstillingernes tekstfelter vises på landets sprog gennem de metoder, temaet bruger i dag, fx $product->getName() og $product->getUrl(). Adresserne er også oversat. Mangler en oversættelse, vises den danske tekst.
• Priser. Varepriserne fra temaets objekter (pris, tilbudspris, varianter, kampagner, mængderabat og fragt) er allerede landets: omregnet med kursen og med landets prisjustering, moms og afrunding.
• Valuta. $webshop->getCurrency() giver landets valuta, når landet sælger i sin egen.
• Datoer. Ugedage og månedsnavne fra date_format (%A og %B) kommer på landets sprog.
• Kassen. Kun landets fragt- og betalingsmetoder kommer med i fx $webshop->getShippings() og $webshop->getPaymentGateways(), og serveren afviser leveringslande, landet ikke leverer til.
• Mails. Ordremails dannes i ordrens land. Tekster, valuta, talformat og links i mailen følger derfor ordrens land på samme måde som på siderne, når mailskabelonerne er gjort klar som resten af temaet.
• Cache. Shoppens sidecache og fragmenter i <{cache}> gemmes pr. land, så en dansk menu ikke bliver vist i det svenske land.
• Logo. Shopejeren kan give et land sit eget logo under Webshop → Lande (kortet Logo på landet), fx med landets domæne. $webshop->getLogo() giver så landets logo i landet og ellers shoppens logo fra Design → Logo & betingelser. Det gælder både på siderne og i mails og udskrifter, der dannes i landet, fx ordremails og den printede faktura.
• Synlig i lande. Varer, kategorier, statiske sider, og brands, som shopejeren har skjult i et land, er allerede fjernet fra det, temaet får i landet: lister, søgning, filtre, menuer, kurven, $webshop->getPage(), $webshop->getBrands(), og opslag som $webshop->getProductById(). En skjult vares side sender kunden videre til en af varens kategorier eller til forsiden, og en skjult kategori eller side findes ikke i landet, ligesom når den er offline. Henter temaet en enkelt kategori med $webshop->getCategory(), får det den stadig, men getIsOnline() og getInMenu() svarer 0 i landet, som for en offline kategori.
• Sidedesigner pr. land. Shopejeren kan give et land sin egen opsætning i Sidedesigneren, fx en tysk forside med egne billeder. Shoporama vælger opsætningen for landet, før temaet får sektionerne, så temaet skal ikke gøre noget.

Det skal temaet selv klare

• Tekster skrevet direkte i HTML eller JavaScript forbliver danske (trin 1).
• Lande viser advarslen "Tjek temaet før du aktiverer et land", indtil temaet skriver, at det er klar (trin 2).
• "kr." eller "DKK" skrevet direkte bliver stående, og faste tusind- og decimaltegn giver dansk talformat (trin 3).
• Beløb fra ordrer vist med $webshop->getCurrency() kan få forkert valuta, fx i ordrehistorikken, hvor kunden kan have ordrer fra flere lande (trin 3).
• Der er ingen sprogvælger (trin 4).
• Listen over leveringslande viser alle shoppens lande, og en kunde, der vælger et land, landet ikke leverer til, sendes tilbage til adressesiden uden forklaring (trin 5).
• Adresser, som JavaScript selv bygger og går til, får ikke landets sti (trin 3).
• Hreflang-links, temaet selv skriver, bliver stående ved siden af dem, Shoporama indsætter. Fjern dem.
• Et logo fra en egen temaindstilling, fx et felt med en logo-URL, er det samme i alle lande. Brug $webshop->getLogo() først, også i mailskabelonerne. Delaware og DelawareDK bruger i mails temaindstillingen Logo URL, og Alaska og Massachusetts bruger overalt temaets eget logofelt (i Alaska Toplogo), så dér kommer landets logo ikke med.
• Et link i Sidedesigneren, fx på en knap, til en vare, kategori, eller side, der er skjult i landet, er tomt i landet. Vis kun linket, når der er en værdi.

Logoet hentes som i Montanas header, og et link fra Sidedesigneren tjekkes som i Montanas banner:

<{* Landets logo, ellers shoppens *}>
<{if $logo = $webshop->getLogo()}>
    <img src="<{$logo->getSrc(560, 160, 'fit')}>" alt="<{$webshop->getName()|escape}>">
<{else}>
    <span><{$webshop->getName()|escape}></span>
<{/if}>

<{* Link fra Sidedesigneren: tomt, hvis det peger på noget, der er skjult i landet *}>
<{if $banner.link}>
    <a href="<{$banner.link}>">...</a>
<{/if}>

I mails skal billedets adresse være fuld, så Montanas mailskabeloner sætter <{$webshop->getUrl()}> foran getSrc().

Trin 1: Læg alle tekster i <{t}>

Alt, kunden kan læse, skal stå i <{t}>...<{/t}> eller som "..."|t. Husk også attributter som placeholder, title og aria-label, fejlbeskeder, kassen, returcenteret og mailskabelonerne. Ordremails sendes på ordrens sprog, så deres tekster skal oversættes ligesom siderne.

<h2><{t}>Din kurv<{/t}></h2>
<input type="search" name="search" placeholder="<{t}>Søg efter varer<{/t}>">
<button type="submit"><{t}>Læg i kurv<{/t}></button>

<{include file="components/alert.html" text="Din profil er blevet opdateret."|t}>

Brug pladsholdere, ikke variabler, i teksten

Teksten mellem tags er nøglen til oversættelsen. Står der en Smarty-variabel inde i teksten, bliver hver værdi sin egen tekst, og den kan ikke oversættes på forhånd. Send i stedet værdien med som parameter, og brug den som {x} i teksten. Pladsholderne bevares, når teksten oversættes.

<{if $customer}>
    <{* Forkert: hvert pointtal bliver en ny tekst *}>
    <{t}>Du har <{$customer->getActivePoints()}> aktive point.<{/t}>

    <{* Rigtigt *}>
    <{t x=$customer->getActivePoints()|number_format:0:$webshop->getDecimalSeparator():$webshop->getThousandSeparator()}>Du har {x} aktive point.<{/t}>
<{/if}>

• Ændrer du en tekst i temaet, også bare et mellemrum eller et linjeskift inde i teksten, bliver den en ny tekst, der skal oversættes igen. Mellemrum før og efter teksten tæller ikke. Skriv derfor hver tekst på én linje.
• En oversættelse må kun indeholde de HTML-tags, den danske tekst har. Hold gerne markup uden for <{t}>.
• Tekster i JavaScript-filer kan ikke oversættes. Læg dem i HTML'en, fx i et data-attribut: data-added-text="<{"Lagt i kurven"|t|escape}>".

Hvor teksterne bliver oversat

Shoporama læser temaets .html-filer igennem og opretter teksterne i <{t}> og "..."|t, så de kan oversættes, før en kunde har set dem. Det sker, når et land aktiveres, når Webshop → Oversættelser åbnes, og når den automatiske oversættelse kører. Tekster med en variabel inde i selve teksten kan ikke læses ind på forhånd.

Er automatisk oversættelse slået til (det er standard), oversættes temaets tekster først, inden for få minutter, også for lande, der ikke er aktive endnu. Du eller shopejeren kan rette dem under Webshop → Oversættelser → Temaets tekster, og det, en person retter, bliver ikke overskrevet. Shoppens egne tekster under Design → Tekster er stadig hovedlandets, og det er dem, oversættelserne tager udgangspunkt i.

Trin 2: Skriv i theme_settings.json, at temaet er klar

To nøgler i theme_settings.json i roden af temaet fortæller Shoporama, hvordan temaet håndterer sprog. De står på øverste niveau, ved siden af info og settings:

{
    "info": "Mit tema",
    "countries": true,
    "text_language": "da",
    "settings": [
        ...
    ]
}

"countries" ændrer ikke, hvordan butikken virker. Det er temaets løfte til shopejeren, så sæt den først til true, når temaet består tjeklisten nederst i artiklen.

Skriver du temaets tekster på engelsk, som Delaware gør, så sæt "text_language": "en". Så viser et engelsk land temaets egen engelske tekst, også når shoppen har rettet teksten til dansk under Design → Tekster. En engelsk oversættelse under Oversættelser går stadig forud. Brug samme sprogkode som landet, fx en, de, sv eller nb for norsk.

Temaindstillingernes tekster

Felter i settings af typen string, text og wysiwyg kan oversættes under Webshop → Oversættelser → Temaindstillinger, og temaet får den oversatte værdi uden ændringer. Felter med navne som url, link_1, email, phone, color eller usp1_icon regnes ikke for tekst, og det samme gælder grupper som design, integrations og custom_code. Giv derfor felter med links, koder og farver sådan et navn, så de ikke bliver sendt til oversættelse.

Trin 3: Vis beløb i landets valuta og talformat

Priser i butikken

Priserne fra temaets objekter er allerede omregnet, så temaet skal aldrig selv regne med en kurs. Det skal bare vise valutaen og formatere tallet rigtigt:

<{$currency = $webshop->getCurrency()}>
<{$decimal = $webshop->getDecimalSeparator()}>
<{$thousand = $webshop->getThousandSeparator()}>

<{$product->getPrice()|number_format:2:$decimal:$thousand}> <{$currency|escape}>

Viser temaet i dag en fast valutatekst som "kr.", så brug $webshop->getCountryCurrency(). Den giver landets valuta, når kunden handler i et land med sin egen valuta, og er tom ellers:

<{$currency = "kr."}>
<{if $webshop->getCountryCurrency()}><{$currency = $webshop->getCountryCurrency()}><{/if}>

Beløb fra ordrer

En ordre er i valutaen fra det land, den blev købt i. Brug derfor $order->getCurrency() overalt, hvor der vises beløb fra en ordre: takkesiden, ordresiden, ordrehistorikken, returcenteret, ordremails og den printede faktura. I ordrehistorikken skal hver ordre have sin egen valuta, for kunden kan have handlet i flere lande.

<{if $order}><{$currency = $order->getCurrency()}><{/if}>

<{foreach $my_orders as $my_order}>
    <{$my_order->getTotalPrice()|number_format:2:$webshop->getDecimalSeparator():$webshop->getThousandSeparator()}>
    <{$my_order->getCurrency()|escape}>
<{/foreach}>

Talformat

getDecimalSeparator() og getThousandSeparator() giver talformatet for det land, siden eller mailen vises i. På hovedlandet returnerer de det, du giver dem som argument (standard komma og punktum), så temaets nuværende format bliver ved med at gælde dér. Formatet følger landet, ikke sproget:

JavaScript

• Formaterer dit JavaScript priser, så hent tegnene fra HTML'en. Montana lægger dem på body: data-decimal="<{$webshop->getDecimalSeparator(",")|escape}>" og data-thousand="<{$webshop->getThousandSeparator(".")|escape}>".
• $webshop->getLocale() giver sprog og land som fx en-GB i et land og da-DK på en dansk hovedshop. Brug den til Intl og widgets.
• Adresser, som JavaScript selv bygger og går til (fx location.href = "/basket"), får ikke landets sti. Læs i stedet adressen fra et link i HTML'en, for det har Shoporama allerede rettet.

Trin 4: Tilføj en sprogvælger

$webshop->getCountrySites() giver hovedlandet og de aktive lande, hver med et link til den side, kunden står på, i det land. Listen er tom, når der er færre end to versioner af shoppen, så vælgeren vises først, når mindst ét land er aktivt. Eksemplet er Montanas vælger i footeren (components/country-selector.html) uden styling:

<{$country_sites = $webshop->getCountrySites()}>
<{if $country_sites}>
    <nav class="country-selector" aria-label="<{t}>Vælg sprog<{/t}>">
        <{foreach $country_sites as $country_site}>
            <a href="<{$country_site.url|escape}>" hreflang="<{$country_site.hreflang|escape}>" lang="<{$country_site.language|escape}>"<{if $country_site.current}> aria-current="true"<{/if}>><{$country_site.label|escape}></a>
        <{/foreach}>
    </nav>
<{/if}>

Eksemplerne i artiklen er skrevet til Smarty 4. På Smarty 2 skrives tildelinger med assign og løkker med foreach from, så her hedder de to linjer<{assign var="country_sites" value=$webshop->getCountrySites()}> og <{foreach from=$country_sites item="country_site"}>, som i Alaskas country-selector.html.

• hreflang på linket er nødvendigt. Uden det flytter Shoporama linket ind i det land, kunden står i, ligesom alle andre links. Et link med hreflang eller data-country-keep bliver ikke rørt.
• Brug url, ikke address. Ligger landet på et andet domæne, går url via en skifteside, der tager kurven med. address er landets egen adresse til siden.
• Felterne: label (sprogets navn på sproget selv, fx Svenska eller Suomi, med landekoden, hvis to lande har samme sprog), language (fx sv), hreflang (fx sv-SE), code (fx SE), country (landets navn), current (siden, kunden står på), main (hovedlandet) og translated (om siden er oversat til sproget).
• Montana har også en vælger i headeren (components/country-switch.html), der er skjult på små skærme, hvor sprogene står i mobilmenuen.

Trin 5: Vis kun landets leveringslande i kassen

Et land kan begrænse, hvor varerne leveres til. Kun leveringsadressen begrænses. Fakturaadressen må ligge i alle shoppens lande, så kunder fra hele EU kan handle. Brug derfor to lister:

• Fakturaadressens land (order_country_id): $webshop->getCountries(), alle shoppens lande.
• Leveringsadressens land (del_country_id): $webshop->getDeliveryCountries(), kun de lande, landet leverer til. På hovedlandet er det alle shoppens lande, så du kan bruge den overalt, også i fx en fragtberegner i kurven.

Udfylder kunden ikke en leveringsadresse, er fakturalandet også leveringsland. Leverer landet ikke dertil, sender Shoporama kunden tilbage til /address?delivery_country=1. Vis en besked, og vis felterne til leveringsadressen, så kunden kan vælge et andet land:

<{if $get.delivery_country}>
    <p class="alert"><{t}>Vi leverer ikke til det valgte land. Vælg en leveringsadresse i et af de lande, vi leverer til.<{/t}></p>
<{/if}>

<select name="del_country_id">
    <option value=""><{t}>Vælg land<{/t}></option>
    <{foreach $webshop->getDeliveryCountries() as $country}>
        <option value="<{$country->getCountryId()}>"<{if $session_del.country_id == $country->getCountryId()}> selected<{/if}>><{$country->getName()|escape}></option>
    <{/foreach}>
</select>

Brug $get og ikke $smarty.get, som er blokeret i butikkens skabeloner. Beskeden er den samme, som Shoporamas egne temaer viser.

Trin 6: Test landet, før det aktiveres

En admin, der kan rette shoppen, kan se et land, der ikke er aktivt. Alle andre får en fejlside, eller sendes til hovedlandet, når landet har eget domæne. Sådan gør du:

1. Log ind i admin, og klik på øjet Vis webshop i toppen. Så er du også logget ind i butikken.
2. Åbn landets adresse, fx https://dinshop.dk/se/. Siderne får noindex, så de ikke kommer i søgemaskinerne, mens du tester.
3. Gå butikken igennem: forside, kategori, vare, søgning, kurv, kassen og kundekontoen. Se efter danske tekster, valuta, talformat, og om du bliver i landet, når du klikker rundt.
4. Åbn /se/address?delivery_country=1 for at se beskeden om leveringsland.
5. Se sidens kilde: <html lang> og eventuelt og:locale skal være landets, og der må ikke være hreflang-links fra temaet selv.
6. Er alt i orden, så sæt "countries": true i theme_settings.json, og bed shopejeren aktivere landet med kontakten Aktiv under Webshop → Lande.

Ligger landene på eget domæne, skal landets domæne pege på Shoporama og have SSL (shopejeren skriver domænet og bestiller gratis SSL på landets side), og du skal være logget ind på det domæne for at se landet, før det er aktivt.

Tjekliste

• Alle synlige tekster står i <{t}> eller "..."|t, også i attributter, kassen, fejlbeskeder, returcenteret og mails.
• Ingen variabler inde i <{t}>. Værdier sendes med som pladsholdere.
• Ingen "kr." eller "DKK" skrevet direkte. Butikken bruger $webshop->getCurrency() eller getCountryCurrency().
• Beløb fra ordrer bruger $order->getCurrency(): takkeside, ordreside, ordrehistorik, returcenter, mails og faktura.
• Alle number_format bruger getDecimalSeparator() og getThousandSeparator().
• JavaScript henter tekster, talformat og adresser fra HTML'en og locale fra getLocale().
• Sprogvælgeren bruger getCountrySites() med url, hreflang og lang på linkene.
• Leveringslandet vælges fra getDeliveryCountries(), og beskeden vises ved $get.delivery_country.
• Temaets egne hreflang-links er fjernet.
• Logoet kommer fra $webshop->getLogo(), også i mails og på den printede faktura.
• Links fra Sidedesigneren vises kun, når de ikke er tomme.
• "countries": true og eventuelt "text_language" står i theme_settings.json.
• Landet er gennemgået som admin, før det blev aktiveret.

Ofte stillede spørgsmål

Min shop bruger et af Shoporamas temaer. Skal jeg gøre noget?

Nej, ikke hvis temaet er Montana, MontanaB2B, Delaware, DelawareDK, California, Washington, Alaska2 eller Alaska, og du ikke har lavet egne ændringer. Når du har tilføjet et land, viser Webshop → Lande en advarsel, hvis temaet ikke er klar.

Mit tema er en kopi af Montana. Er det klar til lande?

Kun hvis kopien er lavet efter, at Montana fik Lande. En ældre kopi mangler sprogvælgeren, leveringslandene og nøglen "countries" i theme_settings.json. Sammenlign med den nyeste Montana, og flyt ændringerne over, eller gå trinene i artiklen igennem.

Skal jeg lave en kopi af temaet til hvert sprog?

Nej. Det samme tema kan bruges i alle lande, og teksterne oversættes pr. sprog. Shopejeren kan vælge et eget tema pr. land under Webshop → Lande, men et land med eget tema skal være på Pro.

Hvorfor står en tekst stadig på dansk i landet?

Enten står den ikke i <{t}>, den har en variabel inde i teksten, eller den er ikke oversat endnu. Den automatiske oversættelse tager typisk få minutter, men holder pause resten af måneden, når kvoten på 2.000.000 tegn pr. sprog er brugt. Du kan altid rette teksten selv under Webshop → Oversættelser → Temaets tekster.

Hvorfor vises min sprogvælger ikke?

getCountrySites() er tom, indtil shoppen har mindst to versioner: hovedlandet og et aktivt land. Lande, der ikke er aktive, kommer ikke med, heller ikke når du ser dem som admin.

Hvad gør jeg med de hreflang-tags, temaet har i dag?

Fjern dem. Shoporama indsætter selv hreflang til alle aktive lande og x-default til hovedlandet, men fjerner ikke dem, temaet skriver. Står begge dele, får siden dobbelte og måske modstridende hreflang-links. Læs mere i Hreflang og alternate-tags for flersprogede webshops.

Jeg vil linke til hovedlandet fra en side i landet. Hvordan undgår jeg, at linket bliver flyttet?

Sæt data-country-keep eller et hreflang-attribut på linket. Så lader Shoporama adressen stå, som du har skrevet den.

Skal temaet regne priserne om til landets valuta?

Nej. Priserne fra temaets objekter er allerede i landets valuta, med landets kurs, prisjustering, moms og afrunding. Regner temaet selv om, bliver beløbet forkert. Beløb fra en ordre er i ordrens valuta, så vis dem med $order->getCurrency().

Skal temaet selv skjule varer, der ikke må sælges i et land?

Nej. Det, shopejeren skjuler under Synlig i lande, er allerede væk fra lister, søgning, menuer, og opslag, når temaet får dem. Temaet skal kun tage højde for to ting: tomme links fra Sidedesigneren, og at en kategori hentet med $webshop->getCategory() stadig findes, så tjek getIsOnline(), før du linker til den. Shopejerens vejledning står i Synlig i lande.

Hvorfor viser mit tema ikke landets logo?

Fordi logoet ikke hentes med $webshop->getLogo(), men fx fra en temaindstilling med en URL. Ret skabelonen, så den bruger getLogo() først. Har landet intet logo, giver den shoppens, så hovedlandet og lande uden logo ser ud som før. Tjek også, at landet har et logo, og at der er klikket Gem og rediger videre eller Gem og luk efter upload, for ellers kan butikkens cache stadig vise det gamle logo.

Kan jeg levere oversættelserne med temaet i en langs-mappe?

Kun til shoppens eget sprog. Filerne i langs/ udfylder Design → Tekster, når temaet aktiveres. Landenes sprog oversættes under Webshop → Oversættelser: automatisk, i hånden, med eksport og import af CSV, eller via REST API'ets oversættelser.