Just nu i M3-nätverket
Gå till innehåll
homans

Skapa en varukorg i Javascript

Rekommendera Poster

Hur gör jag enklast kodningen? Hur ska jag börja? Någon som kan ge en hint?

För att göra det enkelt.

 

När man fyller i fälten och klickar på "Lägg i varukorgen" skall vald vara, färg, antal och meddelande visas i en "varukorg" någonstans på sidan.

 

Textfärgen på utskriften i varukorgen ska ha samma färg som vald färg för varan.

 

Varje tillagd vara ska skrivas in under varandra, utan att sidan laddas om.

 

Skriver användaren inte in något som "meddelande" skall denna information inte skrivas ut i varukorgen.

 

Man ska kunna dölja och visa varukorgen med en knapp, ikon, text eller liknande.

 

I exemplet ovan har besökaren "beställt" varor tre gånger, det vill säga klickat på "Lägg i varukorgen"-knappen tre gånger. I ett av fallen har ett meddelande skrivits in.

Det skall även gå att dölja/visa varukorgen genom att klicka på en knapp, eller som i exemplet ovan, en länk.

Exempel på hur det kan se ut med "infälld" varukorg:

 

Hur ska jag lösa denna problematik o kodning?

Redigerad av homans

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag hade löst det med AngularJS, ett ramverk jag tycker är jättetoppen. Detta är ett exempel på ungefär det du vill uppnå. Färgen på raderna verkar inte fungera av någon anledning. Men annars så fyller den dina behov rätt väl.

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Varukorg</title>
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <style>
        .blue { color:blue;}
        .red { color:red;}
        .green { color:green}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script>
        angular.module("varukorgApp", [])
               .controller("varukorgController", function ($scope) {
                   $scope.varukorg = [];
                   $scope.varor = [{ namn: "Garn - Silke" }, { namn: "Garn - Bomull" }, { namn: "Skosnören" }];
                   $scope.valdFarg = "Röd";
                   $scope.valdAntal = 1;
                   $scope.antal = [1, 2, 3, 4, 5];
                   $scope.laggTillVara = function () {
                       $scope.varukorg.push({ namn: $scope.valdVara.namn, farg: $scope.valdFarg, antal: $scope.valdAntal, meddelande: $scope.meddelande });
                       console.dir($scope.varukorg);
                   };

                   $scope.translateColor = function (color) {
                       switch (color) {
                           case "Röd": return "red"
                           case "Blå": return "blue"
                           case "Grön": return "green"
                       }
                   };
               });
    </script>
</head>
<body ng-app="varukorgApp" ng-controller="varukorgController">
    <form>
        <h1>Varukorg - demo</h1>
        <strong>Produkt</strong><select ng-model="valdVara" ng-options="vara.namn for vara in varor"></select><br />
        <strong>Färg</strong> <input type="radio" ng-model="valdFarg" value="Röd" />Röd <input type="radio" ng-model="valdFarg" value="Grön" />Grön <input type="radio" ng-model="valdFarg" value="Blå" />Blå<br />
        <strong>Antal</strong> <select ng-model="valdAntal" ng-options="a for a in antal"></select><br />
        <strong>Meddelande</strong><br />
        <textarea rows="4" cols="40" ng-model="meddelande"></textarea>
        <button type="button" ng-click="laggTillVara()">Lägg i varukorg</button>
        <div>
            <h2>Varukorg</h2>
            Följande varor finns i din varukorg
            <ul ng-repeat="vara in varukorg">
                <li ng-class="translateColor(vara.farg)">{{vara.antal}} stycken {{vara.namn}}, färg {{vara.farg}}
                    <span ng-show="vara.meddelande">Meddelande {{vara.meddelande}}</span>
                </li>
            </ul>
        </div>
    </form>
</body>
</html>

Edit: Fixade färgen så den verkar nu fungera.

Redigerad av .M

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Om jag gjort ett HTML kodning för en sida och sedan CSS-kodning. Var kan jag lägga in detta då i kodningen. Hänvisar jag på något sätt?

 

Vart i såfall ska jag lägga in javascript koden i HTML kodningen?
 

Redigerad av homans

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

I mitt exempel så förekommer det html-attribut som börjar med ng-. Dessa borde du kunna kopiera in till motsvarande element på din sida. Sen kopierar du script-taggarna och så har du nog kommit ganska långt.

 

Dock är det värt att veta att varukorgen inte kommer överleva om du laddar om sidan av någon anledning. Så koden måste antagligen kompletteras med funktioner som gör den persistent.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag har en sida vars struktur är att klicka till två sidor till.

 

I den ena ska varukorgen läggas och fungera. Så om jag lägger in allt i den så fungerar det inte.

 

Hur gör jag då för att den ska bli persistent? Har du något förslag?

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Kan jag se hur den kod som du la ut här fungerar i en webläsare. Eller hur fungerar det?

 

Tänkte jag skulle se hur ditt förslag såg ut.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Du har inte testat mitt förslag? Hur sjutton vet du då om det är något du vill bygga vidare på?

 

Det enklaste är antagligen att klippa ur koden, spara i ett html-dokument och köra det i en webbläsare.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Hej igen!

Det fungerar hur bra som helst. Men då är min fråga igen. Ett tillägg.

 

Går det att lägga till dölja/visa varukorgen knappen?

 

Det skall även gå att dölja/visa varukorgen genom att klicka på en knapp som gör att varukorgen döljs.

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...