Plugin Documentation

Drawer

Sidebar drawer element providing supplementary content access with sliding animation for enhanced user experience.

Suggest Edits

ℹ️

Beta Feature

The feature described here will be available starting with SureCart version 3.0. If you'd like to try this feature before the official release, you can install the beta version by visiting the SureCart plugin page on WordPress.org. In the Advanced Options section, select the latest version labeled "SureCart V3.0-Beta" from the Development Version dropdown, and click "Download."

Introduction

SureCart Drawer component enables us to make a simple and beautiful slide-out drawer element. The drawer is built using a native HTML5

element, which assists with accessibility, including focus trapping.

The drawer open and close states are handled by Interactivity API.

Basic Drawer Markup

To add a drawer, you can use the surecart/dialog namespace and the sc-drawer css class on the <dialog> element.

<div data-wp-interactive='{ "namespace": "surecart/dialog" }'>
  <button data-wp-on--click='actions.toggle'>
  	Open Drawer
  </button>

  <dialog class="sc-drawer" data-wp-on--click="actions.closeOverlay">
  	Drawer Contents
  </dialog>
</div>

Both the trigger and dialog elements must be wrapped inside the interactive wrapper, however it is possible to specify a target for more flexibility of markup as context.

<div data-wp-interactive='{ "namespace": myplugin" }'>
  <button 
  	data-wp-on--click='surecart/dialog::actions.toggle'
  	<?php echo wp_interactivity_data_wp_context( [ 'target' => '#my-drawer' ])>
  		Open Drawer
  </button>
</div>

<div data-wp-interactive='{ "namespace": myplugin" }'>
  <dialog id="my-drawer" class="sc-drawer" data-wp-on--click="actions.closeOverlay">
  	Drawer Contents
  </dialog>
</div>

Handling Focus

When a dialog opens, the browser, by default, gives focus to the first element that can be focused within the dialog. However, if you want a different element to be focusable, you can add the autofocus attribute to that html tag.

<div data-wp-interactive='{ "namespace": "surecart/dialog" }'>
  <button data-wp-on--click='actions.toggle'>
  	Open Drawer
  </button>

  <dialog class="sc-drawer" data-wp-on--click="actions.closeOverlay">
  	<button>Close</button> <!-- This is typically focused -->
  	<input autofocus /> <!-- Adding autofocus will focus this one first -->
  </dialog>
</div>

Drawer Body

The drawer body markup consists of 3 parts, the header, body and footer. These must be inside the sc-drawer__wrapper class div:

<div data-wp-interactive='{ "namespace": "surecart/dialog" }'>
	<button data-wp-on--click='actions.toggle'>Open</button>

	<dialog class="sc-drawer" data-wp-on--click="actions.closeOverlay">
		<div class="sc-drawer__wrapper">
			<div class="sc-drawer__header">
				Header Content
			</div>
			<div class="sc-drawer__body">
				Body Content
			</div>
			<div class="sc-drawer__footer">
				Footer Content
			</div>
		</div>
	</dialog>
</div>

Complete Example

<div
	class="sc-cart-block"
	data-wp-interactive='{ "namespace": "surecart/dialog" }'
>
	<button
		data-wp-on--click='actions.toggle'
		class="sc-cart__button"
	>
		<?php echo wp_kses( SureCart::svg()->get('shopping-bag'), sc_allowed_svg_html() ); ?>
	</button>

	<dialog class="sc-drawer" data-wp-on--click="actions.closeOverlay">
		<div class="sc-drawer__wrapper">
			<div class="sc-drawer__header">
				<button
					data-wp-on--click='actions.toggle'
					style="border: 0; background: transparent; cursor: pointer;"
					title="<?php esc_attr_e( 'Close drawer', 'surecart' ); ?>"
				>
					<?php echo wp_kses( SureCart::svg()->get('arrow-left'), sc_allowed_svg_html() ); ?>
				</button>
				<p><?php esc_html_e( 'My Carts', 'surecart' ); ?></p>
				<button>1</button>
			</div>
			<div class="sc-drawer__body">
				<p><?php esc_html_e( 'Cart Items...', 'surecart' ); ?></p>
			</div>
			<div class="sc-drawer__footer">
				<button
					data-wp-on--click='actions.toggle'
					class="sc-drawer__footer__button"
				>
					<?php esc_html_e( 'Close', 'surecart' ); ?>
				</button>
			</div>
		</div>
	</dialog>
</div>

Attributes

AttributeTypeDescription
targetstringDialog selector element, used for multiple drawer element at same page.
Use it in UI element - data-wp-target="#custom-element"

Updated 4 months ago