Login

Learning & Support

Documentation

Advanced Scripting | Sample App 2: Different content for phone vs tablet vs Browser Client

Twixl Support Team Updated: - Created :

    In the series Advanced Scripting Sample Apps we explain some use cases on how to use the Advanced Scripting. For more general info, it's very important that you read this KB-article first.

    Preview with the Twixl App

    You can preview this app by scanning the QR code with the Twixl app.

    Replace QR-Code

    Use Case

    In this example, we show different content on phone vs tablet vs the Browser Client

    Instructions

    Preparations

    1. Create a new app
    2. Add the following content items in the Root Collection:
      • Placeholder for tablet
        • Type: Placeholder
        • Name: tablet
        • Title: Tablet
      • Placeholder for phone
        • Type: Placeholder
        • Name: phone
        • Title: Phone
      • Placeholder for browser
        • Type: Placeholder
        • Name: browser
        • Title: Browser
      • Placeholder for the other content
        • Type: Placeholder
        • Name: any
        • Title: Any
    3. Setup your Advanced Scripting (see below)

    Advanced Scripting Settings

    For the Root Collection:

    // Executed once for every collection before the filtering of the items
    function setupFilter(collection, environment) {
    }
    
    // Executed for once for every collection
    function shouldShowCollection(collection, environment) {
        return true;
    }
    
    // Executed for every single content item
    function shouldShowItem(contentItem, collection, environment) {
        if (contentItem.Name == "browser") {
            return environment.IsBrowser();
        } else if (contentItem.Name == "phone") {
            return environment.IsPhone();
        } else if (contentItem.Name == "tablet") {
            return environment.IsTablet();
        } else {
            return true;
        }
    }
    
    // Executed once for every collection after the filtering of the items
    function teardownFilter(collection, environment) {
    }

    Was this article helpful?

    0 out of 0 found this helpful