Forbedring af Fotorama Smooth Scroll på mobil for Magento 2.3

Indholdsfortegnelse

  1. Introduktion
  2. Forståelse af Fotorama Gallery
  3. Implementering af løsningen
  4. Yderligere tip til optimering af jævn rulning
  5. Konklusion
  6. Ofte stillede spørgsmål
Shopify - App image

Introduktion

Mobil brugeroplevelse er afgørende i dagens e-handelslandskab. Med en betydelig del af online transaktioner, der foregår på mobile enheder, er det vigtigere end nogensinde at sikre en problemfri browsingoplevelse. Magento 2.3, en førende e-handelsplatform, giver brugerne mulighed for at inkorporere forskellige funktioner og funktionaliteter for at forbedre brugeroplevelsen. Et almindeligt problem, som udviklere står over for, er den jævne rulning af Fotorama-gallerier på mobile enheder. Denne standardadfærd føles ofte hakkende og resulterer i en mindre end ideel brugeroplevelse.

I denne guide dykker vi dybt ned i dette problem og giver en trinvis tilgang til at forbedre den jævne rulning af Fotorama-gallernavigationen på mobile enheder. Ved udgangen af dette indlæg vil du have en omfattende forståelse af, hvordan du optimerer denne funktion for en problemfri mobil browsingoplevelse.

Forståelse af Fotorama Gallery

Fotorama er et meget populært galleriplugin, der bruges af mange Magento 2.3-butikker til at oprette responsive billedgallerier. Det tilbyder stor fleksibilitet og tilpasningsmuligheder, hvilket gør det til et foretrukket valg for udviklere. Men på trods af sin robuste funktionalitet, kan den standardmæssige rulleadfærd på mobile enheder undertiden være mindre jævn og påvirke den generelle brugeroplevelse.

Problemet med mobil rulning

På mobile enheder manifesterer problemet sig som en rykket eller hakkende rulning inden for gallerinavigationen. Dette skyldes normalt, at den standardrulleinkrement er indstillet til en lille værdi (ca. 20-30px), hvilket ikke giver en jævn overgang, når brugerne swiper gennem miniaturebillederne.

Hvorfor jævn rulning er vigtigt

Jævn rulning handler ikke kun om æstetik; det forbedrer markant brugeroplevelsen ved at gøre navigationen intuitiv og flydende. Inden for e-handel, hvor brugeroplevelsen direkte påvirker konverteringsraterne, kan optimering af sådanne tilsyneladende mindre detaljer føre til betydelige forbedringer i brugertilfredshed og i sidste ende salg.

Implementering af løsningen

For at løse dette problem skal vi foretage nogle ændringer i Fotorama JavaScript-filen. Her er en trinvis guide til at opnå en mere jævn rulleadfærd.

Trin-for-trin guide

1. Find Fotorama Scriptet

Først skal vi finde fotorama.js-filen i din Magento 2.3-installation. Denne fil er ansvarlig for opførslen og funktionaliteten af Fotorama-galleriet.

sti_til_din_magento_root/js/fotorama.js

2. Identificer den relevante funktion

Åbn fotorama.js-filen og find følgende funktion:

jQuery.Fotorama = function ($fotorama, opts)

Inden for denne funktion skal vi finde afsnittet, der håndterer touchhændelserne på gallerinavigationen. Led efter variablen navShaftTouchTail og blokken onEnd med funktionen

3. Ændr rulleadfærden

Inden for onEnd-funktionen skal du ændre rulleadfærden for at opnå en mere jævn oplevelse. Sådan kan du gøre dette ved at justere positionsværdierne:

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

Denne justering sikrer, at rulleinkrementet øges, hvilket gør rullehandlingen mere flydende og responsiv.

Eksempel på implementering

Nedenfor er et eksempel på, hvordan ændringerne kan anvendes i fotorama.js-filen:

jQuery.Fotorama = function ($fotorama, opts) {
    // Eksisterende kode
    var navShaftTouchTail = moveOnTouch,
    var onEnd = function () {
        // Andre betingelser
        if (result.pos !== result.newPos) {
            const pos = result.newPos < result.pos ? result.newPos - 75 : result.newPos + 75;
            slide(pos);  // Ændrede slide-funktionsparametre
        }
    };
    // Resten af koden
};

4. Test ændringer

Efter at have foretaget disse ændringer er det vigtigt at teste galleriet på forskellige mobile enheder for at sikre, at rulleadfærden er jævn og responsiv. Dette kan omfatte både manuel testning og brug af mobilmulatorer til at validere forbedringerne.

Yderligere tip til optimering af jævn rulning

Optimer billeder

Sørg for, at de billeder, der bruges i Fotorama-galleriet, er optimeret til webbrug. Store, ikke-optimerede billeder kan medføre forsinkelser og påvirke rulningens jævnhed.

Brug et indholdsleveringsnetværk (CDN)

Implementering af et CDN kan markant forbedre indlæsningstider og ydeevne for brugere, der tilgår din hjemmeside fra forskellige geografiske placeringer. Hurtigere indlæsningstider bidrager til en mere jævn samlet oplevelse.

Minimer JavaScript-konflikter

Sørg for, at der ikke er konflikter mellem JavaScript-filer eller biblioteker, der kan påvirke Fotorama-funktionaliteten. Konflikter kan resultere i uregelmæssig opførsel og ujævn rulning.

Konklusion

Forbedring af den jævne rullefunktionalitet i Fotorama-galleriet på mobile enheder i Magento 2.3 er en enkel proces, der kan forbedre brugeroplevelsen væsentligt. Ved at ændre nøgleparametre i fotorama.js-filen kan du sikre en flydende og responsiv rullehandlingen, som vil glæde mobile brugere.

Udover kodeændringer kan det være en god idé at overveje bredere optimeringer som billedoptimering og implementering af CDN, hvilket kan bidrage til en mere jævn samlet browseoplevelse. Med disse forbedringer kan du give en førsteklasses brugeroplevelse, der holder besøgende engagerede og øger sandsynligheden for konverteringer.

Ofte stillede spørgsmål

Spørgsmål: Vil disse ændringer påvirke desktop-versionen af galleriet? A: Nej, ændringerne retter sig specifikt mod touchhændelser, der bruges til mobilnavigation, så desktop-adfærden bør forblive upåvirket.

Spørgsmål: Kan jeg nemt fortryde disse ændringer? A: Ja, du kan gendanne den originale fotorama.js-fil eller lave en sikkerhedskopi, før du foretager ændringer. Erstat blot den ændrede fil med den oprindelige for at rulle ændringerne tilbage.

Spørgsmål: Hvad hvis den jævne rulning stadig ikke er perfekt? A: Yderligere justeringer af rulleinkrementsværdien eller yderligere testning på forskellige enheder kan være nødvendige. At sikre andre JavaScript-optimeringer og reducere indlæsningstiderne kan også hjælpe.

Spørgsmål: Findes der plugins eller udvidelser, der kan hjælpe med det? A: Mens manuelle justeringer som beskrevet er effektive, tilbyder nogle tredjeparts Magento-udvidelser forbedrede gallerifunktioner og kan måske håndtere lignende problemer mere omfattende.

Ved at følge denne guide kan du betydeligt forbedre den jævne rullefunktionalitet i dine Fotorama-gallerier og dermed give en bedre brugeroplevelse for mobile besøgende på din Magento 2.3-butik.