[JS] Klickshop zur freien Benutzung

Mordred
(kurz für die Suche: Klickshop virtueller shop shopsystem)

Hallo,

Hab da ja öfter gefragt wird, einen kleinen Shop in JavaScript und PHP4 geschrieben. Programmierkentnisse werden hier nicht vorausgesetzt. HTML sowie CSS kentnisse sollten zur Anpassung vorhanden sein.

Zu sehen auf:

* Artikel leicht hinzuzufügen
* Zum löschen eines Artikels, Artikel in Liste auswählen
* JavaScript beim Benutzer wird vorrausgesetzt
* Kosten werden automatisch abgeglichen
* Betreiber bekommen Email beim absenden
* leicht erweiterbar

Hier der Code:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
 
<script type="text/javascript">
function newitem(costs,value) {
	newelement = new Option(value,value+"|"+costs);
	document.getElementsByName("items[]")[0].options[document.getElementsByName("items[]")[0].length] = newelement;
	document.getElementById("costs").innerHTML = parseInt(document.getElementById("costs").firstChild.data) + costs;
}

function removeitem() {
	var item = document.getElementsByName("items[]")[0].value.split("|");
	document.getElementById("costs").innerHTML = parseInt(document.getElementById("costs").firstChild.data) - parseInt(item[1]);
	document.getElementsByName("items[]")[0].options[document.getElementsByName("items[]")[0].selectedIndex] = null;
}

function selectall() {
	for(i = 0; i < document.getElementsByName("items[]")[0].length; i++) {
		document.getElementsByName("items[]")[0].options[i].selected="selected"; 
	}
}
</script>

<form name="shopform" method="post" action="" onsubmit="selectall()">
  <select name="items[]" size="10" onchange="removeitem()" multiple="multiple">
  </select>
  <input type="submit" value="Absenden!">
</form>

Halskette für 120€: <a href="javascript:newitem(120,'halskette');">In den Wagen</a><br />
Fernseher für 2500€: <a href="javascript:newitem(2500,'plasma tv');">In den Wagen</a><br />

<br />____________<br />
Kosten: <span id="costs">0</span>€

<?php

if(!empty($_POST)) {
	$count = array_count_values($_POST['items']);
	$all = 0;
	$mailcontent = "";

	foreach($count AS $item => $lot) {
		$explode = explode("|", $item);
		$mailcontent .= $explode[0]." wurde ". $lot." mal bestellt. Summe: ".($lot*$explode[1])."\n";
		$all += $lot*$explode[1];
	}
	mail("deineemail", "Shop", "Neuer Einkauf:\n\n".$mailcontent."\n\nGesamt: ".$all);
	echo "Danke auch!";
}

?>


Die Email muss angepasst werden. Sonst funktioniert er wie im Beispiel.

Feedback und Kritik erwünscht smile
Paula1994
script läuft, gute idee, allerdings würde ich das ganze mit der zeit noch grafisch aufpeppen.
Mordred
Hallo,

Das ganze kann doch jeder mit eigenen "in den Einkaufswagen" - Icons austatten und den "Einkaufswagen" kann auch jeder mit ein wenig CSS Kentniss selbst gestalten. Oder was meinst Du?
Tigerlilly
Ich verschiebs mal nach Tutorials.
anna.
Zitat:
Original von Mordred
Hallo,

Das ganze kann doch jeder mit eigenen "in den Einkaufswagen" - Icons austatten und den "Einkaufswagen" kann auch jeder mit ein wenig CSS Kentniss selbst gestalten. Oder was meinst Du?

vielleicht meinte sie mit einem Layout etc.
Was aber auch ganz einfach in ein I-Frame eingebunden werden kann. Ganz normal und so. XD
die Tini
supi funzt großes Grinsen
skateboard
Genial!
Klappt & sieht gut aus (wenn mans anpasst großes Grinsen )
Danke smile
die Tini
Haben da nochmal ne frage...wir wollten den auf nem vrh verwenden, sind aber irgentwie wissen wir nicht wie man das machen muss, das man noch den namen eingeben kann, von dem, der es geschickt hat...
AnnSo
Zitat:
Original von VRH Ponyhof Naeve
Haben da nochmal ne frage...wir wollten den auf nem vrh verwenden, sind aber irgentwie wissen wir nicht wie man das machen muss, das man noch den namen eingeben kann, von dem, der es geschickt hat...

