Skip to content

Instantly share code, notes, and snippets.

@neilgee

neilgee/functions.php

Last active September 13, 2017 10:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neilgee/13006abdcc6f9059e20a696d7ca0e6c1 to your computer and use it in GitHub Desktop.
Save neilgee/13006abdcc6f9059e20a696d7ca0e6c1 to your computer and use it in GitHub Desktop.
Download ZIP
Outfitter Pro Off Screen Content, WooCommerce
Raw
functions.php
<?php //<~ Don't add me in
/*
* WooCommerce Add Cart to Menu - Genesis Sample Theme
*
*/
// Setup the header search icon menu.
include_once( get_stylesheet_directory() . '/lib/header-icon-menu.php' );
// Includes functions for the WooCommerce plugin.
include_once( get_stylesheet_directory() . '/lib/woocommerce/woocommerce-functions.php' );
// Repositions primary navigation menu.
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav', 13 );
// Enqueues ionicons.
add_action( 'wp_enqueue_scripts', 'prefix_offscreen_scripts_styles' );
function prefix_offscreen_scripts_styles() {
wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
}
Raw
functions1.php
<?php //<~ Don't add me in
/*
* WooCommerce Add Cart to Menu - Genesis Sample Theme
*
*/
// Setup the header search icon menu.
include_once( get_stylesheet_directory() . '/lib/header-icon-menu.php' );
// Includes functions for the WooCommerce plugin.
include_once( get_stylesheet_directory() . '/lib/woocommerce/woocommerce-functions.php' );
// Repositions primary navigation menu.
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav', 13 );
// Enqueues ionicons.
add_action( 'wp_enqueue_scripts', 'prefix_offscreen_scripts_styles' );
function prefix_offscreen_scripts_styles() {
wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
}
Raw
header-icon-menu.php
<?php
add_action( 'genesis_meta', 'prefix_setup_header_icons' );
/**
* Sets up the header icon menu markup, if any.
*
* @return void
*
* @since 1.0.0
*/
function prefix_setup_header_icons() {
// Outputs the header navigation container markup.
add_action( 'genesis_header', 'prefix_header_nav_markup_open', 10 );
// Outputs the header icons markup.
add_action( 'genesis_header', 'prefix_header_icons_markup_open', 11 );
if ( class_exists( 'WooCommerce' ) && current_theme_supports( 'woocommerce' ) ) {
add_action( 'genesis_header', 'prefix_do_woocommerce_cart_icon', 12 );
}
add_action( 'genesis_header', 'prefix_header_icons_markup_close', 12 );
add_action( 'genesis_header', 'prefix_header_nav_markup_close', 13 );
}
/**
* Outputs the header icon navigation markup.
*
* @since 1.0.0
*/
function prefix_header_nav_markup_open() {
genesis_markup( array(
'context' => 'nav-container',
'open' => '<div %s>',
) );
}
/**
* Outputs the header icon navigation markup closing tags.
*
* @since 1.0.0
*/
function prefix_header_nav_markup_close() {
genesis_markup( array(
'context' => 'nav-container',
'open' => '</div>',
) );
}
/**
* Outputs the header icon navigation markup.
*
* @since 1.0.0
*/
function prefix_header_icons_markup_open() {
genesis_markup( array(
'context' => 'nav-header-icons',
'open' => '<nav itemscope="" %s>',
) );
genesis_markup( array(
'context' => 'menu-header-icons',
'open' => '<ul %s>',
) );
}
/**
* Outputs the header icon navigation markup closing tags.
*
* @since 1.0.0
*/
function prefix_header_icons_markup_close() {
genesis_markup( array(
'context' => 'menu-header-icons',
'close' => '</ul>',
) );
genesis_markup( array(
'context' => 'nav-header-icons',
'close' => '</nav>',
) );
}
/**
* Adds appropriate attributes to the header icon navigation element.
*
* @since 1.0.0
*/
add_filter( 'genesis_attr_nav-header-icons', 'prefix_header_icons_nav_attr' );
function prefix_header_icons_nav_attr( $attr ) {
$attr['itemtype'] = 'https://schema.org/SiteNavigationElement';
$attr['id'] = 'genesis-nav-header-icons';
$attr['aria-label'] = __( 'Additional navigation', 'your-theme' );
return $attr;
}
/**
* Adds appropriate attributes to the header icon menu element.
*
* @since 1.0.0
*/
add_filter( 'genesis_attr_menu-header-icons', 'prefix_header_icons_menu_attr' );
function prefix_header_icons_menu_attr( $attr ) {
$attr['id'] = 'menu-header-icons-navigation';
$attr['class'] = $attr['class'] . ' menu genesis-nav-menu';
return $attr;
}
Raw
style.css
/* # WooCommerce Add to Cart Menu Icon - Number of Items
---------------------------------------------------------------------------------------------------- */
/* Site Header Navigation
--------------------------------------------- */
.site-header .nav-primary,
.site-header .nav-header-icons {
float: right;
max-width: 940px;
}
.nav-primary {
border-top: none;
}
.site-header .genesis-nav-menu li li {
margin-left: 0;
}
.header-full-width .title-area {
float: left;
width: auto;
}
.title-area {
float: left;
height: 40px;
margin-top: 5px;
padding: 0 0 0 10px;
min-width: 200px;
}
.genesis-nav-menu > .menu-item {
padding: 23px 20px;
text-align: center;
}
.genesis-nav-menu > .menu-item > a {
position: relative;
padding: 0;
}
.genesis-nav-menu .menu-item-has-toggle,
.close {
height: 60px;
padding: 18px 15px 12px 15px;
width: 60px;
vertical-align: middle;
}
button.close:focus,
button.close:hover,
.menu-toggle:focus,
.menu-toggle:hover,
.menu-item-has-toggle > a:focus,
.menu-item-has-toggle > a:hover,
.off-screen-content .genesis-nav-menu a:focus,
.off-screen-content .genesis-nav-menu a:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.genesis-nav-menu .ionicons::before {
vertical-align: middle;
}
.genesis-nav-menu .ionicons::before, .close .ionicons::before {
font-size: 25px;
line-height: 1;
width: 30px;
height: 30px;
text-align: center;
}
.menu-item-has-toggle .cart-count {
background-color: #548200;
border-radius: 50%;
color: #fff;
font-size: 10px;
font-size: 1rem;
height: 20px;
line-height: 2;
position: absolute;
right: -10px;
top: -10px;
width: 20px;
}
/* Off-screen Content
---------------------------------------------------------------------------------------------------- */
.no-scroll {
overflow: hidden;
}
.off-screen-content {
background-color: rgba( 255, 255, 255, 1 );
display: none;
height: 100vh;
left: 0;
overflow-y: scroll;
padding: 20px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 9998;
}
.off-screen-container {
display: table;
height: 100vh;
overflow: hidden;
table-layout: fixed;
text-align: center;
width: 100%;
}
.off-screen-wrapper {
display: table-cell;
padding-bottom: 20px;
vertical-align: middle;
width: 100%;
}
.off-screen-container .close {
background-color: #fff;
color: #000;
position: absolute;
top: 40px;
right: 40px;
}
.admin-bar .off-screen-container .close {
top: 72px;
}
.off-screen-content .wrap {
margin-left: auto;
margin-right: auto;
max-width: 720px;
}
Raw
woocommerce-functions.php
<?php
add_action( 'wp_enqueue_scripts', 'prefix_woocommerce_scripts' );
function prefix_woocommerce_scripts() {
wp_enqueue_script( 'your-theme-woocommerce', get_stylesheet_directory_uri() . '/lib/woocommerce/js/your-theme-woocommerce.js', array( 'jquery' ), '1.0.0', true );
}
/**
* Outputs the WooCommerce cart button.
*
* @return string HTML output of the Show Cart button.
*
* @since 1.0.0
*/
function prefix_get_off_screen_cart_toggle() {
global $woocommerce;
$cartcount = $woocommerce->cart->cart_contents_count;
return '<a href="#" class="toggle-off-screen-cart"><span class="screen-reader-text">' . __( 'Show Shopping Cart', 'your-theme' ) . '</span> <span class="ionicons ion-android-cart"></span><span class="cart-count">' . $cartcount . '</span></a>';
}
// Adds Mini Cart.
add_action( 'genesis_after_header', 'prefix_off_screen_woocommerce_cart_output' );
function prefix_off_screen_woocommerce_cart_output( $args = array() ) {
if ( class_exists( 'WooCommerce' ) && current_theme_supports( 'woocommerce' ) ) {
$button = '<button class="toggle-off-screen-cart close"><span class="screen-reader-text">' . __( 'Hide Shopping Cart', 'your-theme' ) . '</span> <span class="ionicons ion-android-close"></span></button>';
echo '<div class="off-screen-content off-screen-cart"><div class="off-screen-container"><div class="off-screen-wrapper"><div class="wrap"><section class="widget woocommerce widget_shopping_cart">';
$defaults = array(
'list_class' => '',
);
$args = wp_parse_args( $args, $defaults );
wc_get_template( 'cart/mini-cart.php', $args );
echo '</section></div>' . $button . '</div></div></div>';
}
}
// Function to print a cart icon menu item.
function prefix_do_woocommerce_cart_icon() {
printf( '<li class="menu-item menu-item-has-toggle cart-item">%s</li>', prefix_get_off_screen_cart_toggle() );
}
Raw
your-theme-woocommerce.js
/**
* This script adds the WooCommerce jquery cart toggle.
*
* @package your-theme\JS
* @author StudioPress
* @license GPL-2.0+
*/
( function($) {
var $body = $( 'body' ),
$content = $( '.off-screen-cart' ),
sOpen = false;
$(document).ready(function() {
// Toggles the off-screen cart content on click.
$( '.toggle-off-screen-cart' ).click(function() {
__toggleOffscreenCartContent();
});
});
// Toggles the off-screen cart content.
function __toggleOffscreenCartContent() {
if (sOpen) {
$content.fadeOut();
$body.toggleClass( 'no-scroll' );
sOpen = false;
} else {
$content.fadeIn();
$body.toggleClass( 'no-scroll' );
sOpen = true;
}
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment