Custom File Upload Not Showing In Cart

Solved
Tourist
4 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
Highlighted
Tourist
4 1 0

This is an accepted solution.

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

0 Likes
Highlighted
New Member
2 0 0

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

0 Likes
Highlighted
Tourist
4 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
Highlighted
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
Highlighted
Tourist
4 1 0

Not a problem!

0 Likes
Highlighted
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
Highlighted
New Member
2 0 0

Nevermind, I got it!

0 Likes