articulos

Divi Woocommerce barra lateral arriba en el móvil

Inicio desactivadoInicio desactivadoInicio desactivadoInicio desactivadoInicio desactivado

Colocar en divi u otra plantilla la barra lateral de woocommerce arriba en el movil 

Hoy hemos tenido que realizar un pequeño código para una empresa. Su necesidad era poner en plugin de filtros, en el escritorio deberia de aparecer a la izquierda y en el movil arriba pero con la opción de ocultar o mostrar al tener muchas categorías y molestar la navegación.

Aquí os contaré como.

 

¿Cómo poner en wordpress el sidebar a la izquierda o arriba en el movil?

Antes que la opción de woocomerce pondré como se hace para wordpress ya que por ejemplo la página principal es diferente a las de la plantilla woocommerce y siempre está bien tener un filtro ahi si es que tenemos una tienda online.

Si queremos poner en la izquierda o arriba la barra lateral según sea escritorio o móvil, debemos de ir a wp-content/themes/nuestro-theme/page.php

Ahí veremos que el sidebar aparece al final del código, siendo lo último que se renderiza , lo único que tenemos que hacer es poner arriba el sidebar. Si vemos que sale mal , simplemente un control z y probamos en otro lugar.

 

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package storefront
 */

get_header(); 

do_action'storefront_sidebar' ); /*ESto es lo que hemos puesto arriba*/
?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
           
            <?php
            while ( have_posts() ) :
                the_post();

                do_action'storefront_page_before' );

                get_template_part'content''page' );

                /**
                 * Functions hooked in to storefront_page_after action
                 *
                 * @hooked storefront_display_comments - 10
                 */
                do_action'storefront_page_after' );

            endwhile// End of the loop.
            ?>

        </main><!-- #main -->
    </div><!-- #primary -->
 
<?php

get_footer();

Con esto ya tendríamos el sidebar de la plantilla a la izquierda o arriba en el móvil.

¿Cómo poner en un artículo de woocommerce la barra al principio?

El sidebar que estamos probando no es el típico de wordpress, sino que es el de woocomerce, por lo que aunque nos aparezca algo de sidebar, tenemos que poner el doaction de la tienda.

Para empezar vamos a sobreescribir la plantilla. 

¿Cómo sobreescribir la plantilla de woocommerce para un producto?

Para que funcione es muy sencillo solo tienes que seguir tres pasos:

  1. Ir a wp-content/plugins/woocommerce/single-product.php y descargarlo en tu ordenador
  2. Vamos a wp-content/themes/your-theme y creamos una carpeta llamada woocommerce // your-theme se refiere al nombre de tu plantilla. 
  3. Subimos ahi el archivo single-product.php que descarmos antes. 

¿Qué hacemos una vez sobreescrita la plantilla de woocommerce?

Una vez solucionado la sobreescritura modificamos el código añadiendo el doaction('storefront_sidebar') en el lugar que queramos. Observese que en el código de abajo aparece el woocomerce sidebar al final tambien, esto lo podemos quitar o si estamos poniendo nuestros widget ahí pues ese es el que tenemos que cambiar de sitio.

 

<?php
/**
 * The Template for displaying all single products
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @package     WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined'ABSPATH' ) ) {
    exit// Exit if accessed directly
}

get_header'shop' );
do_action('storefront_sidebar' );
?>
</div>
    </div>
    <?php

        /**
         * woocommerce_before_main_content hook.
         *
         * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
         * @hooked woocommerce_breadcrumb - 20
         */
        do_action'woocommerce_before_main_content' );
    ?>

 

        <?php while ( have_posts() ) : the_post(); ?>

            <?php wc_get_template_part'content''single-product' ); ?>

        <?php endwhile// end of the loop. ?>

    <?php
        /**
         * woocommerce_after_main_content hook.
         *
         * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
         */
        do_action'woocommerce_after_main_content' );
    ?>

    <?php
        /**
         * woocommerce_sidebar hook.
         *
         * @hooked woocommerce_get_sidebar - 10
         */
        do_action'woocommerce_sidebar' );
    ?>

<?php get_footer'shop' );

/* Omit closing PHP tag at the end of PHP files to avoid "headers already sent" issues. */

 

¿Cómo poner en la categoría de productos woocommerce la barra al principio?

