Boton comprar, personalizar funcion

  • gerardoboni

    (@gerardoboni)


    hace 4 años, 7 meses

    hola buen dia..
    como le puedo hacer para personalizar mi botón de «comprar producto».

    lo que quiero hacer es que al momento de dar clic en el botón de comprar, me abra un popup»ventana emegente», la cual me de un aviso que se abrirá otra pestaña, al momento de darle en aceptar.
    la otra ventana que se abrirá es un URL de donde viene el producto externo..

    ayuda por favor

    gracias 🙂

    • Este debate fue modificado hace 4 años, 7 meses por Fernando Tellado. Razón: Movido al foro adecuado
Viendo 6 respuestas - de la 1 a la 6 (de un total de 6)
  • Moderador Fernando Tellado

    (@fernandot)

    hace 4 años, 7 meses

    O sea, ¿es un producto externo que, en vez del comportamiento por defecto de abrirse directamente en el sitio donde se compra, antes muestre una ventana emergente donde informarás de «algo»?

    Si es así ni idea, no sé de ningún plugin ni código de la API de WooCommerce que permita algo así. Habría que programarlo a medida.

    Iniciador del debate gerardoboni

    (@gerardoboni)

    hace 4 años, 7 meses

    hola fernando tellado, gracias por comentar..

    si asi es, al darle clic en comprar en vez de abrir una nueva pestaña de donde viene el producto, quiero que me habrá una ventana emergente en la cual quiero poner un aviso. ejemplo:»esta a punto de salir de ‘mi pagina’ y al momento de dar aceptar que me mande a la otra pagina en otra ventana».

    por el momento al darle clic en comprar solo me abre la otra ventana.
    solo quiero incorporar el mensaje emergente. no tengo idea como hacerla.

    si me pueden ayudar se los agradecería muchísimo. 🙂
    gracias:)
    saludos!!

    Adrián de Grafreak

    (@adriandegrafreak)

    hace 4 años, 7 meses

    Buenas Gerardo,

    Eso se puede realizar pero no conozco ningun plugin que lo realice así sin más. Se debería programar a medida para que al hacer click abriera una ventana modal con la info que comentas y allí si que estuviera el enlace real al producto externo.

    Para esto hay librerías como fancybox o hacerlo con código como en https://www.w3schools.com/howto/howto_css_modals.asp

    Una manera «cutre» de hacerlo es con un confirm de javascript, que sería añadirle por maqueta al enlace un onclick. Sería un cósigo tipo:
    Enlace

    Pero esto te generará un mensaje de navegador y no una cosa estilizada.

    Espero que te haya sido de ayuda.

    Iniciador del debate gerardoboni

    (@gerardoboni)

    hace 4 años, 7 meses

    hola adrian gracias por comentar. he probado con insertar con codigo html al codigo php que tengo,y aun no me funciona o algo estoy haciendo mal.
    estoy utilizando el plugins code SNIPPETS para agregar codigo php y personalizar el comportamiendo del boto comprar de mi woocomcerce .

    el codigo es la siguiente.

    si alguien me podria decir en donde puedo insertar el codigo html que se ejecute cuando haga clic en comprar, se lo agradeceria
    ###############################################################################

    add_filter( ‘woocommerce_loop_add_to_cart_link’, ‘ts_external_add_product_link’ , 10, 2 );

    remove_action(‘woocommerce_external_add_to_cart’, ‘woocommerce_external_add_to_cart’, 30 );

    add_action( ‘woocommerce_external_add_to_cart’, ‘ts_external_add_to_cart’, 30 );

    function ts_external_add_product_link( $link ) {
    global $product;

    if ( $product->is_type( ‘external’ ) ) {

    $link = sprintf( ‘%s‘,

    esc_url( $product->add_to_cart_url() ),
    esc_attr( isset( $quantity ) ? $quantity : 1 ),
    esc_attr( $product->id ),
    esc_attr( $product->get_sku() ),
    esc_attr( isset( $class ) ? $class : ‘button product_type_external’ ),
    esc_html( $product->add_to_cart_text() )
    );
    }
    return $link;
    }
    ###############################################################################

    • Esta respuesta fue modificada hace 4 años, 7 meses por gerardoboni.
    Iniciador del debate gerardoboni

    (@gerardoboni)

    hace 4 años, 7 meses

    este es el codigo html que le quiero insertar

    <!DOCTYPE html>
    <html>
    <head>
    <meta name=»viewport» content=»width=device-width, initial-scale=1″>
    <style>
    body {font-family: Arial, Helvetica, sans-serif;}

    /* The Modal (background) */
    .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
    position: relative;
    background-color: #fff;
    margin: auto;
    border-radius: 22px;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
    }

    @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
    }

    /* The Close Button */
    .close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
    }

    .close:hover,
    .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    }

    .modal-header {
    padding: 2px 16px;
    text-align: center;
    border-radius: 18px 18px 0px 0px;
    background-color: #fff;
    color: #000;
    }

    .modal-body {
    padding: 2px 16px;
    height: 140px;
    text-align: center;

    }

    .modal-footer {
    padding: 2px 16px;
    background-color: #FFFFFF;
    border-radius: 0px 0px 18px 18px;
    color: white;
    text-align: center;
    }
    </style>
    </head>
    <body>

    <h2></h2>

    <!– Trigger/Open The Modal –>
    <button id=»button product_type_external»>comprar</button>

    <!– The Modal –>
    <div id=»myModal» class=»modal»>

    <!– Modal content –>
    <div class=»modal-content»>
    <div class=»modal-header»>
    <span class=»close»>×</span>
    <h2>¡Hey! Abriremos una nueva pestaña</h2>
    </div>
    <div class=»modal-body»>
    <p>Para continuar con tu compra te llevaremos directo a la tienda donde lo encontramos. </p>
    <p>Pero no te preocupes, nosotros no nos iremos.</p>
    </div>
    <div class=»modal-footer»>
    <h3></h3>
    <button class=»enlace» role=»link» onclick=»window.location=’https://soymsi.com'»>soymsi.com</button&gt;
    <button class=»enlace» role=»link» onclick=»window.location=’https://soymsi.com'»>ir a la tienda</button>

    </div>
    </div>

    </div>

    <script>
    // Get the modal
    var modal = document.getElementById(«myModal»);

    // Get the button that opens the modal
    var btn = document.getElementById(«button product_type_external»);

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName(«close»)[0];

    // When the user clicks the button, open the modal
    btn.onclick = function() {
    modal.style.display = «block»;
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
    modal.style.display = «none»;
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
    if (event.target == modal) {
    modal.style.display = «none»;
    }
    }
    </script>

    </body>
    </html>

    Adrián de Grafreak

    (@adriandegrafreak)

    hace 4 años, 7 meses

    Buenas @gerardoboni

    Como te comentaron en el anterior código esto requiere un desarrollo individual, no vale con enganchar código y ya.

    Si ves que no te sale te recomiendo que busques a algún profesional cerca de ti o que lo publiques en jobs.wordpress.net

Viendo 6 respuestas - de la 1 a la 6 (de un total de 6)
  • El debate ‘Boton comprar, personalizar funcion’ está cerrado a nuevas respuestas.

Etiquetas