[Solucionado] Modificar Boton de pago paypal

[Salim.gassab]

Buenas noches,

a ver si me podeis ayudar.

 

1- He instalado Paypal y quiero el el boton sea del mismo estilo que el pago con transferencia bancaria como se ve en la captura. he visto alguna web que lo tiene igual.

 

2- Al pulsar el boton pago con paypal no me aparece la opción de pagar con tarjeta de crédito o débito sin registrarse.

 

Espero vustra respuesta.

Un saludo

Edited February 28, 2015 by Salim.gassab (see edit history)

[orlangrod]

Para eso tienes que modificar el archivo .tpl de tu modulo paypal ubicado en

carpetaraiz/modules/nombredelmodulodepaypal/views/hook

y luego aplicarle el estilo .css

 

para eso te puedes guiar del modulo de deposito bancario  ubicado en

carpetaraiz/modules/bankwire/

[Salim.gassab]

Hola Orlangrod,

 

Gracias por la respuesta, soy nuevo en prestashop, me gustaría si puedes explicarlo con mas detalles.

No sé que debo poner y donde para que sean del mismo estilo. si fuera archivo HTML sé hacerlo pero en prestashop parece que no lo tiene.

le adjunto una captura y el estilo del boton bankwire:

 

p.payment_module {
  margin-bottom: 10px; }
  p.payment_module a {
    display: block;
    border: 1px solid #B1D2FF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 17px;
    line-height: 23px;
    color: #333333;
    font-weight: bold;
    padding: 33px 40px 34px 99px;
    letter-spacing: -1px;
    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; }
    p.payment_module a.cheque:after, p.payment_module a.bankwire:after, p.payment_module a.cash:after {
      display: block;
      content: "\f054";
      position: absolute;
      right: 15px;
      margin-top: -11px;
      top: 50%;
      font-family: "FontAwesome";
      font-size: 25px;
      height: 22px;
      width: 14px;
      color: #B1D2FF; }
    p.payment_module a:hover {
      background-color: #f6f6f6; }
    p.payment_module a span {
      font-weight: bold;
      color: #777777; }

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

 

Un saludo

 

[orlangrod]

En la carpeta

/modules/bankwire/views/templates/hook/payment.tpl

puedes ver como está hecho el botón de pago por deposito

<p class="payment_module">
	<a href="{$link->getModuleLink('bankwire', 'payment')|escape:'html'}" title="{l s='Pay by bank wire' mod='bankwire'}">
		<img src="{$this_path_bw}bankwire.jpg" alt="{l s='Pay by bank wire' mod='bankwire'}" width="86" height="49"/>
		{l s='Pay by bank wire' mod='bankwire'} <span>{l s='(order processing will be longer)' mod='bankwire'}</span>
	</a>
</p>

Tendrías que ir a la carpeta de tu modulo de paypal que usas, en views/hook y ver cual es el archivo que usado para el botón de pago y modificarlo de manera similar al de deposito o transferencia.

[Salim.gassab]

Hola orlangrod,

 

He intentado modificarlo pero sé hacerlo. no sé si me pedes ayudar  porfa, le paso el .tpl de paypal

 

 <p class="payment_module">
        <div id="paypal-express-checkout">
            <form id="paypal-express-checkout-form" action="{$paypal_usa_action_payment}" method="post">
                {if $paypal_usa_merchant_country_is_mx}
                    <input id="paypal-express-checkout-btn" type="image" name="submit" src="{$module_dir}img/boton_terminar_compra.png" alt="" style="vertical-align: middle; margin-right: 10px;float: left;" />
                    <p style="line-height: 50px; float: left;">{l s='Da clic para confirmar tu compra con PayPal' mod='paypalusa'}</p>
                    <div style="clear: both;"></div>
                {else}
                    <input id="paypal-express-checkout-btn" type="image" name="submit" src="https://www.paypalobjects.com/{if $lang_iso == 'en'}en_US{else}{if $lang_iso == 'fr'}fr_CA{else}{if $lang_iso == 'es'}es_ES{else}en_US{/if}{/if}{/if}/i/bnr/horizontal_solution_PPeCheck.gif" alt="" style="vertical-align: middle; margin-right: 10px;" /> {l s='Complete your order with PayPal Express Checkout' mod='paypalusa'}
                {/if}
            </form>
        </div>
    </p>
    {else}
        {if isset($paypal_usa_express_checkout_no_token) && $paypal_usa_express_checkout_no_token}
            <p class="payment_module">   

 

AQUÍ dnd he puesto la clase de bankwire pero me ha añadido un boton como el de la trasndeferencia

         
        {/if}
        <div id="paypal-express-checkout" >
            <form id="paypal-express-checkout-form" action="{$paypal_usa_action}" method="post" onsubmit="$('#paypal_express_checkout_id_product_attribute').val($('#idCombination').val());                        $('#paypal_express_checkout_quantity').val($('#quantity_wanted').val());">
                {if $page_name == 'product' && isset($smarty.get.id_product)}
                    <input type="hidden" id="paypal_express_checkout_id_product" name="paypal_express_checkout_id_product" value="{$smarty.get.id_product|intval}" />
                    <input type="hidden" id="paypal_express_checkout_id_product_attribute" name="paypal_express_checkout_id_product_attribute" value="0" />
                    <input type="hidden" id="paypal_express_checkout_quantity" name="paypal_express_checkout_quantity" value="0" />
                {/if}
                {if $paypal_usa_merchant_country_is_mx}
                    <input id="paypal-express-checkout-btn-product" type="image" name="submit" src="{if isset($paypal_usa_express_checkout_no_token) && $paypal_usa_express_checkout_no_token}{$module_dir}/img/accpmark_tarjdeb_mx.png{else}{$module_dir}/img/express_checkout_mx.png{/if}" alt="" style="float: left;"/>
                {else}
                    <input id="paypal-express-checkout-btn-product" type="image" name="submit" src="{if isset($paypal_usa_express_checkout_no_token) && $paypal_usa_express_checkout_no_token}https://www.paypalobjects.com/{if $lang_iso == 'en'}en_US{else}{if $lang_iso == 'fr'}fr_CA{else}{if $lang_iso == 'es'}es_ES{else}en_US{/if}{/if}{/if}/i/bnr/horizontal_solution_PPeCheck.gif{else}https://www.paypal.com/{if $lang_iso == 'en'}en_US{else}{if $lang_iso == 'fr'}fr_CA{else}{if $lang_iso == 'es'}es_ES{else}en_US{/if}{/if}{/if}/i/btn/btn_xpressCheckout.gif{/if}" alt="" />
                {/if}
            </form>
        </div>
        <div style="clear: both;"></div>
        {if isset($paypal_usa_express_checkout_no_token) && $paypal_usa_express_checkout_no_token}
    </p>
    {/if}
    {if !isset($paypal_usa_from_error)}
        <script type="text/javascript">
        {literal}
        $(document).ready(function()
        {
            {/literal}
            {if $page_name == 'product'}
                {literal}
                $('#paypal-express-checkout-form').insertAfter('#buy_block');
                $('#paypal-express-checkout-btn-product').css('float', 'left');
                $('#paypal-express-checkout-btn-product').css('margin-top', '-30px');
                {/literal}
            {else}
                {if !isset($paypal_usa_express_checkout_no_token) || !$paypal_usa_express_checkout_no_token}
                    {literal}
                    $('#paypal-express-checkout-btn-product').hide();
                    $('#paypal-express-checkout').insertBefore('.cart_navigation .button_large');
                    $('#paypal-express-checkout-btn-product').css('float', 'right');
                    $('#paypal-express-checkout-btn-product').css('margin-right', '5px');
                    $('.cart_navigation .button_large').css('margin-left', '5px');
                    $('#paypal-express-checkout-btn-product').show();
                    {/literal}
                {/if}
            {/if}
            {literal}
        });
        {/literal}
    </script>
    {/if}
{/if}
 

[Salim.gassab]

Alguien que me puede ayudar?

[mangax]

No es fácil hacer eso, ya que el botón de paypal no es un enlace, sino un botón de formulario. Aunque le pongas el estilo del botón de pago por transferencia no lo interpretará porque no tiene por ningún lado la etiqueta <a>. Yo opté por poner una imagen igual a la de transferencia, sustituyendo la de paypal. Lo malo es que en pantallas pequeñas no se ve óptimo, pero se entiende.

[Salim.gassab]

Muchas gracias mangax. al final la dejo como esta mientras los clientes lo entienden

Un saludo