Peter Dahlén|

Examensarbete, Mionix

Jag började med att öppna terminalen och installerade create-react-app med hjälp av npm (Node Package Manager. Filerna och mapparna som installerades innehöll onödiga filer så dessa rensades bort.
Nästa steg blev att först infogade några statiska produktbilder. Dessa byggde jag sedan in i react-slick, en komponent som visar bildspel i React. Vidare uppdaterade jag navigationsknapparna för nästa/föregående-bild med egna knappar som är mer i linje med företagets grafiska profil. Varje bildspel fick också en etikett för att visa vad som är unikt med just denna produkt, dessa placerades ut i bildspelet med hjälp av CSS. Produktnamn och en köpknapp placerades också ut med hjälp av CSS.
Vid klick på bildspelet förs besökaren vidare till en produktsida för just den produkten, så jag installerade react-router-dom i projektet via terminalen. Alla komponenter importerades sedan i App.js.
Jag kodar sedan en statisk produktsida. Här upptäcker jag dock ett problem. Problemet består i att besökaren behåller sin position när hen klickar in på en produktsida. Här ska besökaren så klart hamna överst på sidan igen. Det visar sig vara ett känt problem i React och det fanns färdiga lösningar i form av komponenten ScrollToTop.jsx.
På produktsidan i sektionen för produktbeskrivningar kände jag för första gången att jag behöver olika format på sidan beroende på mobile eller desktop. Jag tänkte att Bootstrap skulle hjälpa med detta men Bootstrap innehåller också många för oss onödiga funktioner som tynger sidan. Pure CSS och Skeleton är väldigt minimala ramverk som ändå utför responsivitet smidigt. Valet föll på Pure CSS som jag infogar via en länk i index.html.
Många delar av produktsidan gick att bryta ut i komponenter som kunde återanvändas på alla produktsidor. Färgval och merförsäljning byggdes om till komponenter och jag infogade sedan dessa på produktsidan.
Innehållet i merförsäljningskomponenten definierades utifrån vilken produkt samt vilken färg du just då tittade på (this.props). Var du inne och tittade på en rosa mus så bestod merförsäljningen av exempelvis rosa mus- och skrivbordsmattor. Klickade du på färgvalen så skickade komponenten dynamiskt vidare dig till samma produkt men med den nya färgen.
Sidfotskomponenten infogade jag i App.js så den syntes på alla sidor i butiken.
I nästa steg så byggde jag en navigationsmeny, en ganska enkel med ganska få funktioner: en sidomeny, en hemknapp och en kassaknapp. react-burger-menu visade sig vara enkel att jobba med och blev valet för att hjälpa till med sidomenyn.
Sedan blev det dax för att koppla upp butiken mot en databas. MongoDB och Mongoose blev vårt val. Allt detta var helt nytt för mig, så här fick jag bra hjälp av min handledare. När jag lagt in alla produkter vi har i lager med tillhörande produktbeskrivningar i databasen så skrev vi en fetch-funktion. Med hjälp av databasen så definierades sedan egentligen allt som visas i butiken. Det började i bildspelet där produktbilderna skapades utifrån vad som fanns i lager enligt databasen. Bilderna användes sedan för att skapa länkar som visade rätt produkter på produktsidorna. På produktsidorna hämtades sedan den beskrivande texten från samma databas.
Det sista jag gjorde med webbshoppen var kanske ändå det viktigaste, jag kopplade på Shopifys API. Jag hittade en resurs på GitHub som jag använde mig av. Den visade sig inte vara helt felfri då den bara hämtar de första tjugo produkterna i Shopifys array och således inte fungerade på alla produkter i butiken. LiAn led mot sitt slut och detta problem fick vi inte riktigt tid att lösa.