Quick View by Secomapp

In order to integrate the Quick View by Secomapp, you need to complete the following 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 wish 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;
}

📘
Components

components/Cards/Product/view.tsx

Open components/Cards/Product/view.tsx and import withProps to your component:

import { withProps } from 'recompose'

Create productHandle and add it to the ProductCardView:

const enhancer = withProps(({item}) => ({
  productHandle: item.get('product_url').split('/')
}));

const ProductCardView: React.SFC<IProductCardProps> = ({
  item,
  config,
  theme,
  productHandle
}: any) => (

Then add this HTML code to the ProductCardView:

<div className='findify-quickview-wrapper sca-qv-button-wrap'>
  <a 
    className="sca-qv-button sca-qv-handle  sca-qv-button-plus" 
    href="#sca-qv-showqv" 
    data-index="0" 
    data-handle={productHandle[productHandle.length-1]}
  >
    <span>QUICK VIEW</span>
	</a>
</div>

The final ProductCardView component will look like this:

/**
 * @module components/Cards/Product
 */

import React from 'react'
import classNames from 'classnames'
import Image from 'components/common/Image'
import Truncate from 'components/common/Truncate'
import Text from 'components/Text'
import Rating from 'components/Cards/Product/Rating';
import Price from 'components/Cards/Product/Price';
import template from 'helpers/template';
import { DiscountSticker, OutOfStockSticker  } from 'components/Cards/Product/Stickers';
import { List } from 'immutable'
import { IProduct, MJSConfiguration, ThemedSFCProps } from 'types/index';
import BundleAction from 'components/Cards/Product/BundleAction';
import { withProps } from 'recompose'

const Title: any = ({ text, theme, ...rest }) => (
  <Text display-if={!!text} className={theme.title} {...rest}>{text}</Text>
);

const Description: any = ({ text, theme, ...rest }) => (
  <p
    display-if={!!text}
    className={theme.description}
    {...rest}
  >
    <Truncate>{text}</Truncate>
  </p>
);

const enhancer = withProps(({item}) => ({
  productHandle: item.get('product_url').split('/')
}));


export interface IProductCardProps extends ThemedSFCProps {
  item: IProduct;
  config: MJSConfiguration;
}

const ProductCardView: React.SFC<IProductCardProps> = ({
  item,
  config,
  theme,
  productHandle
}: any) => (
  <div
    className={classNames(
      theme.root,
      config.get('simple') && theme.simple,
      theme.productCard,
    )}
  >
    <div className={classNames(theme.imageWrap)}>
      <BundleAction display-if={config.get('bundle')} item={item} />
      <a href={item.get('product_url')} onClick={item.onClick}>
        <Image
          className={classNames(theme.image)}
          aspectRatio={false}
          thumbnail={item.get('thumbnail_url')}
          src={item.get('image_url') || item.get('thumbnail_url')}
          alt={item.get('title')}
        />
      </a>
      <div className='findify-quickview-wrapper sca-qv-button-wrap'>
        <a 
          className="sca-qv-button sca-qv-handle  sca-qv-button-plus" 
          href="#sca-qv-showqv" 
          data-index="0" 
          data-handle={productHandle[productHandle.length-1]}
        >
            <span>QUICK VIEW</span>
        </a>
      </div>
    </div>
    <div className={theme.content}>
      <a href={item.get('product_url')} onClick={item.onClick}>
        <Title
          theme={theme}
          display-if={config.getIn(['product', 'title', 'display'])}
          text={item.get('title')}
          config={config.getIn(['product', 'title'])} 
        />
        <Description
          theme={theme}
          display-if={config.getIn(['product', 'description', 'display'])}
          text={item.get('description')}
          config={config.getIn(['product', 'description'])} />
        <Price
          className={theme.priceWrapper}
          display-if={config.getIn(['product', 'price', 'display'])}
          price={item.get('price')}
          oldPrice={item.get('compare_at')}
          discount={item.get('discount')}
          currency={config.get('currency_config').toJS()} />
        <OutOfStockSticker
          display-if={item.getIn(['stickers', 'out-of-stock'])}
          config={config} />
      </a>
    </div>
  </div>
)

export default enhancer(ProductCardView);

1. Modify theme.liquid

2. Insert integration code

3. Customize quick-view button

📘Components

📘
Components