Hur göra detta med jQuery?

Jag skulle vilja att det på vår webbutik blir som på hemmabutikernas webbutik när man klickar på köp-knappen. Ni kan själva titta här:

http://www.webshop.hemmabutikerna.se/

Alltså när man klickar så skall det komma upp ett meddelande som säger att varan har lagts till i kundvagnen som sedan fade:ar ut efter några sekunder.

Jag tänkte för att jag lägger en div med absolute positionering inuti div:en för köpknappen o sätter display: none. Sen tänkte jag att man kunde köra en onClick funktion med jQuery och typ ta in den med show eller nåt. Men jag får det inte att funka.

Hur gör man detta på bästa sätt? Tänker jag fel med hur jag vill göra det?

med AJAX.

Aah okej, e det ända sättet eller? Kan ingenting om Ajax nämligen.. hehe.

Enda sättet: Förmodligen inte, men det är nog det mest enkla. Läs dokumentationen jag länkar till, du ange en url, hur ser dina koder ut för dina produkter? är det ett formulär? => bind på submit, om det är på ett a-element kör på click eventet.

köp-knappen är ett a-element. Koden ser ut såhär:

<a href="javascript:if(CheckData(document.article)) { document.article.submit(); } void(0)" class="buyimage"><img border="0" alt="Lägg i varukorg" src="http://shop.textalk.se/shop/19194/template94/19194-addtocartbuttonimage-1e4cb2.png"></a>

Jag har fått det att fungera så att diven fade:ar in när man klickar på köpnappen. DOck så verkar det som att sidan blir en aning seg av detta. Det tar några sekunder efter att man tryckt på köp tills den hamnar i varukorgen nu. Sen så laddas hela sidan om när man tryckt på köp vilket inte är så effektfullt precis men det är inget jag kan göra nåt åt (så är det utan denna jQuery-koden med)..

Min jQuery-kod för detta ser ut såhär:

<script type="text/javascript">
$(document).ready(function() {
    $(".buyimage").click(function () {
    $(".cart_message").fadeIn("slow");
    });
});
</script>

Det som återstår att göra nu är att den ska fade:a ut efter typ 5 sek. Jag förstår hur man gör själva "utfadeningen" men inte hur man bygger in i funktionen så att den stannar i 5 sek först.

Sen så skulle jag helst vilja att detta meddelande bara visas första gången som kunden lägger nåt i varukorgen, dvs om nån köper 2 produkter så visas meddelandet bara en gång. Är det svårt att göra eller?

Jag har fått det att fungera så att diven fade:ar in när man klickar på köpnappen. DOck så verkar det som att sidan blir en aning seg av detta. Det tar några sekunder efter att man tryckt på köp tills den hamnar i varukorgen nu. Sen så laddas hela sidan om när man tryckt på köp vilket inte är så effektfullt precis men det är inget jag kan göra nåt åt (så är det utan denna jQuery-koden med)..

Klart att du kan, jquery AJAX gör postningen i "bakgrunden" och på en Success så visar du ditt "cart_message".

För att sätta "kö" på dina animeringar:
http://api.jquery.com/delay/ för att behålla meddelandet... men på en vettig server så lär det inte ta 5 sekunder innan submit har körts och laddat om sidan, eftersom du postar ett formulär.

Har fått det att funka på "produktsidan" nu med jQuery. Men jag har ett problem om man klickar på köp i en "översiktsvy" dvs kanske en lista med 10 produkter för då visas meddelandet under alla produkters köpknapp eftersom dom har samma klassnamn. Finns det nåt sätt att åtgärda detta? Vill ju att meddelandet bara skall visas under den köp-knapp som kunden trycker på.

Du vet ju vilken knapp som är tryckt med this Utgå ifrån den.

Aah okej, men var kommer this in i denna koden?

<script type="text/javascript">
$(document).ready(function() {
    $(".buyimage").click(function () {
    $(".cart_message").fadeIn("slow").delay("5000").fadeOut("slow");
    });
});
</script>

Jag behöver veta din HTML struktur

$(".buyimage").click( function ( ) {
//this => det element som du trycker på
});

utgå du från den så kan du gå upp, ner, in i DOM trädet för att hitta din .cart_message

Jo men ja fattar inte riktigt de här med this.. för om jag t ex skulle byta bakgrund på .buyimage så är de ju inget svårt.. men de ja inte är med på är när det gäller en div inuti "this" .buyimage som ska ändras.

Här är hmtl-koden för produkterna i list-vy:

<td align="right" style="white-space: nowrap; padding-bottom: 4px;" class="listLine listLineBuyButtonColumn">
<div class="buyButtonContainer buyButtonListContainer">
  <a href="javascript:addToCart(6211291, document.getElementById('buyQuantityFromList_6211291'));void(0);" class="buyimage"><img border="0" alt="Köp" src="http://shop.textalk.se/shop/19194/template94/19194-buybuttonimage-96a57c.png"></a>
<div class="cart_message_listItem">
  <p>Produkten läggs nu i din varukorg längst upp till höger på sidan.</p>
</div>
</div>  
</td>

Jag ändrade div klassen till "cart_message_listItem" här då jag behöver styla dess positionering lite annorlunda jämfört med produktsidan.

