REFRESH liquid theme line items product to cart page

Store Design
,
1

Hi,

I have been trying to add a custom field to my product and it’s showing in product page but not in the cart.

I have been going through the steps from : https://community.shopify.com/c/shopify-design/product-pages-get-customization-information-for-products/m-p/616525?utm_campaign=Guru_%20_Ask&utm_medium=Forum&utm_source=Social

I have added an example field in main.product.liquid

             <p class="line-item-property__field">
  <label for="your-name">Your name</label>
  <textarea required class="required" id="your-name" name="properties[Your name]"></textarea>
</p>

and then I have added this to main-cart-items.liquid

{% 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 class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
        {{ p.last }}
      {% endif %}
      <br>
    {% endunless %}
  {% endfor %}
{% endif %}

I am running out of ideas can someone help ?

2

hello there

It seems like you have successfully added a custom field to your product page, but the value of that field is not showing up in the cart.

To display the custom field in the cart, you need to make sure that the value of the field is being saved to the cart as a line item property.

You can check if the value of the custom field is being saved to the cart by going to the order details page in your Shopify admin and checking the line item properties for that order. If the custom field value is not showing up there, then it means that it is not being saved to the cart.

To save the custom field value to the cart, you need to modify the code that handles the form submission on the product page. When the form is submitted, you need to include the value of the custom field as a property of the line item that is being added to the cart.

Here is an example of how you can modify the code to save the custom field value to the cart:

  1. Add an id attribute to the textarea element that you added to the product page, like this:

In the form submit event handler on the product page, add the value of the custom field as a property of the line item being added to the cart, like this:

document.getElementById('product-form').addEventListener('submit', function(event) {
  event.preventDefault();

  // Get the product variant ID and quantity
  var variantId = document.getElementById('product-select').value;
  var quantity = document.getElementById('quantity').value;

  // Get the value of the custom field
  var customFieldValue = document.getElementById('your-name').value;

  // Add the line item to the cart with the custom field value as a property
  var properties = { 'Your name': customFieldValue };
  var lineItem = { variant_id: variantId, quantity: quantity, properties: properties };
  Shopify.addItem(lineItem, function() {
    window.location.href = '/cart';
  });
});