Hur man lägger till en Tillbaka till toppen-knapp i Magento 2

Innehållsförteckning

  1. Introduktion
  2. Förutsättningar
  3. Förstå Magento 2-strukturen
  4. Steg-för-steg-guide för att lägga till en "Tillbaka till toppen"-knapp
  5. Slutsats
  6. Vanliga frågor

Introduktion

Att navigera på långa sidor på en e-handelssajt kan vara utmanande för användare. En "Tillbaka till toppen"-knapp förbättrar väsentligt användarupplevelsen genom att tillåta besökare att smidigt gå tillbaka till toppen av sidan. Att lägga till den här funktionen i din Magento 2-butik kan verka avskräckande om du inte är väl insatt i kodning, men den här guiden kommer att guida dig genom processen steg för steg.

Dagens digitala kunder efterfrågar bekvämlighet och snabbhet. Den här handledningen är relevant för alla e-handelsbutiksägare eller utvecklare som vill förbättra webbplatsens användbarhet. Vid slutet av det här inlägget kommer du exakt att veta hur du lägger till en "Tillbaka till toppen"-knapp i din e-handelssajt med hjälp av Magento 2, även om ditt tema saknar en footer.phtml-fil.

Förutsättningar

Innan du dyker in i detaljerna, se till att du har följande:

  • Administratörsåtkomst till din Magento 2-butik
  • Grundläggande förståelse för Magentos filstruktur
  • Kunskap om PHP och HTML

Förstå Magento 2-strukturen

Magento 2 organiserar sina filer och mallar logiskt, men det kan vara komplicerat för en nykomling. Nyckelmappar som du kommer att interagera med inkluderar:

  • app/design/frontend/: Här finns dina temafilfiler.
  • app/code/: Platsen för de flesta anpassade modulerna och utvecklingsuppgifterna.

Vår fokus kommer att vara att lägga till en "Tillbaka till toppen"-knapp, vilket innebär att förstå var och hur du ändrar eller skapar specifika filer inom dessa mappar.

Steg-för-steg-guide för att lägga till en "Tillbaka till toppen"-knapp

Steg 1: Identifiera rätt mallfil

Först, kontrollera om ditt nuvarande tema har en footer.phtml-fil. Navigera till app/design/frontend/Vendor/Theme/templates/html/. Om ditt tema saknar denna fil kommer Magento att använda den grundläggande mallen från sin basmall. Du kan åsidosätta detta genom att kopiera den till ditt temas mapp.

  1. Navigera till din Magento-installationsmapp.
  2. Kopiera footer.phtml från basmallen:
    cp vendor/magento/module-theme/view/frontend/templates/html/footer.phtml app/design/frontend/Vendor/Theme/templates/html/

Steg 2: Lägg till anpassad JavaScript

För att införliva "Tillbaka till toppen"-funktionen, lägg till en anpassad JavaScript-fil. Denna scriptaktiverar knappen när användaren scrollar ner på sidan.

  1. Skapa en anpassad JavaScript-fil i din temamapp:

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

  2. Lägg till följande skript 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;
    }); 
});

Steg 3: Inkludera JavaScript i layoutfilen

Se till att denna JavaScript-fil alltid laddas. Modifiera layoutfilen default.xml som finns i app/design/frontend/Vendor/Theme/Magento_Theme/layout/:

  1. Öppna (eller skapa) 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>

Steg 4: Lägg till stilar för knappen

För att göra knappen visuellt tilltalande, lägg till CSS i din temastils:

  1. Skapa en ny CSS-fil (om den inte finns) 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;
}

Steg 5: Kräva CSS i footer.phtml

Se till att inkludera din egna CSS-genom att redigera footer.phtml:

  1. Lägg till följande rader:
    <link rel="stylesheet" type="text/css" media="all" href="<?php echo $this->getViewFileUrl('Vendor_Theme::css/custom.css'); ?>" />

Steg 6: Implementera statiskt innehåll och rensa cache

När du gör ändringar i CSS, JavaScript eller mallar, implementera statiskt innehåll och rensa cachen för att ändringarna ska träda i kraft:

  1. Kör dessa kommandon:
    bin/magento setup:static-content:deploy -f
bin/magento cache:clean
bin/magento cache:flush

Slutsats

Att förbättra användarupplevelsen på din Magento 2-webbplats genom att lägga till en "Tillbaka till toppen"-knapp är okomplicerat när man delar upp det i hanterbara steg. Under den här guiden har vi kopierat nödvändiga mallfiler, skapat anpassad JavaScript och CSS och inkluderat dem på lämpligt sätt. Resultatet är en mer användarvänlig webbplats som uppmuntrar besökare att spendera mer tid med att bläddra.

Vanliga frågor

1. Kan jag anpassa utseendet på "Tillbaka till toppen"-knappen?

Absolut! Ändra stilar i din custom.css-fil för att ändra färger, placering, animation och mer.

2. Vad gör jag om mitt tema använder olika mallfiler?

Kontrollera ditt temas dokumentation för de korrekta platsarna för mallfiler eller kontakta din temaleverantör för hjälp.

3. Måste jag rensa cachen varje gång jag gör ändringar?

Ja, genom att rensa cachen säkerställer du att dina ändringar laddas och syns på frontend.

4. Kan jag utöka den här funktionaliteten för andra element?

Ja, den här javascriptkoden kan anpassas för att animera andra element på sidan eller införa nya interaktiva funktioner.

Genom att följa den här guiden har du tagit ett stort steg mot att optimera din Magento 2-butik för bättre användarinteraktion och förbättrad navigering. Lycka till med koden!