Get currently selected shipping method name

kurlandspaec · #1 03-22-2012, 05:40 AM

Hello,
I would like to know if it's possible to get the currently selected shipping method with an API call. Due to the inability of ecwid to select(or hide) a payment method based on the selected shipping method I would like (with jquery) to hide some payment methods. I tried to get the currently selected shipping method with jquery:

Code:

$("input[@name=ru.cdev.xnext.frontend.client.checkout.ShippingDetails$ShippingOptionRadioButton]:checked").parent().children('label').text()

It works in chrome's console but I cannot make it work inside web page using the

Code:

Ecwid.OnPageLoaded

page call.
In addition I would like to store this value to a global variable so it can be used to next page (payment) and hide the payment methods that are not valid for this shipping method.
Please advice on this case.
Best,
Spyros

kurlandspaec · #2 03-23-2012, 05:40 AM

Hello,
can anyone from Ecwid team reply on this?
I am a silver member and I would like to have a more responsive support.
Best,
Spyros

Maya · #3 03-26-2012, 05:09 AM

In order to make this code work, it should be executed only when Ecwid page is loaded. You can check it using Ecwid.OnPageLoaded in following way:

Code:

<script>
Ecwid.OnPageLoaded.add(function(page) { /* check that Ecwid page is loaded*/
  if (page.type == “CHECKOUT_SHIPPING_ADDRESS”) /* check that loaded page is shipping details page*/ {
   var shipping_method = $("input[@name=ru.cdev.xnext.frontend.client.checkout.ShippingDetails$ShippingOptionRadioButton]:checked").parent().children('label').text()
}
});
</script>

Once you add this code, selected shipping method will be stored in shipping_method variable and can be used on the Payment methods page. For example:

Code:

