Custom File Upload Not Showing In Cart

Solved
stephgd
Tourist
5 1 0

Hi all. I have read through the other discussions available for this topic but I cannot for the life of me figure out why the file upload isn't showing up in the cart.

The theme I am using is Venture. I followed the tutorial provided here. I was able to insert the file upload within product easily; the code provided in the tutorial to show line item properties in the cart already existed. 

Here is the relevant code within my custom product template liquid file:

{% capture "form_class" %}product-form{% if section.settings.enable_payment_button %} product-form--payment-button{% endif %}{%- endcapture %}

        {% capture "form_id" %}AddToCartForm-{{ section.id }}{%- endcapture %}

        {% form 'product', product, class:form_class, id:form_id %}
        
<!--         Start Edit - user file upload -->
          <p class="line-item-property__field">
            <label for="upload-artwork">Upload Artwork</label>
            <input required class="required" id="upload-artwork" type="file" name="properties[Upload Artwork]">
          </p>
<!--         End Edit -->
        
          {% unless product.has_only_default_variant %}
            {% for option in product.options_with_values %}
              <div class="selector-wrapper js product-form__item">
                <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
                <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                  id="SingleOptionSelector-{{ forloop.index0 }}"
                  data-name="{{ option.name }}"
                  data-index="option{{ forloop.index }}">
                  {% for value in option.values %}
                    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                  {% endfor %}
                </select>
              </div>
            {% endfor %}
          {% endunless %}

          <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
            {% for variant in product.variants %}
              <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
                {% if variant.available %}
                  {{ variant.title }} - {{ variant.price | money_with_currency }}
                {% else %}
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                {% endif %}
              </option>
            {% endfor %}
          </select>
          <div class="product-form__item product-form__item--quantity">
            <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
            <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input product-form__quantity">
          </div>
          <div class="product-form__item product-form__item--submit">
            <button type="submit"
              name="add"
              id="AddToCart-{{ section.id }}"
              class="btn btn--full product-form__cart-submit{% unless current_variant.available %} btn--sold-out{% endunless %}{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
              {% unless current_variant.available %}disabled="disabled"{% endunless %}>
              <span id="AddToCartText-{{ section.id }}">
                {% unless current_variant.available %}
                  {{ 'products.product.sold_out' | t }}
                {% else %}
                  {{ 'products.product.add_to_cart' | t }}
                {% endunless %}
              </span>
            </button>
            {% if section.settings.enable_payment_button %}
              {{ form | payment_button }}
            {% endif %}
          </div>
        {% endform %}

