Seleccionar página

Funciones para agregar menús en wordpress





//Ej 1 Agregar menú en el de otro plugin. ***** FUNCIONA ******
//https://wordpress.stackexchange.com/questions/91377/admin-menu-as-submenu-from-another-plugin
add_action('admin_menu', 'submenu_woocommerce_booking_calendario', 11 ); //<=Notar la prioridad 11 para agregar en submenú de otro plugin
function submenu_woocommerce_booking_calendario() 
{
    add_submenu_page(
        'edit.php?post_type=wc_booking', //Third party plugin Slug 
        'Calendario Nexo', 
        'Calendario Nexo', 
        'read', //Capability: https://codex.wordpress.org/Roles_and_Capabilities
        'nexo-calendario', //El slug que aparecerá como "...&page=nexo-calendario"
        'func_callback'
    );
}
function func_callback() 
{ 
    echo '<h1>OK</h1>'; 
}

//Ej 2 Ejemplo FUNCIONANDO de agregar menú/submenú:
//https://wordpress.stackexchange.com/questions/66498/add-menu-page-with-different-name-for-first-submenu-item
add_action('admin_menu', 'my_menu_pages');

add_menu_page('My Page Title',
        	'My Menu Title',
        	'manage_options', //Capability: https://codex.wordpress.org/Roles_and_Capabilities
        	'my-menu', //Plugin slug
        	'my_menu_output_callback' );

add_submenu_page(
        	'my-menu', //plugin slug
        	'Submenu Page Title', 'Whatever You Want', 'manage_options', 'my-menu', 'callback' );

add_submenu_page('my-menu', 'Submenu Page Title2', 'Whatever You Want2', 'manage_options', 'my-menu2', 'callback' );


//Ej 3 Agrega opción al menú AJUSTES: https://developer.wordpress.org/reference/functions/add_options_page/
add_action( 'admin_menu', 'my_plugin_menu' );
function my_plugin_menu() {
	add_options_page( 'My Plugin Options', 
'My Plugin',
'manage_options', //Capability: https://codex.wordpress.org/Roles_and_Capabilities
'my-unique-identifier', 'my_plugin_options' );
}
function my_plugin_options() {
	if ( !current_user_can( 'manage_options' ) )  {
		wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
	}
	echo '<div class="wrap">';
	echo '<p>Here is where the form would go if I actually had options.</p>';
	echo '</div>';
}

Stripe.com

Enlaces de interés

https://github.com/stripe/stripe-php/blob/master/examples/oauth.php

https://www.youtube.com/watch?v=EildM6OMcoQ

Ejemplo de cómo realizar un cargo:

https://stripe.com/docs/stripe-js/elements/quickstart (ejemplo con javascript)

https://github.com/bradtraversy/php_stripe_paypage/blob/master/index.php

https://github.com/bradtraversy/php_stripe_paypage/blob/master/charge.php

Ejemplos en Stripe.dev

https://stripe.dev/elements-examples/es/


Recortes de ejemplos de uso

\Stripe\Stripe::setApiKey(WEBSITE_CONFIG['stripe']['api-secret-key']);

//$stripeToken es creado desde el fichero JS; también se puede crear manualmente de esta forma:

https://stackoverflow.com/questions/50835945/laravel-cashier-where-does-stripetoken-come-from/50855564#50855564 

It turns out that the stripeToken is usually generated by stripe.js forms when they are submitted.

As I am using API driven checkout forms and not standard html submission forms I need to use the Stripe API to create the token from the card details provided.

$stripeToken = Token::create(array(
                       "card" => array(
                           "number"    => $request->get('number'),
                           "exp_month" => str_before($request->get('expiry'), '/'),
                           "exp_year"  => str_after($request->get('expiry'), '/'),
                           "cvc"       => $request->get('cvc'),
                           "name"      => $request->get('name')
                       )
                   ));

Then I use $stripeToken->id and pass it:

$user->newSubscription('main', 'premium')->create($stripeToken->id);

//Crear un cargo

$charge = \Stripe\Charge::create(['amount' => 2000, 'currency' => 'usd', 'source' => $stripeToken]);

SCSS – Extender clases dentro de media queries

Para extender una clase dentro de una media query, el problema con el que nos encontramos es:

.small-btn {
  padding: 5px;
  &:hover {
    background-color: white;
    color:black;
  }
}

@media (max-width: 768px) {
  button {
    @extend .small-btn;
  }
}

Arroja el error

Error: You may not @extend an outer selector from within @media.
       You may only @extend selectors within the same directive.
       From "@extend .small-btn" on line 7 of src/scss/main.scss

Solución:

La respuesta es un  @mixin. Con un @mixin podemos importar todas las las reglas que queramos facilmente. Lo que podríamos hacer es poner el código de la clase que queremos extender, dentro de un @mixin. Entonces, tanto la clase como la sección dentro del mediaquery usarán el @mixin

@mixin small-btn-mixin() {
  padding: 5px;
  &:hover { 
    background-color: white;
    color:black;
  }
}

.small-btn {
  @include small-btn-mixin();
}

@media (max-width: 768px) {
  button {
    @include small-btn-mixin();
  }
}

La limitación es que hay que indicar explícitamente las clases que van a ir tanto dentro del media query como fuera de ella

En definitiva…

En vez de extender @extend, coloca el código que quieras reproducir dentro de un @mixin

 @mixin small-btn-mixin() {
   padding: 5px;
   &:hover {
     background-color: white;
     color:black;
   }
 }

 @media (max-width: 768px) {
   button {
     @include small-btn-mixin();
   }
 }


Ocultar menú en scrolldown de forma suave

HTML

<nav>xxxxxx</nav>

Javascript

//////////////////////////////////////////////
	//===> Ocultar el menú en scrolldown
var confScrolldown = {
	//Número de scroll en pixels donde se comienza a ocultar el menú
	offsetOcultar: 20,
};
var $navbarSuperior = $("nav");
var offsetActualParaOcultar = 0;
var prevScrollpos = $(window).scrollTop();
var alturaMenuNav = $navbarSuperior.outerHeight();
$(window).scroll(function() {
	var currentScrollPos = $(window).scrollTop();
	if (prevScrollpos > currentScrollPos) {
		//$navbarSuperior.css("top",'0'); //<=sin animación
		$navbarSuperior.stop().animate({ top: 0 }, 100);
		offsetActualParaOcultar = 0;
	} else {
		//$navbarSuperior.css("top",'-'+alturaMenuNav+'px');  //<=sin animación
		offsetActualParaOcultar++;
		if(offsetActualParaOcultar>=confScrolldown.offsetOcultar)
		{
			//Sólo realizará la animación si ha scrolleado los píxeles indicados en confScrolldown.offsetOcultar
			$navbarSuperior.stop().animate({ top: -alturaMenuNav }, 800);
		}
	}
	prevScrollpos = currentScrollPos;
});

Referencias:
https://codepen.io/JTParrett/pen/CAglw
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_hide_scroll

Barra indicadora del porcentaje de scroll vertical

HTML

<div class="barra-porcentaje-scroll"></div>

Javascript

$(window).scroll(function() {
    //Calcular el porcentaje que el usuario ha scrolleado y mostrarlo en la barrita superior
    var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
    $('.barra-porcentaje-scroll').css('width', scrollPercent +"%"  );
});

CSS

.barra-porcentaje-scroll
{
    height: 5px;
    background-color: #009ACF;
    width: 0px;
    z-index: 2;
    position: fixed;
    left: 0;
}

http://jsfiddle.net/SnJXQ/2/

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver
Privacidad