Skip to main content

Change payment methods table

More
10 years 4 months ago #239812 by verzevoul
-- HikaShop version -- : 2.6.0
-- Joomla version -- : 3.5.1
-- PHP version -- : 5.5

Hello again!

I need to change the payment methods table layout, instead of rows i want to display the payment methods in columns.
I believe i can do that in the file checkout / payment.php? But i m having trouble changing the correct <tr> to <td> etc.
I also want to do that for shipping methods too!

Could you give a hint please?

Thank you!

Please Log in or Create an account to join the conversation.

More
10 years 4 months ago #239821 by nicolas
Hi,

Yes, it's indeed in that view file. And in checkout/shipping.php for the shipping.
I would actually remove all the tr/td/tbody/table tags and just have one div for each payment method/shipping method with a float:left and a width:25% of the divs so that it would display on four columns automatically.
The following user(s) said Thank You: verzevoul

Please Log in or Create an account to join the conversation.

More
10 years 4 months ago #239904 by verzevoul
Hi nicolas,

thank you for your answer.
I removed table tags, but the payment methods are still displayed in 4 lines.
How can i create 4 divs in the view file, 1 for each method?

That's my php code now
Code:
<?php /** * @package HikaShop for Joomla! * @version 2.6.0 * @author hikashop.com * @copyright (C) 2010-2015 HIKARI SOFTWARE. All rights reserved. * @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html */ defined('_JEXEC') or die('Restricted access'); ?><?php if(!empty($this->orderInfos->full_total->prices[0]) && bccomp($this->orderInfos->full_total->prices[0]->price_value_with_tax,0,5)!=0){ if(!empty($this->methods)){ ?> <div id="hikashop_payment_methods" class="hikashop_payment_methods"> <fieldset> <legend><?php echo JText::_('HIKASHOP_PAYMENT_METHOD');?></legend> <?php $done = false; $row_index=0; $auto_select_default = $this->config->get('auto_select_default',2); if($auto_select_default==1 && count($this->methods)>1) $auto_select_default=0; $odd = 0; if(!HIKASHOP_RESPONSIVE) { ?> <table class="hikashop_payment_methods_table"> <?php foreach($this->methods as $method){ $checked = ''; if(($this->payment_method==$method->payment_type && $this->payment_id==$method->payment_id)|| ($auto_select_default && empty($this->payment_id)&&!$done)){ $checked = 'checked="checked"'; $done = true; } if($this->config->get('auto_submit_methods',1) && empty($method->ask_cc) && empty($method->custom_html) && empty($checked)){ $checked.=' onclick="this.form.action=this.form.action+\'#hikashop_payment_methods\';this.form.submit(); return false;"'; } ?> <tr class="row<?php echo $odd; ?>"> <td> <input class="hikashop_checkout_payment_radio" id="radio_<?php echo $method->payment_type.'_'.$method->payment_id;?>" type="radio" name="hikashop_payment" value="<?php echo $method->payment_type.'_'.$method->payment_id;?>" <?php echo $checked; ?> /> </td> <td><label for="radio_<?php echo $method->payment_type.'_'.$method->payment_id;?>" style="cursor:pointer;"> <span class="hikashop_checkout_payment_image"> <?php if(!empty($method->payment_images)){ $images = explode(',',$method->payment_images); if(!empty($images)){ foreach($images as $image){ if(!empty($this->images_payment[$image])){ ?> <img src="<?php echo HIKASHOP_IMAGES .'payment/'. $this->images_payment[$image];?>" alt=""/> <?php } } } } ?> </span> </label> </td> <td><label for="radio_<?php echo $method->payment_type.'_'.$method->payment_id;?>" style="cursor:pointer;"> <span class="hikashop_checkout_payment_name"><?php echo $method->payment_name;?></span></label> <span class="hikashop_checkout_payment_cost"> <?php if(bccomp($method->payment_price,0,5) === 0) { $price_text = JText::_('FREE_PAYMENT'); } else { $pt = (int)$this->params->get('price_with_tax'); $price_text = JText::_('PRICE_BEGINNING'); $price_text .= '<span class="hikashop_checkout_payment_price">'; if($pt){ $price_text .= $this->currencyHelper->format($method->payment_price_with_tax,$method->payment_params->payment_currency); } if($pt == 2) $price_text .= JText::_('PRICE_BEFORE_TAX'); if($pt == 2 || $pt == 0) $price_text .= $this->currencyHelper->format($method->payment_price,$method->payment_params->payment_currency); if($pt == 2) $price_text .= JText::_('PRICE_AFTER_TAX'); if($this->params->get('show_original_price') && isset($method->payment_price_orig) && bccomp($method->payment_price_orig, 0, 5)) { $price_text .= JText::_('PRICE_BEFORE_ORIG'); if($pt > 0) $price_text .= $this->currencyHelper->format($method->payment_price_orig_with_tax, $method->payment_currency_orig); if($pt == 2) $price_text .= JText::_('PRICE_BEFORE_TAX'); if($pt == 2 || $pt == 0) $price_text .= $this->currencyHelper->format($method->payment_price_orig, $method->payment_currency_orig); if($pt == 2) $price_text .= JText::_('PRICE_AFTER_TAX'); $price_text .= JText::_('PRICE_AFTER_ORIG'); } $price_text .= '</span> '; $price_text .= JText::_('PRICE_END'); } echo $price_text; ?> </span> <?php if(!empty($method->payment_description)){ ?> <br/> <div class="hikashop_checkout_payment_description"><?php echo $method->payment_description;?></div> <?php } ?> </td> </tr> <tr class="hikashop_checkout_payment_ccinfo"> <td colspan="3"> <?php $this->method =& $method; $this->setLayout('ccinfo'); echo $this->loadTemplate(); ?> </td> </tr> <?php $row_index++; $odd = 1-$odd; } ?> </table> <?php } else { ?> <div class="controls"> <div class="hika-radio"> <div class="hikashop_payment_methods_table table table-striped table-hover"> <?php foreach($this->methods as $method){ $checked = ''; if(($this->payment_method==$method->payment_type && $this->payment_id==$method->payment_id)|| ($auto_select_default && empty($this->payment_id)&&!$done)){ $checked = 'checked="checked"'; $done = true; } if($this->config->get('auto_submit_methods',1) && empty($method->ask_cc) && empty($method->custom_html) && empty($checked)){ $checked.=' onclick="this.form.action=this.form.action+\'#hikashop_payment_methods\';this.form.submit(); return false;"'; } ?> <div class="katerina-pay"> <div class="row<?php echo $odd; ?>"> <div> <input class="hikashop_checkout_payment_radio" id="radio_<?php echo $method->payment_type.'_'.$method->payment_id;?>" type="radio" name="hikashop_payment" value="<?php echo $method->payment_type.'_'.$method->payment_id;?>" <?php echo $checked; ?> /> <label class="btn btn-radio" for="radio_<?php echo $method->payment_type.'_'.$method->payment_id;?>"><?php echo $method->payment_name;?></label> <span class="hikashop_checkout_payment_cost"> <?php if(bccomp($method->payment_price,0,5) === 0) { $price_text = JText::_('FREE_PAYMENT'); } else { $pt = (int)$this->params->get('price_with_tax'); $price_text = JText::_('PRICE_BEGINNING'); $price_text .= '<span class="hikashop_checkout_payment_price">'; if($pt > 0) $price_text .= $this->currencyHelper->format($method->payment_price_with_tax,$method->payment_params->payment_currency); if($pt == 2) $price_text .= JText::_('PRICE_BEFORE_TAX'); if($pt == 2 || $pt == 0) $price_text .= $this->currencyHelper->format($method->payment_price,$method->payment_params->payment_currency); if($pt == 2) $price_text .= JText::_('PRICE_AFTER_TAX'); if($this->params->get('show_original_price') && isset($method->payment_price_orig) && bccomp($method->payment_price_orig, 0, 5)) { $price_text .= JText::_('PRICE_BEFORE_ORIG'); if($pt > 0) $price_text .= $this->currencyHelper->format($method->payment_price_orig_with_tax, $method->payment_currency_orig); if($pt == 2) $price_text .= JText::_('PRICE_BEFORE_TAX'); if($pt == 2 || $pt == 0) $price_text .= $this->currencyHelper->format($method->payment_price_orig, $method->payment_currency_orig); if($pt == 2) $price_text .= JText::_('PRICE_AFTER_TAX'); $price_text .= JText::_('PRICE_AFTER_ORIG'); } $price_text .= '</span> '; $price_text .= JText::_('PRICE_END'); } echo $price_text; ?> </span> <span class="hikashop_checkout_payment_image"> <?php if(!empty($method->payment_images)){ $images = explode(',',$method->payment_images); if(!empty($images)){ foreach($images as $image){ if(!empty($this->images_payment[$image])){ ?> <img src="<?php echo HIKASHOP_IMAGES .'payment/'. $this->images_payment[$image];?>" alt=""/> <?php } } } } ?> </span> <div class="hikashop_checkout_payment_description"><?php echo $method->payment_description;?></div> <div class="ccinfo"> <?php $this->method =& $method; $this->setLayout('ccinfo'); echo $this->loadTemplate(); ?> </div> </div> </div> <?php $odd = 1-$odd; } ?> </div> </div> </div> <script type="text/javascript"> (function($){ $("#hikashop_payment_methods .hika-radio input:checked").each(function() { $("label[for=" + jQuery(this).attr('id') + "]").addClass('active btn-primary'); }); $("#hikashop_payment_methods .hika-radio input").change(function() { $(this).parents('div.hika-radio').find('label.active').removeClass('active btn-primary'); $("label[for=" + jQuery(this).attr('id') + "]").addClass('active btn-primary'); }); })(jQuery); </script> </div> <?php } ?> </fieldset> </div> <?php } }

