Post by marcos » Sun Feb 17, 2019 1:41 am

Hola!
Quiero hacer que los productos se vean en forma de tabla y responsive
uso la versión 3031.

Newbie

Posts

Joined
Mon Oct 01, 2018 1:53 pm

Post by rjcalifornia » Mon Feb 18, 2019 11:32 am

marcos wrote:
Sun Feb 17, 2019 1:41 am
Hola!
Quiero hacer que los productos se vean en forma de tabla y responsive
uso la versión 3031.
En que forma? Podrias explicar mas a fondo?

Image
A2 Hosting features: Shared Turbo Boost, Managed Warp 1, Unmanaged Hyper 1, and Warp 2 Turbo


Active Member

Posts

Joined
Fri Sep 02, 2011 1:19 pm
Location - Worldwide

Post by marcos » Mon Feb 25, 2019 6:37 am

Hola! y gracias por tu interés y disculpa por la demora.
Lo que busco hacer es mostrar la vista previa de los productos en sus respectivas categorías en forma de tabla dejo imagen para ver.
ejemplo
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
FECHA | DESTINO | HOTEL | ESTADÍA | PENSIÓN | TRANS | TARIFA | (seguidos de los botones) COMPARAR | LISTA DE DESEOS | DETALLE | AÑADIR CARRO
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Los datos que usará son:
fecha = nombre del producto
Destino = SKU
Estadia = UPC
Hotel = EAN
Estadía = ENE
Pensión = ISBN
Transporte = MPN
Tarifa = precio

Desde ya muchas gracias.

Newbie

Posts

Joined
Mon Oct 01, 2018 1:53 pm

Post by cofran » Tue Feb 26, 2019 12:48 am

Para eso vas a tener que editar archivos de controlador y vistas. Yo te recomiendo que lo hagas por medio de los eventos que tiene opencart
Acá te explico como editar los archivos, el problema lo vas a tener cuando tengas que actualizar opencart. Al editar los archivos, cuando tengas que actualizar el opencart, estos cambios lo vas a perder, por eso te recomiendo que lo hagas con los eventos.
Vuelvo a repetir, acá te explico como hacerlo EDITANDO los archivos originales ya que no tengo demasiado tiempo para explicar como hacerlo con los eventos, pero si ves la logica, no debería ser un problema hacerlo con los eventos o con vqmod.

El archivo catalog/controller/product/category.php es el encargado de suministrar los datos a la vista, pero como no tiene a disposición las variables que necesitas, vas a tener que agregarlas. Entonces abri dicho archivo y busca la siguiente linea (esta dentro de un array llamado $data['products'][] ):

Code: Select all

'price'       => $price,
Ahora, debajo o arriba de dicha linea tenes que agregar las nuevas variables que necesitas mostrar en la vista. Entonces debes agregar lo siguiente (yo no tengo en mi versión ENE en su lugar tengo JAN, eso fijate vos, si debes cambiarlo o no):

Code: Select all

'sku'       => $result['sku'],
'upc'       => $result['upc'],
'ean'       => $result['ean'],
'jan'       => $result['jan'],
'isbn'       => $result['isbn'],
'mpn'       => $result['mpn'],
Ahora tenes que modificar la vista, para eso tenes que editar el archivo catalog/view/theme/default/template/product/category.twig y eliminar el siguiente código:

