Line Item Property shows on product page but doesn't show on cart!

New Member
5 0 0

Hi, 

i'm following this tutorial to make this happen on my parallax theme.

http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-p...

I customized the Monogram field, with a drop down-list menu with Option1, Option2 , and Option3. using the Shopify ui-elements-generator.

Despite i'm not sure if I placed the code in the correct place in the product.liquid, it works perfectly, I can see the drop down menu list before the add to cart button. 

However, I can't figure out how to make this info visible under product in cart!

This is how my cart.liquid looks like now (in bold, the code that I added): 

 

        {% for item in cart.items %}
          <div class="five columns alpha">
            <a href="{{ item.url }}" title="{{ item.title | escape }}" class="cart_page_image">       
              <img src="{{ 'loader.gif' | asset_url }}" data-src="{{ item | img_url: 'medium' }}" data-src-retina="{{ item | img_url: 'grande' }}" alt="{{ item.title | escape }}" />
            </a>
          </div>

          <div class="five columns omega">
            <p>
              <a href="{{ item.url }}" title="{{ item.title | escape }}">{{ item.title }}</a>
            </p> 
            
            {% if item.properties %}
              <p>
              {% for p in item.properties %}
  {% unless p.last == blank %}
    {{ p.first }}:
    {% if p.last contains '/uploads/' %}
    <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
    {% else %}
    {{ p.last }}
    {% endif %}
    <br />
  {% endunless %}
{% endfor %}

              </p>
            {% endif %}

            <p class="price_total">
              {% if item.price > 0 %} 
                {{ item.price | money_with_currency }}
              {% else %}
                {{ settings.free_price_text }}
              {% endif %}
            </p>

            <p id="quantity_{{ forloop.index }}">
              <label for="updates_{{ item.id }}" class="quantity_label">Quantity:</label>
              <input type="number" min="0" size="3" maxlength="3" class="quantity" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" />
            </p>

            <p class="remove_item">
              <a href="/cart/change?line={{ forloop.index }}&quantity=0" title="remove"></a>
            </p>
          </div>
          <br class="clear" />
          <br class="clear" />
        {% endfor %}
      </div>

 

And.. just in case is needed, this is how my product.liquid looks like now (in bold, the code that I added)

 

      {% assign variant = product.selected_or_first_available_variant %}
      <p class="modal_price" itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">;
         <meta itemprop="currency" content="{{ shop.currency }}" />
         <meta itemprop="seller" content="{{ shop.name | escape }}" />
         <meta itemprop="availability" content="{% if product.available %}in_stock{% else %}out_of_stock{% endif %}" />
         
         <span class="sold_out">{% if variant.available == false %}{{ settings.sold_out_text }}{% endif %}</span>
         <span itemprop="price" content="{{ variant.price | money_without_currency }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
            <span class="current_price">
              {% if variant.available %}
                {% if variant.price > 0 %} 
                  {{ variant.price | money }} 
                {% else %}
                  {{ settings.free_price_text }}
                {% endif %}
              {% endif %}
            </span>
         </span>
         <span class="was_price">
          {% if variant.price < variant.compare_at_price %}
            {{ variant.compare_at_price | money }}
          {% endif %}
         </span>
      </p>
     
      {% include 'product-notify-me' %}

       {% if settings.product_description_position == "top" %}
         {% if product.description != blank %}
          <div class="description" itemprop="description">
            {{ product.description | split: '<!-- split -->' | first }}
          </div>
        {% endif %}
       {% endif %}
<div>            
  <p class="field"> <label>Monogram:</label>
  <select id="monogram" name="properties[Monogram]">
    <option value="Option1">Option1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option3">Option3</option>
  </select>
</p>
</div>

       {% include 'product-form' with 'product' %}

       {% if settings.product_description_position == "bottom" %}
         {% if product.description != blank %}
          <div class="description" itemprop="description">
           {{ product.description | split: '<!-- split -->' | first }}
          </div>
         {% endif %}
       {% endif %}

      {% if settings.display_collections or settings.display_tags or settings.display_type %}
       <hr />
      {% endif %}
     
       <div class="meta">
         {% if settings.display_social_buttons %}
           <div class="share-button"></div>
         {% endif %}
         
         {% if settings.display_collections %}
           <p>
             <span class="label">Collections:</span> 
             <span>
              {% for col in product.collections %}
                <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %} 
              {% endfor %}
            </span>
          </p>
         {% endif %}
       
         {% if settings.display_tags %}
            <p>
              {% for tag in product.tags %}
                {% if forloop.first %}
                  <span class="label">Category:</span> 
                {% endif %}

                {% unless tag contains 'meta-related-collection-' %}
                  <span>
                      <a href="/collections/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="Products tagged {{ tag | escape}}">{{ tag }}</a>{% unless forloop.last %},{% endunless %} 
                  </span>
                {% endunless %} 
              {% endfor %}
            </p>
         {% endif %}

 

Can anyone help me with this? I would really appreciate it!

Thanks a lot!

Lara

0 Likes
Shopify Expert
189 0 15

Your code seens ok, but you cannot have a file uploaded if your theme uses Ajax cart. You need to disable it first. Some themes have disabling options built in on the theme settings

edit: sorry my bad, you are not trying to make file upload

 

Pasilobus, Inc - Shopify Experts - Contact us at support@pasilobus.com
0 Likes
New Member
5 0 0
Oh no, this is just a dropdown menu list of options, which will be available in one product template. I don't use the variable option given, because then i'll have six dropdown menus, each to chose an option. I'm not sure if my theme uses Ajax cart, i'm working on Parallax. Can someone else help me with this issue? Thanks a lot, Lara
0 Likes
Shopify Expert
9807 92 1561

Your code is wrong. This following needs to be within the <form> and since it's not it won't send along with the other fields.

<div>            
  <p class="field"> <label>Monogram:</label>
  <select id="monogram" name="properties[Monogram]">
    <option value="Option1">Option1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option3">Option3</option>
  </select>
</p>
</div>

The form is likely within the product-form.liquid snippet.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
New Member
5 0 0

Thanks Jason! I did what you suggested and it worked out!

Now i wonder if there is any way to have that info translated to the cvs file. could you help with that?

Thanks a lot,

Lara

0 Likes
New Member
6 0 0

Jason, any chance you know how to have the user friendly field lable display vs the field name on the cart?  Screen Shot 2019-09-18 at 4.06.59 PM.png

0 Likes