Line item properties - Recent UI change?

Shopify Discussion
,
1

We’re seeing what appears to be a recent change in Admin UI when viewing orders, specifically regarding the display of Line Item Properties from a bundle. Trying to figure out a workaround or solution…

For context: We use a lot of Bundles, and we also use a lot of Line Item Properties to spell out the contents of those bundles on Draft Orders (sometimes 15 to 20 line item properties, so they can be rather lengthy). Once the Draft Order is approved and converted to an Order, the Bundles are always exploded out to their child components on the Order, along with a “Part of: Bundle Name Here” note below each component. Which had always worked GREAT!

But as just of a few weeks ago, all of a sudden, the “Part of: Bundle Name Here” became “Part of: Bundle Name Here” PLUS a fully expanded-by-default list of all Line Item Properties that were on the original Bundle. So each component from that bundle is now showing all 15-20 lines of Properties from the original bundle, and when you might have 25 items in that bundle, scrolling to the bottom of the order takes FOREVER. You can manually collapse these properties line by line… Couldn’t they start out collapsed by default?

See screenshots to get a better idea of how it used to look before the change, vs how it looks after. Any thoughts / suggestions?

This post is half asking if anyone can think of a solution / half pointing out the downside of Shopify’s decision to make this change and hoping they’ll address it.

ShopifyUIChange-1
ShopifyUIChange-12559×1267 402 KB

ShopifyUIChange-2
ShopifyUIChange-22559×1267 452 KB

2

One (hopefully temporary) option to consider – add a bookmarklet in your browser to loop over those collapsibles and collapse them when the toolbar link is clicked.
At least it’d be only one click to go from “after” to “before” rather then clicking each manually.

I could create one but do not have this kind of orders is my test store…

4

Here’s a Tampermonkey script to auto-collapse the bundle’s line item properties on components, just in case anyone is as annoyed by this as we were.

// ==UserScript==
// @name         Shopify Admin - Auto-collapse "Part of" Bundle Details (no UI)
// @version      0.4
// @description  Auto-collapse expanded bundle detail sections on Shopify order pages (only those next to "Part of:"). No on-screen buttons.
// @match        https://admin.shopify.com/store/*/orders/*
// @match        https://*.myshopify.com/admin/orders/*
// @run-at       document-idle
// ==/UserScript==

(function () {
  "use strict";

  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

  function isPartOfRow(buttonEl) {
    const container = buttonEl.closest(".Polaris-InlineStack") || buttonEl.parentElement || buttonEl;
    const text = (container?.innerText || "").trim();
    return text.includes("Part of:");
  }

  function collapsePartOfOnly() {
    const expanded = Array.from(document.querySelectorAll('button[aria-label="Show less"]'));
    let n = 0;

    for (const btn of expanded) {
      if (!btn.className.includes("Polaris-Button")) continue;
      if (!isPartOfRow(btn)) continue;

      try {
        btn.click();
        n++;
      } catch (_) {}
    }

    if (n) console.log(`[Shopify Auto-collapse] Collapsed ${n} "Part of" sections`);
    return n;
  }

  async function boot() {
    // Run a few times to catch async rendering of line items
    for (let i = 0; i < 12; i++) {
      collapsePartOfOnly();
      await sleep(500);
    }

    // Watch for newly-rendered line items
    let debounce;
    const obs = new MutationObserver(() => {
      clearTimeout(debounce);
      debounce = setTimeout(() => collapsePartOfOnly(), 250);
    });

    obs.observe(document.body, { childList: true, subtree: true });
  }

  boot();
})();