Sådan tilføjes en Tilbage til toppen-knap i Magento 2

Indholdsfortegnelse

  1. Introduktion
  2. Forudsætninger
  3. Forståelse af Magento 2-struktur
  4. Trin-for-trin-guide til tilføjelse af en "Tilbage til toppen"-knap
  5. Konklusion
  6. FAQ

Introduktion

Det kan være udfordrende for brugere at navigere på lange sider på en e-handelsside. En "Tilbage til toppen"-knap forbedrer markant brugeroplevelsen ved at tillade besøgende nemt at vende tilbage til toppen af siden. Hvis du ikke er fortrolig med kodning, kan det virke skræmmende at tilføje denne funktion til din Magento 2-butik, men denne guide vil guide dig trin-for-trin gennem processen.

Dagens digitale kunder kræver bekvemmelighed og hastighed. Denne vejledning er relevant for enhver e-handelshvduer eller -udvikler, der ønsker at forbedre webstedsbrugervenligheden. Ved afslutningen af dette indlæg vil du præcist vide, hvordan du tilføjer en "Tilbage til toppen"-knap til din e-handelsside vha. Magento 2, selv hvis dit tema mangler en footer.phtml-fil.

Forudsætninger

Inden du dykker ned i det tekniske, skal du sikre dig, at du har følgende:

  • Administrativ adgang til din Magento 2-butik
  • Grundlæggende forståelse for Magento's filstruktur
  • Kendskab til PHP og HTML

Forståelse af Magento 2-struktur

Magento 2 organiserer sine filer og skabeloner logisk, men det kan være kompleks for en nybegynder. Centrale mapper, som du vil interagere med, inkluderer:

  • app/design/frontend/: Hvor dine temafiler er placeret.
  • app/code/: Placeringen for de fleste brugerdefinerede moduler og udviklingsopgaver.

Vores fokus vil være at tilføje en "Tilbage til toppen"-knap, hvilket involverer at forstå, hvor og hvordan man ændrer eller opretter specifikke filer inden for disse mapper.

Trin-for-trin-guide til tilføjelse af en "Tilbage til toppen"-knap

Trin 1: Identificer den korrekte skabelonfil

Først skal du se, om dit aktuelle tema har en footer.phtml-fil. Naviger til app/design/frontend/Vendor/Theme/templates/html/. Hvis dit tema mangler denne fil, vil Magento bruge den centrale fil fra dets basistemplates. Du kan overskrive dette ved at kopiere den til din temamappe.

  1. Naviger til din Magento-installationsmappe.
  2. Kopiér footer.phtml fra basistemaet:
    cp vendor/magento/module-theme/view/frontend/templates/html/footer.phtml app/design/frontend/Vendor/Theme/templates/html/

Trin 2: Tilføje brugerdefineret JavaScript

For at inkorporere funktionaliteten med "Tilbage til toppen"-knap, tilføj en brugerdefineret JavaScript-fil. Denne script aktiverer knappen, når brugeren scroller ned ad siden.

  1. Opret en brugerdefineret JavaScript-fil i din temamappe:

    mkdir -p app/design/frontend/Vendor/Theme/web/js/
touch app/design/frontend/Vendor/Theme/web/js/backtotop.js

  2. Tilføj følgende script i backtotop.js:

    require([
    'jquery',
    'domReady!'
], function ($) {
    var button = $('<div/>', {
        id: 'back-to-top',
        style: 'display: none;',
        text: '↑'
    });

    button.appendTo('body');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            button.fadeIn();
        } else {
            button.fadeOut();
        }
    });

    button.click(function () {
        $('html, body').animate({scrollTop: 0}, 800);
        return false;
    });
});

Trin 3: Inkludering af JavaScript i layoutfil

Sørg for, at denne JavaScript-fil altid indlæses. Rediger default.xml-layoutsfilen, der findes i app/design/frontend/Vendor/Theme/Magento_Theme/layout/:

  1. Åbn (eller opret) default.xml:
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Vendor_Theme::js/backtotop.js"/>
    </head>
</page>

Trin 4: Tilføje stilarter for knappen

For at gøre knappen visuelt tiltalende, tilføj CSS til dit temastil:

  1. Opret en ny CSS-fil (hvis den ikke eksisterer) på app/design/frontend/Vendor/Theme/web/css/custom.css:
    #back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 9999;
}

Trin 5: Kræve CSS i footer.phtml

Sørg for at inkludere din brugerdefinerede CSS ved at redigere footer.phtml:

  1. Tilføj følgende linjer:
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo $this->getViewFileUrl('Vendor_Theme::css/custom.css'); ?>" />

Trin 6: Udrulning af statisk indhold og rydning af cache

Når du foretager ændringer i CSS, JavaScript eller skabeloner, skal du udrulle statisk indhold og rydde cachen, så ændringerne træder i kraft:

  1. Udfør følgende kommandoer:
    bin/magento setup:static-content:deploy -f
bin/magento cache:clean
bin/magento cache:flush

Konklusion

Ved at tilføje en "Tilbage til toppen"-knap til din Magento 2-butik kan du forbedre brugeroplevelsen på en ukompliceret måde ved at følge trinene i denne vejledning. Vi har kopieret nødvendige skabelonfiler, oprettet brugerdefineret JavaScript og CSS og inkluderet dem på rette vis. Resultatet er et mere brugervenligt websted, der opfordrer besøgende til at bruge mere tid på at browse.

FAQs

1. Kan jeg tilpasse udseendet af "Tilbage til toppen"-knappen?

Absolut! Ændr stilarterne i din custom.css-fil for at ændre farver, positionering, animation og meget mere.

2. Hvad hvis mit tema bruger forskellige skabelonfiler?

Tjek dit temas dokumentation for de korrekte placeringer af skabelonfilerne eller kontakt din temaudbyder for assistance.

3. Er det nødvendigt at rydde cachen hver gang, jeg laver ændringer?

Ja, ved at rydde cachen sikrer du, at dine ændringer bliver indlæst og er synlige på frontend.

4. Kan jeg udvide denne funktionalitet til andre elementer?

Ja, JavaScript-logikken her kan tilpasses til at animere andre elementer på siden eller introducere nye interaktive funktioner.

Ved at følge denne guide har du taget et betydeligt skridt i retning af at optimere din Magento 2-butik for bedre brugerengagement og forbedret navigering. God kodning!