Shopify Price Match App

price-match.liquid

<a href="#" class="btn" id="price_match">Price Match</a>

<div class="pop_wrap" style="display:none;">

    <div class="pop_hold">
        <div class="pop_hip">
            <div class="pop_inner">

                <div class="close-this"></div>
                <div class="form-wrap">

                    <iframe id="pop_match" src="" width="280" height="515" frameborder="0"></iframe>

                </div>

            </div>
        </div>
    </div>

</div>



<style type="text/css">
    .pop_wrap {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 10000000000000000000000000 !important;
        text-align: center;
        width: 100%;
        height: 100%;
    }
    
    .pop_hold {
        display: table;
        width: 100%;
        height: 100%;
    }
    
    .pop_hip {
        display: table-cell;
        vertical-align: middle;
    }
    
    .pop_inner {
        position: relative;
        display: inline-block;
    }
    
    .close-this {
        width: 29px;
        height: 29px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAVVSURBVHjaxFdbSFxHGJ7djfdb1HgNpsV7iwQrYhWN5EmReHlqUEGqUcGHohBCMSqhqEgU8aWiqH0QBDGkAe2bF1ARMduKldqqsURFrVqtBo1uvOzu9P+n/znMWVfNWwc+zp455/zf/LdvZnXs8qGTrrbAwe2ASddrDdvOIfSEGwADQW9DagVYCGa6t9os4kpS5bdCgGSOCpqamj5PSUm5d+fOnS98fHyiHB0dg3U6HT8/P//r6Ojoj729PePy8vJIRkbGnLQQdh25johcADcBQYDQ4uLitNevX3eB4Q2r1coVbG1t8ZWVFS7PnZ6ewtTK856eniiypbskmuoDB4ArwBfwCSCmvr7+GzBiJIO8s7OTP3jwgLu6umqQnJzMW1pauMlkEuTg9eDo6Gg62bRLrHiIhLfQO0B8VVXVk83NzUU0Mjg4yKOioi6Q2eLu3bt8enpaEJ+cnBiHh4fTJY81QwmpLxEmpKWlPVpYWJjFj7u7u7mHh8e1hC4uLgLu7u68oaFBEIPng11dXdH2iJ0ohxjSeEDmy5cvf1I8vIpQIbKHtrY2Qfz27dvnxKGXSd2oaGIAaVB9Nbu7u3tQODw8PFxDkpiYyO/fv3+BICQkhJeWlnJfX191zsvLi6+vr4vigsKKt/XWm8KaDMiFghjAFba2tmoI4+Li1Cqtra1VjUdHR/ONjQ0x39HRoc47OzvzsrIyMT8zM1NJrSdI9XSDReSJC4iNjY3ABy9evNAk/vj4mEFxiN81NTXs6dOnLDQ0lI2MjLDg4GAx//79e8Y5F8AxMDDAgJRBxL609TQEiwfwFeBbWPXewcGB3fzl5OSobYHA95Tfr1694m5ubsJDGbOzs1jJS2Dbg0RHeOpAiUZvXSEvntvb2xovlZUPDQ2x3NxcdnZ2Ju6hyMS1v7+fFRUV/SdnBoMGkFfm4OBwmwjV8Cpy50RgIG0XCJUBYiHCKI/5+XlmsVjsSh3Ogw2drNt6W2Hf2dk5DgwMtGsAciO8hWiIe8wXDhASVllZafcbzDdEZlNWJr3tS4uLi+9A0MXLspcYSiQMCAhQQ/rw4UO1uKqrq1lJSYnGFoY3MjKSQfu9kef10naEW5NlfHx8Bx9kZWVpDODHMmFhYSED8WD5+fkqMWiw5pvU1FTm6enJlpaWfrXd7rBH7wG+BnwXExPzI1TwEe4icrMjsO8qKio4GBKVqgC2PF5XV8cjIiI08xMTExx3J2ivdFK9G3ZbBvB9Y2Pj79gGzc3NGlJsAdnoVYBQi1YyGo1dxKG2jIHE3pGu2DYukFcrSJ4P5Mx9dXWVzc3NqfnV6/XXnUZYQkIC6+vrY7BL/fzs2bNW2DywkE4ohdxAhPIpwenw8BALCj++CSt2MZvNbHJy8qNIsbh6e3vZ/v7+m/b29h9AGo0oaIBT6TShFXzAI1Q6DHNSUtIwkG1hmGC1PC8vj/v5+dkNZ2ZmJocThggpFM7s48ePn5DNIOJQZVBHgoCh9QL4AQLpRSzVW0FBQbfLy8s/Kygo+BTayA12DaxGBiIuVgyFx6CARJXCiWF/bGxsEmqhH3L5GzzeBRwAPqDmUJeopwblqOJFpwd/wi3ahdzh5BCUnZ0dAluff1hYmLe/vz+uHokO19bW/p6amvoTWukXqNhZmMa2+4cITURoUVpGUQmDzW7jI8GbKs+VomJQFI7yhEZRF98B9iUc0rMzmZBJfWOh1ZjooYWq7ZhW6y6RKt+YJdIjIjmgBRxJIbXYOx9x8tYsqYaFVmgiQwqhoySdVnpHITYR0QeaO7/s7PvRh23K+w0bUjMZP5Ngvu6w/b/8rfhXgAEAmJkyLSnsNQEAAAAASUVORK5CYII=');
        right: -14px;
        top: -14px;
        position: absolute;
        cursor: pointer;
    }
    
    .form-wrap iframe {
        border-radius: 5px;
        overflow: hidden;
    }
    
    .form-wrap {
        background: #fff;
        border-radius: 5px;
    }
</style>

<script type="text/javascript">
    if (!window.jQuery) {
        var jq = document.createElement('script');
        jq.type = 'text/javascript';
        // Path to jquery.js file, eg. Google hosted version
        jq.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js';
        document.getElementsByTagName('head')[0].appendChild(jq);
    }
</script>

<script type="text/javascript">
    source = 'https://ocdoplugins.com/index.php?option=com_rsform&formId=6&tmpl=component&form[product]={{ product.title }}&form[product_url]={{ shop.url | remove: "http://" }}{{ product.url }}&form[admin_email]={{ shop.email }}&form[name]={{ customer.first_name }}&form[email]={{ customer.email }}&form[shop_name]={{ shop.name}}';

    jQuery('#price_match').click(function() {
        jQuery('.pop_wrap').fadeIn();
        jQuery('#pop_match').attr('src', source);

        return false;
    })
</script>
<script type="text/javascript">
    jQuery('.close-this').click(function() {
        jQuery('.pop_wrap').fadeOut();
    })
</script>