würde mich auch brennend interessieren smile
»paranoid
Dazu fügt ihr einfach noch ein Input-Feld für den Namen ein.
Das ganze würde dann so aussehen:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
<script type="text/javascript">
function newitem(costs,value) {
	newelement = new Option(value,value+"|"+costs);
	document.getElementsByName("items[]")[0].options[document.getElementsByName("items[]")[0].length] = newelement;
	document.getElementById("costs").innerHTML = parseInt(document.getElementById("costs").firstChild.data) + costs;
}

function removeitem() {
	var item = document.getElementsByName("items[]")[0].value.split("|");
	document.getElementById("costs").innerHTML = parseInt(document.getElementById("costs").firstChild.data) - parseInt(item[1]);
	document.getElementsByName("items[]")[0].options[document.getElementsByName("items[]")[0].selectedIndex] = null;
}

function selectall() {
	for(i = 0; i < document.getElementsByName("items[]")[0].length; i++) {
		document.getElementsByName("items[]")[0].options[i].selected="selected"; 
	}
}
</script>

<form name="shopform" method="post" action="" onsubmit="selectall()">
  <select name="items[]" size="10" onchange="removeitem()" multiple="multiple">
  </select>    <br />
  Name: <input type="text" name="name" />
  <input type="submit" value="Absenden!">
</form>

Halskette für 120€: <a href="javascript:newitem(120,'halskette');">In den Wagen</a><br />
Fernseher für 2500€: <a href="javascript:newitem(2500,'plasma tv');">In den Wagen</a><br />

<br />____________<br />
Kosten: <span id="costs">0</span>€

<?php

if(!empty($_POST)) {
	$count = array_count_values($_POST['items']);
	$all = 0;
	$mailcontent = "";

	foreach($count AS $item => $lot) {
		$explode = explode("|", $item);
		$mailcontent .= $explode[0]." wurde ". $lot." mal bestellt. Summe: ".($lot*$explode[1])."\n";
		$all += $lot*$explode[1];
	}
	mail("deineemail", "Shop", "Neuer Einkauf:\n\n".$mailcontent."\n\nGesamt: ".$all."\n\nBestellt wurde von: ".$_POST['name']);
	echo "Danke auch!";
}

?>
die Tini
dankeschön <3
Princez
hää ?

ich kapier das nicht... ich bin bei oyla das qeht nicht..

kannst du mir soo was mal für oyla coden wenns qeht ?
Maina
Zitat:
Original von Princez
hää ?

ich kapier das nicht... ich bin bei oyla das qeht nicht..

kannst du mir soo was mal für oyla coden wenns qeht ?


Oyla unterstützt kein PHP.

Lern HTML / besorg dir Frontpage und zieh auf 'nen Webspace um, der PHP unterstützt.
Paula1994
Zitat:
Original von .anna <3
Zitat:
Original von Mordred
Hallo,

Das ganze kann doch jeder mit eigenen "in den Einkaufswagen" - Icons austatten und den "Einkaufswagen" kann auch jeder mit ein wenig CSS Kentniss selbst gestalten. Oder was meinst Du?

vielleicht meinte sie mit einem Layout etc.
Was aber auch ganz einfach in ein I-Frame eingebunden werden kann. Ganz normal und so. XD


genau^^
pferdetreume
und wie geht das wenn ich noch ein weiteres Feld haben moechte?
also Name und Pferd
??
Ansonsten klasse!!!
ich-bin-ich
Zitat:
Original von pferdetreume
und wie geht das wenn ich noch ein weiteres Feld haben moechte?
also Name und Pferd
??
Ansonsten klasse!!!


würde mich ebenfalls interessieren
»paranoid
Dazu muss man ein ganz klein wenig PHP können oder zumindest logisch nachdenken^^
Also man fügt zuerst oben im Formularteil ein weiteres Input-Feld ein.
<form name="shopform" method="post" action="" onsubmit="selectall()">
<select name="items[]" size="10" onchange="removeitem()" multiple="multiple">
</select> <br />
Name: <input type="text" name="name" />
<input type="submit" value="Absenden!">
</form>
Der Code für so eins ist markiert. Ihr müsst nur name="xxx" ändern, also wie das Feld eben heißen soll

