How did you hear about us button not working anymore!

TimJeffs · ‎08-20-2024

Hi,

We have a drop down menu that is required to be selected before each customer makes a purchase. This drop down menu used to give us information about where they found out about our products and that would be displayed on each order in the image attached as you can see. We just don't see these selections anymore and would like a fix to it? Maybe it was an app or maybe it was some code that is outdated?

We just want to simply see what customers select in the 'Additional Details' section of orders again.

Here is the code:

<style>
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us-other--label
  #how-did-you-hear-about-us-other--label2{
    font-weight: bold;
}

select#how-did-you-hear-about-us,
input#how-did-you-hear-about-us-other
  input#how-did-you-hear-about-us-other2{
    width: 100%;
    padding: 8px 10px 8px 10px;
    line-height: 1.2;
}

#how-did-you-hear-about-us,
#how-did-you-hear-about-us-other,
  #how-did-you-hear-about-us-other2,
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--label,
  #how-did-you-hear-about-us-other--label2,
#how-did-you-hear-about-us-other--error
  #how-did-you-hear-about-us-other--error2{
    display:block;
    margin-bottom: 5px;
}

#how-did-you-hear-about-us-other.error,
  #how-did-you-hear-about-us-other.error2,
#how-did-you-hear-about-us.error {
    border: 2px solid {{ settings.hau_error_color }};
}

#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--error
  #how-did-you-hear-about-us-other--error2{
    color: {{ settings.hau_error_color }};
}
</style>
<div class="page-width page-width--narrow page-content{% if cart.item_count == 0 %} is-empty{% endif %}">
  <header class="section-header">
    <h1 class="section-header__title">
      {{ 'cart.general.title' | t }}
    </h1>
  </header>

  <div class="cart__empty-text text-center">
    <p>{{ 'cart.general.empty' | t }}</p>
    <p>
      <a href="{{ routes.root_url }}" class="btn">{{ 'cart.general.continue_shopping' | t }}</a>
    </p>
  </div>

  {%- if cart.item_count > 0 -%}
    <form action="{{ routes.cart_url }}" method="post" novalidate data-location="page" id="CartPageForm">
    
      <div class="cart__item cart__item--headers small--hide">
        <div class="cart__item--details">
          <div class="cart__item--qty">{{ 'cart.label.quantity' | t }}</div>
          <div class="cart__item--price text-right">{{ 'cart.label.total' | t }}</div>
        </div>
      </div>

      <div data-products>
        {%- for item in cart.items -%}
          {%- render 'cart-item', product: item -%}
        {%- endfor -%}
      </div>
  <div class="form-vertical">
<p>
    <label id="how-did-you-hear-about-us--label" for="how-did-you-hear-about-us">How did you hear about us?</label>
    <span id="how-did-you-hear-about-us--error" style="display:none">{{ settings.hau_error_message }}</span>
    <select id="how-did-you-hear-about-us" name="attributes[how-did-you-hear-about-us]">
    <option value=""{% if cart.attributes.how-did-you-hear-about-us == "" %} selected{% endif %}>Please make a selection</option>
    {% assign optionsArray = settings.hau_form_options | split: ',' %}
    {% for o in optionsArray %}
    {% assign option = o | strip %}
    <option value="{{ option }}"{% if cart.attributes.how-did-you-hear-about-us == option %} selected{% endif %}>{{ option }}</option>
    {% endfor %}
    <!-- <option value="afriendsandlovedit"{% if cart.attributes.how-did-you-hear-about-us == "A Friends and Loved It" %} selected{% endif %}>A Friends and Loved It</option>
    <option value="OtherMagazine"{% if cart.attributes.how-did-you-hear-about-us == "Other Magazine " %} selected{% endif %}>Other Magazine</option> -->
    </select>
