articulos

Insertar en filas un bloque o html | Drupal 8

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

Me veo en la obligación dentro de un proyecto de en un bloque devuelve una lista de elementos poder insertar un html o un bloque . Este módulo te soluciona la vida.

insertar-html-bloque-en-vista-listado-drupal-8.png

Descripción

Este módulo proporciona un complemento de estilo de vista, que es capaz de insertar filas personalizadas con marcado html o bloquea el contenido en los resultados de una fila de vista después de cada enésima fila.

La fila insertada puede contener un bloque Drupal estándar creado por módulos como vistas, etc., o un bloque de contenido del usuario con contenido html personalizado. La fila puede usar los nombres de clase personalizados junto con las clases de fila predeterminadas como views-row-1 y striping estándar (impar / par), clases de primera / última fila o puede ir sin ellas.

Este módulo se puede usar para colocar Google Adsense o cualquier otro fragmento de código / contenido en la salida de elementos de sus vistas.

Instalación

Para instalar este módulo, haga lo siguiente:

1. Extraiga la bola de tar que descargó de Drupal.org.

2. Cargue todo el directorio y todos sus contenidos en su directorio de módulos.

Configuración

Para habilitar y configurar este módulo, haga lo siguiente:

1. Vaya a Admin -> Módulos y active Vistas Insertar filas.

2. Cree una vista o abra una página de configuración de visualización de vista existente y haga clic en el nombre del complemento de estilo junto a la etiqueta "Formato:" en la sección "FORMATO". Elija el complemento de estilo "Insertar filas" en la lista y haga clic en "Aplicar".

3. Elija el tipo de fila seleccionando el botón de opción "Bloquear" o "Contenido personalizado". Según su elección, seleccione un nombre de bloque de la lista o complete el campo de área de texto "Contenido personalizado". Tenga cuidado, este campo no filtra su entrada.

4. Seleccione un número de filas para omitir en "Insertar después de cada enésima fila" y también puede verificar otras configuraciones como "Comenzar con fila insertada", "Insertar fila en la parte inferior" o "Limitar la cantidad de filas insertadas".

5. Ingrese el nombre de la clase de fila, si corresponde, y configure otras configuraciones relacionadas con la clase.

Requisitos

Depende del módulo Vistas que se incluye en Drupal 8 core.

Personalización

Para anular el marcado html de salida predeterminado, puede editar el archivo de plantilla views-row-insert.html.twig ubicado dentro de la carpeta de plantillas del módulo.

Agrupar un número de filas y envolver con div | drupal 8

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

Imagínate que tienes un listado de 20 o 30 noticias y quieres envolver cada n filas en un div. Para que aparezcan en una única fila, para cambiarle el formato, para añadir mediante javascript con innerhtml algo... 

Pues bien, buscando y buscando di con la tecla.

list-wrapper-view-drupal-8.png

Vistas Filas Wrapper Drupal 8

Descripción

Este es un complemento de estilo de visualización de vista simple, que combina un número definido por el usuario de filas en conjuntos, envuelto por el elemento y atributo HTML elegido. Por ejemplo, si tiene 9 filas en la página, puede obtener 3 conjuntos de filas (3 filas en cada conjunto) envueltas en div o span con clase personalizada o nombre de identificación.

Si tiene 10 resultados y los agrupa por 3, en este caso, obtendrá 4 conjuntos: 3 divisiones por 3 filas y la última división con una fila.

Requisitos: módulo de vistas.

Instalación

Para instalar este módulo, haga lo siguiente:

1. Extraiga la bola de tar que descargó de Drupal.org.

2. Cargue todo el directorio y todos sus contenidos en su directorio de módulos.

Configuración

Para habilitar y configurar este módulo, haga lo siguiente:

1. Vaya a Admin -> Módulos y active Vistas Filas Wrapper.

