The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Cart view requests with preprocess events set

swinginsamswinginsam Member
in Help edited November 2012
I have a mini-cart section which, along with displaying the global cart quantity, acts as a view cart button, opening the cart in colourbox. This mini-cart section is part of the global header and is viewable form every page of the site (if fc_quantity != 0). I have no problems with the quantity update, nor the visibility toggle.

I am initializing the button on document.ready with the following ::

$("#global_cart_button").attr("href", CART_URL + "?cart=view").colorbox();

which works just fine for every page that is not the shop page. The difference is that on the shop page (that contains the product browser and actual submit form,) I am adding a preprocess event with ::

fcc.events.cart.preprocess.add(validate_add2cart);

The preprocess event works as well, correctly validating the form before attempting to push the product variables to foxycart.

So, here's the problem :: on the shop page (and only on the shop page,) a click event on the mini-cart button triggers the preprocess event. i.e.: you have to choose a size and quantity in order to view the cart. This must mean that, in the foxycart.js (1.0) file, the preprocess event is triggered before the requested function variable is read (?view).

Is there a way to call the view function before the preprocess function? What about temporarily disabling (similar to $.unbind()) the preprocess event?
Comments
  • fc_adamfc_adam FoxyCart Team
    @swinginsam,

    Is there a reason you're creating the add to cart that way? If you actually embed the cart view link in the HTML, the FoxyCart javascript will recognise that link and automatically load it in the modal colorbox window.

    In terms of your preprocess, I'd suggest adding a little bit of validation to your validate_add2cart to check what caused the process to start and make sure it's a link/form you need to validate against.
  • The add to cart button is a standard submit button in the product browser form that works as expected.

    The button to which I refer is a view cart button. The reason why I am manually calling the colorbox init rather than allowing FC to do so is simply that the site is heavily ajax based and completely responsive. My UI code layer is building, moving, and removing DOM elements on the fly (and asynchronously) based upon client choices and client viewport / screen changes. In any event, according to colorbox, this is a valid method that has not caused any issue.

    Your preprocess suggestion sounds promising; were this validation server-side I could simply wrap the entire validation sequence into ::

    if( !isset($_POST ['submit']) ) { ... }.

    But, as it's client-side, I'll have to give it some thought to find a unique variable or object that I can check against. Is there a way to alter my preprocess declaration such that I could pass a variable through to the validation form?

    i.e.: validate_add2cart('shop_form');

    I could then simply wrap the validation function with something like ::

    function validate_add2cart(caller) {
      if( (typeof caller != 'undefined') && (caller == 'shop_form') ) {
        ...
      }
    }

    but the value of caller would have to be 'shop_form' ONLY if the form is submitted.
  • swinginsamswinginsam Member
    edited November 2012
    Nevermind, I got it.

    I added a hidden input into the global header that changes value based upon the 'view cart button' and 'add to cart' button click events.

    The add to cart button is initialized with ::
    $("#shop_cart").click(function(event) {
      event.preventDefault();
      $("#fc_trigger").val('shop_form');
      $("#shop_form").submit();
    });

    The view cart button is initialized with ::
    $("#global_cart_button")
      .attr("href", CART_URL + "?cart=view")
      .colorbox()
      .click(function() {
        $("#fc_trigger").val('view');
    });

    and the validation function is wrapped with ::
    var caller = $("#fc_trigger").val();
    if(caller == 'shop_form') { .. }

    Simple enough.
  • fc_adamfc_adam FoxyCart Team
    @swinginsam,

    Glad you found a solution. You can pass the object that triggered the events though, which might be a cleaner approach for you. If all of your add to carts are form, you could simply check if the triggering event is a form before running your validations. Take a look at the process example to see what I mean: http://wiki.foxycart.com/static/redirect/javascript
  • swinginsamswinginsam Member
    edited November 2012
    Sorry - got stuck on another project; you know how it is.

    Ok, I think I get this.

    Rather than validate at the preprocess level, I check to see that the caller is a form (and, thus, an 'add to cart' call) at the preprocess level. If indeed it is, I add my validation script to the process level which is triggered next. If it is not (thus, a ?view request,) I keep the process level empty.

    I wind up with the same thing in the end, but this is certainly cleaner and more semantic. Thanks.
  • fc_adamfc_adam FoxyCart Team
    @swinginsam,

    Actually I'd still suggest having your validation at the preprocess level, just within the check to see if the submitting element is a form.
  • Oh, that's much better. I totally missed the "How It Works: Details" section on that page.

    Thanks.
Sign In or Register to comment.