UX design update in responsive settings with a looper provider and consumer

Support
#1

Hi guys,

I would like some advice on a site we collaborated on 5-6 years ago. https://bricklaneespresso.com/ As you will see, it is for a restaurant which has 2 menus:

These are presented in a responsive manner:

  • one for XS-SM

  • one for M-XL

Now my client can navigate changes for both on the M-XL styling, but they never realised we crafted an XS-SM approach. Both of which have been admired by a growing audience to the point where they have been awarded as ‘Best Business in the local government area of Kuringai’ in Sydney. This is a huge honour for us all.

However, as you have seen across many projects, editors do not always understand the nuances of crafted code. Is it possible to build a looper provider and consumer model so we can deploy one set of content to both designs?

#3

Hello @philysgdy,

Thank you for the inquiry.

We tried logging in to the site using the provided credentials, but the username doesn’t exist or is invalid. Please provide a valid account in the secure note. Regarding the layout, have you tried moving the content to the same section and applying the looper provider to it, so they share the same data?

We’ll wait for the login credentials, then check the site again.

Best regards,

#4

Hey Ismael
Thank you for your response.
I am happy to test that idea but I will wait for you to have a look under the hood. I have a tab set up as you would have seen for XS-SM using coded content.
I have classic sections set up for M-XL.
I would appreciate some guidance to setting up the looper provider to achieve both as I thinking the same styling can now be applied to XS-SM.

Thanks in advance
Phil

#5

Hi guys, is there any more information you need from me to help me define a solution?

I have just looked over Josh‘s new YouTube on dynamic content API. Am I right thinking this approach may well suit my problem.? I look forward to your response. Thanks in advance.

Phil.

#6

Hey @philysgdy,

Firstly, using the Hide During Breakpoints feature to hide or show text contents is not recommended for SEO purposes and content maintainability. We only use Hide During Breakpoints for design elements only or not critical elements.

The correct way for content elements is to use the elements’ responsive features.

There is no Looper solution here because the real solution is proper design and building of the section.

If you stay with your current setup, you need to use ACF Pro so the editors will only enter the text in ACF and it will output the same contents both for your desktop and mobile elements.

You can get started learning the setup here: https://youtu.be/7w7nD6W9tlk?si=PG2qWgchpLy7ldHX

#7

Hey Christian,

Unfortunately, I have been doing that consistently across a few builds. This was possibly the start of it. In this case, I have cascading elements in M-XL and in XS-SM, 2 tabs with the same text in a panel. Should I abandon the tab approach and use the elements’ responsive features to expand that to cover all viewpoints?

#8

Hello Phil,

Judging on the current content for the Food Menu and Drinks Menu page, you have duplicate text contents. It will have an impact on the SEO side of the page. Editing a menu would like be an issue because your editor will probably edit the one for large screens only but never realize that the contents on smaller screens also need to be edited.

Here’s what I think you should need:
1.) Create a custom post type for your menu.
2.) Add a Menu Category and Sub categories
3.) You may also add other menu details like pricing, photos, etc

Once you have that kind of structure, it will just be easier to edit each menu item details. Your editor will not have to edit the page itself.

Lastly, you should be able to display the Menu items using the Loopers whether you are using M-XL/XS-SM set up or do the suggested ONE layout with responsive features.

Alternative, you can use Looper Provider JSON. See the secure note below for the demo.

Cheers.

#9

Hey Rue
Thanks as always. I never stop learning. I appreciate and undesatnd the approach. I will follow through with you JSON.
That looks beautiful.

cheers

Phil

#10

You’re welcome, Phil.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.