2. Cree una vista o abra una página de configuración de visualización de vista existente y haga clic en el nombre del complemento de estilo junto a la etiqueta "Formato:" en la sección FORMATO. Elija el complemento de estilo "Contenedor de filas" en la lista y haga clic en Aplicar.

3. Configure los ajustes, seleccione el número de filas para ajustar, el elemento HTML del contenedor ( div o span ) y el atributo del contenedor ( clase o id ). Ingrese el nombre del atributo y seleccione "Aplicar a todos los elementos", si necesita ajustar todos los resultados o "Ajustar una vez" para ajustar solo los primeros resultados.

Personalización

Para anular el marcado html de salida predeterminado para la versión 7.x, puede editar el archivo de plantilla views-rows-wrapper.tpl.php ubicado dentro de la carpeta del módulo.

Para la versión 8.x de este módulo, puede editar el archivo de plantilla
views-rows-wrapper.html.twig ubicado dentro de la carpeta de plantillas del módulo.

 

Para bajarte las últimas versiones y ver el documento oficial vista : https://www.drupal.org/project/views_rows_wrapper

Doble click para evitar pulsar en tablets el menú

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

Buenas tardes, me sucede un problema y es que el menú que tengo actualmente en una de mis webs , cuando estoy desde la tablet no funciona de forma adecuada.

¿Por qué no funciona de forma adecuada el menú?

Pues bien, al ser una pantalla tactil y no haberse collapsado al no ser un móvi, sigue el menú en horizontal pero no se despliega el submenú al no existir en los modos tactiles el :hover

Entonces la idea es que para los elementos del menú que tengan submenú haya que darle un primer click para abrir y luego otro para ir al destino.

 

menu desplegable en tablet

 

Para ello vamos a seguir los siguientes pasos:

1º Crear un archivo javascript con la siguiente información

;(function(e,t,n,r){e.fn.doubleTapToGo=function(r){if(!("ontouchstart"in t)&&!navigator.msMaxTouchPoints&&!navigator.userAgent.toLowerCase().match(/windows phone os 7/i))return false;this.each(function(){var t=false;e(this).on("click",function(n){var r=e(this);if(r[0]!=t[0]){n.preventDefault();t=r}});e(n).on("click touchstart MSPointerDown",function(n){var r=true,i=e(n.target).parents();for(var s=0;s<i.length;s++)if(i[s]==t[0])r=false;if(r)t=false})});return this}})(jQuery,window,document);
 
Lo llamaremos doubletaptogo.min.js también podéis descargarlo desde aquí https://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/doubletaptogo.js
 
 
2º Iremos a la plantilla de nuestra página , mientras más genérica mejor por ejemplo el primer index.php que tenga información del head .
 
Insertaremos dentro del head lo siguiente. Cuidado con el formato del texto
<script src="doubletaptogo.min.js"></script>
 
 
Luego abajo justo antes del </body> . Yo he usado la llamada JQuery pero si acepta tu plantilla el $ puedes hacer referencia a Jquery así.
 
<script>

  jQueryfunction()
  {
    jQuery'.navbar li:has(ul)' ).doubleTapToGo();
  });

</script>
 

 3º Por último debemos de ver la estructura de nuestro menú, ver alguna de las clases que tenga el nav . En mi caso la clase es navbar por lo que pondré en el script de arriba .navbar . Lo que aparece después del .navbar es para que solo se habrán los que tengan submenú haciendo referencia a si tiene o no un <ul> 

 

 

<nav  class="main navbar navbar-default navbar-we-mega-menu mobile-collapse hover-action" data-menu-name="main" data-block-theme="natiboo_laguiadelmotor_theme" data-style="Default" data-animation="None" data-delay="" data-duration="" data-autoarrow="" data-alwayshowsubmenu="" data-action="hover" data-mobile-collapse="0">
    <div class="container-fluid">
      <ul  class="we-mega-menu-ul nav nav-tabs">
  <li  class="we-mega-menu-li" data-level="0" data-element-type="we-mega-menu-li" description="" data-id="views.coches.page_1" data-submenu="0" hide-sub-when-collapse="" data-group="0" data-class="" data-icon="" data-caption="" data-alignsub="" data-target="">
      <a class="we-mega-menu-li" title="" href="/coches" target="">
      
      Coches

          </a>
    
