lmarazzo VIP
Total posts: 98
29 Март 2017 16:10

Dear Sergei!

We have made a nice layout for our payment template but we have one slight problem in our code! Everything works great except for a free-plan it basically displays a black screen when a plan is free or we enter a coupon code that makes the plan free.

We really like the layout though. Can you give us a hand?

Screen Shot 2017-03-29 at 9.05.36 AM

This is the file com_emerald/views/empayment/tmpl/default.php with all the mods we did... can you see the mistake? We certainly can't!

:) Thanx

START DEFAULT.PHP

<?php
defined('_JEXEC') or die();

JHtml::_('formbehavior.chosen', 'select');

$total = $this->plan->total;
?>

<script type="text/javascript">
    (function($) {
        Emerald.submitbutton = function(task) {
            Emerald.submitform(task, document.getElementById('formsubscr'));
        };

        Emerald.validate_form = function() {
            if($('#invoiceto_fields_billto').length && !$('#invoiceto_fields_billto').val()) {
                alert('<?php echo str_replace("'", "\'", JText::sprintf('JLIB_FORM_VALIDATE_FIELD_REQUIRED', JText::_('E_INVOICE_BILLTO'))); ?>');
                return;
            }
            if($('#invoiceto_fields_address').length && !$('#invoiceto_fields_address').val()) {
                alert('<?php echo str_replace("'", "\'", JText::sprintf('JLIB_FORM_VALIDATE_FIELD_REQUIRED', JText::_('E_INVOICE_ADDRESS'))); ?>');
                return;
            }
            if($('#invoiceto_fields_zip').length && !$('#invoiceto_fields_zip').val()) {
                alert('<?php echo str_replace("'", "\'", JText::sprintf('JLIB_FORM_VALIDATE_FIELD_REQUIRED', JText::_('E_INVOICE_ZIP'))); ?>');
                return;
            }
            if($('#invoiceto_fields_country').length && !$('#invoiceto_fields_country').val()) {
                alert('<?php echo str_replace("'", "\'", JText::sprintf('JLIB_FORM_VALIDATE_FIELD_REQUIRED', JText::_('E_INVOICE_COUNTRY'))); ?>');
                return;
            }
            if($('#invoiceto_fields_state').length && !$('#invoiceto_fields_state').val()) {
                alert('<?php echo str_replace("'", "\'", JText::sprintf('JLIB_FORM_VALIDATE_FIELD_REQUIRED', JText::_('ESTATE'))); ?>');
                return;
            }

            if($('#em_email').length && !$('#em_email').val()) {
                alert('<?php echo str_replace("'", "\'", JText::sprintf('JLIB_FORM_VALIDATE_FIELD_REQUIRED', JText::_('E_EMAIL'))); ?>');
                return;
            }

            <?php if($this->com_params->get('tax_id_rec', 1)): ?>
            if($('#invoiceto_fields_tax_id').length && !$('#invoiceto_fields_tax_id').val()) {
                alert('<?php echo str_replace("'", "\'", JText::sprintf('JLIB_FORM_VALIDATE_FIELD_REQUIRED', JText::_('E_INVOICE_TAX_ID'))); ?>');
                return;
            }
            <?php endif; ?>

            <?php if($this->plan->params->get('properties.terms') && !empty($this->plan->terms->title)): ?>
            if(!$('input[name="terms"]:checked').length) {
                alert('<?php echo str_replace("'", "\'", strip_tags(JText::sprintf('EMR_YOU_HAVE_TO_AGREE', $this->plan->terms->title))); ?>');
                return;
            }
            <?php endif; ?>

            <?php foreach($this->fields AS $field): ?>
                <?php if($field->required): ?>
                    if(!$('#field<?php echo $field->id ?>').val()){
                        alert('<?php echo str_replace("'", "\'", JText::sprintf('JLIB_FORM_VALIDATE_FIELD_REQUIRED', $field->getLabel())); ?>');
                        return;
                    }
                <?php endif; ?>
            <?php endforeach; ?>

            return true;
        };

        Emerald.checkout = function(processor) {
            if(!Emerald.validate_form()) {
                return;
            }
            $('input[name="task"]').val('empayment.send');
            $('input[name="processor"]').val(processor);
            $('#formsubscr').submit();
        }
    }(jQuery));
</script>
<style type="text/css">
    #box-terms {
        max-height: 200px;
        margin-right: 0px;
    }
</style>

