How to use a grid instead of a list for the results

  • Resolved cutu234

    (@cutu234)


    9 hours, 22 minutes ago

    Hi,

    we use some customization for the results list. This is very easy via the “wpsl_listing_template” filter. Here are the first lines of the function:

    add_filter('wpsl_listing_template', 'custom_listing_template');
function custom_listing_template()
{
    global $wpsl, $wpsl_settings;
    $listing_template = '<li data-store-id="<%= id %>">' . "\r\n";
    $listing_template .= "\t\t" . '<div class="wpsl-store-location">' . "\r\n";
    $listing_template .= "\t\t\t\t" . '<p><%= thumb %></p>' . "\r\n";
    $listing_template .= "\t\t\t\t" . '<p>' . "\r\n";

    This works great. However, we would prefer to have the results in a grid and not as a list. While we can customize the list items via this function, the list tag itself (UL) is created elsewhere. Is it possible to remove the UL tag, so that we could use DIVs instead of LIs in the function? This would give us much more freedom for the layout.

    Thank you very much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter cutu234

    (@cutu234)

    While my question is still valid, I’ve just found a pretty good solution that works without any further customization. So, ignore my question, if it is outside the scope of this forum. If not, I would be more than happy about an answer.

    This CSS will do the trick:

    display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;

    Hi!

    The way to access these <ul> you mention is via a custom store locator template. You would have to copy either the default template or the one with the search results below the map, do your modifications there and save it in the path that the plugin is expecting to find it according to the first link.

    The part in the template where the search results are injected is:

    $output .= "\t\t" . '<div id="wpsl-stores" '. $autoload_class .'>' . "\r\n";
$output .= "\t\t\t" . '<ul></ul>' . "\r\n";
$output .= "\t\t" . '</div>' . "\r\n";

    I hope that helps.
    Regards,

    Oh, I think our replies collided, I just saw your CSS solution. Nevermind, you can use either of the two choices then!

    Thread Starter cutu234

    (@cutu234)

    That’s great to know. Thank you very much for the super awesome support. Your solution might come in handy.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.