Adding a Line Item Property Value

ℹ️

This article goes through how to add a line item property value to specific items.

The main use case is for merchants who normally restrict refunds on Buy Now orders but want to allow refunds for TryNow orders.

To implement this property in the Shopify store, it’s important to consider the specific conditions under which the property should be added to the product, as well as the method used to add the product to the cart.

Typically, Shopify themes rely on an Add to Cart function responsible for sending the product data to the cart. This function generally follows the structure below:

document.getElementById('add-to-cart-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  fetch('/cart/add.js', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    console.log('Added to cart:', data);
  })
  .catch(err => {
    console.error('Error adding to cart:', err);
  });
});

The function above takes into account all the information included in the form—usually the variant ID and quantity, though properties and selling plan IDs can also be included.

To implement the _LPROP property in the form data, you need to add the following input field within the form:

<input type="hidden" name="properties[_LPROP]" value="OnlyExchanges">

By adding that input, any item added to the cart will contain the _LPROP property.

Now, the need to include this property in the cart items depends on the intended outcome. In some cases, it will be necessary to apply the property only to "Buy Now" products or to "TryNow" products. To achieve this, we can modify the "Add to Cart" function so that it removes the _LPROP property based on our conditions.

To keep the property in "Buy Now" items, but not in TryNow items, the following steps are necessary:

document.getElementById('add-to-cart-form').addEventListener('submit', async function(e) {
  e.preventDefault();


  const formData = new FormData(this);


  const tryNowSellingPlanId = (await window.trynow.getSellingPlanId()).split('/').pop();
  const sellingPlan = formData.get('selling_plan');


  if (sellingPlan === tryNowSellingPlanId) {
    formData.delete('properties[_LPROP]');
  }


  fetch('/cart/add.js', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    console.log('Added to cart:', data);
  })
  .catch(err => {
    console.error('Error adding to cart:', err);
  });
});

In the previous code, the original "Add to Cart" function was modified so that it removes the _LPROP property from the item if it contains the TryNow selling plan ID, so just the Buy Now products can be added with the property

Now, it might be necessary to do the opposite. That is, to keep the property on TryNow items. To do this, it will be necessary to do the following:

document.getElementById('add-to-cart-form').addEventListener('submit', async function(e) {
  e.preventDefault();


  const formData = new FormData(this);


  const tryNowSellingPlanId = (await window.trynow.getSellingPlanId()).split('/').pop();
  const sellingPlan = formData.get('selling_plan');


  if (!sellingPlan || sellingPlan !== tryNowSellingPlanId) {
    formData.delete('properties[_LPROP]');
  }


  fetch('/cart/add.js', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    console.log('Added to cart:', data);
  })
  .catch(err => {
    console.error('Error adding to cart:', err);
  });
});