Add a custom text area to certain store products via a product label.

Setup

There are 3 steps to complete; create the product label, copy the code into the theme options, add the label to the products.

Create Label

Create a new label via the Labels link.

Note: This label ID is the one that needs to be referenced in the footer JavaScript and added to each product that you want this enabled on.

🔥 The label must be also have the "assigned to" field set to products.

CSS

Paste below into the "CSS block" in theme options.

.text-input-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.text-input-wrap label {
  font-weight: 700;
  font-size: 1rem;
}
.text-input-wrap textarea {
  padding-left: 20px;
  width: 100%;
  min-height: 45px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid lightgrey;
}

JavaScript

Paste the below code into the "Footer block" in the theme options. Change the settings section at the top to customize the area.

🔥 Most important field is the "labelID" which must be the same as the id from /labels page.

<script>
// Add a custom text box onto product - Assign label id set below to a product to enable.

/**
 * Settings
 */
const labelID = 2181; // EvoAdmin label ID https://us.evoadmin.io/labels or https://eu.evoadmin.io/themes/customize
const labelTitle = 'Item Note';
const textAreaMaxLength = 250; // Max characters allowed in text area
const textAreaRows = 4;
const textAreaPlaceholder = 'Add note here';
/**
 * End Settings
 */

/******************************************/
//********* DO NOT EDIT BELOW HERE ********/
/******************************************/
let saveCustomText = '';

const addProductTextField = function addProductTextField(savedText) {
  const productSummary = document.querySelector(`.ex-product .product-summary.label_${labelID}`);
  if (!productSummary) return;

  const inputWrap = document.createElement('div');
  inputWrap.className = 'text-input-wrap';
  inputWrap.innerHTML = `<label>${labelTitle}</label>`;
  const input = document.createElement('textarea');
  input.className = 'product-text-input';
  input.setAttribute('type', 'text');
  input.setAttribute('maxlength', textAreaMaxLength);
  input.setAttribute('name', 'product-text');
  input.setAttribute('rows', textAreaRows);
  input.placeholder = textAreaPlaceholder;

  document.querySelectorAll('.product-shopping-actions-addtocart').forEach((item) => {
    item.insertAdjacentHTML('beforeend', '<input type="hidden" name="lineref" id="lineref" class="lineref" value="">');
  });

  if (savedText) {
    input.value = savedText;
    document.querySelectorAll('.lineref').forEach((lineref) => {
      lineref.setAttribute('value', savedText);
    });
  }

  inputWrap.append(input);

  if (document.querySelector('.product-options').length) {
    document.querySelectorAll('.product-options').forEach((item) => {
      item.append(inputWrap.cloneNode(true));
    });
  } else {
    document.querySelectorAll('.product-summary .productdetails').forEach((item) => {
      item.append(inputWrap.cloneNode(true));
    });
  }

  setTimeout(() => {
    document.querySelectorAll('.product-text-input').forEach((item) => {
      item.addEventListener('keyup', (e) => {
        let customText = e.target.value;

        if (customText) {
          customText = customText.replaceAll(/[&/\\#,+()$~%.^'":*?<>{}]/g, '');
          document.querySelectorAll('.lineref').forEach((lineref) => {
            lineref.setAttribute('value', customText);
          });
          saveCustomText = customText;
        }
      });
    });
  }, 100);
};

addProductTextField();

function evoXProductChangeCallback() {
  addProductTextField(saveCustomText);
}
</script>

Products

The product label that you created must be added onto the products. This is done via the labels tab on the product as shown below.