How did you hear about us drop down not working

[quiztrail]

Hi there,

I was previously on the Debut theme and had this ‘How did you hear about us?’ drop down at my checkout which worked perfectly. I’ve since changed themes and the information no longer feeds to my order pages. How can I make the information show on the ‘Notes’ section of the customers order page like where I can see there gift message? Example images below.

Thank you.

Quiz Trail

[tim_1]

This is not a Checkout, it’s a cart page. Just to call thing right.

The problem is that in Debut most of the page was inside <form>

Newer themes do not do this – <form> only encloses the actual product list and other form-related elements use the form= property on them to connect them to cart form.

SO, you need to edit your added code to use the parameter:

<select 
  id="how-did-you-hear-about-us" 
  name="attributes[how-did-you-hear-about-us]" 
  form="cart"
>

[mastroke]

go to main-cart-footer.liquid file and add below code

<textarea
               name="note"
               id="Cart-note"
               form="cart"
               style="display:none;"
             ></textarea>

             <div class="cart-hear-about-us">
               <label for="how-did-you-hear-about-us">
                 How did you hear about us?
               </label>

               <select
                 id="how-did-you-hear-about-us"
                 class="hear-about-select"
               >
                 <option value="">Please Select</option>
                 <option value="Instagram">Instagram</option>
                 <option value="Facebook">Facebook</option>
                 <option value="Google">Google</option>
                 <option value="TikTok">TikTok</option>
                 <option value="Friend/Family">Friend/Family</option>
               </select>
             </div>

also used this JAVASCRIPT request:

<script>
document.addEventListener('DOMContentLoaded', function () {

const dropdown = document.querySelector('.hear-about-select');
const noteField = document.querySelector('#Cart-note');

if (!dropdown || !noteField) return;

dropdown.addEventListener('change', function () {

noteField.value = this.value
? 'How did you hear about us: ' + this.value
: '';

});

});
</script>

you can refer below screenshot as well

[topnewyork]

Hi @quiztrail,
Go to online store > edit code > section folder > main-cart-items.liquid paste the code in th bottum of the main-cart-items.liquid file

<div class="page-width" style="margin-top: 20px; margin-bottom: 20px;">

  <div style="background: #f9f9f9; padding: 20px; border-radius: 5px; border: 1px solid #ddd; max-width: 400px;">

    <label class="form__label" for="how-did-you-hear" style="display: block; margin-bottom: 10px; font-weight: bold; font-size: 1.4rem;">How did you hear about us?</label>

    <select id="how-did-you-hear" name="attributes[How did you hear about us?]" form="cart" class="select__select field__input" style="width: 100%; height: 45px; border: 1px solid #ccc;">

      <option value="">Select an option</option>

      <option value="Google">Google</option>

      <option value="Instagram">Instagram</option>

      <option value="Facebook">Facebook</option>

      <option value="TikTok">TikTok</option>

      <option value="Friend">Friend / Word of mouth</option>

      <option value="Other">Other</option>

    </select>

  </div>

</div> 

Save

[quiztrail]

Hi all - where do I put this code as I do not have ‘main-cart-footer.liquid’ file or ‘main-cart-items.liquid’ file?

I have the dropdown on my Cart page, but it is not sending the information to my Customer Order page?

Thank you.

[tim_1]

You should have sections/main-cart.liquid start there.
If not in this file, look at the snippets which are rendered in this section.

But you should know the exact location – you’ve already added the drop-down!

You need to find those custom drop-downs you’ve added and add form=cart property to the select element as I’ve suggested above.

Just this is enough.

Should become: