Last active
September 13, 2017 10:33
-
-
Save neilgee/13006abdcc6f9059e20a696d7ca0e6c1 to your computer and use it in GitHub Desktop.
Outfitter Pro Off Screen Content, WooCommerce
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* # 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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() ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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