Att förbättra Fotorama-smidig rullning på mobilen för Magento 2.3

Innehållsförteckning

  1. Introduktion
  2. Förstå Fotorama-galleriet
  3. Implementera lösningen
  4. Ytterligare tips för smidig rullningsoptimering
  5. Slutsats
  6. Vanliga frågor

Introduktion

Användarupplevelsen på mobilen är avgörande i dagens e-handelslandskap. Med en betydande del av online-transaktionerna som sker på mobila enheter är det viktigare än någonsin att säkerställa en sömlös surfupplevelse. Magento 2.3, en ledande e-handelsplattform, ger användarna möjlighet att integrera olika funktioner och egenskaper för att förbättra användarupplevelsen. Ett vanligt problem som utvecklare står inför är smidig rullning för Fotorama-galleriet på mobila enheter. Det vanliga beteendet kan kännas hackigt, vilket leder till en mindre idealisk användarupplevelse.

I den här guiden kommer vi gå in på djupet för att åtgärda detta problem och ge dig en stegvis lösning på hur du förbättrar den smidiga rullningen för Fotorama-gallerinavigeringen på mobila enheter. Vid slutet av inlägget kommer du få en omfattande förståelse för hur du optimerar denna funktion för en sömlös surfupplevelse på mobilen.

Förstå Fotorama-galleriet

Fotorama är ett mycket populärt galleri-plugin som används av många Magento 2.3-butiker för att skapa responsiva bildgallerier. Det erbjuder stor flexibilitet och många anpassningsalternativ, vilket gör det till ett förstahandsval för utvecklare. Trots sin robusta funktionalitet kan det dock ibland uppstå problem med standard-rullningsbeteendet på mobila enheter som påverkar användarupplevelsen.

Problemet med mobil rullning

På mobila enheter upplevs problemet som hackig eller ryckig rullning inom gallerinavigationen. Detta beror oftast på att standardrullningssteget är inställt på ett litet värde (ungefär 20-30px), vilket inte ger en jämn övergång när användarna sveper igenom bilderna.

Varför smidig rullning är viktigt

Smidig rullning handlar inte bara om estetik, det förbättrar användarupplevelsen genom att göra navigeringen intuitiv och flytande. Inom e-handel, där användarupplevelsen direkt påverkar konverteringsgraden, kan optimering av sådana tilsynelatande små detaljer leda till betydande förbättringar i användarnöjdhet och därmed ökad försäljning.

Implementera lösningen

För att ta itu med detta problem behöver vi göra vissa ändringar i Fotoramas JavaScript-fil. Här är en stegvis guide för att uppnå smidigare rullningsbeteende.

Steg-för-steg-guide

1. Lokalisera Fotorama-skriptet

Först behöver vi lokalisera fotorama.js filen i din Magento 2.3-installation. Denna fil är ansvarig för beteendet och funktionaliteten hos Fotorama-galleriet.

sökväg_till_din_magento_rot/js/fotorama.js

2. Identifiera den relevanta funktionen

Öppna fotorama.js-filen och leta reda på följande funktion:

jQuery.Fotorama = function ($fotorama, opts)

I denna funktion behöver vi hitta avsnittet som hanterar pekpekevenemangen för gallerinavigationen. Letai variabeln navShaftTouchTail och funktionen onEnd.

3. Modifiera rullningsbeteendet

Samunder onEnd-funktionen, modifiera rullningsbeteendet för att ge en smidigare upplevelse. Så här kan du göra detta genom att justera positionens parametrar:

const pos = result.newPos < result.pos ? result.newPos - 75 : result.newPos + 75;

Denna justering säkerställer att rullningssteget ökar, vilket gör att rullningen blir smidigare och mer responsiv.

Exempelimplementation

Här är ett exempel på hur ändringarna kan göras inom fotorama.js-filen:

jQuery.Fotorama = function ($fotorama, opts) {
   // Befintlig kod
   var navShaftTouchTail = moveOnTouch,
   var onEnd = function () {
        // Övriga villkor
        if (result.pos !== result.newPos) {
            const pos = result.newPos < result.pos ? result.newPos - 75 : result.newPos + 75;
            slide(pos);  // Modulerade slide-funktionsparametrar
        }
    };
    // Resten av koden
};

4. Testa ändringarna

Efter att du har gjort dessa ändringar är det viktigt att testa galleriet på olika mobila enheter för att säkerställa att rullningsbeteendet är smidigt och responsivt. Detta kan innefatta både manuell testning och användning av mobila emulerare för att validera förbättringarna.

Ytterligare tips för smidig rullningsoptimering

Optimera bilder

Säkerställ att bilderna som används i Fotorama-galleriet är optimerade för webbanvändning. Stora, ouptimerade bilder kan orsaka fördröjningar och påverka rullningens smidighet.

Använd ett distribuerat innehållsnätverk (CDN)

Genom att implementera en CDN kan laddningstider och prestanda förbättras avsevärt för användare som besöker din webbplats från olika geografiska platser. Snabbare laddningstider bidrar till en övergripande smidigare användarupplevelse.

Minimera JavaScript-konflikter

Säkerställ att det inte finns några konflikterande JavaScript-filer eller bibliotek som kan påverka Fotorama-funktionaliteten. Konflikter kan resultera i oregelbundet beteende och hackig rullning.

Slutsats

Genom att förbättra den smidiga rullningsfunktionaliteten för Fotorama-galleriet på mobila enheter i Magento 2.3 kan användarupplevelsen avsevärt förbättras. Genom att modifiera viktiga parametrar i fotorama.js-filen kan du säkerställa en smidig och responsiv rullningsåtgärd som kommer att glädja mobila användare.

Förutom kodändringar kan det också vara klokt att överväga bredare prestandaförbättringar som bildoptimering och implementering av CDN, vilket kan bidra till en generellt smidigare användarupplevelse. Med dessa förbättringar kan du erbjuda en förstklassig användarupplevelse som håller besökare engagerade och ökar sannolikheten för konverteringar.

Vanliga frågor

Fråga: Kommer dessa ändringar att påverka den stationära versionen av galleriet? A: Nej, ändringarna riktar sig specifikt till pekevenemangen som används i mobilnavigeringen, så beteendet på datorn kommer inte att påverkas.

Fråga: Kan jag enkelt återgå dessa ändringar? A: Ja, du kan återgå till den ursprungliga fotorama.js-filen eller göra en säkerhetskopia innan du gör ändringar. Ersätt helt enkelt den modifierade filen med den ursprungliga för att ångra ändringarna.

Fråga: Vad gör jag om den smidiga rullningen fortfarande inte är perfekt? A: Ytterligare justeringar av scrollökningen eller extra testning på olika enheter kan vara nödvändiga. Att säkerställa andra JavaScript-optimeringar och minska laddningstider kan också vara till hjälp.

Fråga: Finns det några plugins eller tillägg som kan hjälpa till med detta? A: Även om manuella justeringar som beskrivs är effektiva erbjuder vissa tredjeparts Magento-tillägg förbättrade gallerifunktioner och kan bättre hantera liknande problem.

Genom att följa denna guide kan du avsevärt förbättra den smidiga rullningsfunktionaliteten för dina Fotorama-gallerier och erbjuda en bättre användarupplevelse för mobila besökare på din Magento 2.3-butik.