<div class="page-header">
<form action="<?php echo JUri::getInstance()->toString(); ?>" method="post" name="formsubscr" id="formsubscr">
    <table class="table">
        <thead>

            <td width="49">
                <h1 style="margin-top: 0"><?php echo $this->plan->name; ?> </h1>


                <?php echo $this->plan->description; ?>
            </td>
                    <?php foreach($this->addons AS $name => $addon): $i = 2; ?>
            <tr>
                <td>&nbsp;</td>
                <td width="17">
                    <h4 style="margin-top: 0"><?php echo $i++; ?>
                        <?php echo $name; ?>
                    </h4>
                </td>
                <td width="714" nowrap="nowrap"><?php echo EmeraldApi::getPrice($addon, $this->plan->params);
                    $total += $addon; ?></td>
            </tr>
        <?php endforeach; ?>
        </tbody>
    </table>
<?php if($this->plan->params->get('properties.muaccess') || $this->coupons && ($this->plan->price > 0 || JFactory::getApplication()->getUserState('last-emerald-coupon'))): ?>

<table width="auto" border="0">
  <tr>
    <td>
      <label class="control-label" for="coupon"> 
        <div align="center"><?php echo JText::_('') ?></div>
      </label></td>
    <td><div align="center">
      <input type="text" id="coupon" name="coupon" value="<?php echo @$this->coupon->value; ?>"/>
    </div></td>
    <td><button class="btn btn-primary" type="button" id="apply-btn">
      <div align="center"><?php echo JText::_('EAPPLY'); ?></div>
    </button></td>
  </tr>
</table>







        <?php endif; ?>
  <td nowrap="nowrap">
                <?php if($this->plan->is_donation == 1): ?>

                    <?php
                    $options = array();
                    foreach($this->plan->donation_prices as $value)
                    {
                        $options[] = JHtml::_('select.option', $value, EmeraldApi::getPrice($value, $this->plan->params));
                    }
                    $damount = JFactory::getApplication()->input->get('donation_amount', $value);
                    $total   = $damount;
                    echo JHtml::_('select.genericlist', $options, 'donation_amount', $attribs = NULL, $optKey = 'value', $optText = 'text', $damount);
                    ?>

                <?php elseif($this->plan->is_donation == 2): ?>
                    <?php
                    $total = JFactory::getApplication()->input->get('donation_amount', $total);
                    if($total <= $this->plan->total)
                        $total = $this->plan->total;
                    ?>
    <div class="input-append">
                        <div align="justify">
                          <input type="text" class="inputbox require" name="donation_amount" value="<?php echo $total ?>"/>
      </div>
                        <button class="btn btn-primary" type="submit"><?php echo JText::_('EAPPLY'); ?></button>
                    </div>
                <?php else: ?>
                <?php endif; ?>
            </td>
        </tr>

  <table class="pull-left table-condensed table table-bordered" style="width: 100%">
        <?php if(!empty($this->coupon->discount_total)): $total -= $this->coupon->discount_total; ?>
            <tr>
                <td width="79%">
                    <?php echo JText::_('E_COUPON'); ?>
                    <small><?php echo JText::sprintf('EM_COUPON_TYPE_' . $this->coupon->discount_type,
                            $this->coupon->discount, '<span class="label label-success">' . $this->coupon->value . '</span>',
                            EmeraldApi::getPrice($this->coupon->discount, $this->plan->params)); ?></small>
                </td>
                <td width="20%"><div align="right">-<?php echo EmeraldApi::getPrice($this->coupon->discount_total, $this->plan->params); ?></div></td>
            </tr>
        <?php elseif($this->plan->discount): $total -= $this->plan->discount; ?>
            <tr>
                <td>
                    <?php echo JText::_('EMR_DISCOUNT'); ?>
                    <small><?php echo JText::_('SUBSCRIPTION_DISCOUNT_' . $this->plan->discount_type); ?></small>
                </td>
                <td><div align="right">-<?php echo EmeraldApi::getPrice($this->plan->discount, $this->plan->params); ?></div></td>
            </tr>
        <?php endif; ?>
        <tr>
            <td><big><?php echo JText::_('EMR_INVOICETOTAL'); ?></big></td>
            <td><div align="right"><strong><big><?php echo EmeraldApi::getPrice($total, $this->plan->params); ?></big></strong></div></td>
        </tr>
    </table>
    <div class="clearfix"></div>


    <div class="form-horizontal">


      <?php if($this->fields): ?>
            <?php foreach($this->fields AS $field): ?>
                <div class="control-group">
                    <label class="control-label" for="field<?php echo $field->id ?>">
                        <?php echo $field->getLabel() ?>
                        <?php if($field->required): ?> * <?php endif; ?>
                    </label>

                    <div class="controls">
                        <?php echo $field->getField(); ?>
                        <hr/>
                        <?php echo $field->getDescription(); ?>
                    </div>
                </div>
            <?php endforeach; ?>


        <?php endif; ?>




