Truco Opencart: como exponer en una misma tienda productos modo catálogo y productos con carrito

truco opencart catalogo

Este artículo no tiene que ver con marketing ni con tiendas físicas ni con escaparates, pero como estaba diseñando una tienda online para uno de nuestros clientes de catinfog (algo a lo que dedico la mayor parte de mi tiempo), y lo he resuelto de una forma bastante original, he querido recogerlo en un artículo por si a alguien le pasaba lo mismo que supiera como resolverlo de una forma bastante original.

Ya sabéis, y si no lo sabíais os lo digo ahora, que Catinfog está basado en un software de comercio electrónico opensource que se llama open cart. Es el tercer cms de comercio electrónico más usado a nivel mundial y es por eso que estamos orgullosos de utilizarlo como base para nuestra TPV.

Pues bien, este cliente quería una tienda que tuviera dos tipos de productos diferentes:

  • Productos que se pudieran comprar de la forma habitual, o sea, añadiendo los al carrito y pagando por ellos.
  • Productos que ocultar a toda la información del producto dejando solamente las imágenes y en vez del botón de añadir al carrito y toda la demás información que tienen los productos de Open card en la columna de la derecha, mostrar solamente el nombre.

En resumen lo que quería esta tienda es convertir su tienda en catálogo pero a la vez tener productos que se puedan vender.

En principio esto es algo que se puede hacer con alguna extensión de pago o programándolo uno mismo. Pero como, sinceramente, cada hora de trabajo que metemos en un proyecto está más que contada, me puse a pensar en algo que no requeriera ni programación y fuera muy simple de usar para mi cliente sin tener que usar una extensión (aunque está fuera vqmod). No quería usar una extensión porque a la hora de actualizar el núcleo de opencart es un infierno.

Al final di con una solución que no requiere saber programar ni requiere de una extensión es una solución extremadamente sencilla. Esto es lo que hice:

  • Fui a la sección de módulos cree un nuevo módulo de HTML. Pulse en el botón que me permite ver el HTML en crudo, y escribí entre etiquetas
    <style>.elementoaocultar{display:none}</style> dirigiéndome a aquellos elementos que quería ocultar. Habilité el módulo y lo guarde.
  • A continuación cree un nuevo layout al que llame «catálogo». Dentro de ese layout añadí el módulo HTML en la parte superior central.
  • Por último edité el producto qué quería que no mostrase los botones de añadir al carrito y le asigne el layout «catálogo».

Y ya está. De esta forma cada vez que quería que un producto se se mostrará en forma de catálogo, le asignaba el layout catálogo.

PD. En realidad mi cliente me pidió tres tipos de producto diferentes y al final tuve que modificar mediante vqmod la ficha de producto, pero no lo voy a contar para no liar más el artículo. Simplemente quería mostrar un truco fácil para modificar ciertas páginas de opencart con CSS, módulos html y los layouts.

