articulos

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

Ratio: 5 / 5

Inicio activadoInicio activadoInicio activadoInicio activadoInicio activado

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();
    }
}

Comandos básicos de GIT

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

Comandos básicos de GIT

  • git config   --> Uno de los comandos más usados en git es git config, que puede ser usado para establecer una configuración específica de usuario, como sería el caso del email, un algoritmo preferido para diff, nombre de usuario y tipo de formato, etc… Por ejemplo, el siguiente comando se usa para establecer un email:
                                 
git config --global user.email Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.
  • git init -> Este comando se usa para crear un nuevo repertorio GIT:
                      git init
  • git add --> Este comando puede ser usado para agregar archivos al index. Por ejemplo, el siguiente comando agrega un nombre de archivo temp.txt en el directorio local del index:
                      git add temp.txt
  • git clone -->Este comando se usa con el propósito de revisar repertorios. Si el repertorio está en un servidor remoto se tiene que usar el siguiente comando:
                      git clone Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.:/path/to/repository

Pero si estás por crear una copia local funcional del repertorio, usa el comando:

                                            git clone /path/to/repository

  • git commit -->El comando commit es usado para cambiar a la cabecera. Ten en cuenta que cualquier cambio comprometido no afectara al repertorio remoto. Usa el comando:

     

                      git commit –m “Message to go with the commit here”
    
  • git status --> Este comando muestra la lista de los archivos que se han cambiado junto con los archivos que están por ser añadidos o comprometidos.

                                               git status

  • git push -->Este es uno de los comandos más básicos. Un simple push envía los cambios que se han hecho en la rama principal de los repertorios remotos que están asociados con el directorio que está trabajando. Por ejemplo:

                                       git push  origin master

  • git checkout  -->El comando checkout se puede usar para crear ramas o cambiar entre ellas. Por ejemplo, el siguiente comando crea una nueva y se cambia a ella:

                                      command git checkout -b <banch-name>

 

OTROS COMANDOS GIT

  • Para cambiar de una rama a otra solo usa:

    git checkout <branch-name>
  • git remote
    El comando git se usa para conectar a un repositorio remoto. El siguiente comando muestra los repositorios remotos que están configurados actualmente:

     

    git remote -v

    Este comando te permite conectar al usuario con el repositorio local a un servidor remoto:

    git remote add origin <93.188.160.58>
  • git branch
    Este comando se usa para listar, crear o borrar ramas. Para listar todas las ramas se usa:

     

    git branch
    
    para borrar la rama:
    
    git branch -d <branch-name>
  • git pull
    Para poder fusionar todos los cambios que se han hecho en el repositorio local trabajando, el comando que se usa es:

     

    git pull
  • git merge
    Este comando se usa para fusionar una rama con otra rama activa:

     

    git merge <branch-name>
  • git diff
    Este comando se usa para hacer una lista de conflictos. Para poder ver conflictos con el archivo base usa:

     

    git diff --base <file-name>

    El siguiente comando se usa para ver los conflictos que hay entre ramas que están por ser fusionadas para poder fusionarlas sin problemas:

    git diff <source-branch> <target-branch>

    Para solo ver una lista de todos los conflictos presentes usa:

    git diff
  • git tag
    Etiquetar se usa para marcar commits específicos con asas simples. Por ejemplo:

     

    git tag 1.1.0 <instert-commitID-here>
  • git log
    Ejecutar este comando muestra una lista de commits en una rama junto con todos los detalles. Por ejemplo:
commit 15f4b6c44b3c8344caasdac9e4be13246e21sadw

Author: Alex Hunter <Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.>

Date:   Mon Oct 1 12:56:29 2016 -0600

  • git reset
    Para resetear el index y el directorio que está trabajando al último estado comprometido se usa este comando:

     

    git reset - -hard HEAD
  • git rm
    Este comando se puede usar para remover archivos del index y del directorio que está trabajando:

     

    git rm filename.txt
  • git stash
    Este es uno de los comandos menos conocidos, pero ayuda a salvar cambios que no están por ser comprometidos inmediatamente, pero temporalmente:

     

    git stash
  • git show
    Se usa para mostrar información sobre cualquier objeto git. Por ejemplo:

     

    git show
  • git fetch
    Este comando le permite al usuario buscar todos los objetos de un repositorio remoto que actualmente no reside en el directorio local que está trabajando. Por ejemplo:

     

    git fetch origin
  • git ls-tree
    Para ver un objeto de árbol junto con el nombre y modo de cada uno de ellos, y el valor blob´s SHA-1, se usa:

     

    git ls-tree HEAD
  • git cat-file
    Usando el valor SHA-1, se puede ver el tipo de objeto usando este comando. Por ejemplo:

     

    git cat-file –p d670460b4b4aece5915caf5c68d12f560a9fe3e4
  • git grep
    Este comando le permite al usuario buscar en los árboles de contenido cualquier frase o palabra. Por ejemplo, para buscar por www.tupaginaweb.com en todos los archivos se usaría:

     

    git grep “www.tupaginaweb.com”
  • gitk
    Este es la interfaz gráfica para un repositorio local que puede invocar escribiendo y ejecutando:

     

    gitk
  • git instaweb
    Con este comando un servidor web puede correr interconectado con el repositorio local. Un navegador web también está automáticamente dirigido a el:

     

    git instaweb –http=webrick
  • git gc
    Para optimizar el repositorio por medio de una recolección de basura, que limpiara archivos innecesarios y los optimizara, usa:git hc
  • git archive
    Este comando le permite al usuario crear archivos zip o tar que contengan los constituyentes de un solo árbol de repositorio:git archive – -format=tar master
  • git prune
    Con este comando los objetos que no tengan ningún puntero entrante serán eliminados:git prune
  • git fsck
    Para poder hacer un chequeo de integridad del sistema de archivos git, usa este comando. Cualquier objeto corrompido será detectado:git fsck
  • git rebase
    Este comando se usa para la re aplicación de los compromisos en otra rama. Por ejemplo:git rebase master