[Support request] Can I make this “best seller” table with GPP + GBP?

[eran]

Hi,

Can I make this “best seller” table with GPP + GBP?

I add the link in the private message.

[Ying]

Hi there,

Do you mean dynamically pull the best sellers and their rating/title/link?

Yes, it’s possible but requires some coding.

[eran]

No, I mean how can I create it?

[Fernando]

Hi Eran,

Are you planning to pull data dynamically or create such a layout from scratch manually and statically?

[eran]

I want to build a “best product table” in the local pattern and then use it from there.

Like this: https://greenshiftwp.com/comparison-table-block/?fbclid=IwAR1R_X6Pi5yY_NTmpW1WI8O749xPCAIfNS7mpbO_90c7Gj-J-JFYob-LIO0

[Ying]

So you do NOT need to dynamically pull the data, got it!

In that case, you can try using a Grid block.

[eran]

How can I make the stars rating?

Plus, how should it look?

container>grid>headline>image>headline>headline>button ?

[David]

Hi there,

the URL to the image you shared, is it still live as i cannot get it to load ?

[eran]

Yes, it work for me.

I added a screen shot.

[David]

Ok i would:

1. Add a Grid Block with a single Column inside it.
2. Select the single column and
Set its Sizing -> Width to 25% ( as it will work for 4 columns ).
Whilst in the sizing, switch to Tablet and them Mobile views and set the % width for the column for those screen sizes.
Set its Height to 100%.
Set its Spacing -> Border -> 1px.

3. Inside that column Container you can build out the basic design.
3.1 First add Container Block inside. this is for the top color bar:
give it some Spacing -> padding about 5px
Set its Sizing -> Width to 100%
Set the Color -> Background color to whatever color and set the Text color to White.
Set its Typography -> Text Align: Center.

3.1.1 Now add a Headline Block inside for the text inside that block.

3.2 Now below the color bar add another Container Block,
Set its Spacing -> padding eg. 10px.
Set its Sizing -> Height to 100%
Set its Layout -> Display -> Flex, its flex direction to column and its align items to Center.

3.2 Stack inside that container your Image, Headline Blocks and Button block.

Tweak the styles until you’re happy.

Note that each GB block you can set its Spacing -> Bottom margins to reduce space between them.

When your happy, select the column container in its Toolbar select the + Duplicate option to add the other columns.

[eran]

Wow. Thank you David!!

Is there a way to add the stars rating and rate the products like on the website I mentioned?

[David]

It is possible, it does require a bit of custom work.

See here for a PHP Snippet that will create a shortcode you can use to display a Star Rating:

https://gist.github.com/diggeddy/ef3dc0315a73c0caad839c5348b89aa6#file-star-bar-shortcode

[eran]

So I put the code in functions.php and how do I use it in the post/page?

[David]

Yes, the code goes in your child theme functions.php.

And then to use it you add the shortcode to a headline block in the post editor.
Here shows you the shortcodes to use:

https://gist.github.com/diggeddy/ef3dc0315a73c0caad839c5348b89aa6?permalink_comment_id=3638014#gistcomment-3638014

[eran]

Does it have schema in it?

[Author]

Posts