Start din webshop i dag
  • Alt-tekster (designfiler)
  • Rediger filer
  • Design Manager
  • Brugermanual

    • Alt-tekster - opdatering af designfiler

    I denne artikel:

      Attention  Dette afsnit henvender sig til personer med kodeerfaring (webdesignere og udviklere). Hvis du leder efter generelle artikler omkring opsætning og design, så kig her.

       

      Introduktion

      Med introduktion af nye felter til redigering af ALT-tekster på produkter, kategorier, sider og billedelementer er der introduceret en række ændringer i shoppens designfiler. Disse ændringer modtager dit design kun, hvis de omfattede designfiler ikke har været tilpasset (filer markeret med "C" er tilpassede og modtager ikke designopdateringer - læs mere her). Overskrivning af brugertilpassede filer er med vilje udeladt for ikke at overskrive individuelle designtilpasninger. I denne artikel viser vi, hvilke filer du skal opdatere manuelt, for at få de seneste ændringer.

      Hvad er en alt-tekst? En alt-tekst (alternativ tekst) er en beskrivende tekst, der tilføjes til et billede, når billedet ikke kan vises korrekt på en hjemmeside. Dette kan skyldes tekniske problemer, en langsom forbindelse, eller hvis brugeren bruger en skærmlæser på grund af synshandicap mv. Alt-teksten giver en erstatning for billedet og beskriver indholdet eller funktionen af billedet for brugere og søgemaskiner. Alt-teksten eksisterer som et tag i HTML-koden på billedelementer og vises automatisk i browsere når billedet ikke kan vises. Se mere i vores ordliste.

       

      Designfiler

      Følgende designfiler skal opdateres manuelt for, at understøtte de nye ALT-tekster. Bemærk: Dette gælder kun, hvis filerne er tilpasset (læs mere her), da de i så fald ikke modtager generelle opdateringer:

      
    modules/blog/blog-list.tpl
    modules/cart/cart.tpl
    modules/json/products.tpl
    modules/json/productvariants.tpl
    modules/news/news-list.tpl
    modules/product/partials/entity-extra-buy.tpl
    modules/product/partials/entity-image-rotation.tpl
    modules/product/partials/entity-image-zoom.tpl
    modules/product/partials/entity-variant-orderlist.tpl
    modules/product/partials/list-js-col.tpl
    modules/product/partials/list-js-row.tpl
    modules/product/product-categories-entity.tpl
    modules/product/product-entity.tpl
    modules/product/product-list-entity-item.tpl
    modules/widgets/cart/cart.tpl
    modules/widgets/order/order.tpl
    modules/widgets/slider/slider.tpl
    source/js/angularjs/modules/productlist/productlist.app.js
    source/libs/jquery.fancybox/latest/@jquery.fancybox.pack.dirty.js
    source/libs/jquery.fancybox/latest/helpers/jquery.fancybox-thumbs.dirty.js
    assets/js/app.js

       

      Eksempel

      Hvis du har tilpasset nogle af disse filer, skal du manuelt overføre de nye ændringer fra de originale filer til dine tilpassede filer. Dette kan gøres ved, at tilføje et nyt design fra designstore til inaktive designs i shoppen således, at du har en frisk resource at kopiere filernes indhold fra - læs mere her. Den mest oplagte procedure er, at indsætte indholdet fra en ny designkopi og tillføje evt. egne tilpasninger igen.

      Opdateringen er ret simpel, men sker mange steder og vedrører også app.js. Den egentlige opdatering er til shoppens administrationen, hvor UI skal understøtte alt-tekster på de steder, hvor shoppen bruger billeder. Og files controller, som har fået en ekstra property ImageFileItem::AltText.

      Her er et eksempel på hvordan det er løst i modules/widgets/cart/cart.tpl

      
    {* Picture *}
    {$cartImageObject = false}
    {if $cartProduct->VariantId && $variantImage}
        {$cartImage = $variantImage->thumbnail(40, 40)|solutionPath}
        {$cartImageObject = $variantImage}
    {elseif $productImage}
        {$cartImage = $productImage->thumbnail(40, 40)|solutionPath}
        {$cartImageObject = $productImage}
    {else}
        {$cartImage = $placeholder->getRelativeFile()|solutionPath}
    {/if}

    {$cartImageAltText = null}
    {if $cartImageObject && $cartImageObject->AltText}
        {$cartImageAltText = $cartImageObject->AltText}
    {/if}

       

      Relaterede artikler