¡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! :)