Lo primero que tenemos que hacer es lo mismo que hicimos con el producto individual, pero esta vez el archivo que sobreescribiremos será archive-product.php que es donde se encuentra las categorías. Si quires que en vez de todas las categorías sea una única podrias buscar en google taxonomia_categoría y sería ese el archivo que aparece en la plantilla inicial de woocommerce. 

 

Una vez que lo tenemos hacemos exactamente lo mismo y es modificar el código para poner donde queramos el doaction('storefront_sidebar')

 

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @package WooCommerce/Templates
 * @version 3.4.0
 */
defined'ABSPATH' ) || exit;

 

/**
 * Hook: woocommerce_sidebar.
 *
 * @hooked woocommerce_get_sidebar - 10
 */
get_header'shop' );

do_action'storefront_sidebar' );
/**
 * Hook: woocommerce_before_main_content.
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 * @hooked WC_Structured_Data::generate_website_data() - 30
 */
do_action'woocommerce_before_main_content' );

?>

<header class="woocommerce-products-header">
    <?php if ( apply_filters'woocommerce_show_page_title'true ) ) : ?>
        <h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
    <?php endif; ?>
    

    <?php
    /**
     * Hook: woocommerce_archive_description.
     *
     * @hooked woocommerce_taxonomy_archive_description - 10
     * @hooked woocommerce_product_archive_description - 10
     */
    do_action'woocommerce_archive_description' );
    ?>
</header>

<?php
if ( woocommerce_product_loop() ) {

    /**
     * Hook: woocommerce_before_shop_loop.
     *
     * @hooked woocommerce_output_all_notices - 10
     * @hooked woocommerce_result_count - 20
     * @hooked woocommerce_catalog_ordering - 30
     */
    do_action'woocommerce_before_shop_loop' );

    woocommerce_product_loop_start();

    if ( wc_get_loop_prop'total' ) ) {
        while ( have_posts() ) {
            the_post();

            /**
             * Hook: woocommerce_shop_loop.
             */
            do_action'woocommerce_shop_loop' );

            wc_get_template_part'content''product' );
        }
    }

    woocommerce_product_loop_end();

    /**
     * Hook: woocommerce_after_shop_loop.
     *
     * @hooked woocommerce_pagination - 10
     */
    do_action'woocommerce_after_shop_loop' );
else {
    /**
     * Hook: woocommerce_no_products_found.
     *
     * @hooked wc_no_products_found - 10
     */
    do_action'woocommerce_no_products_found' );
}

/**
 * Hook: woocommerce_after_main_content.
 *
 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
 */
do_action'woocommerce_after_main_content' );
get_footer'shop' );

 

Pues bien, con esto ya tendriamos en la parte superior del móvil la barra lateral y en la parte izquierda del escritorio. En mi caso tenía un problema y es que el cliente lo que tenía era un filtro de categorias de productos woocommerce el cual tenía muchímas categorías anidadas de forma jerárquica, por lo que decidimos poner únicamente en la versión móvil la opción de mostrar  u ocultar el filtro o lo que es lo mismo el sidebar. Además teníamos que tener en cuenta que cuando iniciase una categoría apareciese desplegado por defecto y también que al hacer estos cambios a veces se desencuadraban los productos de la tienda online. 

 

El siguiente código pertenece a lo que hicimos , es muy sencillito de ver ya que los cambios son mínimos en cuanto a html, javascript y css que aparecen en los casos anteriores. Decidí poner el css en cada plantilla sobreescrita ademas del javascript y no en todo el sitio por unos motivos que no vienen al caso. 

 El filtro que tiene la web para que os hagáis una idea es este:

chrome wye68bDbfP 

Realmente seria mucho más grande por lo que en el móvil, tener este filtro tan grande siempre desplegado al inicio de la página es una cosa inviable, por lo que pusimos un botón mostrar y ocultar que mediante javascript cogiese y pusiera un display:none para ocultar y un display:block para mostrar.

Quedaria visualmente algo asi, aunque el css es mejorable la funcionalidad es esquisita :)

chrome tWM9lMsEu8

 