Dann wird es etwas komplizierter, denn nun kommt der Teil zum Senden, der PHP-Teil:
mail("deineemail", "Shop", "Neuer Einkauf:\n\n".$mailcontent."\n\nGesamt: ".$all."\n\nBestellt wurde von: ".$_POST['name']);
echo "Danke auch!";

\n\nBestellt wurde von: ".$_POST['name'] <-- Das da ist zum Beispiel die Einbindung des Feldes in die Mail. $_POST['xxx'] (Feldname einfügen) gibt an, welches Feld in der Mail an dieser Stelle ausgegeben werden soll. Nun muss man nur noch darauf achten, dass dieses $_POST['xxx'] in Anführungszeichen "..." steht, damit es vom Rest des normalen Textes getrennt wird. Im Beispiel kommt an das Ende von $_POST['name'] kein " mehr, da am Ende (noch vor );) normalerweise auch ein " kommen würde. Da man dort aber dann ein "" hätte, kann man das auch weglassen^^

Ok, also ich kann glaub ich nicht so gut erklären.^^' Aber ich hoffe, ihr habt es einigermaßen verstanden und sonst zeigt einfach mal euren Code oder fragt nach, ich erkläre gerne weitere Sachen und füge euch auch Felder ein^^
pferdetreume
:/
Ich hatte das auch schon probiert, da es ja rein theoretisch sogar fuer MICH logisch war ging aber nicht unglücklich

Es sagt mir immer
code:
1:
Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /users/reitstallpicollo/www/reiterladen/feld.php on line 52


*schnief*

hier mein code
(warscheinlich wieder alles voll falsch gemacht >.<)

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
<html>
<head>
  <title>Picollo</title>
  <link rel="stylesheet" href="/style.css"
 type="text/css">
</head>
<body>
<table><tbody><tr><td><script type="text/javascript">
function newitem(costs,value) {
	newelement = new Option(value,value+"|"+costs);
	document.getElementsByName("items[]")[0].options[document.getElementsByName("items[]")[0].length] = newelement;
	document.getElementById("costs").innerHTML = parseInt(document.getElementById("costs").firstChild.data) + costs;
}

function removeitem() {
	var item = document.getElementsByName("items[]")[0].value.split("|");
	document.getElementById("costs").innerHTML = parseInt(document.getElementById("costs").firstChild.data) - parseInt(item[1]);
	document.getElementsByName("items[]")[0].options[document.getElementsByName("items[]")[0].selectedIndex] = null;
}

function selectall() {
	for(i = 0; i < document.getElementsByName("items[]")[0].length; i++) {
		document.getElementsByName("items[]")[0].options[i].selected="selected"; 
	}
}
</script>

<form name="shopform" method="post" action="" onsubmit="selectall()">
  <select name="items[]" size="10" onchange="removeitem()" multiple="multiple">
  </select>    <br /></td><td><font size="-1">
  Name: <input style="width:90px;" type="text" name="name" /><br>
 Pferd: <input type="text" name="pferd" /><br>
  &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
<input type="submit" value="Absenden!">
</form>
<br />____________<br />
Kosten: <span id="costs">0</span>€

<?php

if(!empty($_POST)) {
	$count = array_count_values($_POST['items']);
	$all = 0;
	$mailcontent = "";

	foreach($count AS $item => $lot) {
		$explode = explode("|", $item);
		$mailcontent .= $explode[0]." wurde ". $lot." mal bestellt. Summe: ".($lot*$explode[1])."\n";
		$all += $lot*$explode[1];
	}
	mail("susi.hauk@web.de", "Shop", "Neuer Einkauf:\n\n".$mailcontent."\n\nGesamt: ".$all."\n\nBestellt wurde von: ".$_POST['name']"\n\nBestellt wurde fuer: ".$_POST['pferd']);
	echo "Danke auch!";
}

?>
</td></tr></tbody></table>
</body></html>


Ich habe es auch mit " hinter dem ".$_POST['pferd'] versucht
also ".$_POST['pferd']"
ging trozdem nicht...
und meine PHP-Kenntnisse sind leider nicht so amazing...
»paranoid
mail("susi.hauk@web.de", "Shop", "Neuer Einkauf:\n\n".$mailcontent."\n\nGesamt: ".$all."\n\nBestellt wurde von: ".$_POST['name']."\n\nBestellt wurde fuer: ".$_POST['pferd']);
echo "Danke auch!";
pferdetreume
es hat ein Punkt gefehlt >.<
tausend dank!

es geeeeht großes Grinsen