1

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

enter image description here How can I solve this issue? Please help..

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.