Para que esto funcione tenemos que añadir :

  1. Los pasos de sobreescritura que dijimos al princpio para que podamos modificar el template y no se nos estropee cuando actualicemos. Recuerda que es lo que hacía que apareciese el sidebar de woocomerce a la izquierda en el escritorio o arriba en el móvil.
  2. Añadir una libreria Jquery si es que no la teníamos hasta ahora. 
  3. Añadir los botones de mostrar y ocultar con su id para poder controlarlo luego a través del Jquery
  4. Darle formato con el CSS

Tampoco me voy a poner pesado explicando, asi que os pongo directamente el código de archiv-product.php , recuerda que este seria para las categorías de woocommerce si quieres que también te aparezca como ya vimos en un producto en particular, recuerda que tienes que poner los mismos cambios (solo los jquery, css, y html), no me vayas ir copiando y pegando el código de categoría y en en articulo que la liamos jajaja.

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @package WooCommerce/Templates
 * @version 3.4.0
 */
defined'ABSPATH' ) || exit;

 

/**
 * Hook: woocommerce_sidebar.
 *
 * @hooked woocommerce_get_sidebar - 10
 */
get_header'shop' );
?>
<div class="movil">
<div class="titulo_boton">
    Categorías productos
  <button id="show"> Mostrar</button>  /   <button id="hide"> Ocultar</button>
</div>
<?php
do_action'storefront_sidebar' );
?>
    </div>
    <?php
/**
 * Hook: woocommerce_before_main_content.
 *
 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
 * @hooked woocommerce_breadcrumb - 20
 * @hooked WC_Structured_Data::generate_website_data() - 30
 */
do_action'woocommerce_before_main_content' );

?>

<header class="woocommerce-products-header">
    <?php if ( apply_filters'woocommerce_show_page_title'true ) ) : ?>
        <h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
    <?php endif; ?>
    

    <?php
    /**
     * Hook: woocommerce_archive_description.
     *
     * @hooked woocommerce_taxonomy_archive_description - 10
     * @hooked woocommerce_product_archive_description - 10
     */
    do_action'woocommerce_archive_description' );
    ?>
</header>

<?php
if ( woocommerce_product_loop() ) {

    /**
     * Hook: woocommerce_before_shop_loop.
     *
     * @hooked woocommerce_output_all_notices - 10
     * @hooked woocommerce_result_count - 20
     * @hooked woocommerce_catalog_ordering - 30
     */
    do_action'woocommerce_before_shop_loop' );

    woocommerce_product_loop_start();

    if ( wc_get_loop_prop'total' ) ) {
        while ( have_posts() ) {
            the_post();

            /**
             * Hook: woocommerce_shop_loop.
             */
            do_action'woocommerce_shop_loop' );

            wc_get_template_part'content''product' );
        }
    }

    woocommerce_product_loop_end();

    /**
     * Hook: woocommerce_after_shop_loop.
     *
     * @hooked woocommerce_pagination - 10
     */
    do_action'woocommerce_after_shop_loop' );
else {
    /**
     * Hook: woocommerce_no_products_found.
     *
     * @hooked wc_no_products_found - 10
     */
    do_action'woocommerce_no_products_found' );
}

/**
 * Hook: woocommerce_after_main_content.
 *
 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
 */
do_action'woocommerce_after_main_content' );
get_footer'shop' );
?>
<style>
    .movil{

    }
@media (max-width:600px){
    div#woocommerce_product_categories-4 {
    positionrelative;
    floatleft;
    z-index9999;
}
    .product-categories .uk-slidenav-position {
    positionrelative;
    floatleft;
    positionrelative;
    width100%;
}

.header-widget-region {
    displaynone;
}
        .titulo_boton {
            display:initial ;
                margin-bottom24px;
    height80px !important;
    displayblock;

  
}

#secondary{
  float:left;
  clear:both;
  margin-top:2px;
  padding:5px;  
  overflow:auto
  displaynone;   
}
}

@media (min-width:601px){
#secondary{
    display:initial !important;
}
.titulo_boton{
    displaynone;
}
}
    </style>

    
    <script type="text/javascript">
jQuery(document).ready(function(){
     jQuery("#hide").click(function(){
 jQuery("#secondary").hide();
});

jQuery("#show").click(function(){
  jQuery("#secondary").show();
});
});

        
    </script>
<?php

 

 

 Recuerda que si tienes alguna duda me lo puedes preguntar en los comentarios, mediante el contacto, mediante el correo electrónico Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. o a través del teléfono. 

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