12 comentarios sobre “Truco Opencart: como exponer en una misma tienda productos modo catálogo y productos con carrito
  1. hola, soy un poco lenta para comprender jaja, fuiste claro pero yo soy complicada!!, estoy justamente necesitando lo que cuentas…tener productos para vender… y otros solo para visualizar… ej.. ingresar noticias etc…
    Necesito necesito vender mis productos…Featured… pero encima ingresar «como si fuera featured» también pero sin las opciones de pago…
    En ese bloque donde no quiero que aparezca opciones de pago…diría noticias…novedades … solo en modo catalogo.
    Quiero seguir tus pasos pero mi poca experiencia no me permite hacerlo.
    Fueras tan amable hacerme un muy breve ejemplo de un producto para ocultar opciones de pago?, te estaría eternamente agradecida porque estoy buscando por todos lados.
    He logrado hacer «desaparecer» wishlist y compare, pero en determinados «productos» necesito que se puedan ver…fotos…txt..etc.. pero no opciones de ventas. Mil gracias!!

    1. Hola Lorena,

      Intento explicarlo paso a paso:

      1- En primer lugar crea un layout.
      2- Asocia el producto a ese layout.
      3- En la página del producto localiza un class que se aplique al div contenedor del elemento que quieres ocultar.
      4- Ve a la sección de módulos y crea a continuación un nuevo módulo html. En el modo edición código metes entre etiquetas style los elementos que quieres ocultar. Por ejemplo, si quieres ocultar un elemento que se llama «label» lo escribirías así:

      Asocia el módulo html al layout que asociaste al producto.

      ¡Tachán! Ahora a ese producto concreto se le aplica esa propiedad css.

  2. Gracias nuevamente, estoy con las herramientas de google chrome … F12.
    Cree el layout y asocié el producto publicado a ese layout (lo llame «catalogo»).
    Desde la herramienta de google chrome.. (visualizando la pagina con el producto… es decir…estoy viendo la pagina) hago el seguimiento hasta que me marca la opción de Add to Cart que justamente es la que quiero «quitar». Me indica que es class=»form-group»
    Como hago para que no se vea… con que codígo…. no se vio en tu publicación que recién me hiciste. Gracias!!!!!!!!!!!!!!!! por todo!!!!!!!!!!

  3. Logré hacer que no aparezca en la misma publicación!! pero también necesito que no aparezca en la portada dentro de featured.
    Quiero que la web tenga… el menu… debajo el slideshow….debajo unos productos (3..4) que no tengan opcion de compra… y luego los featured de siempre con opcion de compra.
    El código que use es este: (espero se leea):

    $(document).ready(function() {
    $(«.form-group»).hide();
    });

    1. Para el featured en una página determinada tienes que hacer lo mismo.

      Si lo quieres para la página principal añade el módulo html con el style en el layout home.

  4. No logre realizarlo exitosamente.
    El código funciona y la idea funciona, desaparece el add to cart desde la misma publicación… correcto, pero cuando quiero dentro de la portada…agregando featured ya no funciona..si entro en la publicación si. Talvez no me sepa explicar bien…
    Viste en el template original… que debajo del slider tienes Featured… en forma de cajas rectangulares… necesito que se oculte el add to cart de algunos de ellos…, no lo logro.
    Pero si entro en alguna de esas «cajas rectangulares» publicaciones… efectivamente funciona.

    1. Lorena, para quitar los botones en los productos featured del template por defecto de opencart, añade esto:

      El problema es que se aplicará a todos los productos que estén en la página principal, ya sean con o sin carrito. Para solucionar este problema estético yo hice lo mismo que zalando: quitar los botones en todas la páginas categorías y dejarlo solo en la página de producto. O sea, dejar solo la imagen de producto y el precio.

      De hecho mira esta web que diseñé hace un par de meses: vestidosparabautizos.com. Es la plantilla por defecto de opencart y le he quitado los botones en el featured y en las categorías dejándolo solo en la ficha de producto. De tal forma que ahora si podría diferenciar entre productos de catálogo y productos con carrito sin problemas estéticos.

      Un saludo.

      1. Justamente eso me encantaría, el trabajo que has hecho, no se como se puede o si me lo enviarías por mail el código que me mencionas porque no se ve en la publicación ni en la de arriba… me gustaría mucho tenerlo para ya mismo usarlo…. pero no lo veo. Me puedes enviar al mail? ya que creo que el sistema te lo oculta cuando lo ingresas.
        Te agradezco mucho todo el tiempo que estas invirtiendo en mi!!.

        1. El código de esa web está muy muy personalizado. Fíjate que trabajé sobre la plantilla por defecto y no se parece en nada. Ni yo mismo me acuerdo de todos los cambios que he hecho en el código de la plantilla. Lo siento.

          Te recomiendo que uses Control+Maúsculas+I para investigar el css de tu web. Haz pruebas en directo y después aplícalo como te he comentado.

          Un saludo y mucha suerte.

          1. Me refiero a lo que escribiste en tu post aquí…
            «Lorena, para quitar los botones en los productos featured del template por defecto de opencart, añade esto:»……. y no se ve nada más. En otro post intentaste escribir el código también y no se vio.
            Me refiero a eso nada más,

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *