Desarrollar un catálogo de productos con Commerce, FacetAPI y Panels

8 Febrero 2016 Drupal 7

El objetivo no es crear un e-commerce puro, si no un simple catálogo de productos orientado a pequeños negocios comerciales que desean exponer sus servicios o fabricantes y distribuidores que tercerizan la comercialización de los propios productos. Por ejemplo, un distribuidor de lencería a venta por catálogo o un corralón de materiales para la construcción.

En este artículo se explicará una manera de desarrollar 3 vistas:

Catálogo de publicación periódica con las últimas ofertas
Catálogo de todos los productos
Vista del producto

Instalación de módulos

Descargar los siguientes modulos:

Drupal Commerce
Panels
Panels Extra Styles
Search API
Search API Database Search
Facet API
Views fieldsets

Activar los siguientes módulos (recomiendo usar drush para hacer las cosas más rápido):

Commerce

Commerce (commerce)
Commerce UI (commerce_ui)
Line Item (commerce_line_item)
Price (commerce_price)
Product (commerce_product)
Product Reference (commerce_product_reference)
Product UI (commerce_product_ui)
Commerce AutoSKU (commerce_autosku)
Commerce Extra Price Formatters (commerce_extra_price_formatters)

Search

Database search (search_api_db)
Search API (search_api)
Search facets (search_api_facetapi)
Search views (search_api_views)
Facet API (facetapi)
Facet API Bonus (facetapi_bonus)
Facet API Pretty Paths (facetapi_pretty_paths)

Views

Views (views)
Views Bootstrap (views_bootstrap)
Views Bulk Operations (views_bulk_operations)
Views fieldsets (views_fieldsets)
Views Revisions (views_revisions)
Views UI (views_ui)

Panels

Mini panels (panels_mini)
Panel Variant Page Title (panel_variant_page_title)
Panels (panels)
Panels Bootstrap Layouts (panels_bootstrap_layouts)
Panels Extra Styles (panels_extra_styles)
Panels In-Place Editor (panels_ipe)

1. Crear vocabularios para marca y categoría de productos

Los dos vocabularios (taxonomy vocabulary) los utilizaremos más adelante en los campos del único tipo de producto con el que trabajaremos.

Taxonomy vocabularies: brand & category

2. Editar el tipo de producto

Agregar dos campos que harán referencia a los vocabularios creados en el punto 1. Los campos debn ser de tipo term reference y almacenar solo un valor.

Los campos del tipo de producto (Drupal Commerce Entity)

3. Search API

Agregar una configuración de server y otra de index seleccionando Commerce Product en el campo tipo. En la configuración del índice, seleccionar los campos field_product_brand y field_product_category creados en el punto 2.

Drupal: Search API index de tipo Commerce Product

4. Facet API

Seleccionar los blocks de facet api que se utilizarán.

Drupal: Facets

A esta altura sería bueno agregar algunos productos antes de continuar

5. La vista para el catálogo de todos los productos

Crear una vista seleccionando "Product" (o el nombre elegido para identificar al índice del motor de búsqueda de Search API creado en el punto 3).

Dejar sin seleccionar las opciones para crear una página o un bloque. Más adelante, agregaremos una visualización de tipo content pane. En realidad, esto es más a gusto del desarrollador. En este caso, las tres vistas del sitio serán administradas con Panels, que resulta seguramente mucho más funcional que Views.

6. Un tipo de contenido para el catálogo de ofertas periódicas

Creamos un tipo de contenido nuevo cuyos contenidos se publicarán periodicamente y que contendrá un campo donde podremos seleccionar los productos en oferta. El campo deberá ser de tipo Entity Reference. En el caso en que se quiera utilizar el widget autocomplete, será conveniente instalar el módulo Multiple Fields Remove Button para poder eliminar elementos del campo.

7. Crear una vista para el catálogo periódico

Como en el caso anterior, creamos una vista sin seleccionar ni page ni block. Más adelante agregaremos una vista de tipo content pane. Imaginemos por un momento que se publicará cada mes un mini-catalogo de ofertas. La vista deberá entonces seleccionar solo un node: el último publicado. Para llevar a cabo esto, podemos crear un contextual filter configurando un valor predeterminado utilizando PHP code. Ingresamos el siguiente código que realiza una consulta devolviendo el último node publicado (en este caso, el content type se llama leaflet)

$query = db_select('node','n'); 
$query->fields('n',array('nid','title','status','type'));
$query->condition('n.status','1','=');
$query->condition('n.type',array('leaflet'),'IN');
$query->orderBy('created','DESC');
$query->range(0,1);

$results = $query->execute()->fetchAll();
return $results[0]->nid;

8. Crear una página (con Panels) para el catálogo periódico

Ir a /admin/structure/pages y crear una nueva página indicando un título y una url. Agregar la vista creada en el punto anterior. En este artículo no se hablará de como crear un layout personalizado.

9. Crear una página (siempre con Panels) para el catálogo de todos los productos

Igual que en el punto anterior, creamos una página para visualizar la vista creada en el punto 5. Además de la vista, podremos agregar los blocks de Facet API presentes en la parte content de Panels.

Drupal: Panels y Facet API

Enlace permanente