Změna stránky Můj účet ve WooCommerce 2.6

Nová WooCommerce přinese několik změn a mezi nimi i úpravu vzhledu stránky můj účet. Aktualizace umožní developerům šablon a pluginů, vytvářet vlastní podstránky účtu zákazníka.

Jen pro připomenutí, na stránce můj účet, může zákazník vidět a prohlížet své objednávky, soubory ke stažení, upravovat své údaje.

V aktuální verzi je na každé podstránce pouze obsah, na rozdíl od nové verze, kde je na levé straně navigace (taby).

my-account

Díky tomu, je možné přidávat další taby a přehledně rozšířit obsah zákaznického účtu.

Pomocí jednoduché třídy, vytvoříte bez problému, novou stránku:

class My_Custom_My_Account_Endpoint {
 /**
 * Custom endpoint name.
 *
 * @var string
 */
 public static $endpoint = 'novy-tab';
 /**
 * Plugin actions.
 */
 public function __construct() {
 // Actions used to insert a new endpoint in the WordPress.
 add_action( 'init', array( $this, 'add_endpoints' ) );
 add_filter( 'query_vars', array( $this, 'add_query_vars' ), 0 );
 // Change the My Accout page title.
 add_filter( 'the_title', array( $this, 'endpoint_title' ) );
 // Insering your new tab/page into the My Account page.
 add_filter( 'woocommerce_account_menu_items', array( $this, 'new_menu_items' ) );
 add_action( 'woocommerce_account_' . self::$endpoint . '_endpoint', array( $this, 'endpoint_content' ) );
 }
 /**
 * Register new endpoint to use inside My Account page.
 *
 * @see https://developer.wordpress.org/reference/functions/add_rewrite_endpoint/
 */
 public function add_endpoints() {
 add_rewrite_endpoint( self::$endpoint, EP_ROOT | EP_PAGES );
 }
 /**
 * Add new query var.
 *
 * @param array $vars
 * @return array
 */
 public function add_query_vars( $vars ) {
 $vars[] = self::$endpoint;
 return $vars;
 }
 /**
 * Set endpoint title.
 *
 * @param string $title
 * @return string
 */
 public function endpoint_title( $title ) {
 global $wp_query;
 $is_endpoint = isset( $wp_query->query_vars[ self::$endpoint ] );
 if ( $is_endpoint && ! is_admin() && is_main_query() && in_the_loop() && is_account_page() ) {
 // New page title.
 $title = __( 'Nový tab', 'woocommerce' );
 remove_filter( 'the_title', array( $this, 'endpoint_title' ) );
 }
 return $title;
 }
 /**
 * Insert the new endpoint into the My Account menu.
 *
 * @param array $items
 * @return array
 */
 public function new_menu_items( $items ) {
 // Remove the logout menu item.
 $logout = $items['customer-logout'];
 unset( $items['customer-logout'] );
 // Insert your custom endpoint.
 $items[ self::$endpoint ] = __( 'Nový tab', 'woocommerce' );
 // Insert back the logout item.
 $items['customer-logout'] = $logout;
 return $items;
 }
 /**
 * Endpoint HTML content.
 */
 public function endpoint_content() {
 wc_get_template( 'myaccount/navigation.php' ); ?>

<div class="woocommerce-MyAccount-content">

<h2>Nový tab</h2>
 <p>Html obsah nové stránky zákaznického účtu.</p>

</div>

<?php
 }
 /**
 * Plugin install action.
 * Flush rewrite rules to make our custom endpoint available.
 */
 public static function install() {
 flush_rewrite_rules();
 }
}
new My_Custom_My_Account_Endpoint();

register_activation_hook( __FILE__, array( 'My_Custom_My_Account_Endpoint', 'install' ) );

Po vytvoření třídy, je nutné přeuložit permalinky, jinak bude odkaz vracet 404.

novy-tab

Tato novinka ve WooCommerce je opravdu přínosná a již nyní vidím různé možnosti využití.

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

1 Comments

  1. Pingback: Co nás čeká ve WooCommerce 2.6 - Musilda.cz

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *