Magento:Terms and Condition in Popup

Question

I have enabled terms and conditions in the backend to show the terms and condition content on the checkout page.

I want to show the terms and condition content in a pop-up.

ie, if "I agree to the terms of use" is the checkbox text added in the backend. On clicking "terms of use", I want to show the terms and condition content in a pop-up.

I want to show the terms and condition content in a pop up for my checkout page.

I have enabled terms and conditions in the backend to show the terms and condition content on the checkout page. But instead of showing it as a plain text(above the checkbox text), I want to show the content in a popup.

Here is my code: app/design/frontend/theme/default/template/checkout/onepage/agreements.phtml

<?php if (!$this->getAgreements()) return; ?>
<form action="" id="checkout-agreements" onsubmit="return false;">
<ol class="checkout-agreements">
<?php foreach ($this->getAgreements() as $_a): ?>
    <li>
        <div class="agreement-content"<?php echo ($_a->getContentHeight() ? ' style="height:' . $_a->getContentHeight() . '"' : '')?>>
            <?php if ($_a->getIsHtml()):?>
                <?php echo $_a->getContent() ?>
            <?php else:?>
                <?php echo nl2br($this->escapeHtml($_a->getContent())) ?>
            <?php endif; ?>
        </div>
    <p class="agree">
        <input type="checkbox" id="agreement-<?php echo $_a->getId()?>" name="agreement[<?php echo $_a->getId()?>]" value="1" title="<?php echo $this->escapeHtml($_a->getCheckboxText()) ?>" class="checkbox" />
        <label for="agreement-<?php echo $_a->getId()?>" onclick="termspopup()"><?php echo $_a->getIsHtml() ? $_a->getCheckboxText() : $this->escapeHtml($_a->getCheckboxText()) ?>
        </label>
    </p>
    </li>
<?php endforeach ?>
</ol>
</form>

<script type="text/javascript">
function termspopup(){ 
    jQuery(document).ready(function(){
        jQuery.fancybox(
            '<div>Terms of use test content</div><div>Content to be added</div>',
            {
                padding:25,
                width: 500,
                closeBtn:true,
                autoSize : false,
                helpers : { 
                  overlay : {closeClick: false}
                }
            }
        );
    });     
}
</script>

I have called a function in onclick of a label onclick="termspopup()" and tried to enable the fancybox in the function. But on clicking the checkbox content getting error in console as ReferenceError: termspopup is not defined

How can I solve this issue? Please help..

Answer 1

Try this method:

Copy the file app/design/frontend/base/default/template/checkout/onepage/agreements.phtml to app/design/frontend/theme/default/template/checkout/onepage/agreements.phtml

And add the following content:

<?php if (!$this->getAgreements()) return; ?>
<form action="" id="checkout-agreements" onsubmit="return false;">
<ol class="checkout-agreements">
<?php foreach ($this->getAgreements() as $_a): ?>
    <li>
        <div id="agreement-content" style="display:none">
            <div class="agreement-content"<?php echo ($_a->getContentHeight() ? ' style="height:' . $_a->getContentHeight() . '"' : '')?>>
                <?php if ($_a->getIsHtml()):?>
                    <?php echo $_a->getContent() ?>
                <?php else:?>
                    <?php echo nl2br($this->escapeHtml($_a->getContent())) ?>
                <?php endif; ?>
            </div>
        </div>
        <p class="agree">
            <input type="checkbox" id="agreement-<?php echo $_a->getId()?>" name="agreement[<?php echo $_a->getId()?>]" value="1" title="<?php echo $this->escapeHtml($_a->getCheckboxText()) ?>" class="checkbox" /><label for="agreement-<?php echo $_a->getId()?>"><?php echo $_a->getIsHtml() ? $_a->getCheckboxText() : $this->escapeHtml($_a->getCheckboxText()) ?></label>
        </p>
    </li>
<?php endforeach ?>
</ol>
</form>
<script type="text/javascript">
var popupcontent = jQuery('#agreement-content').load();
//var popupcontent = '<?php //echo $_a->getContent()?>';
jQuery(document).ready(function ($) {
    $('.agreement-text').fancybox({
             width              : 500,
             padding            : [30, 30, 30, 30],
             content            : popupcontent,
             helpers   : { 
               overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox 
             },
        });

});
</script>