Soporte » Plugins y Hacks » WooCommerce » Añadir Product Add-Ons en Woocommerce

  • Hola,

    Estoy trabajando en un e-commerce (todavía sin publicar) y tengo una duda a la hora de añadir campos de personalización en la página de productos.

    Por un lado, tengo un formulario creado en HTML y un código javascript que permite previsualizar el texto introducido en el formulario con una serie de opciones de formato (fuente, tamaño, color). Utilizando el plugin “Code Snippets” he probado a introducir todo el código a través de add_action('woocommerce_before_add_to_cart_button','opciones') y funciona correctamente.

    Tras esto, estoy tratando de almacenar estas opciones de personalización del producto y añadirlas al pedido siguiendo el ejemplo dado en esta página web:

    https://www.businessbloomer.com/woocommerce-product-add-ons-without-plugin/

    Y aquí es donde me encuentro atascado. El código de esta página modifica el archivo functions.php y crea el formulario desde el mismo.

    Mi consulta es: ¿puedo integrar el código html y javascript dentro del archivo functions.php, (en este caso sería dentro del apartado add_action( 'woocommerce_before_add_to_cart_button', 'bbloomer_product_add_on', 9 ); )? ¿cuál sería la manera más recomendable de relacionar la parte de php con la del lado cliente html / javascript?

    Quizá sea una cuestión muy básica pero soy principiante en el desarrollo web y sobre todo con la parte de php.

    Gracias de antemano por el soporte.

Viendo 1 respuesta (de un total de 1)
  • Copio el código, ya que creo que ayudarán a explicar mejor mi cuestión.

    La parte de formulario en HTML, algo de estilo CSS y previsualización con Javascript es la siguiente:

    <html>
    
    <style>
    
    	.ventana{
    	width: 100px;
    	height: 20px;
    	border:2px solid black;
    	text-align: center;}
    
    </style>
    
    <body>
    
    	<h1>Customization</h1><br>
    
    	<form method="post">
    
    		<h2>Insert text <input id="mensaje" onkeyup="imprimir()"></h2><br>
    		
    	</form>
    
    	<div class="ventana">
               	<div class="texto" id="texto"></div>
            </div>
    
    	<script>
    
    		function imprimir() {
    			text = document.getElementById('mensaje').value;			
    			document.getElementById('ventana').innerHTML=' '+text;}
    
    	</script>
    
    </body>
    </html>

    Este código copiado con el plugin “Code Snippets” en el hook «woocommerce_before_add_to_cart_button» funciona correctamente.

    Por otro lado, para almacenar el texto introducido en el formulario e incluirlo en el pedido del producto necesito pasar los valores a PHP, tal como se realiza en la siguiente página:

    https://www.businessbloomer.com/woocommerce-product-add-ons-without-plugin/

    Por tanto, mi consulta es la siguiente: ¿cómo puedo adaptar e introducir el código anterior dentro de este otro, propuesto en la web, para mantener la parte de javascript?

    add_action( 'woocommerce_before_add_to_cart_button', 'bbloomer_product_add_on', 9 );
     
    function bbloomer_product_add_on() {
        $value = isset( $_POST['custom_text_add_on'] ) ? sanitize_text_field( $_POST['custom_text_add_on'] ) : '';
        echo '<div><label>Custom Text Add-On <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' . $value . '"></p></div>';
    }

    He probado algunas cosas que he consultado en internet pero no me ha funcionado.

    Gracias por la ayuda!

Viendo 1 respuesta (de un total de 1)
  • Debes estar registrado para responder a este debate.