✔ "AMG Shop" - I'll surrender

RealBluescreen · 4. Januar 2007

Guten Abend!
Ich arbeite gerade an einer Art Online-Shop, bei dem man die 'Fanartikel' unserer Schule bestellen kann.

Dabei soll unter jedem Artikel dieses kleines Bildchen mit dem Text daneben "In den Warenkorb legen" stehen, wenn man dann draufklickt, soll es sich zu diesem Bild mit dem Text "Aus dem Warenkorb nehmen" verändern.
Dass man also was reintun kann, und wenn es drin ist, wieder raus.

Dabei sollte natürlich diese Auswahl auch in einem Formular Hidden Field gespeichert werden, damit ich das ganze eintragen kann.

Ich hab mal vor langer Zeit so'n biss'l JavaScript gelernt, aber das hat mich jetzt überholt. Allein schaff ich das nimma!

Edit: Ich häng mal den Quellcode an:

HTML:

<?php
//Cookies setzen
setcookie("AMGShop", "1.0.2.0.3.0.4.0.5.0.6.0.7.0.8.0.9.0", 0, "/");
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head>
<title>AMG Shop - Albertus Magnus Gymnasium Stuttgart</title>
<!-- Meta Start -->
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<meta name="date" content="2007-01-02">
<meta name="author" content="AMG Website Gremium">

<meta name="keywords" content="Shop, AMG Shop">
<meta name="description"  lang="de" content="Fanartikel mit AMG Logo - hier kaufen">

<!-- Meta Ende -->

<!-- Style Start -->
<link title="Style f&uuml;r Website (Standard)" rel="stylesheet" type="text/css" href="../final_drop.css">
<link rel="SHORTCUT ICON" href="cart.ico" title="Der AMG Online Shop">

<style type="text/css">
<!--
/* Styledefinitionen hab ich mal rausgenommen, die interressieren ja eh keinen! */
-->
</style>

<!-- Style Ende -->
<script language="JavaScript"><!-- ======== Script Start ======== --><!--  -->


//--></script><!-- ================ Script Ende ================ -->
</head><body>

<?php
include('sh_menue.php'); // Das ist das Menü
?>

<form action="" method="POST" title="AMG Shop">

<div class="shophead"><p>
<h1>AMG Shop</h1>
<p>Willkommen im <b>AMG-Shop</b>! Hier können sie Artikel mit dem Schullogo ansehen,
die es bei uns zu erwerben gibt, oder auch gleich bestellen!

<noscript><br><br><table class="shop"><!--  ============ NOSCRIPT  ============ -->
<tr>
 <td style="background:#7DCDFF;" ><img src="script_error.png" alt="Warnung" class="center"> <b>Warnung: JavaScript</b></td>
</tr><tr>
 <td style="background:#AADEFE;" >Offensichtlich ist JavaScript deaktiviert.<br>Um den Onlineshop zu verwenden, benötigen sie aber Javascript.</td>
</tr>
</table><br></br></noscript><!--  =============== NOSCRIPT  ================== -->
</p></div>



<table class="shop">
<tr>
 <td class="shopbild" style="background:#AADEFE;"><img src="artikel1_s.jpg" width="100" height="100" alt="Kaputzenpulli"></td>
 <td class="shop" style="background:#AADEFE;"><h2>Artikel 1: Kapuzenpulli</h2>Ein schwarzer Kapuzenpulli, mit einem großen Schullogo auf der Rükseite & einem kleinen vorne.<br>
 Selbstverständlich gehört hier noch ein ausführlicherer Text hin...</td>
</tr><tr>
 <td style="background:#7DCDFF;"><b>€ 10,50</b></td>
 <td style="background:#7DCDFF;"><!--<a href="" class="shop"><img src="cart_put.png" alt="In den Warenkorb legen" class="center"> In den Warenkorb</a><br>-->


 <a href="#"  onclick="artikel('1')" class="shop">
 <img src="cart_put.png" name="BArtikel1" alt="In den Warenkorb legen" class="center"> In den Warenkorb</a>
<input type="hidden" name="FArtikel1">
 </td>
</tr></table>

<br>

<table class="shop">
<tr>
 <td class="shopbild" style="background:#AADEFE;"><img src="artikel2_s.jpg" width="100" height="100" alt="Tasse"></td>
 <td class="shop" style="background:#AADEFE;"><h2>Artikel 2: Tasse</h2> Ein schwarzer Kapuzenpulli, mit einem großen Schullogo auf der Rükseite & einem kleinen vorne.<br>
 Selbstverständlich gehört hier noch ein ausführlicherer Text hin...</td>
</tr><tr>
 <td style="background:#7DCDFF;"><b>€ 10,50</b></td>
 <td style="background:#7DCDFF;"><!--<a href="" class="shop"><img src="cart_put.png" alt="In den Warenkorb legen" class="center"> In den Warenkorb</a><br>-->


 <a href="#"  onclick="artikel('2')" class="shop">
 <img src="cart_put.png" name="BArtikel2" alt="In den Warenkorb legen" class="center"> In den Warenkorb</a>
