Change payment methods table

  • Posts: 1056
  • Thank you received: 11
  • Hikashop Business
8 years 6 months ago #239812

-- 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!

Attachments:

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

  • Posts: 82865
  • Thank you received: 13372
  • MODERATOR
8 years 6 months ago #239821

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.

  • Posts: 1056
  • Thank you received: 11
  • Hikashop Business
8 years 6 months ago #239904

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

<?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.

  • Posts: 82865
  • Thank you received: 13372
  • MODERATOR
8 years 6 months ago #239907

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.

  • Posts: 1056
  • Thank you received: 11
  • Hikashop Business
8 years 6 months ago #240033

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.
I added the CSS you said but no result unfortunately.

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'}">

<?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: 8 years 6 months ago by verzevoul.

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

  • Posts: 82865
  • Thank you received: 13372
  • MODERATOR
8 years 6 months ago #240042

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.

  • Posts: 1056
  • Thank you received: 11
  • Hikashop Business
8 years 6 months ago #240094

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.

  • Posts: 26158
  • Thank you received: 4028
  • MODERATOR
8 years 6 months ago #240107

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.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.
The following user(s) said Thank You: verzevoul

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

  • Posts: 1056
  • Thank you received: 11
  • Hikashop Business
8 years 5 months ago #243326

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

Attachments:

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

  • Posts: 82865
  • Thank you received: 13372
  • MODERATOR
8 years 5 months ago #243339

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.073 seconds
Powered by Kunena Forum