Please Log in or Create an account to join the conversation.

More
10 years 4 months ago #239907 by nicolas
Hi,

You have two things to do:
1. You have a problem with yours divs:
take.ms/pQJvP
They are one into another because you're missing a closing div for each row.
2. You need to add a float:left and a width:25% with CSS on the divs so that they can display one next to another.
The following user(s) said Thank You: verzevoul

Please Log in or Create an account to join the conversation.

More
10 years 4 months ago - 10 years 4 months ago #240033 by verzevoul
Ok i see what you are saying!

I fixed it i think but the problem now is that the class that i created doesn't recognise the css that i give it.
[strike]I added the CSS you said but no result unfortunately.[/strike]

Ok, i found it.
For some reason it doesn't see the custom.css file so i added the css code in frontend-default css file and it's ok.

But the code that i added that is for panelboxes to have equal height does not work in the payment view file but it worked in the login view file. I don't understand why!

I m talking about this line <div class="uk-grid" data-uk-grid-match="{target:'.uk-panel'}">
Code:
<?php /** * @package HikaShop for Joomla! * @version 2.6.0 * @author hikashop.com * @copyright (C) 2010-2015 HIKARI SOFTWARE. All rights reserved. * @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html */ defined('_JEXEC') or die('Restricted access'); ?><?php if(!empty($this->orderInfos->full_total->prices[0]) && bccomp($this->orderInfos->full_total->prices[0]->price_value_with_tax,0,5)!=0){ if(!empty($this->methods)){ ?> <div id="hikashop_payment_methods" class="hikashop_payment_methods"> <fieldset> <legend><?php echo JText::_('HIKASHOP_PAYMENT_METHOD');?></legend> <?php $done = false; $row_index=0; $auto_select_default = $this->config->get('auto_select_default',2); if($auto_select_default==1 && count($this->methods)>1) $auto_select_default=0; $odd = 0; if(!HIKASHOP_RESPONSIVE) { ?> <table class="hikashop_payment_methods_table"> <?php foreach($this->methods as $method){ $checked = ''; if(($this->payment_method==$method->payment_type && $this->payment_id==$method->payment_id)|| ($auto_select_default && empty($this->payment_id)&&!$done)){ $checked = 'checked="checked"'; $done = true; } if($this->config->get('auto_submit_methods',1) && empty($method->ask_cc) && empty($method->custom_html) && empty($checked)){ $checked.=' onclick="this.form.action=this.form.action+\'#hikashop_payment_methods\';this.form.submit(); return false;"'; } ?> <tr class="row<?php echo $odd; ?>"> <td> <input class="hikashop_checkout_payment_radio" id="radio_<?php echo $method->payment_type.'_'.$method->payment_id;?>" type="radio" name="hikashop_payment" value="<?php echo $method->payment_type.'_'.$method->payment_id;?>" <?php echo $checked; ?> /> </td> <td><label for="radio_<?php echo $method->payment_type.'_'.$method->payment_id;?>" style="cursor:pointer;"> <span class="hikashop_checkout_payment_image"> <?php if(!empty($method->payment_images)){ $images = explode(',',$method->payment_images); if(!empty($images)){ foreach($images as $image){ if(!empty($this->images_payment[$image])){ ?> <img src="<?php echo HIKASHOP_IMAGES .'payment/'. $this->images_payment[$image];?>" alt=""/> <?php } } } } ?> </span> </label> </td> <td><label for="radio_<?php echo $method->payment_type.'_'.$method->payment_id;?>" style="cursor:pointer;"> <span class="hikashop_checkout_payment_name"><?php echo $method->payment_name;?></span></label> <span class="hikashop_checkout_payment_cost"> <?php if(bccomp($method->payment_price,0,5) === 0) { $price_text = JText::_('FREE_PAYMENT'); } else { $pt = (int)$this->params->get('price_with_tax'); $price_text = JText::_('PRICE_BEGINNING'); $price_text .= '<span class="hikashop_checkout_payment_price">'; if($pt){ $price_text .= $this->currencyHelper->format($method->payment_price_with_tax,$method->payment_params->payment_currency); } if($pt == 2) $price_text .= JText::_('PRICE_BEFORE_TAX'); if($pt == 2 || $pt == 0) $price_text .= $this->currencyHelper->format($method->payment_price,$method->payment_params->payment_currency); if($pt == 2) $price_text .= JText::_('PRICE_AFTER_TAX'); if($this->params->get('show_original_price') && isset($method->payment_price_orig) && bccomp($method->payment_price_orig, 0, 5)) { $price_text .= JText::_('PRICE_BEFORE_ORIG'); if($pt > 0) $price_text .= $this->currencyHelper->format($method->payment_price_orig_with_tax, $method->payment_currency_orig); if($pt == 2) $price_text .= JText::_('PRICE_BEFORE_TAX'); if($pt == 2 || $pt == 0) $price_text .= $this->currencyHelper->format($method->payment_price_orig, $method->payment_currency_orig); if($pt == 2) $price_text .= JText::_('PRICE_AFTER_TAX'); $price_text .= JText::_('PRICE_AFTER_ORIG'); } $price_text .= '</span> '; $price_text .= JText::_('PRICE_END'); } echo $price_text; ?> </span> <?php if(!empty($method->payment_description)){ ?> <br/> <div class="hikashop_checkout_payment_description"><?php echo $method->payment_description;?></div> <?php } ?> </td> </tr> <tr class="hikashop_checkout_payment_ccinfo"> <td colspan="3"> <?php $this->method =& $method; $this->setLayout('ccinfo'); echo $this->loadTemplate(); ?> </td> </tr> <?php $row_index++; $odd = 1-$odd; } ?> </table> <?php } else { ?> <div class="controls"> <div class="hika-radio"> <div class="hikashop_payment_methods_table"> <?php foreach($this->methods as $method){ $checked = ''; if(($this->payment_method==$method->payment_type && $this->payment_id==$method->payment_id)|| ($auto_select_default && empty($this->payment_id)&&!$done)){ $checked = 'checked="checked"'; $done = true; } if($this->config->get('auto_submit_methods',1) && empty($method->ask_cc) && empty($method->custom_html) && empty($checked)){ $checked.=' onclick="this.form.action=this.form.action+\'#hikashop_payment_methods\';this.form.submit(); return false;"'; } ?> <div class="row<?php echo $odd; ?>"> <div class="katerina"> <div class="uk-grid" data-uk-grid-match="{target:'.uk-panel'}"> <div class="uk-width-large-1-1"> <div class="uk-panel uk-panel-box uk-panel-box-primary"> <input class="hikashop_checkout_payment_radio" id="radio_<?php echo $method->payment_type.'_'.$method->payment_id;?>" type="radio" name="hikashop_payment" value="<?php echo $method->payment_type.'_'.$method->payment_id;?>" <?php echo $checked; ?> /> <label class="btn btn-radio" for="radio_<?php echo $method->payment_type.'_'.$method->payment_id;?>"><?php echo $method->payment_name;?></label> <span class="hikashop_checkout_payment_cost"> <?php if(bccomp($method->payment_price,0,5) === 0) { $price_text = JText::_('FREE_PAYMENT'); } else { $pt = (int)$this->params->get('price_with_tax'); $price_text = JText::_('PRICE_BEGINNING'); $price_text .= '<span class="hikashop_checkout_payment_price">'; if($pt > 0) $price_text .= $this->currencyHelper->format($method->payment_price_with_tax,$method->payment_params->payment_currency); if($pt == 2) $price_text .= JText::_('PRICE_BEFORE_TAX'); if($pt == 2 || $pt == 0) $price_text .= $this->currencyHelper->format($method->payment_price,$method->payment_params->payment_currency); if($pt == 2) $price_text .= JText::_('PRICE_AFTER_TAX'); if($this->params->get('show_original_price') && isset($method->payment_price_orig) && bccomp($method->payment_price_orig, 0, 5)) { $price_text .= JText::_('PRICE_BEFORE_ORIG'); if($pt > 0) $price_text .= $this->currencyHelper->format($method->payment_price_orig_with_tax, $method->payment_currency_orig); if($pt == 2) $price_text .= JText::_('PRICE_BEFORE_TAX'); if($pt == 2 || $pt == 0) $price_text .= $this->currencyHelper->format($method->payment_price_orig, $method->payment_currency_orig); if($pt == 2) $price_text .= JText::_('PRICE_AFTER_TAX'); $price_text .= JText::_('PRICE_AFTER_ORIG'); } $price_text .= '</span> '; $price_text .= JText::_('PRICE_END'); } echo $price_text; ?> </span> <span class="hikashop_checkout_payment_image"> <?php if(!empty($method->payment_images)){ $images = explode(',',$method->payment_images); if(!empty($images)){ foreach($images as $image){ if(!empty($this->images_payment[$image])){ ?> <img src="<?php echo HIKASHOP_IMAGES .'payment/'. $this->images_payment[$image];?>" alt=""/> <?php } } } } ?> </span> <div class="hikashop_checkout_payment_description"><?php echo $method->payment_description;?></div> <div class="ccinfo"> <?php $this->method =& $method; $this->setLayout('ccinfo'); echo $this->loadTemplate(); ?> </div> </div> </div> </div> </div> </div> <?php $odd = 1-$odd; } ?> </div> </div> <script type="text/javascript"> (function($){ $("#hikashop_payment_methods .hika-radio input:checked").each(function() { $("label[for=" + jQuery(this).attr('id') + "]").addClass('active btn-primary'); }); $("#hikashop_payment_methods .hika-radio input").change(function() { $(this).parents('div.hika-radio').find('label.active').removeClass('active btn-primary'); $("label[for=" + jQuery(this).attr('id') + "]").addClass('active btn-primary'); }); })(jQuery); </script> </div> <?php } ?> </fieldset> </div> <?php } }

