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

  • Resolved cutu234

    (@cutu234)


    3 months, 3 weeks 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 8 replies - 1 through 8 (of 8 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.

    Thread Starter cutu234

    (@cutu234)

    For test purposes I tried a modified template file, but it’s not quite working. I created a custom template like described in your excellent documentation, and activcated it in the settings. I copied the store-listings-below.php and made some minor changes for testing. Unfortunately, the frontend switched back to the default layout. Obviously, the custom template is completely ignored. The shortcodes in plain and simple [wpsl]. Could you point me in the right direction how to troubleshoot it?

    Thank you very much!

    Hi again,

    When using the wpsl_templates filter in your functions.php file, what is the path you are using?

    The example uses get_stylesheet_directory() . '/' . 'wpsl-templates/custom.php', which refers to the current active theme, and inside the theme, the folder wpsl-templates. I understand your custom template is located there, right?

    • This reply was modified 3 months, 2 weeks ago by farroyo.
    Thread Starter cutu234

    (@cutu234)

    I apologize for being a complete idiot. The folder name had an empty space at the end. It totally works. Sorry for wasting your time. Very appreciated! ??

    Hi again,

    Please, no need to apologize!!! I’m glad you figured that out, don’t hesitate getting back if you need more help in the future.

    Best regards,

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