I have an usecase where my customer has the top magento shopping cart icon available in the checkout.
The problem however is the fact that when someone updates the quantity on the minicart, the sidebar is not refreshed and thus wrong content is displayed there.
I already tried to extends this feature and found the minicart and a way to extend it but i cant find the right way to extend the "update QTY" event.
After that update i need to refresh the page. The sidebar should show other information but also the step of the checkout itself is dependent based on the content of the cart itself. So for a QTY of 2 there are extra fields on a specific step etc.
Hope someone can help
Best,
Pim
In vendor/magento/module-checkout/view/frontend/web/js/sidebar.js the _updateItemQtyAfter method will fire the following trigger: $(document).trigger('ajax:updateCartItemQty').
$(document).on('ajax:updateItemQty', $.proxy(function () {
// your stuff here...
}, this));
Or you can override and extend the method _updateItemQtyAfter in vendor/magento/module-checkout/view/frontend/web/js/sidebar.js.
The update button in the sidebar will fire the XHR /checkout/sidebar/updateItemQty/, so if above won't work you can try to do the following:
$(document).ajaxComplete(function(event, xhr, settings) {
if (settings.url.indexOf('checkout/sidebar/updateItemQty') !== -1) {
// your stuff here...
}
});
Related
How can I navigate same page like I am tapping related products in Product details page and it will navigate to Product details page according to that related product? I want to call same page over and over again.
If you make your ProductDetails page take in a Product (or id, depends on your data) you should be able to call it. It depends on how you want to build your routes (and how you want to be able to go back), of course. Say you havce your ProductDetails take in a product to display:
ProductDetails(product: myProduct)
Then it can get the related products, and you can make the related product push another ProductDetails page:
// In your product details page
Widget relatedProductsWidget() {
return Row(
children: relatedProducts.map((product) => ProductCard(
product: product,
onTap: () => Navigator.of(context).push(
// Simply push another product on the stack
MaterialPageRoute(builder: (context) => ProductDetails(product: product))
),
)),
);
}
It depends, of course, on how you wish to go back. This way, a whole stack of ProductDetails pages will be pushed (and popped again when the back button is pressed). Alternatively, if you only want a single product details page to be present at any time, you can use Navigator.of(context).pushReplacement instead, to animate to the new location and then dispose the old route. Now when the user goes back, he is brought back to the main product list without seeing the old product first.
https://api.flutter.dev/flutter/widgets/Navigator/push.html
https://api.flutter.dev/flutter/widgets/Navigator/pushReplacement.html
I hope this gets you on the way to get your navigation sorted. If you have a specific issue, I recommend you to post a minimal version of your code to make it clear what you're trying to accomplish, as it's still a little bit vague from your question right now.
My answer only works if you use firebase.
Just complete the steps:
Create in the database a collection called products
Now add the products and in all products/documents you need to have a field called id. PS: any ids have to be used only one time.
Create in your code a global variable called id
If you tab on one of the products the id-variable need to be set to the id of the product you tabs on
In your Product-Details Page add a variable called productData
Create in your Product-Details class a method that looks like this:
getProductData() async {
await FirebaseFirestore.instance.collection("products").where("id", isEqualTo: id).get().then((value) {
productData = value.docs[0].data();
});}
In your initState() add this method:
asyncTasks() async {
await getProductData();
}
Call the method asyncTasks() in your initState
Now you can get data from the product document like this:
// Now you get the value that stands in the price field
productData["price"];
Hope it helps!
I have multiple fields including text,checkbok box, drop-down etc in jsf form, which is showing values from DB.I would like the submit button to be disabled by default and to only be clickable if the user made changes to any of the fields in the form. Please help !!
For a simple form you can use this jQuery plugin that a user mentioned here.
Edit:
The plugin is quite simple to use, and powerful, because for example you will have your buttons disabled again if you revert changes inside an input field.
Just make sure that you include the js file:
<h:outputScript name="path/jquery.are-you-sure.js"/>
And for using it, you have to add the line:
$('#idofyourform').areYouSure();
After that, for enabling and disabling submit buttons you have to add:
//All disabled by default
$('#idofyourform').find('button[type="submit"]').attr('disabled', 'disabled');
//Enabled all when there are changes
$('#idofyourform').bind('dirty.areYouSure', function () {
$(this).find('button[type="submit"]').removeAttr('disabled');
});
//Disable all when there aren't changes
$('#idofyourform').bind('clean.areYouSure', function () {
$(this).find('button[type="submit"]').attr('disabled', 'disabled');
});
Both codes inside your document ready function.
Note that I used button[type="submit"], which is what p:commandButton renders by default. You can use input if it's your case.
NOTE: This plugin also adds an extra functionality the OP didn't ask for (the dialog check when you navigate without saving changes). You can disable this if you want by doing:
$('#idofyourform').areYouSure( {'silent':true} );
Not tested, but I would simply use something like this :
$(document).ready(function() {
$('#formId input[type="submit"]').attr('disabled','disabled');
$('#formId').change(function(){ $('#formId input[type="submit"]').removeAttr('disabled'); });
});
If you don't use any jQuery functions already in the view (any PrimeFaces ajax buttons for example), you might need to add :
<h:outputScript library="primefaces" name="jquery/jquery.js" />
Here is my goal: I want to click a specific link on one page, and on the page that loads, I want to change a specific class. I am aware of the onClick function, but not sure it can be used here. Is there a way to do this?
Thank you very much.
This jquery would do what you want:
$(document).ready(function(){
var anchor = '#myanchor';
if (window.location.href.indexOf(anchor) > 0) {
//do what you want here, change classes, etc
}
});
you should place this javascript on the second page, change #myanchor for your anchor used.
Make sure to include the jquery library in the second page for this to work.
I am new to GWT, I would like to use hyperlinks where I would like to redirect the user to another form.
My question is that , creating hyperlinks are easy, but how do I use them ?? addClickListener seems to be deprecated, is there any other way to go around this ?
Update 1
I have implemented the Hyper link code as follows :
Hyperlink link0 = new Hyperlink("Show Boxes","showbox");
History.addValueChangeHandler(this);
History.fireCurrentHistoryState();
public void onValueChange(ValueChangeEvent<String> event) {
String eventValue=event.getValue();
if(eventValue.equals("showbox")){
showBox();
}
}
With this I see that the form corresponding to one hyperlink is visible, but this form is not closed and another for is not being opened when I click one another hyperlink.
I am using DockPanel to display the form in the East direction. The forms for all the hyperlinks are just being displayed one below the other.
Any comments/suggestions for the same ?
Thanks,
Bhavya
Use the Anchor.addClickHandler() method!
Anchor a = new Anchor("text");
a.addClickHandler(new ClickHandler(){
// etc
});
If the another form is within your GWT application, then you should consider using Hyperlink. In constructor you provide a history token which is pushed to History object when link is clicked. You just need to handle event that a history token has changed. It decouples navigation events from your logic. This will also make your application aware of back-forward and allows users save bookmarks to specific state (form in your case). Anchor is intended more for external links.
See it described in Coding Basics - History .
First you need to create a HyperLink with a history token:
Hyperlink link = new Hyperlink("link to foo", "foo");
In above example, "foo" is the history token.
Then you should register your value change handler on History object, like
History.addValueChangeHandler(myValueChangeHandler);
In your value change handler, you will need to read in the current token using event.getValue().
class MyValueChangeHandler implements ValueChangeHandler<String>() {
public void onValueChange(ValueChangeEvent<String> event) {
//get the new value of history token
//clicking on above example link will return "foo" here
String historyToken = event.getValue();
}
}
What does the value of history token means is up to your application to decide. For example you can maintain a simple Map between history tokens and the view that should be rendered. In more sophisticated applications you can encode more details into the token -- like initial state of the form that should be displayed.
In jqtouch and iui, what do you do if you want to follow a link like This is a FEED AND dynamically load the content of the <div id="feed-49"></div>?
I've tried bind/live a click handler onto the "a" and onto a parent "div" but it never gets fired, just the event for actually following the link. Thanks.
This is a simplified version of my other question:
jqtouch mobile app ajax loading issue
It depends whether you want the page pre-loaded or load-on-demand.
If you want it pre-loaded, you might want to fill in the page upon, say, $(document).ready:
$(document).ready(function(){
$('#feed-49').load('feed-49.html');
});
If you want it to load on-demand, you can listen to the pageAnimationStart event:
$('#feed-49').bind('pageAnimationStart', function(event, info){
if (info.direction == 'in')
$(this).load('feed-49.html');
});
You may want to read the jQTouch's documentation on callback events.
I just went through what you are going through and know exactly how to solve it. You need to turn that XML into JSON objects, which will be numbered [0],[1], etc.
This JQuery plugin works and rocks : http://www.fyneworks.com/jquery/xml-to-json/ Add that JS to your app. Your parse XML function will then convert the XML nodes you want (like item nodes within a channel) into JSON objects and then numbers the items.
So look how I then empty the current list of items, build a list of the items and add a custom CLICK function to the list items with a class of "sun" (i love jquery). That function then will add it's parent node title and desc to the divs that need it. The href will push it to the new jqtouch DIV which will handle all the detail info. Cool 'eh? Vote me up if this works. It did for me, like a charm.
function parseXml(xml)
{
$('#feedList').html('');
var rss = $.xml2json(xml);
$.each(rss.channel.item, function(i, item)
{
$('#feedList').empty().append('<li class=sun'+i'><a href=#contentDiv>'+item.title+'</a></li>');
$('.sun'+i).click(function() {
$('#titleDiv').empty().append(item.title);
$('#descDiv').empty().append(item.description);
});
});
};