Thank you
Last edit: 10 years 4 months ago by verzevoul.

Please Log in or Create an account to join the conversation.

More
10 years 4 months ago #240042 by nicolas
Hi,

You can use such CSS:
.uk-panel-box-primary {
height: 150px;
}
The following user(s) said Thank You: verzevoul

Please Log in or Create an account to join the conversation.

More
10 years 4 months ago #240094 by verzevoul
Yes i thought so.
I was just wondering why CSS works in one view file but not in another.

Thank you

Please Log in or Create an account to join the conversation.

More
10 years 4 months ago #240107 by Jerome
Replied by Jerome on topic Change payment methods table
Hi,

CSS is working with selectors. For more details ; you can read documentation on CSS over the Internet.
Our support is focus on the components and how to use it ; the CSS is outside the support we can provide.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.
The following user(s) said Thank You: verzevoul

Please Log in or Create an account to join the conversation.

More
10 years 3 months ago #243326 by verzevoul
Hello!

i created panel boxes instead of table ok, one question:

when i choose a shipping or payment method the active button changes background (see screenshot), what i would like is the whole box to have different background. Do i need some php here maybe?

Could you help me with this?

Thank you

Please Log in or Create an account to join the conversation.

More
10 years 3 months ago #243339 by nicolas
Hi,

Again, that's not a HikaShop question.
Here is a page which talks about adding CSS to a parent element of another element:
stackoverflow.com/questions/8114657/how-...hild-element/8114664
The following user(s) said Thank You: verzevoul

Please Log in or Create an account to join the conversation.

Time to create page: 0.286 seconds
Powered by Kunena Forum