<?php if($this->plan->params->get('properties.rds') && !$this->user->get('id')): ?>            
<div class="control-group">
<text  class=" required" for="email" id="email-lbl">
<?php echo JText::_('E_EMAIL'); ?><span class="star">&nbsp;*</span>
</text> 
  <div class="controls">
  <input type="email" aria-required="true" required="true" value="" id="em_email" name="email"/>
<input type="hidden" value="-1" id="invoice" name="invoice"/>            
<?php endif; ?>



        <?php if($this->params->get('use_invoice', 0) && $total > 0): ?>
            <div class="control-group">
                <label class="control-label" for="invoice">
                    <?php echo JText::_('E_INVOICE_BILLTO') ?>
                    <?php if(JComponentHelper::getParams('com_emerald')->get('use_invoice', 0) == 1): ?> * <?php endif; ?>
                </label>

                <div class="controls">
                    <?php if($this->user->get('id')): ?>
                        <div class="row-fluid">
                            <?php echo JHtml::_('select.genericlist', $this->inv_list, 'invoice', 'required class="span12"', 'value', 'text', JFactory::getApplication()->getUserState('com_emerald.invoiceto.selector')); ?>
                        </div>

                        <div id="invoice_data" class="hide"></div>

                        <script>
                            jQuery(document).ready(function() {
                                jQuery('#invoice').bind('change keyup', function() {
                                    load(jQuery(this).val());
                                });
                                load(jQuery('#invoice').val());
                            });
                        </script>
                    <?php endif; ?>
                    <?php if(!$this->user->get('id') && $this->plan->params->get('properties.rds', 0)): ?>
                        <div id="invoice_data" class=""></div>
                        <script>
                            jQuery(document).ready(function() {
                                loadForm();
                            });
                        </script>
                        <hr/>
                    <?php endif; ?>
                </div>
            </div>

        <?php endif; ?>
    </div>


    <?php if($this->plan->params->get('properties.terms') && !empty($this->plan->terms->title)): ?>
        <div>
            <h4><?php echo $this->plan->terms->title; ?></h4>

            <style>
                #box-terms {
                    max-height: 200px;
                    margin-right: 0px;
                    overflow-y: auto;
                }
            </style>
            <div class="well" id="box-terms">
                <?php echo $this->plan->terms->introtext; ?>
                <?php echo $this->plan->terms->fulltext; ?>
            </div>
        </div>
        <div class="alert alert-warning">

            <label class="checkbox">
                <input type="checkbox" name="terms" value="1"/>
                <?php echo JText::sprintf('EMR_AGREETERMS', $this->plan->terms->title); ?>
            </label>
        </div>
    <?php endif; ?>

    <?php if($total <= 0): ?>
        <p align="center">
            <?php echo JText::_('EMR_FREEPLAN'); ?>
        </p>
        <div align="center">
          <button class="btn btn-large btn-block btn-warning" id="payfree" type="button"><?php echo JText::_('EMR_ACTIVATENOW'); ?></button>
          <?php else: ?>
  </div>
        <h4 align="center"><?php echo JText::_('EMR_PAYMENTMETHOD'); ?></h4>


        <div align="center">
          <?php foreach($this->plan->params->get('gateways', array()) AS $processor => $gateway): ?>
          <?php
            if($gateway->enable == 0)
            {
                continue;
            }
            include_once JPATH_ROOT . '/components/com_emerald/library/gateways/' . $processor . '/' . $processor . '.php';
            $class = 'EmeraldGateway' . ucfirst($processor);
            $class = new $class($processor, $gateway);
            echo $class->getButton($this->plan, $total);
            ?>
          <?php endforeach; ?>

          <?php endif; ?>

          <input type="hidden" name="task" value=""/>
          <input type="hidden" name="postprocess" value="pay"/>
          <input type="hidden" name="processor" value=""/>
          <input type="hidden" name="sid" value="<?php echo $this->plan->id; ?>"/>
  </div>
</form>

