Custom Cart Issue

[incork99]

Hi there,

I have set up ‘how did you hear about us?’ feedback and a tick box for gift order on my cart page. I was told I would find this information in the additional details section of my order. However, I don’t have the additional details button on any of my orders. Can anyone tell me if there is another way of finding the customer feedback or how to get this info added to my orders? I’m not the best at coding so if anyone can have a look at this and help me out I would much appreciate it.

Incorknito Designs - Handcrafted Cork Wood Jewellery

Thanks

[mpeterson39]

It likely depends on how those fields were added to your cart page.

If they were set up properly as cart attributes, the information should normally carry over to the order and appear in the admin (often under additional details or in the order timeline).

Looking at your cart page, I can see the fields, but when going to checkout the information doesn’t appear to follow through. That usually means the fields were added visually to the cart page, but aren’t actually being passed along with the order.

A couple things you could check:

• If you added them with theme code, make sure they’re set up as cart attributes
• If you used an app, the data might be stored inside the app instead of the Shopify order
• Try placing a test order and check the order timeline or notes in the admin

If you’re able to share how you added the fields (app or theme code) it will be much easier to point you in the right direction.

[OttyAI]

So the additional details section only shows up if the order actually has something in those fields. If customers are leaving them blank or the data isn’t saving properly, the section won’t appear. Can you test placing an order yourself and actually filling in both the dropdown and the checkbox to see if it shows up then?

[incork99]

Hi

Honestly I added them well over a year ago and I can’t remember how I went about doing it unfortunately. I know I added them to the theme code. I just tried placing a test order and selecting both those options and sadly no data is showing on the order so there must be something missing in the code. Are you able to help at all?

[incork99]

I just did a test order and sadly no data is showing on the order

[mpeterson39]

Yes, I can take a look. I sent you a DM

[OttyAI]

That points to the data not saving at all from the cart to the order, so you’ll want to check if those custom fields are properly mapped in your cart drawer code or if there’s a theme conflict breaking the transfer.

[Maximus3]

Probably won’t work because this </form> tag is in the wrong place. It’s closing the cart form before your cart attributes:

If you move that </form> to here, it should work:

Be careful which one you move. It needs to be this specific one.

[incork99]

Can’t seem to find this section, can I DM you?

[Maximus3]

It’s in main-cart.liquid or something similar. Just go to Edit Code and search “cart__footer” or “cart-gift-checkbox” and you should be able to find it.

[incork99]

@Maximus3

cart-gift-checkbox

I have done that but I think I may be unable to find it as someone else offered to have a look at it and I think they’ve changed the code but unfortunately what they did doesn’t seem to have worked.

[Maximus3]

Ok. No worries. If you have other people to help you, just tell them about this. If you want to figure it out on your own, it’s not that difficult. The code is already there, you just need to fix it.

If you go to Online Store → Theme, click the three dots, select Edit Code, the Code Editor will come up. What does it show when you use the search on the left side and you search for cart-gift-checkbox ? or </cart-items> or Please fill the text field below You can search for anything really. Here’s and example of something I searched in mine:

So, if I wanted to edit this on the cart page, it’s there in main-cart.liquid

[incork99]

Unfortunately my helper seems to have gone quiet! I think it must be within this part but I’m unsure what needs altering

[Maximus3]

ok so your code is in main-cart-items.liquid, and it has a closing tag.

Web page code is different now:

It looks like you or someone changed this. The code is now above the closing </form> tag in main-cart-items.liquid. Before, it wasn’t in this file. That </cart-items> tag was the end of that file and your code was in main-cart-footer.liquid with no tags.

Are you good now?

[Maximus3]

If you need help, Sidekick is a good tool to get it from. It’ll tell you what exactly is wrong with your code, the syntax and the placement, and anything else that needs to be fixed to get your checkbox abd stuff to be added as cart attributes.

[incork99]

Ah this was my original published theme before the other person began to help. They then wanted me to publish the new theme that they had altered the code for but it didn’t solve the issue so I went back to my original. Therefore, sadly the issue is still unresolved

[Maximus3]

Ok. And this has never worked, correct?

I believe you have an ajax cart and you’re using a traditional form method to push attributes, while ajax need some additional javascript.

[PaulNewton]

Looks like this may be fixed as I see the inputs are now in the form elements hierarchy and pass in the forms network request.

For future troubleshooters give the custom inputs a form attribute whose value is the id of the cart form.
i.e. if the cart form is <form id="cart"... then the input is: <input name="custom" type="text" form="cart">

[Maximus3]

Studio theme it looks like. I would personally delete all of that work, and start over. I just asked Sidekick to create some code for a custom liquid section.

<div class="cart-custom-fields" style="margin: 2rem auto; padding: 1.5rem; background: #f9f9f9; border-radius: 8px; max-width: 50%;">
  <h3 style="margin-top: 0; margin-bottom: 1.5rem; font-size: 1.1rem;">Additional Information</h3>
  
  <div class="field" style="margin-bottom: 1.5rem;">
    <label for="cart-referral-source" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">
      How did you hear about us?
    </label>
    <select 
      id="cart-referral-source" 
      name="attributes[referral_source]"
      style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;"
    >
      <option value="">Select an option</option>
      <option value="Social Media" {% if cart.attributes.referral_source == "Social Media" %}selected{% endif %}>Social Media</option>
      <option value="Search Engine" {% if cart.attributes.referral_source == "Search Engine" %}selected{% endif %}>Search Engine</option>
      <option value="Friend/Family" {% if cart.attributes.referral_source == "Friend/Family" %}selected{% endif %}>Friend/Family</option>
      <option value="Advertisement" {% if cart.attributes.referral_source == "Advertisement" %}selected{% endif %}>Advertisement</option>
      <option value="Other" {% if cart.attributes.referral_source == "Other" %}selected{% endif %}>Other</option>
    </select>
  </div>

  <div class="field">
    <label for="cart-is-gift" style="display: flex; align-items: center; cursor: pointer;">
      <input 
        type="checkbox" 
        id="cart-is-gift" 
        name="attributes[is_gift]"
        value="Yes"
        {% if cart.attributes.is_gift == "Yes" %}checked{% endif %}
        style="margin-right: 0.5rem; width: 1.25rem; height: 1.25rem; cursor: pointer;"
      >
      <span style="font-weight: 500;">Is this a gift?</span>
    </label>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const referralSelect = document.getElementById('cart-referral-source');
    const giftCheckbox = document.getElementById('cart-is-gift');
    
    function updateCartAttribute(key, value) {
      fetch('/cart/update.js', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          attributes: {
            [key]: value
          }
        })
      })
      .then(response => response.json())
      .catch(error => console.error('Error updating cart:', error));
    }
    
    if (referralSelect) {
      referralSelect.addEventListener('change', function() {
        updateCartAttribute('referral_source', this.value);
      });
    }
    
    if (giftCheckbox) {
      giftCheckbox.addEventListener('change', function() {
        updateCartAttribute('is_gift', this.checked ? 'Yes' : '');
      });
    }
  });
</script>

I know… No one likes Sidekick. But really, if you are persistent, it can do quite a bit.

[incork99]

Thank you for all your help, I persisted with Sidekick for many hours and even that struggled to find the issue but I believe it is now all sorted