129 lines
3.6 KiB
Smarty
129 lines
3.6 KiB
Smarty
{extends file=$layout}
|
|
|
|
{block name='content'}
|
|
<style>
|
|
.box-pm {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.title {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.pm {
|
|
margin: 0 .8125rem;
|
|
}
|
|
|
|
.pm-content {
|
|
position: relative;
|
|
margin-bottom: 1.563rem;
|
|
height: 165px;
|
|
width: 161px;
|
|
background: #fff;
|
|
box-shadow: 2px 2px 8px 0 rgb(0 0 0 / 20%)
|
|
}
|
|
|
|
.pm-content:hover {
|
|
border: 1px solid green
|
|
}
|
|
|
|
.pm-logo {
|
|
|
|
max-height: 50%;
|
|
max-width: 65%;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.pm-description {
|
|
bottom: 1.25rem;
|
|
padding-top: .625rem;
|
|
z-index: 2;
|
|
text-align: center;
|
|
height: 3.125rem;
|
|
transition: bottom .3s;
|
|
color: black;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.pbl_loading-content {
|
|
background: #fbfbfb none;
|
|
border: 1px solid #d6d4d4;
|
|
border-radius: 4px;
|
|
transform: translate(-50%, -50%);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
color: black;
|
|
padding: 20px;
|
|
}
|
|
|
|
#pbl_loading {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 50000;
|
|
background: rgba(0, 0, 0, .5)
|
|
}
|
|
</style>
|
|
<section class="clearfix" style="display:block">
|
|
<h2 class="h3 text-uppercase title">
|
|
{l s='Choose payment channel' mod='imoje'}
|
|
</h2>
|
|
<div class="box-pm row">
|
|
<div id="pbl_loading" class="hidden">
|
|
<div class="pbl_loading-content">
|
|
<img id="loading-gif" src="{$loading_gif}" alt="{l s='Loading' mod='imoje'}"
|
|
style="display: block; margin-left: auto; margin-right: auto;"/><br/>
|
|
{l s='Please wait, you will be redirected to next step.' mod='imoje'}
|
|
</div>
|
|
</div>
|
|
|
|
{foreach from=$payment_method_list key=id item=payment_method}
|
|
<div class="pm">
|
|
<a class="pm-link"
|
|
href="{$payment_link}?pm={$payment_method.paymentMethod}&pmc={$payment_method.paymentMethodCode}">
|
|
<div class="pm-content">
|
|
|
|
{if $payment_method.logo}
|
|
<img class="pm-logo" src="{$payment_method.logo}"
|
|
alt="{$payment_method.description}">
|
|
{/if}
|
|
<div class="pm-description">
|
|
<p>
|
|
{$payment_method.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
</section>
|
|
<script type="text/javascript">
|
|
document.addEventListener("DOMContentLoaded", function (event) {
|
|
|
|
$('.pm-link').click(function () {
|
|
$('#pbl_loading').removeClass('hidden');
|
|
|
|
});
|
|
})
|
|
</script>
|
|
{/block}
|