Code: Select all

      <div class="row"> {% for product in products %}
        <div class="product-layout product-list col-xs-12">
          <div class="product-thumb">
            <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
            <div>
              <div class="caption">
                <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
                <p>{{ product.description }}</p>
                {% if product.price %}
                <p class="price"> {% if not product.special %}
                  {{ product.price }}
                  {% else %} <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span> {% endif %}
                  {% if product.price_by_country %}{{ product.price_by_country }}{% endif %}{% if product.tax %} <span class="price-tax">{{ text_tax }} {{ product.tax }}</span> {% endif %} </p>
                {% endif %}
                {% if product.rating %}
                <div class="rating"> {% for i in 1..5 %}
                  {% if product.rating < i %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>{% endif %}
                  {% endfor %} </div>
                {% endif %} </div>
              <div class="button-group">
                <button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
                <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
                <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
              </div>
            </div>
          </div>
        </div>
        {% endfor %} </div>
Y en su lugar agregar el siguiente código:

Code: Select all

      <div class="row"> {% for product in products %}
        <table class="table table-sm">
          <thead>
            <tr>
              <th scope="col">Fecha</th>
              <th scope="col">Destino</th>
              <th scope="col">Estadia</th>
              <th scope="col">Hotel</th>
              <th scope="col">Estadía</th>
              <th scope="col">Pensión</th>
              <th scope="col">Transporte</th>
              <th scope="col">Tarifa</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">{{ product.name }}</th>
              <td>{{ product.sku }}</td>
              <td>{{ product.upc }}</td>
              <td>{{ product.ean }}</td>
              <td>{{ product.jan }}</td>
              <td>{{ product.isbn }}</td>
              <td>{{ product.mpn }}</td>
              {% if product.price %}
                {% if not product.special %}
                  <td>{{ product.price }}</td>
                {% else %}
                  <td><span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span></td>
                {% endif %}
              {% endif %}
              <td>
                <button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
                <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
              </td>
            </tr>
          </tbody>
        </table>
      {% endfor %} </div>
Vas a tener que aplicar la misma lógica para los archivos special, search y manufacturer. Editar los archivos de controlador para obtener las variables y el de la vista para mostrar la tabla.

Antes que modifiques lo que sea, siempre hace un backup de los archivos originales por si algo sale mal

Espero te sirva como un comienzo para seguir con las modificaciones que necesites. Saludos y éxitos!

User avatar
Active Member

Posts

Joined
Thu Oct 01, 2009 7:37 am
Location - Córdoba, Argentina

Post by marcos » Wed Feb 27, 2019 9:23 am

GRACIAS!!!
A estos cambios lo realice sobre una plantilla de una copia del tema default de opencart y salió de maravilla.
Nuevamente gracias y todos los éxitos!

Newbie

Posts

Joined
Mon Oct 01, 2018 1:53 pm

Post by marcos » Fri Mar 01, 2019 1:25 pm

Hola!
Necesito que me guien con esto
El problema es al hacer clic en los iconos de ver product, compare y deseo se me abre en una pestaña nueva y con la página de inicio. He intentado de muchas formas y no logro dar,

Buscó que los botones cumplan con esta función

1 - botón de "ver" producto
2 - botón de deseo
3 - botón de comparación

también no aparece la imagen del producto en la tabla.

Adjunto foto del trabajo gracias a tu aporte

Esto es lo que he hecho

<div class="row">
<div class="panel-body">
<form action="{{ delete }}" method="post" enctype="multipart/form-data" id="form-product">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td class="text-center">Image</td>
<td class="text-center">Fecha</td>
<td class="text-center">Destino</td>
<td class="text-center">Hotel</td>
<td class="text-center">Estadía</td>
<td class="text-center">Pensión</td>
<td class="text-center">Transporte</td>
<td class="text-center">Excursión</td>
<td class="text-center">Tarifa</td>
<td class="text-center">action</td>
</tr>
</thead>
<tbody>

{% if products %}
{% for product in products %}
<tr>
<td class="text-center">{% if product.image %} <img src="{{ product.image }}" alt="{{ product.name }}" class="img-thumbnail" /> {% else %} <span class="img-thumbnail list"><i class="fa fa-camera fa-2x"></i></span> {% endif %}</td>
<td class="text-center">{{ product.name }}</td>
<td class="text-center">{{ product.sku }}</td>
<td class="text-center">{{ product.upc }}</td>
<td class="text-center">{{ product.ean }}</td>
<td class="text-center">{{ product.jan }}</td>
<td class="text-center">{{ product.isbn }}</td>
<td class="text-center">{{ product.mpn }}</td>
<td class="text-center">{{ product.price }}</td>
<td class="text-center">
<class="text-center"><a href="{{ product.href_view }}" class="btn btn-warning" target="_blank"><i class="fa fa-eye"></i></a>
<class="text-center"><a href="{{ product.href_view }}" class="btn btn-warning" target="_blank"><i class="fa fa-heart"></i></a>
<class="text-center"><a href="{{ product.href_view }}" class="btn btn-warning" target="_blank"><i class="fa fa-exchange"></i></a>
</td>
</div>
</tr>=
{% endfor %}
{% else %}
<tr>
<td class="text-center" colspan="8">{{ text_no_results }}</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>

GRACIAS POR TU PACIENCIA Y ENSEÑANZA -- EXITOS!!!--
Atte Marcos

Attachments

FOTO PAGINA WEB.png

FOTO PAGINA WEB.png (134.67 KiB) Viewed 2225 times


Newbie

Posts

Joined
Mon Oct 01, 2018 1:53 pm

Post by cofran » Fri Mar 01, 2019 11:54 pm

Hola marcos, antes que nada, debes eliminar la etiqueta form de tu tabla

Por otro lado, cuando haces modificaciones de las vistas, debes respetar (dentro de los elementos que la componen) sus atributos. A tus elementos que usas como botón le están faltando los atributos id, data-toggle y fundamentalmente el onclick, para que estos cumplan realmente con las funciones especificas.

Tus botones debería de quedar así:
1 - Ver Producto
2 - Agregar a favoritos
3 - Comparar
4 - Agregar al carrito

Code: Select all

<a href="{{ product.href }}" class="btn btn-warning"><i class="fa fa-eye"></i></a>
<a data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');" class="btn btn-warning"><i class="fa fa-heart"></i></a>
<a data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');" class="btn btn-warning"><i class="fa fa-exchange"></i></a>
<a onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');" class="btn btn-warning"><i class="fa fa-shopping-cart"></i></a>
Recorda que si insertas un atributo target="_blank" dentro de un hipervinculo, el mismo se abrira en una nueva ventana.

Por otro lado para mostrar la imagen, debes usar la variable thumb y no image como lo estas haciendo. Quedando esa linea de código así:

Code: Select all

<td class="text-center">{% if product.thumb %} <img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-thumbnail" /> {% else %} <span class="img-thumbnail list"><i class="fa fa-camera fa-2x"></i></span> {% endif %}</td>
Espero te sirva, Saludos!!!

User avatar
Active Member

Posts

Joined
Thu Oct 01, 2009 7:37 am
Location - Córdoba, Argentina

Post by marcos » Wed Apr 03, 2019 2:12 am

HOLA!
Ante todo quiero disculparme por mi ausencia, semanas complicadas en mi trabajo. Devuelta con este cambio en la página web.

Este es el link de lo que estoy haciendo con la pagina ( www.lovendo.tk )

Tengo problema en la hoja del producto, con la tabla donde muestra los productos relacionados se me duplica por la cantidad de productos exhibidos.
Después aparece los datos de( model-sku-upc-ean-jan-ibsn-mpn- ) no logro que aparezca los nombre de los mismo.
También no logro que parezca el nombre y el resultado del dato de location.


El código modificado de la hoja del producto esta en google drive

https://drive.google.com/drive/folders/ ... sp=sharing

He intentado de todo y sigo probando. Hace tres meses atras no sabia nada de esto y por ayudar a mi tío ahora estoy aprendiendo algo que me gusta que no sabia. Desde ya muchas gracias por su paciencia y enseñanza.

Newbie

Posts

Joined
Mon Oct 01, 2018 1:53 pm
Who is online

Users browsing this forum: No registered users and 39 guests