<script>
Ecwid.OnPageLoaded.add(function(page) { /* check that Ecwid page is loaded*/
  if (page.type == “CHECKOUT_PAYMENT_DETAILS”) /* check that loaded page is shipping details page*/ {
   if ( shipping_method == “smth”) {
    …........
   }
});

Please, refer to this page for details how Javascript API works: http://kb.ecwid.com/w/page/41188517/JavaScript%20API

kurlandspaec · #4 03-26-2012, 12:53 PM

Hello and thanks for the reply,
actually I did that in the first place but the variable although it has a value in the CHECKOUT_SHIPPING_ADDRESS when I go to next page which is the CHECKOUT_PAYMENT_DETAILS it will return "undefined"
Please check it online at www.kurland.gr/estore.aspx
Best,
Spyros

kurlandspaec · #5 03-26-2012, 12:56 PM

This is the code I use inside .aspx file

Code:

<script type="text/javascript">
//Ecwid.OnPageLoad.add(function(page){
//alert("test");
//});

//Ecwid.OnAPILoaded.add(function() {
//// Ecwid API is available, do something
//alert ($("#gwt-uid-22").parent().children('label').text());
//});

Ecwid.OnPageLoaded.add(function(page) {

//if (page.type == 'CHECKOUT_SHIPPING_ADDRESS') {
//var mytest = $("#gwt-uid-6").val();
//}
//var mytest = $("input[@name=ru.cdev.xnext.frontend.client.checkout.ShippingDetails$ShippingOptionRadioButton]:checked").attr("id");
//var mytest = $("input[@name=ru.cdev.xnext.frontend.client.checkout.ShippingDetails$ShippingOptionRadioButton]:checked").val();
//var mytest = $("#gwt-uid-23").next().find('span').remove();
//var mytest = $("#gwt-uid-23").parent().children('label').html();
//var mytest = $("input[@name=ru.cdev.xnext.frontend.client.checkout.ShippingDetails$ShippingOptionRadioButton]:checked").parent().children('label').text();
//alert ($("#gwt-uid-22").parent().children('label').text());
//alert ($("#gwt-uid-6").val());
//alert("My page load handler: "+page.type);
//alert(mytest);

if (page.type == 'CHECKOUT_SHIPPING_ADDRESS') {
var shipping_method = $("input[@name=ru.cdev.xnext.frontend.client.checkout.ShippingDetails$ShippingOptionRadioButton]:checked").parent().children('label').text();
}

if (page.type == 'CHECKOUT_PAYMENT_DETAILS') {
alert(shipping_method);
}

$(".ecwid-SearchPanel-button").text("");
$("span.ecwid-productBrowser-categoryPath-separator").html("&nbsp;<img src='http://www.kurland.gr/images/breadcrumb.gif'/>&nbsp;");

$(".ecwid-productBrowser-nav-left").attr("title","Προηγούμενο");
$(".ecwid-productBrowser-nav-right").attr("title","Επόμενο");
$(".ecwid-AddressBook-addButton").html('<div>Προσθήκη <br/> νέας <br/>διεύθυνσης</div>');

	//alert("My page load handler: "+page.categoryId);
	//alert ("eimai loaded!");
	//$(".ecwid-productBrowser-subcategories-mainTable").remove();

if (page.categoryId == 0) {$(".ecwid-productBrowser-subcategories-cellSpace").css('display','none');}

$(".ecwid-results-topPanel-sortByPanel").css('display','inline-table');


	//$(".ecwid-productBrowser-subcategories-cellSpace").remove();
	//alert ("right:"+jQuery("#rightColumn").height());
	//alert ("left:"+jQuery("#leftColumn").height());
	$("#rightColumn").resize(function() {
	
	//alert("test2");
	
	if ($("#rightColumn").height() < $("#leftColumn").height()) {
		$("#rightColumn").css({ 'min-height': $("#leftColumn").height()+0 });}
		else {
		$("#leftColumn").css({ 'min-height': $("#rightColumn").height()-0 });
		}
	
	});

if ($("#rightColumn").height() < $("#leftColumn").height()) {
		$("#rightColumn").css({ 'min-height': $("#leftColumn").height()+0 });}
		else {
		$("#leftColumn").css({ 'min-height': $("#rightColumn").height()-0 });
		}
});</script>

Maya · #6 03-27-2012, 03:37 PM

Your code works the way, that the “shipping_method” variable gets redefined (reset) each time when “Ecwid.OnPageLoaded.add” is executed. That is why “shipping_method” variable in undefined, when you go to the Payment Methods page.

In order to save “shipping_method” value you should declare this variable before “Ecwid.OnPageLoaded.add” function and remove its' declaration inside “if (page.type == 'CHECKOUT_SHIPPING_ADDRESS')” condition.

Finally, your javascript code will look like here:

Code:

<script type="text/javascript">
//Ecwid.OnPageLoad.add(function(page){
//alert("test");
//});

//Ecwid.OnAPILoaded.add(function() {
//// Ecwid API is available, do something
//alert ($("#gwt-uid-22").parent().children('label').text());
//});
var shipping_method;
Ecwid.OnPageLoaded.add(function(page) {

//if (page.type == 'CHECKOUT_SHIPPING_ADDRESS') {
//var mytest = $("#gwt-uid-6").val();
//}
//var mytest = $("input[@name=ru.cdev.xnext.frontend.client.checkout.ShippingDetails$ShippingOptionRadioButton]:checked").attr("id");
//var mytest = $("input[@name=ru.cdev.xnext.frontend.client.checkout.ShippingDetails$ShippingOptionRadioButton]:checked").val();
//var mytest = $("#gwt-uid-23").next().find('span').remove();
//var mytest = $("#gwt-uid-23").parent().children('label').html();
//var mytest = $("input[@name=ru.cdev.xnext.frontend.client.checkout.ShippingDetails$ShippingOptionRadioButton]:checked").parent().children('label').text();
//alert ($("#gwt-uid-22").parent().children('label').text());
//alert ($("#gwt-uid-6").val());
//alert("My page load handler: "+page.type);
//alert(mytest);

if (page.type == 'CHECKOUT_SHIPPING_ADDRESS') {
shipping_method = $("input[@name=ru.cdev.xnext.frontend.client.checkout.ShippingDetails$ShippingOptionRadioButton]:checked").parent().children('label').text();
}
…...........
</script>

kurlandspaec · #7 03-27-2012, 04:29 PM

Thanks,
it's working now as expected.
Although when I change shipping method it will not be stored in the variable since it will not fire the onLoad event.
I will check this event to and then everything should work.
Thanks again for all your help.
Best,
Spyros
p.s.
As soon as I have a solution I will post it here.

kurlandspaec · #8 03-27-2012, 06:07 PM

Hello,
I cannot find an event handler to get current selected text for shipping radio button.
I tried:

Code:

$("input[@name=ru.cdev.xnext.frontend.client.checkout.ShippingDetails$ShippingOptionRadioButton]:radio").change(function() {
			alert('Handler for .change() called.');
		});

in both

Code:

Ecwid.OnPageLoaded.add(function(page)

and

Code:

Ecwid.OnPageLoad.add(function(page)

It fires only the first time the shipping radio is checked.
When I change the selected radio the event does not fire.
In addition when I select a different radio the value is not stored at my variable.
Please check it online athttp://www.kurland.gr/estore.aspx

Best,
Spyros

kurlandspaec · #9 03-27-2012, 06:53 PM

Hello,
I found a solution using the following code:

Code:

Ecwid.OnPageLoaded.add(function(page) {

$("div.ecwid-Checkout-DeliveryMethod div.ecwid-form button.gwt-Button").click(function (){
if (page.type == 'CHECKOUT_SHIPPING_ADDRESS') {
shipping_method = $("input[@name=ru.cdev.xnext.frontend.client.checkout.ShippingDetails$ShippingOptionRadioButton]:checked").parent().children('label').text();
}
//alert('test');
})})

So I am attaching the click event on the button that navigate to next page.

Best,
Spyros

Maya · #10 03-28-2012, 08:02 AM

Thank you for the explanation of solution, which you have applied on your site. Hopefully, it will be useful for other Ecwic users.

Good luck with your business! If you have any questions, we always glad to give you a hand.