• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Alex
    Marek
  • Private: No
  • Open Date: 09.10.15, 13:08
  • Opened by: Alex
  • Closed by: Marek
  • Closed on: 29.08.17, 23:33
  • Reason: Closed
  • Comment: Glad to help!

Ticket #8600 - al4.4 Checkout page, step 5, payment looks bad

Delivery modules looks bad in our themes

Alysum theme left, default theme right

compare
In default theme it’s ok.
Developer of these two modules says that Alysum uses 1.5.x prestashop payment modules layout and that these modules would look correctly if Alysum would be using 1.6.x layout.

In new PS 161 appeared file \themes\default-bootstrap\js\advanced-payment-api.js

FIX:
1) copy images
bankwire.png
cash.png
cheque.png
from \themes\default-bootstrap\img\ to \themes\alysum\img\

2)
replace the file \modules\bankwire\views\templates\hook\payment.tpl
with the file \themes\default-bootstrap\modules\bankwire\views\templates\hook\payment.tpl

replace the file \modules\cashondelivery\views\templates\hook\payment.tpl
with the file \themes\default-bootstrap\modules\cashondelivery\views\templates\hook\payment.tpl

replace the file \modules\cheque\views\templates\hook\payment.tpl
with the file \themes\default-bootstrap\modules\cheque\views\templates\hook\payment.tpl

3)
And add to the end of the /themes/alysum/css/global.css

/* fix for delivery modules */
  p.payment_module {
  margin-bottom: 10px; }
  p.payment_module a {
    display: block;
    border: 1px solid #d6d4d4;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-size: 17px;
    line-height: 23px;
    color: #333;
    font-weight: bold;
    padding: 33px 40px 34px 99px;
    position: relative; }
    p.payment_module a.bankwire {
      background: url(../img/bankwire.png) 15px 12px no-repeat #fbfbfb; }
    p.payment_module a.cheque {
      background: url(../img/cheque.png) 15px 15px no-repeat #fbfbfb; }
    p.payment_module a.cash {
      background: url(../img/cash.png) 15px 15px no-repeat #fbfbfb; }
    #pattern p.payment_module a:after {
    	content: "";
    	display: inline-block;
    	height:30px;
    	width:30px;
    	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA7UlEQVRYR+3UvQrCMBQF4NOEzLWkkw8g+gKCcwfBl3YVxEGq7yBIoVKX/sRKRx1sb3Jtl3QN9Hyc5N4AE3/BxPnwAN8ApQEx0zqVQFkqtX3ebneOB0wChFpfJLACkFZKJRwICgBxHM+bptkLKRdcCBKgq5wbQQZwI6wAnAhrABfCCcCBcAa4IlgA34iXMcc8z9dDFtVfAAY4PLJsMxrgYze07bmu66QoimwUgEt4B3S6AtdwJwBHuDWAK9wKwBlOBnCHUwEijKKrFGIJ4qj9GkfKFARa65MBalNVu6Fz3rcLKIC+f1mde4BvYPIG3lgw3yGS4H7EAAAAAElFTkSuQmCC);
	   	float:right;
    	position:absolute;
    	right: 20px
}  
p.payment_module a:hover {background-color: #f6f6f6}
p.payment_module a span {font-weight: bold;color: #777}

.payment_module.box {
  margin-top: 20px; }

p.cheque-indent {margin-bottom: 9px}
.cheque-box .form-group {margin-bottom: 0px}
  .cheque-box .form-group .form-control {width: 269px}

.order-confirmation.box {
  line-height: 29px; }
  .order-confirmation.box a {
    text-decoration: underline; }
    .order-confirmation.box a:hover {
      text-decoration: none; }

Comments

Alex 09 Oct 2015, 13:10

the result is