Conditional Selector

The conditional selector is a feature that allows you to choose a trigger for a specified action.

(() => {
    // * INSTRUCTIONS - Conditional variant *
    // ========================================================================================
    //
    // ***** IMPRTANT RULE - the selector name in twik platform needs to be "conditional-selector" *****
    //
    // Setting a condition to create a type of event (something will happen when the condition is true)
    //
    // Pick what you would like to condition on (number or text) and enter it in the "salePoint" or "text" (accordingly)
    //
    // Turn on the desired condition by changing it to true or false
    //
    // Enter the desired event you would like to happen in the "enter feature here" section.
    //
    // And you are good to go! Enjoy!
    //
    // ========================================================================================

// enter sale point or text here
    // ------------------------------------------------------------------

let salePoint = 285;
    let text = "enter text to trigger the feature here";

// ------------------------------------------------------------------

// select the desired condition and change it to true
    // ------------------------------------------------------------------

let biggerThan = false;
    let biggerEqualsTo = false;

let smallerThan = false;
    let smallEqualsTo = false;

let equalsTo = false;
    let notEqualsTo = false;

// ------------------------------------------------------------------

// get selector automatically
    // =================================================================

let page_variants = window.twik_tags;
    let variantName = "";
    for (let variant of page_variants) {
        if (variant["name"] == "conditional-selector") {
            variantName = variant["selector"];
        }
    }

let selector = document.querySelector(variantName);

// =================================================================

// validtaion section
    // ========================================================

// making sure that number is not a string
    // ---------------------------------------

let priceText = selector.innerText;
    let price = "";
    for (let index = 0; index  salePoint) ||
            (smallerThan && +price < salePoint) ||
            (smallEqualsTo && +price = salePoint) ||
            (equalsTo && +price == salePoint) ||
            (notEqualsTo && +price != salePoint) ||
            (equalsTo && textLower == textStringLower) ||
            textLower == textStringLower) &&
        !sessionStorage.getItem("PopupShown")
    ) {
        sessionStorage.setItem("PopupShown", "PopupShown");

// enter feature here :
        // ==============================================
        if (window.jQuery) {
            $ = window.jQuery;
            $("html")
                .attr("data-wf-page", "5d0752128518927d140033ab")
                .attr("data-wf-site", "5b27ad71f471c80738d206f5");
            if (
                $("link").filter(
                    "[href='https://public.twik.io/css/popup-bundle.min.css']"
                ).length == 0
            ) {
                $(
                    ''
                ).appendTo("head");
            }
            if ($("div.regularsection").length == 0) {
                $('<div class="regularsection _100vh">').appendTo("body");
            }
            $(
                '<div class="relativepopup "><div id="popup-container" class="popup-container image-right" data-sm-init="true" data-state="success"><div class="popup-half-column single-product"><div class="popup-products"><a href="https://themes.woocommerce.com/storefront/product/red-checked-shirt/" class="popup-product w-inline-block"><img src="https://themes.woocommerce.com/storefront/wp-content/uploads/sites/78/2015/07/red-checked-shirt.jpg" alt="" class="popup-product-image"><div class="popup-product-info"><div class="popup-product-name">Red Checked Shirt</div><div class="popup-product-price old-price"></div><div class="popup-product-price new-price">£ 52.00</div></div></a></div><div id="temp-countdown" class="placeholder-section"></div><div class="button-group vertical"><div id="temp-button1" class="placeholder-section"></div><div id="temp-button2" class="placeholder-section"></div></div></div></div></div>'
            ).appendTo("div.regularsection");
            if (
                $("script").filter(
                    "[src='https://public.twik.io/js/popup-bundle.min.js']"
                ).length == 0
            ) {
                $.getScript(
                    "https://public.twik.io/js/popup-bundle.min.js",
                    function() {
                        var params = {
                            popup_type: "instant",
                            popup_position: "center",
                            popup_animation: "slideBottom",
                            popup_closeButtonPlace: "inside",
                            popup_css: {
                                "text-align": "center",
                                margin: "0px",
                                padding: "0",
                                background: "transparent",
                            },
                        };
                        $(".popup-container").SlickModals(params);
                    }
                );
            } else {
                var params = {
                    popup_type: "instant",
                    popup_position: "center",
                    popup_animation: "slideBottom",
                    popup_closeButtonPlace: "inside",
                    popup_css: {
                        "text-align": "center",
                        margin: "0px",
                        padding: "0",
                        background: "transparent",
                    },
                };
                $(".popup-container").SlickModals(params);
            }
        } else {
            var script = document.createElement("SCRIPT");
            script.src =
                "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";
            script.type = "text/javascript";
            script.onload = function() {
                var $ = window.jQuery;
                $("html")
                    .attr("data-wf-page", "5d0752128518927d140033ab")
                    .attr("data-wf-site", "5b27ad71f471c80738d206f5");
                if (
                    $("link").filter(
                        "[href='https://public.twik.io/css/popup-bundle.min.css']"
                    ).length == 0
                ) {
                    $(
                        ''
                    ).appendTo("head");
                }
                if ($("div.regularsection").length == 0) {
                    $('<div class="regularsection _100vh">').appendTo("body");
                }
                $(
                    '<div class="relativepopup "><div id="popup-container" class="popup-container image-right" data-sm-init="true" data-state="success"><div class="popup-half-column single-product"><div class="popup-products"><a href="https://themes.woocommerce.com/storefront/product/red-checked-shirt/" class="popup-product w-inline-block"><img src="https://themes.woocommerce.com/storefront/wp-content/uploads/sites/78/2015/07/red-checked-shirt.jpg" alt="" class="popup-product-image"><div class="popup-product-info"><div class="popup-product-name">Red Checked Shirt</div><div class="popup-product-price old-price"></div><div class="popup-product-price new-price">£ 52.00</div></div></a></div><div id="temp-countdown" class="placeholder-section"></div><div class="button-group vertical"><div id="temp-button1" class="placeholder-section"></div><div id="temp-button2" class="placeholder-section"></div></div></div></div></div>'
                ).appendTo("div.regularsection");
                if (
                    $("script").filter(
                        "[src='https://public.twik.io/js/popup-bundle.min.js']"
                    ).length == 0
                ) {
                    $.getScript(
                        "https://public.twik.io/js/popup-bundle.min.js",
                        function() {
                            var params = {
                                popup_type: "instant",
                                popup_position: "center",
                                popup_animation: "slideBottom",
                                popup_closeButtonPlace: "inside",
                                popup_css: {
                                    "text-align": "center",
                                    margin: "0px",
                                    padding: "0",
                                    background: "transparent",
                                },
                            };
                            $(".popup-container").SlickModals(params);
                        }
                    );
                } else {
                    var params = {
                        popup_type: "instant",
                        popup_position: "center",
                        popup_animation: "slideBottom",
                        popup_closeButtonPlace: "inside",
                        popup_css: {
                            "text-align": "center",
                            margin: "0px",
                            padding: "0",
                            background: "transparent",
                        },
                    };
                    $(".popup-container").SlickModals(params);
                }
            };
            document.getElementsByTagName("head")[0].appendChild(script);
        }
        // ==============================================
    }
})();

Overview

The conditional selector is a feature that allows you to choose a trigger for a specified action. The trigger can range from total cart amount to specified product added to cart, to product amount, and more. Once the trigger has been reached by a user, you decide what happens next. A popup? A message? Maybe animation? Define your trigger and choose your action.