Eigener Online Shop + Paypal | HTML, CSS, Javascript Tutorial für Anfänger
Вставка
- Опубліковано 7 лип 2024
- Ihr wollt einen eigenen Online Shop mit Paypal Bezahlfunktion? Dann ist dieses Video genau richtig für euch. Ich zeige euch, wie man relativ leicht und schnell einen responsiven Online Shop mit HTML, CSS und Javascript bauen kann. Bezahlt werden kann dann mit Paypal, GiroPay, Kreditkarte usw.
Anleitung
00:00:00 - Einleitung
00:02:49 - HTML der Seite
00:21:44 - CSS der Seite
00:31:10 - Paypal Buttons einrichten
00:34:10 - Javascript der Seite
00:45:20 - Paypal aktivieren
Den Code zum nachlesen findet ihr hier:
codepen.io/zugende/pen/KKgveXR
Ihr wollt die Seite auf einen Webserver mit Domain hosten? • Website auf Server hoc...
Ihr habt Fragen? Dann kommt in die Telegram Gruppe: t.me/joinchat/AKa7V0h1Fjv_fg0...
Outro Musik:
metr - we should tell the truth.
/ we-should-tell-the-truth
Lasst mich jederzeit wissen, wenn ich etwas besser machen kann. :)
Liebe Grüße
Basti - Наука та технологія
![Dieser CSS Card Effekt macht süchtig! Spotlight Border Animation [DE/Tutorial]](/img/n.gif)
Deine Erklärung ist sehr einfach, klar und detailliert. Deshalb verdienst du unser beispielloses Lob, du bist unglaublich gut darin, Dinge zu erklären, der perfekte Lehrer, den unsere Gesellschaft braucht. Wenn ich einen Lehrer wie dich hätte, hätte ich das Programmieren viel schneller verstanden und gelernt. Ich mag deine Videos sehr, das wird sicher viele junge Leute begeistern, die etwas lernen wollen. Viel Erfolg und Gott sei Dank, dass es solche Menschen noch gibt. Danke dir!
Beschteeee!! Danke, hättest mehr Reichweite verdient !
Stimme ich komplett zu
Ich liebe deine Videos über Programmieren bzw. Erstellung von Webseiten. Das kannst du echt gut erklären und du bist für mich der bester. Danke dir!
Deine Videos gefallen mir sehr gut. Es wäre schön, wenn noch mehr davon kommt!
Wirklich vielen Dank für dieses super Video! Es wurde alles 100% ig nachvollziehbar und auf einer sehr angenehmen Weise erklärt.
Hallo Basti
tolles Tutorial und wirklich gut erklärt. Damit kann man nun voll durchstarten.
Danke
tolles tutorial schon erklärt! vielen dank!
sehr gut erklärt weiter so ;)
starkes VIdeo! selbst für Anfänger ausführlich erklärt.
Mega gut danke für die Erklärung
Hallo Basti.
Achtung es kommt ein Lobesschwall. Noch viel mehr Achtung: Der ist komplett ernst gemeint(!) Ich finds spitze, dass es in Zeiten von inhaltsleeren Videos mit übersteuerter Mugge noch echten Content gibt. Mach bitte weiter so.
Ich finde die Erklärungen spitze, die Hintergründe und das elegante Herunterbrechen auch.
Ich kann es nur Befürworten, dass es Menschen gibt, für die das Internet noch die Möglichkeit bietet, freies Wissen zu teilen. Die medienkompetenten User halten sich die Ohren bei den vielen Schreihälsen sowieso zu und finden den echten Content früher oder später, glaub mir das mal. Beim browser ballet hats auch funktioniert. Lasse bitte auch weiterhin den Inhalt für sich selbst sprechen.. das tut er nämlich. Weiter so, Prost und frohe Weihnachten.
Gibts eigentlich früher oder später die Möglichkeit, dich bei Patreon zu unterstützen?
Bitte mehr davon :))))
Mega geiles Video.
Hat mir sehr geholfen.
Bin soweit gut am Front-End Stuff lernen via Udemy usw.
aber konnte dennoch so einiges aus dem Video mitnehmen,
gerade die genaueren Bezeichnungen der Funktionen wie eben von H1 / dem Tag usw.
So kann man sich halt genauer ausdrücken untereinander,
vielen Dank dafür!
Hey, ich weiß nicht, ob Kommentare tatsächlich noch gelesen werden, aber: ich bin dem Video nun komplett bis zum Ende gefolgt, habe dabei alles durch die gute Erklärung verstanden und konnte die gesammelten Informationen gut verarbeiten. Mein erster Shop steht und ich habe sogar ein wenig dran gewerkelt. Es muss noch ein riesiger Haufen gelernt werden, aber als Grundlage für HTML, CSS und JavaScript ist dieses Video erste Spitze! Ich werde jetzt alles an HTML, CSS und JS lernen, für diesen guten Start danke ich Dir von Herzen! 😊✌
Danke für das tolle Feedback! 🔥
Super Video 👍
Nice 😱😍
top Video, weiter so! like und Abo da gelassen demnächst noch Telegramm :D
Geil genau das was ich gebraucht habe, aber bei hundert produkten wäre ein shopsystem besser als eine neue logik :)))) das ist aber genial für landingpages mehr weite ich folge dir :))
Sehr Cool! Vielen Dank!
Wäre noch cool zu sehen, wie du das mit der Bestätigungsemail machst und mit einer Verkaufsbenachrichtigung für den Verkäufer?
Danke
Bester Mann ich hör dir gern zu und erklärtst es einfach und direkt! ✌️ könntest du eventuell erklären wie man es machen würde wenn man wirklich 100 produkte oder mehr hat?
Sehr geiles Video / Tutorial, vorallem zum mitprogrammieren. Welche Themes oder Addons hast du in VSC installiert, dass das Farbschema passt, da das bei mir leider nicht so aussieht wie bei dir. Macht natürlich keinen technischen Unterschied, sieht aber einfach strukturierter aus. VG
@Basti Klein Gäbe es die Möglichkeit mal ein Video über ein Warenkorb-System in HTML/Javaskript zu machen? + Wie richte ich das mit der Kreditkarte und mit Twint ein. Wäre cool, wenn du es mal erklären könntest.
Wie ist das denn, wenn man den Shop jetzt online bringt (nach deiner Vorlage) und jemand kauft ein Produkt, woher weiß ich dann als Verkäufer, welches Produkt gekauft wurde?
garnicht
edit: bzw nur wenn du für alle produkte verschiedene preise hast und dann nachschaust, was wieviel kostet
Sowas solltest du niemals als echtes Projekt veröffentlichen. Das dient nur als Vorlage und damit man sich Wissen einprägt.
Es fehlen noch sehr viele Funktionen und am besten noch eine Datenbank.
@@silvio4457 Ja hab mein ganzen Store so gebaut und es ist eigentlich Blödsinn. Php ist das einzig sinnvolle :(
@@UnrealMatter Ja ist extrem Blödsinn sowas über JS zur machen, weil sowas manipulieren werden kann.
Moin, sehr geil erklärt!
Ist es möglich, nach erfolgreicher Bezahlung zu einer anderen Seite weiterzuleiten wo z.B. ein digitales Produkt gedownloaded werden kann?
Außerdem, wie bekommt der Kunde seine Rechnung? Kann ich das direkt bei PayPal einstellen?
super video danke ! hoffe auf mehr tutorials(bin grad erst dein channel gefunden). finde du erklärst sehr verständlich
Warum benutzt du keine , oder Tags? Sonst top. 👍
Hallo, ich habe dein tutorial geguckt wie man eine minecraft seite programiert. Diese habe ich schon auf meinen youtube kanal angepasst. Allerdings brauche ich das für die schule und ich hätte gerne eine gute Note haha. Deswegen wollte ich auf diese seite da wo du Server hattest einen Shop rein bauen. Allerdings habe ich ja schon einen css für diese website benutzt. wie mache ich das jetzt weil für den shop brauche ich ja auch noch css? Muss ich den css code einfach bei meinen anderen css code dabei schreiben oder kann man auch noch eine css datei erstellen?
viele Grüße
Lukas
Zuerst bedanke ich mich für das gute Thema und die gute Erklärung. Ich möchte ein online shop in blogger auf Deutsch erstellen. Kannst du uns bitte dieses Thema erklären?
Hi, wie kann ich es einrichten das wenn ich bezahlen muss auch meine Adresse und Name angeben muss wie man es halt kennt von Online Shops?
Kurze Frage. Wenn man Die Überweisung dann abschließt und dann auf das Überweisungskonto bei Paypal geht, sieht man dann welcher Artikel bestellt wurde und an welche adresse es geht ?
Das Video ist zwar schon ein bisschen älter, jedoch habe ich das problem, das es diese funktion bei Paypal irgendwie nicht mehr gibt, zumindest nicht so übersichtlich wie in dem Video. Irgendwie muss man jetzt sehr viel Code selbst schreiben und irgendwelche Sachen installieren und laufen lassen, von denen ich echt gar keinen Plan habe. Und wirklich gut beschrieben, was man genau machen soll hat Paypal das auch nicht, zumindest nicht für leute die sich nicht 100% auskennen. Vielleicht kann mir da einer weiterhelfen, wäre sehr freundlich :)
Woher das Skript weiß wie die Buttons ausehen kommt aber nicht durchs Einbinden der sdk sondern durch die Konfiguration, die man vorher macht. Sieht man ja auch im Skript.
Danke für dein Beitrag Herr Klein! Können Sie mir vl ein Tipp geben wie man die Verfügbarkeit reguliert? Der Paypal Button erkennt keine Verfügbarkeit oder?
Endlich mal gut erklärt. Allerdings eine Frage: Meine Fotos sind nicht als Link, sondern als Datei im gleichen Ordner hinterlegt. Die automatische Größenanpassung in CSS funktioniert nicht - weder PNG noch GIF noch JPEG. Mit einem link hingegen funktioniert es.
Woran kann es liegen, dass die Fotos im Ordner nicht größenangepasst werden?
Bei css hat das mit der Farbe nicht funktioniert weil ich noch beim html type="text/css" schreiben musste warum ging es bei mir nicht ohne bei ihm schon
Hi das Einbinden der Paypal Buttons funktioniert bei mir irgendwie nicht. Braucht man dafür ein Paypal Account, auch zum Testen? Die Seite Paypal Buttons kann ich auch ohne Öffnen und einen Code erzeugen.
Hey, die Band von meinem Vater verkauft T-Shirts und ich wollte fragen, ob du noch ein Tutorial machen kannst, wie man eine Email bekommt und ein T-Shirt bekommt. Zusammsngefasst: Jemand bestellt, die Band bekommt eine Email mit der Größe des T-Shirts und die Anzahl davon, es kann versendet werden und der Besteller bekommt eine Versandsemail. Geht das kder braucht man dazu etwas wie shopify oder so? Lg Henry
Wie mache ich es wenn jemand mehr als ein Stück kaufen will kann man irgendwo die Stückzahl auswählen
Hallo Basti Klein
Ich möchte gerne das die Fotos durch das anglicken größer werden.
Wie muss ich den code schreiben das es geht.
danke im voraus
Probier mal Opera :P finde ich noch besser als Chrome ist halt minimal anders, aber auch das mit dem Handy besser dargestellt und nutze Opera sowieso sehr gerne daheim
Hat was genau mit dem Video zutun?
Hallo Basti,
wie erkennt man, dass die Bezahlung erfolgt ist, also dass bezahlt wurde ?
LG
Hallo Basti,
ich bin dem Toutorial gründlichst gefolgt aber habe anscheinend eine wichtige Sache übersehen bzw irgendwo einen fehler gemacht. Ich wollte dich fragen ob ich dir per mail oder sonst wie meine datei oder nur ein paar screenshots zusenden könnte, vielleicht ist es nur ein simpler Fehler den ich übersehen habe. Liebe Grüße Leonard
Bitte mach mehr html und css videos
Habe ich mir fest vorgenommen :)
@@BastiKlein kannst du mal ein spiel mit html und css und js machen egal wie lange es dauert du hast ein abo mehr 🥳
wenn ich etwas mit .html speicher bleibt es eine txt
Kannst du mal ein tutorial zu paysafe machen
Das ist jetzt vieleicht ein bisschen lost aber wie dreht man dieses Zeichen das h1 umrundet hat um?
Kann man das auch irgendwie so machen, dass die Leute mit Bitcoin bezahlen können?
Moin, bei funktioniert es nicht mit den EMOJIS einfügen in der Navigation. Wie genau geht das? MfG
Kannst du mal zeigen das ein Event getriggered wird wenn man es kauft z.B. das etwas auf deinen PC gedownloadet wird
Kannst du mal erklären wie man das macht, über den aufnahmebildschirm drüber zu zeichnen?
Hallo Basti, wsuper Video, ich habe dann Geld auf meinen Konto, aber wie weiß ich wer der Käufer war mit Adresse und wie bekomme ich das mit?
weiß du vieleicht wie man solch eine krasse seite aufmachen kann wie mashop ein münzshop seite ?
Könntest du noch ein Video über eine Suchleisten und ein Warenkorb machen ?
Ist dann leicht komplizierte als sowas einfaches. Das hat schon hier eine Stunde gedauert. Sowas komplexes dauert schon länger als 1 oder 2 Stunden, vor allem zur erklären.
Kannst du bitte mal ein defold tutorial machen ?
Hallo, Ich hab schon ein index.html datei im pc, jetzt wollte ich noch ein ordner mit index.html erstellen, aber diesmal erscheint kein browser symbol, funktioniert es trotzdem, oder darf man an einem pc nur 1 index.html datei haben? Danke Grüsse
So viele index.html Dateien wie du willst kannst du in Ordnern packen :)
Hallo basti,
Ich bin heute auf deine Videos zum Thema Programmierung von Webseiten gestoßen und interessiere mich sehr für dieses Thema. Deshalb wollte ich sie fragen, was sie mir vorschlagen, um auf diesem Gebiet besser zu werden. Ich habe auch schon überlegt, ein Buch zum Thema CSS zu kaufen allerdings weis ich nicht ob dass die beste Möglichkeit ist.
Vielen Dank im Voraus für eine Antwort.
Mit freundlichen Grüßen
Leon
Moin Leon,
Bei mir haben Bücher nie was gebracht. Du musst ein Projekt im Kopf haben, welches du umsetzen möchtest und dann liest du gezielt zu den Themen, zu denen du mehr wissen möchtest. :) wie wäre es mit einer To Do Webseite oder ein TicTacTo Spiel oder deine eigene persönliche Webseite.
@@BastiKlein vielen Dank für die Antwort. Das habe ich mir vorgenommen und probiere mich jetzt an Projekten welche ich mir selber stelle. Ich hätte noch eine Frage. Denken sie, es ist trotz der verschiedenen Möglichkeiten sich selber einfach Webseiten zu erstellen möglich, mit dem klassischen programmieren von Webseiten Geld zu verdienen wenn man dies gut beherrscht?
Hallo basti,
ich hab ein kleines Problem, ich hab alles gemacht was du im video gemacht hast, aber am ende steht das #paypal-button-tshirt nicht existiert, beim schuh das selbe problem. Ich sitze dran schon seit Stunden und ich kann es nicht beheben, auch beim kopieren von deinem JavaScript Code steht das "style" nicht funktioniert
Hast es mittlerweile hingekriegt?
Super Video, gut erklärt!
Schuhe und T-Shirts besitzen verschiedene Farben und Größen, könntest du uns bitte zeigen wie man das implementiert? Wie erhält der Käufer am Ende sein Produkt mit ausgewählter Farbe und Größe?
Liebe Grüße
Würde ich mich auch fragen
Ist leicht. Aber dafür muss du PHP können. Schwer jetzt zur erklären. Du muss dich mit PHP und Datenbank beschäftigen.
@@silvio4457 Hallo Silvio,
dass die verschiedenen Größen in einer Datenbank hinterlegt werden ist klar, auch klar ist, dass diese Daten per PHP abgerufen werden.
Das beantwortet aber nicht meine Frage. Das Video ist super gemacht, nur fehlen 50%. Hätte ja sein können, dass ich hier finde nach was ich suche. Aber vielleicht postet jemand wo das beschrieben wird. Ansonsten werde ich mich da schon durchkämpfen. Vielen Dank an dich für deine Antwort, hab noch einen schönen Tag!
Liebe Grüße
@@mtotowamungu8259 Ist mir klar, wollte es nur erwähnt haben, weil viele sowas nicht wissen. Klar das Video ist extrem simple erstellt sprich der Shop.
Top Video, allerdings werden die PayPal Button bei mir nicht angezeigt. Besser gesagt funktioniert das javascript nicht bei mir. Ich habe auch alles richtig verlinkt, aber es geht trotzdem nicht... Kann mir jemand helfen?
Kannst du mal ein Login Fenster mir registration programmieren
Hey ich würde gerne auf meiner Seite das Watch2Gether System drauf machen und anstatt Videos Filme abspielen lassen wie mach ich das? :O
Du brauchst doch Filmlizensen dafür
In dieser Button zum Kaufen der hat mich nicht funktioniert mit CSS egal was ich versucht habe
muss man dafür ein richtiges Unternehmen anmelden????
mir wird das format angezeigt, das handy selbst aber nicht. (chrome)
Kannst du mal ein Video machen , wo man Sachen verlink. Also dass wenn man auf ein Knopf drückt,dass man dann auf eine andere Seite kommt ? Bitte
Habe schon einmal ein ähnliches Video gemacht. Aber ich glaube das verdient bald mal ein 2021 Update. :P
Das wäre super nett danke
Ps hast mir sehr geholfen :D
Das ist sehr einfach wenn du willst das ich es dir erkläre dann antworte mir in den Kommentaren dann kann ich es dir auf dc schreiben es ist nur 2 Zeilen code
@@aanng3751 ja wie heißt du da?
@@lennyy1214 AANNG. #1447
Ich weiß nicht wieso aber es geht bei mir nicht iwi sagt es mir das css nicht verbunden wird😢
@Basti Klein Es gibt Webseiten, wo zum Beispiel der untere Teil (Impressum, Datenschutz,...) immer auf dem Bildschirm ganz unten angezeigt wird und wenn man runter scrollt es auch immer unten bleibt und man könnte immer drauf zugreifen. Aber letztendlich auch ganz am Ende der Webseite noch ist. Wie baut man sowas? Vielleicht kann auch wer anders helfen?
soweit ich weiß sind die für die Positionierung /Platzierung verantworlichen Stellen innerhalb das codes 1. position 2. text-align
bin aber selbst noch am eigenständigen lernen und daher alles ohne Gewähr ;)
desweiteren kann ich die Seite freecodecamp.org nur empfehlen für alle die sich ein paar Programmierfertigkeiten eigenständig aneignen können und wollen.
Deine Frage wäre irgendwo unter dem ersten Zertifikat Web Design zu finden aber ich habs auf die schnelle nich gefunden.
Hey,
Wie kann ich eine Datei so erstellen, damit ich dann später meinen Shop auf Google sehen kann.
Weil wenn ich es mit Textdokument öffne, dann ist das nie vom typ:chrome sondern halt Textdokument
Wie meinst du es?
Ansicht ein geiles Video. Allerdings war das mit JavaScript nicht so überschaubar, da du es leider verkleinert hast.
Falls du Insta hast würde ich dir gerne schreiben
Bei mir wird nichts vorgeschlagen in diesem code programm
Hallo Basti Klein, wäre es möglich das du für einen eine Website erstellst gegen Bezahlung würde gerne per E-Mail alle weitere Information austauschen.
Bei mir funktioniert der Pointer aufm Desktop aber nicht auf Mobile, hat einer eine Idee warum?
Ok man muss den Berührungssimulator aktivieren😅
Wurm verkaufst du nur einen Schuh? damit man nicht merkt, dass ein Paar Schuhe doppelt so teuer sind oder was?
Hahaha gut aufgepasst :D
@@BastiKlein Gäbe es die Möglichkeit mal ein Video über ein Warenkorb-System in HTML/Javaskript zu machen?
Nach einem Halben Jahr wieder ein Lebenszeichen
Ich bringe immer dann ein Video wenn es keiner erwartet hehe ;P
Das Heisst das Nächste Video kommt in 24 Jahren?
Haha
Hey Basti :)
Magst du mal erklären wie mein ein Forum erstellt, was alles nötig ist und sollte auch gewapptnet sein für größere Userzahlen?
Das ist ne coole Idee. Ich überleg mir mal was
@@BastiKlein dankeschön :)
Es das sicher aber, wird das Paypal Konto nicht gehackt?
Bei mir werden beide Buttons von PayPal beim Schuh angezeigt. Hat vielleicht jemand eine Idee woran das liegen könnte?
Nur beim Schuh und wenn du klickst, dann nicht mehr?
Du musst darauf achten was du in der JavaScript Datei kopierst. Es wird nur der Inhalt der Funktion dupliziert aber nicht die funktionsschleife selber. ;)
Ich kann der Telegram Gruppe nicht beitreten:(
Werden noch mehr Videos kommen?
Hast du Vorschläge zu was ich Videos machen könnte? :)
@@BastiKlein vielleicht mal eine html Seite mit User Log in
kannst du mal zeigen wie man mit bitcoin bezahlen kann
Dieser Kanal und ein anderer haben das selbe am Anfang geschrieben einer von euch hat sich inspirieren lassen oder do
Hi, hätte eine persönliche Anfrage.
Könnten Sie mir ihre Email Adresse schicken?
Ansich gutes Video, aber die ganze Kaufabwicklung ist total unsicher. Man kann einfach den Value Preis im js ändern. 🤣
Deswegen sollte man sowas nicht so machen. Es ist ja nur eine Vorlage bzw um was zur lernen.
Sie erklären sehr gut aber warum machen sie kein online lernkurse für Java HTML und CSS in dem sie eine sehr gute dynamische webseite live programmieren und dabei alles erklären von grund auf. Vor allem sie können gut sachen erklären aber dies ein video ist zu einfach und erklärt nichts relevantes . vorallem wenn ich eigenständig dynamische webseiten bauen will ich hab von diesem video nix gelern .
Erstelle eine dynamische webseite und nimm währenddessen alles auf und erkläre was du machst schritt für schritt aber eine gute dynamische webseite(online shop) ohne Cod von Paypall zu nehmen
Basti hat nen Kleinen
Sei leise :)
Schaut sich Google meine Website wirklich an?
Wenn deine Webseite öffentlich erreichbar ist und keine robots.txt mit Restriktionen für Suchmaschinen hat, dann wird Google, Bing, Yahoo, DuckDuckGo, usw. früher oder später deine Seite finden, crawlen und und den Suchergebnissen erscheinen lassen. :)
@@BastiKlein uh ähh dann muss ich mir mal was anderes ausdenken:) danke dein Video war perfekt