Hi Bjarne,

Yes, of cause there's a way :)

Just insert your checkbox somewhere on the page that makes sence.
When the checkbox is clicked you toggle a class "on" on the shipping information div.
Make some css that hides the shipping information div and shows it when it's "on".
You can top it of with saving the value of the checkbox to the order. That way you can set it to checked when the user comes back to the page.

Nothing magic about that :)

/Rune

Hi Rune..

Okay, I was just looking at some of the lines from the javascript in the starterkit v.1.. which has these lines with "differentShippingAddress":

jQuery(function () {
/* Cart step 2 - Need to hide or show the shipping address information If the checkbox is not checked */ var differentShippingAddress = jQuery("#differentShippingAddress"); if (differentShippingAddress[0]) { showHideShippingInformation(differentShippingAddress[0].checked); }

if (jQEle.attr("id") === "shipping_country" || (jQEle.attr("id") === "country" && !jQuery("#differentShippingAddress")[0].checked)) {
....
} 

/*
The next step event on step 2 of the cart
*/
jQuery('#cart.stepProgress02 a#next').live("click", function () {
  var personalInformation = jQuery("#personalInformation"),
      differentShippingAddress = jQuery("#differentShippingAddress")[0].checked,
      country = personalInformation.find("#country option:selected");

/*
  We fetch the information from the form and creates
  an object that can be sent to the server as a form
  POST submit
  */
  var formObj = {
    "firstName": personalInformation.find("#firstName").val(),
    ...
    "differentShippingAddress": jQuery("#differentShippingAddress")[0].checked,
    "commentsDelivery": jQuery("#commentsDelivery").val(),
    "promotionCode": jQuery("#promotionCode").val(),
    "commentsCard": jQuery("#commentsCard").val()
  };
  if (differentShippingAddress) {
    var shippingInformation = jQuery("#shippingInformation"),
        shippingCountry = shippingInformation.find("#shipping_country option:selected");
    formObj["shipping_firstName"] = shippingInformation.find("#shipping_firstName").val();
    ...
  }

/*
The shipping address should be different to the billing address
*/
jQuery('input#differentShippingAddress').live("click", function () {
  showHideShippingInformation(jQuery(this)[0].checked)
});

So I was wondering if I need to include some is this, e.g. "differentShippingAddress" in formObj..?

I tried with these two choices: hide the div or disabled the textboxes, which seems to work:

Disable textboxes in #shippingInformation div:

$(document).ready(function() {
jQuery("#shippingInformation input[type=text]").attr("disabled", true);
});
       
/*
The shipping address should be different to the billing address
*/
jQuery('input#differentShippingAddress').live("click", function () {
  showHideShippingInformation(jQuery(this)[0].checked)
});

function showHideShippingInformation(show) {
  var shippingInformation = jQuery("#shippingInformation");
  var shippingFirstName = shippingInformation.find("#shippingFirstName");
  
  if (show) {
    jQuery("#shippingInformation input[type=text]").attr("disabled", false);
  } else {
    jQuery("#shippingInformation input[type=text]").attr("disabled", true);
  }
}

or hide the #shippingInformation div

$(document).ready(function() {
  var differentShippingAddress = jQuery("#differentShippingAddress");
  if (differentShippingAddress[0]) {
    showHideShippingInformation(differentShippingAddress[0].checked);
  }
});

/*
The shipping address should be different to the billing address
*/
jQuery('input#differentShippingAddress').live("click", function () {
  showHideShippingInformation(jQuery(this)[0].checked)
});

function showHideShippingInformation(show) {
var shippingInformation = jQuery("#shippingInformation");
  if (show) {
    shippingInformation.css("display", "block");
  } else {
    shippingInformation.css("display", "none");
  }
} 

the last example is like you did it in starterkit v. 1...
so just the functions, which is different..

I have modified it and you can check it out here: http://d25283583.u359.surftown.dk/da/kurv/information.aspx

I haven't checked if the shipping information automatically is filled out in the order in Tea Commerce section and confirmations mails, if the shipping address is "disabled" .. but then I will modify the xslt to write the fill out the same address in shipping.

/Bjarne

Hi Bjarne,

Looks to me that all you need to do now is save the checkbox value to the order, and then load the value when the page is loaded. If you do that the showHideShippingInformation will be fired on document ready and you win.

/Rune

Hi Rune..

I have saved the shipping info here: http://d25283583.u359.surftown.dk/da/kurv/information.aspx to the formObj in javacript .. how can I save the checkbox value and also "remember" the data, when the user go back to step 1?

http://d25283583.u359.surftown.dk/scripts/teaCommerce_Simple.js

/Bjarne

I think all you need to change is your if statement around the shipping information in the JavaScript.
Change:
if (differentShippingAddress) {
to:
if (formObj.differentShippingAddress) {

Then you should have saved all information to the order. Then you just need to add check the checkbox in your xslt depending on the differentShippingAddress property on the order.

/Rune

I get the true/false value both when using if(differentShippingAddress) and if(formObj.differentShippingAddress) ... and use TeaCommerce.getOrder(); in console window I get in: Properties > 8: object .

in my xslt I have added:

<input name="UpdateOrderProperties" type="hidden" value="company,firstName,lastName,streetAddress,zipCode,city,phone,email,comments,shipping_firstName,shipping_lastName,shipping_streetAddress,shipping_zipCode,shipping_city,differentShippingAddress" />

<div class="differenShipping">
    <label for="differentShippingAddress">
        <input type="checkbox" id="differentShippingAddress" value="Anden leveringsadresse">
        <xsl:if test="$order/properties/differentShippingAddress != 'false'">
            <xsl:attribute name="checked">checked</xsl:attribute>
        </xsl:if>
        </input>
        Anden leveringsadresse
    </label>
</div>

It seems to work when I go the step 3 first and then back to step 2 or 1.. but not if I go directly back to step 1 from step 2..

I think it first update the differentShippingAddress value when I go forward to step 3..

http://d25283583.u359.surftown.dk/da/kurv/information.aspx

/Bjarne

Yes. The differentShippingAddress will firt be set when you go from step 2 to step 3. That's how it's supposed to be. If you want it set when people click it you could allways hook into it's click event and set it there using the Tea Commerce JavaScript API.

/Rune

is working on a reply...