View All URLs Configuration

Configure the destination users see when they expand beyond the initial results.

Overview

The "View All Results" URL appears in search interfaces to direct users to a comprehensive results page on your website. This URL can be configured to automatically include the user's search query, providing a seamless experience.

✨ Key Benefits

• Seamless UX: Users see their search preserved on the results page
• Flexible Integration: Works with any URL structure
• SEO Friendly: Proper URL parameters for search indexing
• Automatic Encoding: Special characters are safely encoded

The {query} Placeholder

The {query} placeholder is automatically replaced with the user's search term. This allows you to create dynamic URLs that work with any search query.

How It Works

1. User Search: User enters "wireless headphones"
2. Configuration: Your URL is set to https://store.com/search?q={query}
3. URL Generation: System creates https://store.com/search?q=wireless%20headphones
4. User Click: Clicking "View All" takes them to the complete results page

Automatic URL Encoding

Special characters in search terms are automatically URL-encoded to ensure valid URLs:

Encoding Examples

Original Query: "wireless bluetooth headphones"
Encoded Result: "wireless%20bluetooth%20headphones"

Original Query: "gaming mouse (RGB)"
Encoded Result: "gaming%20mouse%20%28RGB%29"

Original Query: "search-term/special&chars"
Encoded Result: "search-term%2Fspecial%26chars"}

URL Configuration Examples

Here are common URL patterns you can use with the {query} placeholder:

Query Parameter URLs

Standard Search Parameter

https://example.com/search?q={query}

Different Parameter Name

https://shop.com/products?term={query}

Multiple Parameters

https://store.com/search?q={query}&category=all

Path-based URLs

Simple Path Structure

https://example.com/search/{query}

Category-based Path

https://store.com/products/search/{query}

Hash-based URLs (SPA)

React Router Style

https://app.example.com/#/search?query={query}

Vue Router Style

https://spa.example.com/#/search/{query}

Platform-Specific Examples

🛒 Shopify

Shopify Search URL

https://your-store.myshopify.com/search?q={query}

🌿 WooCommerce

WooCommerce Search URL

https://your-site.com/?s={query}&post_type=product

💻 WordPress

WordPress Search URL

https://your-site.com/?s={query}

🛍️ Magento

Magento Search URL

https://your-store.com/catalogsearch/result/?q={query}

URL Validation Rules

View All URLs must follow these validation rules to ensure proper functionality:

✅ Valid Examples

• https://example.com/search?q={query} - Standard parameter
• https://example.com - No placeholder (disables functionality)
• https://app.example.com/#/search/query} - Hash-based route
• https://store.com/products?term={query}&page=1 - Multiple parameters

❌ Invalid Examples

• https://example.com/search?q={query}&term={query} - Multiple placeholders
• not-a-url - Invalid URL format
• https://example.com/search?q=quesry - Typos in placeholder
• https://example.com/search?q={query} - Extra spaces or characters

Configuration Steps

Step 1: Navigate to Site Settings

Go to your site configuration in the qwik.select Studio dashboard.
Step 2: Find the View All URL Field

Located under "Search Configuration" or "Display Settings" for your site.
Step 3: Enter Your URL

Enter your URL with or without the {query} placeholder.
Example Configuration
1
```
https://mystore.com/search?q={query}
```
Step 4: Test the Configuration

Perform a search and click "View All Results" to verify the URL works correctly.

Technical Implementation

Understanding how the URL processing works can help with debugging and custom implementations:

URL Processing Function (Example)

// JavaScript example of URL processing
function processViewAllUrl(url, query) {
    if (!url) return url;
    
    // URL encode the query for safety
    const encodedQuery = encodeURIComponent(query);
    
    // Replace the {query} placeholder
    return url.replace(/{query}/g, encodedQuery);
}

// Validation function
function validateViewAllUrl(url) {
    if (!url) return true; // Empty URLs are valid (disables feature)
    
    try {
        new URL(url); // Check if it's a valid URL
        
        // Count {query} placeholders
        const queryPlaceholderCount = (url.match(/{query}/g) || []).length;
        
        // Allow 0 or 1 placeholder only
        return queryPlaceholderCount <= 1;
    } catch {
        return false; // Invalid URL format
    }
}

// Usage example
const configUrl = "https://store.com/search?q={query}";
const userQuery = "wireless bluetooth headphones";
const finalUrl = processViewAllUrl(configUrl, userQuery);
// Result: "https://store.com/search?q=wireless%20bluetooth%20headphones"}

Troubleshooting

⚠️ URL Not Working

Verify the URL is properly formatted and accessible. Test the URL manually with a sample query to ensure your website handles it correctly.

⚠️ Special Character Issues

If special characters aren't working, check if your server properly decodes URL parameters. The qwik.select platform automatically handles URL encoding.

⚠️ "View All" Not Appearing

Ensure the URL field is not empty. If no URL is configured, the "View All Results" option will be hidden from the interface.