<input type="hidden" name="FArtikel2">
 </td>
</tr></table>



</form>


</body></html>

Momentan befindet sich das ganze auch auf meinem Webspace.
Benutzt aber ja nicht die Navigation, die funktioniert natürlich noch nicht!

*lol* - Wrum kann ich nicht den img-Code benutzen?

xX Hardy Xx · 5. Januar 2007

So lönnte eine Lösung aussehen. Ich habe es aber nur für den ersten Artikel gemacht.

Code:

  <script language="JavaScript">
  <!--
   function artikel(item) {

            var vergleich = document.getElementById("warenkorb" + item).src;
            if(vergleich == "http://bluescreenpage.bl.funpic.de/Schulhomepage/Shop/cart_put.png"){ // Überprüft welches aktuelle Bild dargestellt wird und ermittelt so den Status (es muss die komplette URL des Bildes angegeben werden)
               document.getElementById("warenkorb" + item).src = "cart_remove.png";
               document.getElementById("warenkorb" + item).alt = "Aus dem Warenkorb";
               document.getElementById("warenkorbtext" + item).innerHTML = "Aus dem Warenkorb";
               var status = eval('document.shop.FArtikel' + item + '.value = "im_warenkorb";');
               alert(document.shop.FArtikel1.value); // nur zum Test ob Value von FArtikel1 geändert wurde (löschen)
            } else {
               document.getElementById("warenkorb" + item).src = "cart_put.png";
               document.getElementById("warenkorb" + item).alt = "In den Warenkorb";
               document.getElementById("warenkorbtext" + item).innerHTML = "In den Warenkorb";
               var status = eval('document.shop.FArtikel' + item + '.value = "nicht_im_warenkorb";');
               alert(document.shop.FArtikel1.value); // nur zum Test ob Value von FArtikel1 geändert wurde (löschen)
            }
   }
  //-->
</script>


<form name="shop" action="" method="" target="">

  <table class="shop">
   <tr>
    <td class="shopbild" style="background:#AADEFE;"><img src="artikel1_s.jpg" width="100" height="100" alt="Kaputzenpulli"></td>
    <td class="shop" style="background:#AADEFE;">
     <h2>Artikel 1: Kapuzenpulli</h2>Ein schwarzer Kapuzenpulli, mit einem großen Schullogo auf der Rükseite & einem kleinen vorne.<br>
     Selbstverständlich gehört hier noch ein ausführlicherer Text hin...
    </td>
   </tr>
  <tr>
   <td style="background:#7DCDFF;"><b>€ 10,50</b></td>
    <td style="background:#7DCDFF;"><!--<a href="" class="shop"><img src="cart_put.png" alt="In den Warenkorb legen" class="center"> In den Warenkorb</a><br>-->
    <a href="#"  onclick="artikel('1')" class="shop">
    <img id="warenkorb1" src="cart_put.png" name="BArtikel1" alt="In den Warenkorb legen" class="center"><span id="warenkorbtext1">In den Warenkorb</span></a>
    <input type="hidden" name="FArtikel1">
   </td>
  </tr>
 </table>

</form>

Das Fett geschrieben habe ich deinem HTML Code hinzugefügt.

RealBluescreen · 5. Januar 2007

Ähm, tja, hast du's schon getestet?
Also bei mir hattes nicht geklappt...

Ich hab's mal angehängt, vielleicht hab ich ja was falsch gemacht.
Nun, wär's vielleicht einfacher, wenn sich nur ein Bild verändert, ohne Text danach (der kommt dann mit ins Bild)?

xX Hardy Xx · 6. Januar 2007

Ja natürlich hatte ich das getestet.

Es hängt mit der Adresse des Bildes im Vergleich zusammen.

Die Adresse von dem Bild das dargetsellt wird, ist der Pfad zu der Bilddatei auf deinem Lokalen Datenträger. Die Adresse im Vergleich ist die im Web.

Also passiert nichts. Wenn du jetzt anstelle der http Adresse die von deinem lokalen Verzeichniss, wo das Bild ist, einträgst, müsste es funtzen.

Bei mir ist die lokale Adresse : file:///C:/wamp/www/test/cart_put.png

Verstehst du was ich meine?

Ich habe mal die Seite in ein testverzeichniss meiner HP gesetzt

Zum Shop

Habe es dort auch mit beiden Artikeln gemacht.

RealBluescreen · 7. Januar 2007

OK, die Informatin wird auch in einem HIDDEN Field gespeichert?
Sehr gut, *gleich ausprobier*!

✔ "AMG Shop" - I'll surrender

RealBluescreen

Mitglied

Anhänge

xX Hardy Xx

Mitglied

RealBluescreen

Mitglied

Anhänge

xX Hardy Xx

Mitglied

RealBluescreen

Mitglied

Neue Beiträge