0

¡Hola todxs!

Necesito añadir una funcionalidad a una web Wordpress + Woocommerce y no consigo encontrar la solución.

El caso es que la web es una tienda e-commerce, la cual está destinada tanto a particulares (se les muestra el precio si no están loggeados) como a profesionales (no se les muestra el precio hasta que no se loggean). En las páginas donde se muestra el catálogo de la tienda no hay problema, pues estoy destinando una página de catálogo a particulares (con precios) y otra página de catálogo a profesionales (sin precios).

El problema viene con las páginas de producto, que son únicas. Tanto si llegas desde el catálogo particular, como si llegas del catálogo profesional, se muestra el precio.

Quisiera que, una vez el usuario ha hecho clic en el botón "SOY PROFESIONAL" que aparece en la web y haya accedido al catálogo para profesionales (sin precio), no pueda ver el precio de los productos si no está loggeado.

He intentado hacer esto con JavaScript (donde no soy nada experta), haciendo que una vez se haga clic en el botón "SOY PROFESIONAL" se oculte la etiqueta price, pero claro, no se mantiene el price oculto una vez se refresca la página o se accede a otras. He trasteado también con el tema de las cookies siguiendo el ejemplo del compañero @denyn_crawford, pero no hay manera.

// Obtenemos el valor de la cookie selected que almacenamos mas abajo. 

var stateCookie = Cookies.get("selected"); 

// Agregamos el valor de la cookie a un query selector que ya vimos como armar (no almacenamos/seteamos la cookie aquí) y hacemos los cambios, preferiblemente con .load()

if (stateCookie != undefined) {

  $(".image").removeClass("selected");
$("#"+stateCookie).addClass("selected");

}

console.log(stateCookie)

$(".selected").show();

$(document).ready(function(){

  $(".change").click(function(){

    $(".image").hide();  
    $(".image").removeClass("selected");        
    $("#"+$(this).attr("rel")).show();
    $("#"+$(this).attr("rel")).addClass("selected");

    // Con cada click seteamos una cookie llamada selected con el valor de id del la foto actual, que requerimos arriba.

    Cookies.set("selected", $(this).attr("rel"));

  });

});
.image {

 display: none;

}
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h5>Click en Run para recargar el fiddle.</h5>

<div id="image01" class="image selected">
  <img src="https://www.african.cam.ac.uk/images/secondlevel/dasshills/image_preview">
</div>

<div id="image02" class="image">
  <img src="https://data.whicdn.com/images/60436988/large.png">
</div>

<div id="image03" class="image">
  <img src="https://www.tawbaware.com/maxlyons/crop_8.jpg">
</div>

<!-- Usamos una sola clase para los botones, así es mas sencillo de manejar--> 
<!-- Tambien agregamos nuestro relativo con la id de cada imagen-->

<button rel="image01" class="change">Picture 1</button>
<button rel="image02" class="change">Picture 2</button>
<button rel="image03" class="change">Picture 3</button>

<h6></br></br></br>Creditos <a href="https://www.instagram.com/denyn_crawford/" target="_blank">@denyn_crawford</a> - <a href="https://github.com/denyncrawford" target="_blank">denyncrawford</a></h6>

Fuente: https://jsfiddle.net/syk75pau/1/

¿Alguien podría arrojar un poco de luz en este asunto? ¡Muchas gracias! :)

2
  • 1
    Personalmente antes que en cookie lo metería en el localStorage o sessionStorage. Por otro lado, las preguntas en SO deberían ser autocontenidas, no necesitas usar jsfiddle para poner un ejemplo de html+css+js que es lo único que requiere un ejemplo mínimo verificable para este problema. Puedes leer más acerca de cómo funcionamos en Cómo preguntar y hacer el recorrido de bienvenida para empezar a participar correctamente en la comunidad. Un saludo
    – Benito-B
    Commented el 6 sept. 2023 a las 11:54
  • @Benito-B ¡Gracias por tu comentario y sugerencias! Un abrazo
    – Monalysa
    Commented el 6 sept. 2023 a las 12:31

1 respuesta 1

0

Podrías usar este código en el archivo functions.php de tu tema para esconder el precio para usuarios no autenticados si una cookie particular está configurada:

function hide_price_for_professionals() {
    // Comprobamos si el usuario está autenticado y si la cookie 'professional' está configurada
    if ( !is_user_logged_in() && isset($_COOKIE['professional']) ) {
        // Escondemos el precio
        remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10);
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
    }
}

add_action('init', 'hide_price_for_professionals');

Y después del lado de JS, para configurar la cookie cuando alguien hace clic en el botón "SOY PROFESIONAL":

$(document).ready(function() {
    $("#soy_profesional_button").click(function() {
        Cookies.set("professional", "true", { expires: 7 });
    });
});

Por último le añades el identificador al button:

<button id="soy_profesional_button">SOY PROFESIONAL</button>

No se si por aquí irán los tiros, espero que te ayude

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.