Add automatic Cart Attributes

[elektro-hub]

Hi All,
I have following code in my cart wich was working fine with the normal shopify form:

    <div class="cart-delivery-information">
     <input type="text" name="attributes[Lieferzeit]" style="display:none;" form="cart-form" value="{{ delivery_message }}"><p class="card-note_special">{{ delivery_message }}</p>
    </div> 

I did change it to work with the liquid ajax cart but now its not working at all:

    <div class="cart-delivery-information">
     <input data-ajax-cart-property-input type="text" name="attributes[Lieferzeit]" style="display:none;" form="my-ajax-cart-form" value="{{ delivery_message }}"><p class="card-note_special">{{ delivery_message }}</p>
    </div>

delivery_message is the the delivery time for the order wich is generated with liquid.
The customer is not seeing the input text box, only the cart note.

I think the problem is that the user dont update manually this text thats why the ajax cart is not putting them into the order.
Can i somehow trigger the change on load to make it work again?

[EvgeniyMukhamedjanov]

Hi!
I noticed you changed form="cart-form" to form="my-ajax-cart-form".
Did you also change the cart form id? If not, then this attribute should remain as before: form="cart-form".

Another question - If this field is completely hidden from a user, then maybe you don't need to add the data-ajax-cart-property-input attribute there - as you don't need to have any ajax-functionality for this field.

[elektro-hub]

Test store

Only the main cart was changed so far.

[EvgeniyMukhamedjanov]

Yeah, I see the issue, I'll replicate the same on my test store to find why it happens.
Meanwhile can you do one test for me pls, can you:

1. remove the liquid-ajax-cart file from the theme
2. dont not change anything on the cart page, all the IDs should remain the same as now (my-ajax-cart-form)
3. test if the cart page works as expected (pulls the attributes[Lieferzeit] value )
   I just want to make sure that it happens because of the liquid-ajax-cart js-file rather than because of the html id relation/layout.

[elektro-hub]

Okay. I did try it and its also not working even if the js file is not in the theme.
But i dont understand why...

[EvgeniyMukhamedjanov]

I see, so it is something about html layout, not the liquid-ajax-cart.
I'll still check why it is happening and let you know.
Just as temporary solution you can trigger the change manually as you wanted to:

function triggerPropChange() {
    const input = document.querySelector('[name="attributes[Lieferzeit]"][data-ajax-cart-property-input]');
    if (!input) return;
    input.dispatchEvent(new Event("change", { bubbles: true }));
}

if (window.liquidAjaxCart?.init) {
    // if Liquid Ajax Cart is already initialized
    triggerPropChange();
} else {
    // wait for Liquid Ajax Cart to be initialized
    document.addEventListener("liquid-ajax-cart:init", triggerPropChange);
}

Just make sure that the input has the data-ajax-cart-property-input attribute.

[elektro-hub]

Thanks. This helps me allot 🥇 👍

[EvgeniyMukhamedjanov]

@elektro-hub
Did the code work for you? Do you want to go with the code or you wanna fix the html layout?

[elektro-hub]

@EvgeniyMukhamedjanov i would like to fix the code of course. Your snippet didnt make it work :(
I need to find where the problem is if its not in the JS and not in the cart itself.
And why is working on the normal cart.

[EvgeniyMukhamedjanov]

@elektro-hub I noticed you marked the question as answered. The script eventually solved the issue? :-)