- Posts: 1184
- Thank you received: 13
Change payment methods table
10 years 4 months ago #239812
by verzevoul
Change payment methods table was created 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!
-- 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.
10 years 4 months ago #239821
by nicolas
Replied by nicolas on topic Change payment methods table
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.
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.
10 years 4 months ago #239904
by verzevoul
Replied by verzevoul on topic Change payment methods table
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
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.
10 years 4 months ago #239907
by nicolas
Replied by nicolas on topic Change payment methods table
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.
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.
10 years 4 months ago - 10 years 4 months ago #240033
by verzevoul
Replied by verzevoul on topic Change payment methods table
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'}">
Thank you
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.
10 years 4 months ago #240042
by nicolas
Replied by nicolas on topic Change payment methods table
Hi,
You can use such CSS:
.uk-panel-box-primary {
height: 150px;
}
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.
10 years 4 months ago #240094
by verzevoul
Replied by verzevoul on topic Change payment methods table
Yes i thought so.
I was just wondering why CSS works in one view file but not in another.
Thank you
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.
10 years 4 months ago #240107
by Jerome
Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.
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,
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.
10 years 3 months ago #243326
by verzevoul
Replied by verzevoul on topic Change payment methods table
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
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.
10 years 3 months ago #243339
by nicolas
Replied by nicolas on topic Change payment methods table
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
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