</p>
<p id="otherFormWrapper" style="{% unless cart.attributes.how-did-you-hear-about-us == 'afriendsandlovedit' %}display:none{% endunless %}">
    <label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other">Your Friend Name?</label>
    <span id="how-did-you-hear-about-us-other--error" style="display:none">{{ settings.hau_error_message_other }}</span>
    <input id="how-did-you-hear-about-us-other" type="text" name="attributes[how-did-you-hear-about-us-other]" value="{{ cart.attributes.how-did-you-hear-about-us-other }}"/>
</p>
    <p id="otherFormWrapper2" style="{% unless cart.attributes.how-did-you-hear-about-us == 'OtherMagazine' %}display:none{% endunless %}">
    <label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other2">Magazine Name?</label>
    <span id="how-did-you-hear-about-us-other--error2" style="display:none">{{ settings.hau_error_message_other }}</span>
    <input id="how-did-you-hear-about-us-other2" type="text" name="attributes[how-did-you-hear-about-us-other2]" value="{{ cart.attributes.how-did-you-hear-about-us-other2 }}"/>
</p>
</div>
      <div class="cart__footer text-center">
        <div class="cart__footer-page">
          {%- if settings.cart_notes_enable -%}
            <div class="cart__item-row">
              <label for="CartNote">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" class="input-full cart-notes" id="CartNote">{{ cart.note }}</textarea>
            </div>
          {%- endif -%}

          <div data-discounts>
            {% if cart.cart_level_discount_applications != blank %}
              <div class="cart__item-sub cart__item-row">
                <div>{{ 'cart.general.discounts' | t }}</div>
                <div class="text-right">
                  {% for cart_discount in cart.cart_level_discount_applications %}
                    <div>
                      {{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          </div>

          <div class="cart__item-row">
            <div class="h3">
              {{ 'cart.general.subtotal' | t }}
              <span data-subtotal><span class='ymq-b2b-price-hidden' ymq-b2b-item-key='' ymq-b2b-cart-total-price>{{ cart.total_price | money }}</span></span>
            </div>
          </div>

          <div class="cart__item-row cart__note">
            {{ 'cart.general.shipping_at_checkout' | t }}
          </div>

          {%- if settings.cart_terms_conditions_enable -%}
            <div class="cart__item-row cart__terms cart__terms--right cart__note">
              <input type="checkbox" id="CartTerms" class="cart__terms-checkbox">
              <label for="CartTerms">
                {% if settings.cart_terms_conditions_page != blank %}
                  {{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
                {% else %}
                  {{ 'cart.general.terms' | t }}
                {% endif %}
              </label>
            </div>
          {%- endif -%}
         
          <div class="cart__checkout-wrapper">
            <button type="submit" name="checkout" {% if settings.cart_terms_conditions_enable %} data-terms="CartPageAgree"{% endif %} class="btn btn--no-animate cart__checkout">
              {{ 'cart.general.checkout' | t }}
            </button>

            {%- if additional_checkout_buttons and settings.cart_additional_buttons -%}
              <div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>
            {%- endif -%}
          </div>

          <div class="cart__item-row">
            <a href="{{ routes.root_url }}">{{ 'cart.general.continue_shopping' | t }}</a>
          </div>
        </div>
      </div>

    </form>
  {%- endif -%}
</div>


{% schema %}
{
  "name": "t:sections.main-cart.name"
}
{% endschema %}
<script>
(function() {

    document.addEventListener("DOMContentLoaded", initForm);
    document.addEventListener("shopify:section:load", initForm);

    function initForm(){

    var formElement = document.querySelector('#how-did-you-hear-about-us');
    var formError = document.querySelector('#how-did-you-hear-about-us--error');
    var otherFormElement = document.querySelector('#how-did-you-hear-about-us-other');
    var otherFormError = document.querySelector('#how-did-you-hear-about-us-other--error');
    var otherFormWrapper = document.querySelector('#otherFormWrapper');
 
        var otherFormElement2 = document.querySelector('#how-did-you-hear-about-us-other2');
    var otherFormError2 = document.querySelector('#how-did-you-hear-about-us-other--error2');
    var otherFormWrapper2 = document.querySelector('#otherFormWrapper2');
     
    var checkoutButtons = document.querySelectorAll('[name="checkout"], [name="goto_pp"], [name="goto_gc"]');

    function showOrHideForm(){
        if (formElement.value == 'afriendsandlovedit' ){
        otherFormWrapper.style.display = '';
        } else {
        otherFormWrapper.style.display = 'none';
        }
    }
       function showOrHideForm2(){
        if (formElement.value == 'OtherMagazine' ){
        otherFormWrapper2.style.display = '';
        } else {
        otherFormWrapper2.style.display = 'none';
        }
    }
    

    function checkFormElement(){
        if (formElement.value.length == 0){
        formElement.classList.add('error');
        formError.style.display = '';
        } else {
        if (formElement.classList.contains('error')){
            formElement.classList.remove('error');
            formError.style.display = 'none';
        }
        }
    }
      function checkFormElement2(){
        if (formElement.value.length == 0){
        formElement.classList.add('error');
        formError.style.display = '';
        } else {
        if (formElement.classList.contains('error')){
            formElement.classList.remove('error');
            formError.style.display = 'none';
        }
        }
    }

    function checkOtherFormElement(){
        if (otherFormElement.value.length == 0){
        otherFormElement.classList.add('error');
        otherFormError.style.display = '';
        } else {
        if (otherFormElement.classList.contains('error')){
            otherFormElement.classList.remove('error');
            otherFormError.style.display = 'none';
        }
        }
    }
       function checkOtherFormElement2(){
        if (otherFormElement2.value.length == 0){
        otherFormElement2.classList.add('error');
        otherFormError2.style.display = '';
        } else {
        if (otherFormElement2.classList.contains('error')){
            otherFormElement2.classList.remove('error');
            otherFormError2.style.display = 'none';
        }
        }
    }

    otherFormElement.addEventListener("input", function() {
        {% if settings.hau_form_validation %}
        checkOtherFormElement();
        {% endif %}
    });
  otherFormElement2.addEventListener("input", function() {
        {% if settings.hau_form_validation %}
        checkOtherFormElement2();
        {% endif %}
    });
    formElement.addEventListener("change", function() {
        showOrHideForm();
        {% if settings.hau_form_validation %}
        checkFormElement();
        {% endif %}
    });
       formElement.addEventListener("change", function() {
        showOrHideForm2();
        {% if settings.hau_form_validation %}
        checkFormElement();
        {% endif %}
    });

    checkoutButtons.forEach(function(element){
        element.addEventListener("click", function(evt) {

        {% if settings.hau_form_validation %}
        var validated = true;
        if (formElement.value.length == 0){
            checkFormElement();
            validated = false;
        }
        if (formElement.value == 'afriendsandlovedit'){
            if (otherFormElement.value.length == 0){
            checkOtherFormElement();
            validated = false;
            }
        }
        if (!validated) {
            evt.preventDefault();
            evt.stopPropagation();
        }
        {% endif %}
        });
    });
         checkoutButtons.forEach(function(element){
        element.addEventListener("click", function(evt) {

        {% if settings.hau_form_validation %}
        var validated = true;
        if (formElement.value.length == 0){
            checkFormElement();
            validated = false;
        }
        if (formElement.value == 'OtherMagazine'){
            if (otherFormElement2.value.length == 0){
            checkOtherFormElement2();
            validated = false;
            }
        }
        if (!validated) {
            evt.preventDefault();
            evt.stopPropagation();
        }
        {% endif %}
        });
    });

    }
})()
</script>{% comment %}<!-- ymq b2b done -->{% endcomment %}

Any help is much appreciated thanks!

How did you hear about us button not working anymore!

How did you hear about us button not working anymore!

Community Blog Articles