Findify

Findify Developer Hub

Welcome to the Findify developer hub. You'll find comprehensive guides and documentation to help you start working with Findify as quickly as possible, as well as support if you get stuck. Let's jump right in!

Quick View by Secomapp

In order to integrate the Quick View by Secomapp you would need to follow several simple steps

1. Modify theme.liquid

Insert the following HTML snippet in the theme.liquid file inside the <body> tag

<div id="mock-quick-view"></div>

2. Insert integration code

Insert the following JS snippet to the <head> section of the theme.liquid file. Make sure to insert it before referencing our script (if you have included it there)

if (window.jQuery) {

    jQuery.noConflict();

    (function() {
        var $ = jQuery;
        var getMockButton = (function() {
            var mockQv = $("#mock-quick-view");
            var mockButton;
            return function() {
                if (mockButton) {
                    return mockButton;
                }
                if (mockQv.hasClass("sca-qv-image")) {
                    mockButton = mockQv.find("#mock-quick-view-button");
                    if (mockButton.length !== 0) {
                        return mockButton;
                    }
                }
                if (mockQv.find("#mock-quick-view-button").length === 0) {
                    var mockButtonWrapper = $("<div></div>").attr({
                        style: "display: none !important"
                    });
                    mockButtonWrapper.append($("<a></a>").attr({
                        class: "sca-qv-button",
                        id: "mock-quick-view-button"
                    }));
                    mockQv.append(mockButtonWrapper);
                }
                mockQv = $("#mock-quick-view");
                return null;
            };
        }());

        function styleButton(button, styledButton) {
            var buttonWrapper = button.closest(".sca-qv-button-wrap");
            var nodeQv = buttonWrapper.parent();
            nodeQv.addClass("sca-qv-image");
            button.css({
                "font-family": styledButton.css("font-family"),
                "font-size": styledButton.css("font-size"),
                "top": styledButton.css("top")
            }).text(styledButton.text());

            nodeQv.hover(
                function() {
                    buttonWrapper.show();
                },
                function() {
                    buttonWrapper.hide();
                }
            );
        }

        function createHideQuickView(handle) {
            var hideQv = $(".hide-quick-view").eq(0).clone();
            if (hideQv.length === 0) {
                hideQv = $("<div></div>").addClass("hide-quick-view");
                var hideButtonWrapper = $("<div></div>").attr("style", "display: none !important");
                var hideButton = $("<a></a>").attr({
                    class: "sca-qv-button",
                    href: "#sca-qv-showqv",
                });
                hideQv.append(hideButtonWrapper);
                hideButtonWrapper.append(hideButton);
            }
            hideQv.find(".sca-qv-button").attr("handle", handle);
            return hideQv;
        }

        function getHideButton(handle) {
            var hideButton = $("a[handle='" + handle + "']");
            if (hideButton.length === 0) {
                var hideQuickView = createHideQuickView(handle);
                hideButton = hideQuickView.find(".sca-qv-button");
                var hideContainer = $("#hide-quick-view-container");
                if (hideContainer.length === 0) {
                    hideContainer = $("<div></div>").attr("id", "hide-quick-view-container");
                    $("body").append(hideContainer);
                }
                hideContainer.append(hideQuickView);
            }
            return hideButton;
        }

        function addQuickViewToProduct(apiData) {
            var node = $(apiData.node);
            var data = apiData.data;
            if (node) {
                var qvButton = node.find(".sca-qv-button");
                if (qvButton.length === 0) {
                    var prodUrl = data.productUrl || data.product_url;
                    var handle = prodUrl.slice(prodUrl.lastIndexOf("/") + 1);

                    var buttonWrapper = $("<div></div>").attr({
                        "style": "display: none !important"
                    }).addClass("sca-qv-button-wrap");

                    qvButton = $("<a></a>").attr({
                        class: "sca-qv-button",
                        href: "javascript: void(0)"
                    });

                    buttonWrapper.append(qvButton);
                    node.append(buttonWrapper);

                    var mockButton = getMockButton();
                    if (mockButton) {
                        styleButton(qvButton, mockButton);
                    }

                    var hideButton = getHideButton(handle);

                    qvButton.on("click", function(e) {
                        e.preventDefault();

                        // send events to our analytics system
                        // send events to our analytics system
                        data.trackEvent('click-item', { item_id: data.id });
                        hideButton[0].click();
                    });
                }
            }
        }

        function mountQuickViewToIframe(node, mockButton) {
            var qvButtons = node.find(".sca-qv-button");
            if (qvButtons.length !== 0 && mockButton) {
                qvButtons.each(function() {
                    styleButton($(this), mockButton);
                });
            }
        }

        function addQuickViewToIframe(apiData) {
            if ($(apiData.node).find(".sca-qv-image").length !== 0) {
                return;
            }
            setTimeout(function findMock() {
                var mockButton = getMockButton();
                if (mockButton) {
                    mountQuickViewToIframe($(apiData.node), mockButton);
                } else {
                    setTimeout(findMock, 0);
                }
            }, 0);
        }

        window.findifyApiRegistry = window.findifyApiRegistry || [];

        window.findifyApiRegistry.push({
            style: $("link[href*='sca-quick-view']").attr("href"),
        });

        window.findifyApiRegistry.push({
            hook: "*.grid",
            didMount: addQuickViewToIframe
        });

        window.findifyApiRegistry.push({
            hook: "*.carousel",
            didMount: addQuickViewToIframe
        });

        window.findifyApiRegistry.push({
            hook: "*.item",
            didMount: addQuickViewToProduct
        });
    }());
}

3. Customize quick-view button

If you going to customize the color of your quick-view button (text color or background color) you should use Custom CSS in the Merchant Dashboard to apply appropriate settings

.sca-qv-image .sca-qv-button {
	 color: #xxxxxx !important;
	 background-color: #xxxxxx !important;
}

.sca-qv-image:hover .sca-qv-button:hover {
	 color: #xxxxxx !important;
	 background-color: #xxxxxx !important;
}

Quick View by Secomapp