</li><li  class="we-mega-menu-li dropdown-menu" data-level="0" data-element-type="we-mega-menu-li" description="" data-id="views.noticias.page_1" data-submenu="1" hide-sub-when-collapse="" data-group="0" data-class="" data-icon="" data-caption="" data-alignsub="" data-target="">
      <a class="we-mega-menu-li" title="" href="/noticias" target="">
      
      Noticias

          </a>
    <div  class="we-mega-menu-submenu" data-element-type="we-mega-menu-submenu" data-submenu-width="" data-class="" style="width: px">
  <div class="we-mega-menu-submenu-inner">
    <div  class="we-mega-menu-row" data-element-type="we-mega-menu-row" data-custom-row="0">
  <div  class="we-mega-menu-col span12" data-element-type="we-mega-menu-col" data-width="12" data-block="" data-blocktitle="0" data-hidewhencollapse="" data-class="">
  <ul class="nav nav-tabs subul">
  <li  class="we-mega-menu-li" data-level="1" data-element-type="we-mega-menu-li" description="" data-id="acedb12c-3cae-404b-9dfd-5f0690e9000f" data-submenu="0" hide-sub-when-collapse="" data-group="0" data-class="" data-icon="" data-caption="" data-alignsub="" data-target="">
      <a class="we-mega-menu-li" title="" href="/noticias/actualidad" target="">
      
      Actualidad

          </a>
    
</li><li  class="we-mega-menu-li" data-level="1" data-element-type="we-mega-menu-li" description="" data-id="e7ef502e-ce0d-4612-9230-65e7dea246b2" data-submenu="0" hide-sub-when-collapse="" data-group="0" data-class="" data-icon="" data-caption="" data-alignsub="" data-target="">
      <a class="we-mega-menu-li" title="" href="/noticias/novedades" target="">
      
      Novedades

          </a>
    
</li><li  class="we-mega-menu-li" data-level="1" data-element-type="we-mega-menu-li" description="" data-id="8d553108-2ed4-4a27-994e-3083e5d113d4" data-submenu="0" hide-sub-when-collapse="" data-group="0" data-class="" data-icon="" data-caption="" data-alignsub="" data-target="">
      <a class="we-mega-menu-li" title="" href="/noticias/clasicos" target="">
      
      Clásicos

          </a>
    
</li>
</ul>
</div>

</div>

  </div>
</div>
</li><li  class="we-mega-menu-li" data-level="0" data-element-type="we-mega-menu-li" description="Eventos" data-id="c1e82ad2-fab7-4824-be8b-50008d89fd72" data-submenu="0" hide-sub-when-collapse="0">
      <a class="we-mega-menu-li" title="Eventos" href="/eventos" target="">
      
      Eventos

          </a>
    
</li><li  class="we-mega-menu-li" data-level="0" data-element-type="we-mega-menu-li" description="" data-id="b4ad3504-64a9-41fb-ba50-8aefd868053d" data-submenu="0" hide-sub-when-collapse="" data-group="0" data-class="" data-icon="" data-caption="" data-alignsub="" data-target="">
      <a class="we-mega-menu-li" title="" href="/node/add/coche" target="">
      
      Publica una oferta

          </a>
    
</li><li  class="we-mega-menu-li" data-level="0" data-element-type="we-mega-menu-li" description="Revista Digital" data-id="1e2cb5c0-86a3-4dde-9fb5-c40eb0661c56" data-submenu="0" hide-sub-when-collapse="0">
      <a class="we-mega-menu-li" title="Revista Digital" href="https://www.laguiadelmotor.net/revistas-digital" target="">
      
      revista digital

          </a>
    
</li>
</ul>
    </div>
  </nav>

 

