Switch between producer and product list

[kirstenalarsen]

I go to Products list, click on a Product and go into the Producer - yay! But when I try to go back, I just get a blank screen . .

[kirstenalarsen]

Should we open the producer page from click in product page in a new tab? Then we don't need to deal with back, and also the inevitable next annoying thing of wanting to try and preserve the filters in the Product page when they open one up . .

[JbPasquier]

Fixed.

the inevitable next annoying thing of wanting to try and preserve the filters in the Product page when they open one up

That's the default behaviour I've made for both listing pages. :-)

[kirstenalarsen]

Nice! still not working to go back from a producer page to the products search though - I still get blank screen

The Producer listing -> Producer and back works beautifully :)

[JbPasquier]

Hum, could it be that you had a cached version? I'm testing it again and it works on both way.

Edit: Found. Chromium browser-based issue. Fixed. :-)

[kirstenalarsen]

Awesome, working a dream

[mariocarabotta]

moving this back to To do since it includes a ui component and not just browser behaviours

[JbPasquier]

This is outside of the scope of the component.

---

From a technical point of view, you can reach the products list sending an event through the window. Our router will listen to it and do its magic.

window.dispatchEvent(
  new CustomEvent('requestNavigation', {
    detail: {
      route: "regenerative-produce-portal-products-list"
    }
  })
)

You can compact this in html in a:
href="javascript:window.dispatchEvent(new CustomEvent('requestNavigation', {detail: {route: 'regenerative-produce-portal-products-list'}}))"

Or a
onclick="window.dispatchEvent(new CustomEvent('requestNavigation', {detail: {route: 'regenerative-produce-portal-products-list'}}))"

Notice that if you replaced the uniq="regenerative-produce-portal" in the component instanciation, you must also replace it on the event detail.route.

[mariocarabotta]

thanks @JbPasquier, I understand it's outside of your scope. I'll keep it open so that we can refer to this info from our side. Thanks!

[mariocarabotta]

@mkllnk the radio switch is now available here for you to optimise the page and make it actually work. thanks 🙏🏼

https://regenerative.org.au/directory/

[mkllnk]

This is mostly working now. I just raised one issue on Slack:

At some point we were planning to put the component on the homepage but we are now having it on https://regenerative.org.au/directory/. Routes seem to work with one exception. When we trigger the navigation event directory-producers-list then the URL isn't going back to /directory but just to the homepage /. The component still loads the producers correctly. It's just when you then use the browser back button to go back that it sometimes loads the homepage instead.

[JbPasquier]

Adding a route-prefix="directory" to the component should fix this issue.

[mkllnk]

Cool, that works. Is there a way to trigger a browser history event as well? When I navigate in the component and use the back button then it works great but if I trigger the products event from JS then it doesn't add to the browser history.

[JbPasquier]

It should, code-wise it's the exact same event. Maybe it's something with the onclick, could be that the browser's bfcache handle it differently. I've raised the issue within Startin'blox.

[mariocarabotta]

I can see the title and the two tabs at the top of the producer page. they should not be there.

not sure if related, and not sure if it's possible, but eventually I would like to be able to style the producer details WP page differently (nice to have at this point really). if there is a way for me to target a producer details page container, or have a dedicated WP template, I could add some extra styling to it, see below the extra rainbow wavy background of what I would like to achieve. not a priority for now, more of an FYI if loosely related to the above bug

[mariocarabotta]

let's start by automatically scrolling to the producer details when loaded, and then have a separate issue for hiding the page title and the switch

@JbPasquier would you be able to take care of this?

[JbPasquier]

I made a little something for you, @mkllnk can you replace the whole wp-block-group above the component with this:

<solid-ofn-rpp-navigator uniq="directory"></solid-ofn-rpp-navigator>

It'll handle the behaviour you want and provide your code when needed. The code I included is a combination of both the .wp-block-group and the .directories. It also handle the default state for the hidden input by itself.

You still have the hand on the CSS. Let me know if you need to adapt some parts.

It'll also fix the issue with the browser's bfcache.

[mkllnk]

Hi @JbPasquier, that component looks promising. I added it to https://regenerative.org.au/test/.

• It looks like it's duplicating the title which is already in the Wordpress theme. So we need to remove our own title from that template. Otherwise the component can't hide it automatically. @mariocarabotta, this is how you want it to work, right?
• When I click on Products it navigates there, but it adds two events to the history. First it goes to the products and then it scrolls up. If I then use the back-button of the browser, I'm still on the products list, just further down.
• I'm not sure if we want the scrolling to the top. @mariocarabotta, what do you think?
• The component disappears on producer details pages, that's correct. :white_check_mark:

[mariocarabotta]

• fixed the double title and padding, it's doing what's expected to do!
• not sure with the scroll to top. I think everything is behaving pretty well, except a bit of position jumping around in two cases: when moving between producer and product tab, and when moving to the producer details. if those transitions could be adjusted, that would be great

apart from those small transition, from my side it looks like everything is functioning as it should for this switch. nice work!

[mkllnk]

I still have a problem with the browser navigation. Using the back-button of the browser doesn't always take me back. Sometimes it just scrolls and sometimes I can't go back at all, it automatically goes forward again.

[mariocarabotta]

this bug might also be related.

[mariocarabotta]

I'm going to close this one for now. it's looking very good already, and the small issues we are encountering can be addressed later.

nice work!