Jump to content

Data tables and menu block solutions

Recommended Posts

Hey!

I've had a terrible time trying to get data tables of prices to work without using markup blocks.

I don't want to use markup because I want the data to be in my SEO and searchable on the site. I also need the client's staff to be able to edit the tables easily and all that markup frightens them.

I didn't want to use any third party thing such as embedded google sheets etc.

I needed it to be beautiful. Obviously.

I'm frustrated by the lack of help from the once amazing squarespace support as all I get is canned answers and links to help articles I have already read.

SO! After much thrashing and raging I FINALLY worked out a solution where I use the menu block to layout the data price list in an intuitive, searchable, responsive way. Have a look below:

https://kate-burns-9zlf.squarespace.com/squarespace-table-issue

Yes, it does require rejigging your data, yes, it does require you thinking in a different way about presenting a lot of information, no it is not good for all data tables. BUT! I think it's pretty good and keeps inside the world of squarespace.

I thought it might help some people so I'm posting here.

Thanks!

Link to comment
  • Replies 5
  • Views 6.8k
  • Created
  • Last Reply

I agree. The menu block is very flexible and until Squarespace brings us a Table Block, it's one of the best options available. I do think that the "tab" labels along the top aren't very intuitive but that can be improved with CSS and doesn't adversely affect the site editor's experience.

alt text

screen-shot-2017-05-16-at-125423.png.737bf35f4e4385797eeffe4d3572f37b.png

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

🤒 I'm currently in hospital and may not respond quickly to your posts.

Link to comment

LOL. I play around with the menu for different uses as it's quite a versatile little block. For the labels, I just added some CSS (Design > Custom CSS) that removed the underline and added a dark background to the active label. I then added a lighter background to the other labels:


.menu-block .menu-selector label.menu-select-labels--active {
   text-decoration: none;
   background: black;
   color: white;
}
.menu-block .menu-selector label {
   background: #efefef;
}

I hope that helps.Paul

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

🤒 I'm currently in hospital and may not respond quickly to your posts.

Link to comment
  • 7 months later...

Hi @Paul2009 ! I was just checking the example you posted and I was wondering how you managed to put only the name of the product and the price, because every time I try to delete the description, the price is automatically placed below the name of the product. I hope you can help me. Thanks!

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.