Si en vez de navbar la estructura fuera <nav #menu ... Podríamos poner en el javascript

 

<script>

  jQueryfunction()
  {
    jQuery'#menu li:has(ul)' ).doubleTapToGo();
  });

</script>

Añadir precios a widgekit con datos de woocomerce

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

Es curioso pero widgetkit 2 de yootheme no trae por defecto la opción de mostrar el precio de los productos cuando usas la procedencia de datos de Woocomerce.

La solución:

Añadir en la linea 60  de wp-content/plugins/widgetkit/plugins/content/woocommerce/plugin.php:
$data['id'] = $post->ID ;
 

Una vez hemos insertado esto tenemos que buscar el tipo de widget que usamos. Por ejemplo si usamos un slider tendrás que ir al plugin de slider de widgetkit, en este caso pondré el ejemplo de grid.

Añadir deespués de $meta='' wp-content/plugins/widgetkit/plugins/widgets/grid/views/widget.php 

// Meta
    $meta = '';
    $price = wc_get_product($item['id'])->get_price();
        $meta .= '<p>'.$price.' €</p>';

 

Si quieres darle algo de estilos podrías coger y añadir en <p> una clase

 $price = wc_get_product($item['id'])->get_price();
        $meta .= '<p class="preciopersonalizado">'.$price.' €</p>';

Si te das cuenta en meta sale escrito por y las fechas, a no ser que tengas oculto meta. Esto lo puedes haber hecho desde el mismo plugin o por css con display:none. Si quieres que solo aparezca el precio y no estos datos borra después de meta lo siguiente

 if ($item['date']) {
            $date = '<time datetime="'.$item['date'].'">'.$app['date']->format($item['date'], $settings['date_format']).'</time>';
            if ($item['author']) {
                $meta = $app['translator']->trans('Written by %author% on %date%',  array('%author%' => $item['author'], '%date%' => $date));
            } else {
                $meta = $app['translator']->trans('Written on %date%',  array('%date%' => $date));
            }
        } elseif ($item['author']) {
            $meta = $app['translator']->trans('Written by %author%',  array('%author%' => $item['author']));
        }

        if ($item['categories']) {

            $categories = array();
            foreach ($item['categories'] as $category => $url) {
                $categories[] = '<a href="'.$url.'">'.$category.'</a>';
            }
            $categories = implode(', ', array_filter($categories));

            $meta .= ($meta) ? '. ' : '';
            $meta .= $app['translator']->trans('Posted in %categories%',  array('%categories%' => $categories));

        }

 chrome_yaW1rKAdQ5.png

 

Separar categorías de productos en woocomerce

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

 

 

Añadir a function.php 

 


/**
* Move WooCommerce subcategory list items into
* their own <ul> separate from the product <ul>.
*/
add_action( 'init', 'move_subcat_lis' );
function move_subcat_lis() {
    // Remove the subcat <li>s from the old location.
    remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' );
    add_action( 'woocommerce_before_shop_loop', 'msc_product_loop_start', 1 );
    add_action( 'woocommerce_before_shop_loop', 'msc_maybe_show_product_subcategories', 2 );
    add_action( 'woocommerce_before_shop_loop', 'msc_product_loop_end', 3 );
}
/**
 * Conditonally start the product loop with a <ul> contaner if subcats exist.
 */
function msc_product_loop_start() {
    $subcategories = woocommerce_maybe_show_product_subcategories();
    if ( $subcategories ) {
        woocommerce_product_loop_start();
    }
}
/**
 * Print the subcat <li>s in our new location.
 */
function msc_maybe_show_product_subcategories() {
    echo woocommerce_maybe_show_product_subcategories();
}
/**
 * Conditonally end the product loop with a </ul> if subcats exist.
 */
function msc_product_loop_end() {
    $subcategories = woocommerce_maybe_show_product_subcategories();
    if ( $subcategories ) {
        woocommerce_product_loop_end();
    }
}