Use File Upload with an Ajax Theme

 Caution

This article only applies to Product Options 2.0. It requires technical knowledge and prior experience with JavaScript and Ajax. If you are not comfortable with this, please contact our support team for assistance.

Overview

Ajax themes do not work well with file uploads. Product Options 2.0 has a customization that allows you to have both file uploads and an Ajax cart.

Please follow these steps to add this functionality:

  1. From Shopify's admin, select Online Store, then ActionsEdit code.
  2. 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

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

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

    Find addItemFromForm

  4. 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

    Paste the code after

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

    Search for the code

  6. 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

    Screenshot shows code pasted in place

  7. Select Save.
Was this article helpful?
0 out of 0 found this helpful