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

Skapa en varukorg i Javascript


homans

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?

Länk till kommentar
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.

Länk till kommentar
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?
 

Länk till kommentar
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.

Länk till kommentar
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?

Länk till kommentar
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.

Länk till kommentar
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.

Länk till kommentar
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.

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...