Añadir Product Add-Ons en Woocommerce

  • jsinter

    (@jsinter)


    hace 3 años, 8 meses

    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)
  • Iniciador del debate jsinter

    (@jsinter)

    hace 3 años, 8 meses

    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)
  • El debate ‘Añadir Product Add-Ons en Woocommerce’ está cerrado a nuevas respuestas.