Prevent <details> from closing on cart update

[thagxt]

How do you prevent a <details> opened by the user from closing when the cart is updated?

I am using a <details> element to include cart notes. The problem arises when a user interacts with this section. Specifically, if a user opens the <details> element, enters text into a <textarea>, and then clicks outside the <textarea>, the cart updates, which causes the <details> element to close unexpectedly.

How do you keep the details open?

I've tried <details data-ajax-cart-static-element> but that doesn't work properly since now the textarea is not updated at all.

[EvgeniyMukhamedjanov]

Hi @thagxt ,
Usually we use a simple DIVs (with aria-attributes if you need to support screen-readers) instead of details and when a user clicks on it, we toggle a CSS class on an element somewhere outside of the data-ajax-cart-section element so that the CSS class doesn't disappear when the cart updates.

If you still want to use the details tag, I'll send a short js-script for Liquid Ajax Cart a bit later that will keep the open/close state of the details element.

[thagxt]

Thank you for the suggestion! Yes, please, that would help. I'd like to stick to using the <details> element as I'm currently using it "everywhere" inside the project, and I'd prefer not to mix things. Your assistance with the short js script would be greatly appreciated. Thanks again!

[EvgeniyMukhamedjanov]

Add this code somewhere after import liquid-ajax-cart:

const cartDetailsOpen = {};
function cartDetailsInit() {
  document.querySelectorAll('[data-ajax-cart-section] [data-ajax-cart-details]').forEach($details => {
    const key = $details.getAttribute('data-ajax-cart-details');
    if (!key) return;
    cartDetailsOpen[key] = $details.hasAttribute('open');
    $details.addEventListener('toggle', event => {
      cartDetailsOpen[key] = event.target.open;
    });
  });
}
cartDetailsInit();

document.addEventListener('liquid-ajax-cart:request-end', event => {
  document.querySelectorAll('[data-ajax-cart-section] [data-ajax-cart-details]').forEach($details => {
    const key = $details.getAttribute('data-ajax-cart-details');
    if (!key) return;
    $details.open = cartDetailsOpen[key];
  });
  cartDetailsInit();
});

Then add data-ajax-cart-details attribute to each details tag you have within the data-ajax-cart-section container, and add unique identifier to each data-ajax-cart-details:

<details data-ajax-cart-details="unique-identifier-1">
  <summary>Title</summary>
  Content
</details>

Let me know if that works.

[thagxt]

Thank you very much @EvgeniyMukhamedjanov, that works perfectly! :)

This would be great to have as a function within the core of 'liquid-ajax-cart', not just for details but also for other HTML elements in general.

[EvgeniyMukhamedjanov]

Sound good!
I've just turned the issue into discussions.
I'll think on more general case when this feature might be useful before adding this to the core :-)