And the code from my cart-template.liquid file (pre-existing)

      <form action="{{ routes.cart_url }}" method="post" novalidate class="cart">
        <table class="responsive-table cart-table">
          <thead class="cart__row visually-hidden">
            <th colspan="2">{{ 'cart.label.product' | t }}</th>
            <th>{{ 'cart.label.quantity' | t }}</th>
            <th>{{ 'cart.label.total' | t }}</th>
          </thead>
          <tbody id="CartProducts">
            {% for item in cart.items %}
              <tr class="cart__row responsive-table__row">
                <td class="cart__cell--image text-center">
                  <a href="{{ item.url | within: collections.all }}" class="cart__image">
                    <img src="{{ item | img_url: '240x240' }}" alt="{{ item.title | escape }}">
                  </a>
                </td>
                <td>
                  <a href="{{ item.url }}" class="h5">
                    {{ item.product.title }}
                  </a>
                  {% unless item.variant.title contains 'Default' %}
                    <p>{{ item.variant.title }}</p>
                  {% endunless %}

                  {% assign property_size = item.properties | size %}
                  {% if property_size > 0 %}
                    {% for p in item.properties %}
                      {% assign first_character_in_key = p.first | truncate: 1, '' %}
                      {% unless p.last == blank or first_character_in_key == '_' %}
                        {{ p.first }}:
                        {% if p.last contains '/uploads/' %}
                          <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                        {% else %}
                          {{ p.last }}
                        {% endif %}

                      {% endunless %}
                    {% endfor %}
                  {% endif %}

                  <p>
                    <a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0">{{ 'cart.general.remove' | t }}</a>
                  </p>
                </td>
                <td class="cart__cell--quantity">
                  <label for="Updates_{{ item.key }}" class="cart__quantity-label medium-up--hide">{{ 'cart.label.quantity' | t }}</label>
                  <input type="number" name="updates[]" id="Updates_{{ item.key }}" class="cart__quantity" value="{{ item.quantity }}" min="0" data-line="{{ forloop.index }}" aria-label="{{ 'cart.label.quantity' | t }}">
                </td>
                <td class="cart__cell--total">
                  {%- if item.original_line_price != item.final_line_price -%}
                    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                    <del class="cart__item-total">{{ item.original_line_price | money }}</del>
                    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
                    <span class="cart__item-total">{{ item.final_line_price | money }}</span>
                  {%- else -%}
                    <span class="cart__item-total">{{ item.original_line_price | money }}</span>
                  {%- endif -%}
                  {%- if item.unit_price_measurement -%}
                    {% include 'product-unit-price', product_variant: item %}
                  {%- endif -%}

                  {%- if item.line_level_discount_allocations != blank -%}
                    <ul class="order-discount order-discount--cart order-discount--list order-discount--title" aria-label="{{ 'customer.order.discount' | t }}">
                      {%- for discount_allocation in item.line_level_discount_allocations -%}
                        <li class="order-discount__item">
                          {%- include 'icon-saletag' -%}{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
                        </li>
                      {%- endfor -%}
                    </ul>
                  {%- endif -%}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>

 Thank you for any insight you may have!

0 Likes
stephgd
Tourist
5 1 0

This is an accepted solution.

Resolved - I removed ajax cart function from my theme.js file.

0 Likes
Ajrobinson
New Member
2 0 0

Hi!  We are having this exact same problem. What ajax did you remove?

0 Likes
stephgd
Tourist
5 1 0

Hi! I'm using the Venture theme, in the theme.js file I found this comment on line 1862:  

/*
  Allow product to be added to cart via ajax with
  custom success and error responses.
*/

This is directly below it, which I have commented out for non-destructive customization. It seems to have done the trick!

// window.AjaxCart = (function() {
//   var cart = function($form) {
//     this.cache = {
//       $cartIconIndicator: $('.site-header__cart-indicator')
//     };

//     this.$form = $form;
//     this.eventListeners();
//   };

//   cart.prototype.eventListeners = function() {
//     if (this.$form.length) {
//       this.$form.on('submit', $.proxy(this.addItemFromForm, this));
//     }
//   };

//   cart.prototype.addItemFromForm = function(evt) {
//     evt.preventDefault();

//     var params = {
//       type: 'POST',
//       url: '/cart/add.js',
//       data: this.$form.serialize(),
//       dataType: 'json',
//       success: $.proxy(function(lineItem) {
//         this.success(lineItem);
//       }, this),
//       error: $.proxy(function(XMLHttpRequest, textStatus) {
//         this.error(XMLHttpRequest, textStatus);
//       }, this)
//     };

//     $.ajax(params);
//   };

//   cart.prototype.success = function() {
//     theme.Notify.open('success', false, true);

//     // Update cart notification bubble's state
//     this.cache.$cartIconIndicator.removeClass('hide');
//   };

//   // Error handling reference from Shopify.onError in api.jquery.js
//   cart.prototype.error = function(XMLHttpRequest) {
//     var data = JSON.parse(XMLHttpRequest.responseText);

//     if (data.message) {
//       theme.Notify.open('error', data.description, true);
//     }
//   };

//   return cart;
// })();

 Hope this helps!

0 Likes
Ajrobinson
New Member
2 0 0

Oh my gosh, you are a lifesaver. We were getting so frustrated and could not figure out what was wrong. Thank you so, so much!

0 Likes
stephgd
Tourist
5 1 0

Not a problem!

0 Likes
jdmoore
New Member
2 0 0

Did you delete

/*
Allow product to be added to cart via ajax with
custom success and error responses.
*/--this?

Or how did you "remove" the ajax function? 

0 Likes
jdmoore
New Member
2 0 0

Nevermind, I got it!

0 Likes
michael-helium
Shopify Expert
232 2 119

For those looking to store files to the customer object in Shopify, check out the Customer Fields app. Reference the developer documentation for implementing custom forms with file uploads.

Michael, Former Director of Business Development @ Helium (view current profile)
- Customer Fields ✪ 4.9/5 (242 reviews)
- Meteor Mega Menu ✪ 4.7/5 (203 reviews)
0 Likes
coin
Tourist
4 0 2

Thanks. I'll test this. Do you know if it works for any theme or just venture?

0 Likes