Use File Upload with an Ajax Theme

Follow

Warning!

This article only applies to Product Options Version 2.0. It requires technical knowledge and prior experience with JavaScript and Ajax. If you are not comfortable with this, Email our Support Wizards for help.

Ajax themes do not work well with file upload. Product Options Version 2.0 and higher have a customization that allows you to have both file uploads and an Ajax cart. Follow these steps to add this functionality:

  1. Select Online Store.

    Select online store

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

  4. Under "Assets", select theme.js.liquid.

    Note: If this file doesn’t exist, your main JavaScript file may be named: app.js, ajaxify.js, the same name as your theme or something similar.

    select theme.js

  5. Search for addItemFromForm, it will look something like this:

    ShopifyAPI.addItemFromForm(evt.target, itemAddedCallback, itemErrorCallback);

    Find ShopifyAPI.addItemFromForm

  6. Copy and paste the following code after success: function(line_item){:
    // Bold:POv2
      if(typeof window.BOLD !== 'undefined'
         && typeof window.BOLD.common !== 'undefined'
         && typeof window.BOLD.common.cartDoctor !== 'undefined') {
        // NOTE: "cart" should be the variable containing the cart json data
        line_item = window.BOLD.common.cartDoctor.fixItem(line_item);
      }            
    // Bold:POv2

    Pasted Code

  7. Search for jQuery.ajax(params);.

    Find jQuery.ajax_params

  8. Copy and paste the following code over top of this code:
    // Bold:POv2 - Use our add-to-cart functionality to enable file uploads with AJAX.
    if(typeof(BOLD)==='object' && BOLD.helpers && typeof(BOLD.helpers.addItemFromForm) === 'function') {
      BOLD.helpers.addItemFromForm(form, params.success, params.error, {endpoint:'/cart/add.js'});    
    } else {
      jQuery.ajax(params);
    }
    // Bold:POv2

    Pasted Code

  9. Select Save.

    Select Save

That's it!

Next Steps:

Blog Posts:

1 out of 2 found this helpful

Comments

0 comments

Please sign in to leave a comment.