skeleton theme cart issue - hanging # in URL causing cart to not open

[znwhite]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2023.7.9

What version of Remix are you using?

1.19.1

Steps to Reproduce

1. Using the CLI command npm create @shopify/hydrogen@latest, install a Hydrogen storefront locally, selecting "include core functionalities", which will cause the "skeleton" theme to be used. Connect the local storefront to a Shopify store that has products, and run npm run dev.
2. Go to localhost:3000, and visit the page for a product, and click "Add to cart." Then exit out of the cart, clicking on the x icon in the top right of the cart. You should still be on the same product page.
3. Click "Add to cart" a second time, which should open the cart and show that you have a quantity of 2 now. However, the cart will now not open, because of a hanging # left in the URL.

In other words, the URL will now say ##cart-aside instead of #cart-aside, which will fail to trigger the cart. Further clicks of "Add to cart" will just keep appending "#cart-aside" to the URL endlessly, increasing the quantity of the product without actually opening the cart.

Expected Behavior

Clicking "Add to cart" for a product, then closing the cart using the x in the top right corner, then clicking "Add to cart" again, should open the cart again and show a quantity of 2.

Actual Behavior

The cart does not open.

[znwhite]

I think the issue might be that you are storing the cart-open in URL as /#cart-aside when the Remix docs seem to indicate that it should be stored as /?cart=open

I don't think you can even pick up the former with useSearchParams which is what they show in Remix docs when recommending storing things in URL state.

For example, you should probably be getting cart open state like this:

import {useSearchParams} from '@remix-run/react';

export default function App(){
    const [searchParams, setSearchParams] = useSearchParams();
    const cartOpen = searchParams.get('cart') === 'open';

    return (
      ....
      <Cart open={cartOpen} />
      ....
    )
    
}

This way you can use setSearchParams() to gracefully update the cart URL state instead of history.go()

Rough idea:

    const [searchParams, setSearchParams] = useSearchParams();
    const cartOpen = searchParams.get('cart') === 'open';

....
....

       <button
          onClick={() => {
            if (cartOpen) {
              const params = new URLSearchParams(searchParams);
              params.delete('cart');
              setSearchParams(params);
            } else {
              const params = new URLSearchParams(searchParams);
              params.set('cart', 'open');
              setSearchParams(params);
            }
          }}
        >
          TOGGLE CART
        </button>

Either way I think I'm gonna use Zustand for UI state - not sure I'm ready for all the URL State hype just yet 😅