Surecart Tabbed Customer Dashboard

While working on Ticket Manager Pro for SureCart I have been looking at ways to make the dashboard experience as easy as possible for users and have added a feature to bring back this now hidden option, which I use a lot in my surecard sites.

Firstly, you can read a little about why this was hidden on wordpress.org, but for this very quick write-up, I will just let you know it was because the support tickets were raised because of misunderstandings or misuse of the block itself.

Getting the block back is simple, and Adam supplied the code to do so. This is the first snippet we will be adding to our snippets programme or our functions.php

<?php
add_filter(
 'block_type_metadata',
 function( $metadata ) {
  if ( 'surecart/customer-dashboard' == $metadata['name'] ) {
   $metadata['supports']['inserter'] = true;
  }
  return $metadata;
 }
);

This will now give you a new option in the Guttenberg editor, which looks like the icon below, and this is what we will be using

This allows us to build an alternative dashboard page for SureCart, and that is what we have done in the example below. In my example, this allows us to view Ticket Manager Pro Tickets in our dashboard in their own dedicated tab.

The good thing about this is it is all built using Guttenberg, which means all your blocks and options work, including that fantastic but often forgotten WordPress function of shortcodes in the above block. We have added the native SureCart Customer Invoice block below a shortcode box to display the ticket manager pro download block

The default icons for the tag were a bit limited for me, so by the power of CSS ,I have swapped it out for an uploaded SVG fil,e and the CSS code for that is below

/* Target the sc-icon inside the tickets tab via its href */
.page-id-163 sc-tab[href*="?tab=tickets"] sc-icon[slot="prefix"] {
  /* Remove the existing icon display */
  color: transparent;
  /* Apply your custom SVG as a background image */
  background-image: url('https://yourwebsite.com/wp-content/uploads/check-ticket-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 18px;
  height: 18px;
}

/* In case the sc-icon renders an inline SVG, hide it */
.page-id-163 sc-tab[href*="/?tab=tickets"] sc-icon[slot="prefix"] > svg {
  display: none;
}

In the above snippet it’s important to note the following items

• .page-id-163 This limits the code to run only on this page You can remove this if you are using a pattern or don’t mind that the CSS will load on every page
• ?tab=tickets This is telling it what tab to target and swap out the SVG

With the above CSS targeting each individual tab, you could have as many as you need with individual icons for each, and you can add any Gutenberg content you need to the tabs.

The below video shows you this all in action and how I have created the ticket page