$(this).next() istället för ".cart_message_listItem" i din jquery

Japp det funkar! :) En liten grej kvar nu bara..... detta funkar inte i kolumnvy, trots att det är samma hmtlstruktur från "byButtonContainer". Koden ser ut såhär i kolumnvy:

<td height="100%" valign="bottom">
<div class="gridArticlePrices">
<span class="gridArticlePrice"><span class="reducedPrice">12 000:-</span></span><span class="gridArticlePriceRegular">13 617,60</span>
</div>
<div class="gridArticleButtons">
<div class="readMoreButtonContainer readMoreButtonGridContainer">
<a href="/se/article.php?id=19194&amp;art=6158167" class="readmoreimage">
<img border="0" alt="Läs mer" src="http://shop.textalk.se/shop/19194/template94/19194-readmorebuttonimage-928b90.png"></a></div>
<div class="buyButtonContainer buyButtonGridContainer">
<a href="javascript:addToCart(6158167);void(0);" class="buyimage"><img border="0" alt="Köp" src="http://shop.textalk.se/shop/19194/template94/19194-buybuttonimage-96a57c.png"></a>
<div class="cart_message_listItem">
<p>Produkten läggs nu i din varukorg<br>längst upp till höger på sidan.</p>
</div>
</div>
</div>
</td>

Och jQueryn ser ut såhär:

<script type="text/javascript">
$(document).ready(function() {
    $(".buyimage").click(function () {
    $(this).next().fadeIn("slow").delay("5000").fadeOut("slow");
    });
});
</script>

När jag klickar på köp-knappen i kolumnvy så visas inte "cart_message_listItem" alls. Tar jag bort "display: none;" med firebug så visas den under köp-knappen på den första produkten i listvy under (där det nu fungerar annars när man klickar på köp-knappen).

Så här blir det (se bild) när jag tar bort display: none; med firebug. Och när man klickar på köp i "kolumnvy" så händer ingenting. Förstår inte riktigt varför då cart_message_listItem ligger i buyButtonContainer i både "listvy" och "kolumnvy"...

Hur löser jag detta?

För den ligger ju där i DOM trädet, sätt lite struktur i dina koder så bli det rätt så mycket enklare att följa:

<td height="100%" valign="bottom">
	<div class="gridArticlePrices">
		<span class="gridArticlePrice">
			<span class="reducedPrice">12 000:-</span>
		</span>
		<span class="gridArticlePriceRegular">13 617,60</span>
	</div>
	<div class="gridArticleButtons">
		<div class="readMoreButtonContainer readMoreButtonGridContainer">
			<a href="/se/article.php?id=19194&amp;art=6158167" class="readmoreimage">
				<img border="0" alt="Läs mer" src="http://shop.textalk.se/shop/19194/template94/19194-readmorebuttonimage-928b90.png">
			</a>
		</div>
		<div class="buyButtonContainer buyButtonGridContainer">
			<a href="javascript:addToCart(6158167);void(0);" class="buyimage">
				<img border="0" alt="Köp" src="http://shop.textalk.se/shop/19194/template94/19194-buybuttonimage-96a57c.png">
			</a>
			<div class="cart_message_listItem">
				<p>Produkten läggs nu i din varukorg<br>längst upp till höger på sidan.</p>
			</div>
		</div>
	</div>
</td>

Aaah ska tänka på det :) Blir ju helt klart lättare då.

Ja den ligger under köpknappen i kolumnvy men visar sig under köpknappen på en annan produkt i listvyn. Den div:en (cart_message_listItem) ligger ju på båda ställena (i buyButtonContainer).. så varför visar den sig inte under köpknappen på första produkten i kolumnvy? behöver jag byta klassnamn på den div:en till t ex. cart_message_columnItem? Jag fattar inte det riktigt.. ledsen om jag är trög...

Utan CSS så kan det inte vara enkelt att säga vad du göra för fel, förmodligen har du en fast höjd, overflow på den, klassnamn är hjälpverktyg för css:en, tror det hade underlättat om du sätter dig in i hur träd fungera i HTML, jquery har hur mycket "gratis" hur du navigera upp och ner och filtrera för att hämta rätt DOM-objekt

okej, här e css:en för cart_message_listItem:

.cart_message_listItem {
  position: absolute;
  top: 18px;
  left: -109px;
  background: url(/images/cart_message_bg.png) no-repeat;
  width: 210px;
  padding: 15px 20px;
  z-index: 9999;
  display: none;
  text-align: left;
}

och så har jag ju position: relative på buyButtonContainer

-109px till vänster känns ju rätt korkat, eller det är så att du vill visa meddelandet "fritt" från boxen eller är det i boxen som säger meddelandet? Du måste flytta ut info boxen, för nu är den ju inne i en nod som är relative, det är ju den som är dess container.

cart_message_listItem är själva meddelandet som visas när man klickar på köp-knappen. Och den ligger efter köp-knappen i buyButtonContainer o har display:none; eftersom buyButtonContainer inte är större än själva köpknappen och cart_message_listItem är betydligt bredare så fick jag använda left: -109px. Finns de nåt annat sätt att göra det på?