15 svar · 1 229 visningar · startad av Method
Hej, hittade en effekt jag vill använda mig av. När man lägger till en vara på denna sida (http://skincity.se/sv/product/1276/dermalogica-precleanse) så "åker" en ruta upp mot varukorgen.
Hur gör jag för att få denna "animering"?
Är det en CSS eller är det javascript, är det någon som vet hur man gör detta så vore jag tacksam för hjälp! =)
Tack på förhand!
i detta fallet på deras sida är jquery-ui (javascript) som fixar det http://docs.jquery.com/UI/Effects/Transfer
Perfekt! Tack så mycket för hjälpen =)
En fundering efter att ha tittat på exemplet.
vad skriver jag för att rikta till ett specifikt element?
När jag klickar på denna knapp
<input type="button" name="addtocart" value="Lägg i varukorg" class="addtocart ajax" />
så vill jag skicka en ruta till detta element:
<div class="topCartHolder"></div>
Det lilla jag kan om js är att den ser ut att läsa in div med en snurra i detta exempel:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
div.green { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }
div.red { margin-top: 10px; width: 50px; height: 30px; background: red; border: 1px solid black; position: relative; }
.ui-effects-transfer { border: 2px solid black; }
</style>
<script>
$(document).ready(function() {
$("div").click(function () {
var i = 1 - $("div").index(this);
$(this).effect("transfer", { to: $("div").eq(i) }, 1000);
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div class="green"></div>
<div class="red"></div>
</body>
</html>
tacksam för hjälp då js är min svaga sida, tack på förhand!
click elementet (div) ändra den till .addtocart och {to: $("div").eq(i) } till {to: $("div.topCartHolder")[0] }:
$(".addtocart").click(function () {
$(this).effect("transfer", { to: $(".topCartHolder")[0] }, 1000);
});
fast om du nu kör ett ajax anrop vill du väl att animeringen skall ske så fort du har en success på att en produkt har lagts in i en varukorg?
hur ser din ajax anrop ut?
Jag tror att jag fick med all kod
Källkod för Ajax anropet
var ShoppCartAjaxHandler = function (cart) {
(function($) {
var display = $('#shopp-cart-ajax');
display.empty().hide(); // clear any previous additions
var item = $('<ul></ul>').appendTo(display);
if (cart.Item.thumbnail)
$('<li><img src="'+cart.Item.thumbnail.uri+'" alt="" width="'+cart.Item.thumbnail.width+'" height="'+cart.Item.thumbnail.height+'" /></li>').appendTo(item);
$('<li></li>').html('<strong>'+cart.Item.name+'</strong>').appendTo(item);
if (cart.Item.optionlabel.length > 0)
$('<li></li>').html(cart.Item.optionlabel).appendTo(item);
$('<li></li>').html(asMoney(cart.Item.unitprice)).appendTo(item);
if ($('#shopp-cart-items').length > 0) {
$('#shopp-cart-items').html(cart.Totals.quantity);
$('#shopp-cart-total').html(asMoney(cart.Totals.total));
} else {
$('.widget_shoppcartwidget p.status').html('<a href="'+cart.url+'"><span id="shopp-cart-items">'+cart.Totals.quantity+'</span> <strong>Items</strong> — <strong>Total</strong> <span id="shopp-cart-total">'+asMoney(cart.Totals.total)+'</span></a>');
}
display.slideDown();
})(jQuery)
}
har även denna kod för att inte visa en bild som lades vid varukorgen när man la till en produkt. Så det borde vara detta som ersätter ovanstående anrop om jag tolkar det hela rätt?
var ShoppCartAjaxHandler = function (cart) {
(function($) {
$('#shopp-sidecart-items').html(cart.Totals.quantity);
$('#shopp-sidecart-total').html(asMoney(cart.Totals.total));
})(jQuery)
}
Ovanstående kod anropas via:
if(function_exists('shopp_enqueue_script')){
shopp_enqueue_script('jsajaxcart','http://FULL-PATH-to-my-theme/shoppajaxcart.js',array('shopp'),'1.0',true);
}
Så här ser koden ut för varukorgen som uppdateras
<div id="shopp-cart-ajax">
<div class="topCartHolder">
<div id="divCartIcon" style="float:left;margin-top:0px;margin-right:8px"><a href="http://shop.bellitudo.se/shop/cart/"><img src="/wp-content/themes/platform/images/shoppingbag.png" alt="Till Shoppingbagen" border="0" /></a></div>
<span id="shopp-sidecart-items"><div style="color:#000000">1</div></span>
<div style="float:left; margin-top:5px">
<div style="margin-left:-5px">
<a href="http://shop.bellitudo.se/shop/cart/"><strong>SHOPPINGBAG</strong></a></span>
</div>
<div style="padding-left:2px">
<span><strong>Totalt</strong> <span id="shopp-sidecart-total" class="money"><span class="shopp-cart cart-total">460,00 kr</span></span></span>
<span> <a href="http://shop.bellitudo.se/shop/checkout/">Till kassan</a>
</span>
</div>
</div>
</div>
</div>
Tack!
vilken metod binder du på .ajax ?men om ShoppCartAjaxHandler är din success metod från ajax så lägg in koden där.
Testar ikväll och ser om jag får till det, tack för all hjälp.
Jag prövade att få till detta men utan framgång :(
La in koden i AJAX-anropet för varukorgen
var ShoppCartAjaxHandler = function (cart) {
(function($) {
$('#shopp-sidecart-items').html(cart.Totals.quantity);
$('#shopp-sidecart-total').html(asMoney(cart.Totals.total));
$(".addtocart").click(function () {
$(this).effect("transfer", { to: $("#shopp-cart-ajax")[0] }, 1000);
});
})(jQuery)
}
samt att den bifogade css till wordpress temat la jag in denna kod:
.ui-effects-transfer { border: 2px solid black; }
Samt i head taggen (denna behövdes då jag gjorde testet nedan, saknades i temat)
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
För att se om det var fel på ovanstående kod klistra jag in all kod från: http://docs.jquery.com/UI/Effects/Transfer
i en egen .php och prövade och då fungerade funktionen.
men när jag prövade att baka in den fungerande koden i mitt tema så slutade det att fungera.
länk till hemsidan för att kunna se källkoden:
http://shop.bellitudo.se/shop/multivitamin-hand-and-nail-treatment/
Samt länk till mitt test:
http://shop.bellitudo.se/test.php
Hoppas jag har kunnat göra mig förstådd, tack på förhand!
För jQuery inte inladdad:
jQuery is not defined
[Stanna vid fel]
..."?0:a(window).scrollTop()-this.offset.relative.top-this.offset.parent.top,(b.con...
jquery-ui.min.js (rad 9)
$ is not a function
[Stanna vid fel]
$(document).ready(function() {
ge det mig i firebug.
sen så behöver du ju inte köra:
var ShoppCartAjaxHandler = function (cart) {
(function($) { })(jQuery)
}
på det sättet, för vad jag ser så har du bara jquery som är på $ och om du nu skulle ha ett annat biblotek så lägg all jquery kod runt metoderna istället för att ha en anonym metod som körs inne i en annan anonymetod om och om igen.
Tack, nu funkar det! =)
Dock har jag lite funderingar för framtiden, du pratade om jag fick en success på ajax så skall transfern ske, detta vet jag inte hur jag ska fixa?
Jag har lagt koden så här nu:
var ShoppCartAjaxHandler = function (cart) {
(function($) {
$('#shopp-sidecart-items').html(cart.Totals.quantity);
$('#shopp-sidecart-total').html(asMoney(cart.Totals.total));
})(jQuery)
}
$(document).ready(function() {
$(".addtocart").click(function () {
$(this).effect("transfer", { to: $(".topCartHolder")[0] }, 1500);
});
});
CSS-kod
.topCartHolder
{
position: relative;
float: right;
height: 65px;
width: 350px;
padding: 5px 0px 0px 0px;
border: 1px dashed #000;
}
Se är det en estetisk grej jag stör mig på.... :(
När jag klickar på knappen så åker "rutan" upp till .topCartHolder men den hamnar helt ocentrerat mot elementet. jag har lagt en ram runt .topCartHolder för att visa vart den ligger, borde inte det bli som exemplet på jquery där den landar snyggt runt mottagande element...?
Se exempel här:
http://shop.bellitudo.se/shop/close-shave-oil/
Tack på förhand!
om du kolla var ShoppCartAjaxHandler körs så ser du att det är på en ajax som är success, om inte så få du posta vad du använder dig av $.post, $.get. Jag hoppas du kör på $.ajax om inte så byt ut det.
det är nog inte .topCartHolder som är problemet utan köpknappens positonen, för elementet skapas ovanför knappen.
Jag är inte så jätte sugen på att debugar din javascripts kod, eller css kod om du kan ta bort css + html + js som kan återskapa samma beteende så bli det lättare.
men du kan ju prova att lägga en margin-top på .ui-effects-transfer och sätt den.
Hej!
Tack för tipset nu funkar det bra med top-margin :)
Jag har hittat successen
d.ajax({type:"POST",url:b,data:e+"&response="+a,timeout:10000,dataType:c,success:function(f){ShoppCartAjaxHandler(f,a)},error:function(){}})}
Får jag ändra
$(document).ready(function() {
Till en funktion och lägga in efter?
success:function(f){ShoppCartAjaxHandler(f,a)}
Om du har lust vore jag väldigt tacksam om du kunde visa hur, tack på förhand!
$(document).ready(function() {}) eller $(function() {}) är DOM-ready metoden vilket säger kör skriptet inne i function när vi kan läsa av DOM:en med javascript.
att du har en massa anonyma metoder som:
(function($) {
$('#shopp-sidecart-items').html(cart.Totals.quantity);
$('#shopp-sidecart-total').html(asMoney(cart.Totals.total));
})(jQuery)
är i mina ögon ett dåligt mönster, metoden fungera ju inte utan jquery och antingen har du $ redan satt som jQuery eller så har metoden sats inne i en anyonm metod med $ refererat till window.jQuery redan.
Jag förstå inte vad du försöker byta ut när du vill byta ut success mot en dom-ready metod... det är två helt olika saker, men spontant så känns det rätt så klumpig kod. vad är d, c b och e för variabler? har du cart.js som inte är packad så man kan se vad den gör?
Du har exempelvis laddad in två olika jquery bibliotek.
Det du vill göra (helst) är att få in ett context: http://api.jquery.com/jQuery.ajax/ för att veta vilket element som skall vara this