<script type="text/javascript">
    (function($) {

        $('button[data-payment-gateway]').click(function() {
            Emerald.checkout($(this).data('payment-gateway'));
        });

        $('#payfree').click(function() {
            $('input[name="task"]').val('empayment.send');
            $('#formsubscr').submit();
        });

        $('#apply-btn').click(function() {
            $('input[name="task"]').val('empayment.coupon');
            $('#formsubscr').submit();
        });

        $('#donation_amount').change(function() {
            $('#formsubscr').submit();
        });

    }(jQuery))

    function load(value) {
        value = parseInt(value);
        if(value > 0) {
            loadText(value);
        } else if(value == -1) {
            loadForm();
        }
    }
    var inv_dat = jQuery('#invoice_data');

    function loadText(value) {
        inv_dat.hide();
        jQuery.ajax({
            url: '<?php echo JRoute::_('index.php?option=com_emerald&task=empayment.getinvoicetext', FALSE); ?>',
            type: 'GET',
            dataType: 'html',
            data: {id: value}
        }).done(function(html) {
            inv_dat.html(html).slideDown('fast');
        });
    }

    function loadForm() {
        inv_dat.hide();
        jQuery.ajax({
            url: '<?php echo JRoute::_('index.php?option=com_emerald&task=empayment.getinvoiceform', FALSE); ?>',
            dataType: 'html'
        }).done(function(html) {
            inv_dat.html(html).slideDown('fast');
            jQuery('#invoiceto_fields_country')
                .chosen({
                    disable_search_threshold: 10,
                    allow_single_deselect: true
                });
        });
    }
</script>

Последние изменения: 15 Апр 2017


lmarazzo VIP
Total posts: 98
29 Март 2017 16:22

False alarm!

we discovered the problem

      <?php if($total <= 0): ?>
    </div>
    <p align="center"> <?php echo JText::_('EMR_FREEPLAN'); ?> </p>
    <div align="center">
      <button class="btn btn-large btn-block btn-warning" id="payfree" type="button"><?php echo JText::_('EMR_ACTIVATENOW'); ?></button>
      <?php else: ?>
    </div>



    I think we were missing a </div>

Sergey
Total posts: 13,748
31 Март 2017 04:54

Good.

Anyway I should say I like your payment layout. Looks cool!


lmarazzo VIP
Total posts: 98
31 Март 2017 19:18

Ok... I have two more challenging questions for you on this same idea.

1) The TOTAL: $19.97... is in a box and looks weird. Any ideas? what your thought on that. We would love to get rid of the middle line that is places about at 40% of the table and we don't understand where it is or why. https://onlinemusicguild.com/index.php/en/signature-webinars.html?view=empayment& ;sid=27

2) in the Emerald list we have built, we would like to add a Very Cool Amazing Animated Button. we kinda tried to draw it... can you help us build it? It would be nice if we can make the following characteristics Size... like in the picture we drawed: 100% height of the plan. Very simple arrow. span is 1 so very slim. Hover: change background color to a gradient from opacity 0 to a transparent-light-grey AND Arrow changes color to blue or red Click: Arrows slide to the right and the page changes

Screen Shot 2017-03-31 at 12.10.57 PM

thanks bro

LM


Sergey
Total posts: 13,748
14 Апр 2017 06:42

1) I like the layout. But if you make price bigget that would be even better I think. Or you can highlight it with different color.

2) Unfortunately do ntoknow exactly how to make that image. The height of description may var, so have to the height of image.


pepperstreet VIP
Total posts: 3,837
15 Апр 2017 01:06

lmarazzo Ok... I have two more challenging questions for you on this same idea.

1) The TOTAL: $19.97... is in a box and looks weird. Any ideas? what your thought on that. We would love to get rid of the middle line that is places about at 40% of the table and we don't understand where it is or why. https://onlinemusicguild.com/index.php/en/signature-webinars.html?view=empayment& ;sid=27

It is the "bordered table" CSS from Bootstrap.
Either remove the special bootstrap classes from the markup...

Or try to override the specific rules for "table-bordered td". There should be a left border definition. The tricky part is: You can't simply remove that left border, because it would remove ALL of them. I guess you have to target it with "child" definitions.

Probably the first method is much easier. You might add your own table class, to apply your own favorite styling.

2) in the Emerald list we have built, we would like to add a Very Cool Amazing Animated Button. we kinda tried to draw it... can you help us build it? It would be nice if we can make the following characteristics Size... like in the picture we drawed: 100% height of the plan. Very simple arrow. span is 1 so very slim. Hover: change background color to a gradient from opacity 0 to a transparent-light-grey AND Arrow changes color to blue or red Click: Arrows slide to the right and the page changes

You might add a "background-image" with "background-size" for width in PX and second value for height 100%. Should also work with 100% 100% for both.
The image could be assigned to the plan-price DIV or maybe even the a-Tag directly.
But this might require a 100% height button or container as well.

Generally I would suggest to add your own class name, too. e.g. BTN-VERTICAL

A larger transparent PNG graphic might work quick and easy with % stretching.

If you want the best result, you might use a vector SVG format.
Headsup: SVG files try to keep their aspect ratio! You would have to edit the file to set this behavior to "none", or use other methods. See SVG examples and scaling tips here.
However, if your image has already a tall, vertical ratio, you should get a working result with both formats and 100% 100%.

Hope this helps.


BTW, what happens in mobile / stacked view? Your button would move under your plan description! It might look weird.

Работает на Cobalt