Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

Web Pattern Library:

Appends and Ajax-Includes

The JavaScript in this site provides several ways of declaring in HTML when content should be appended to another element, either from within the document or via ajax. This allows us to prioritize the HTML source order for optimal use in constrained environments and devices, while enhancing its order for more advanced layout in capable devices. An example of a component that might make use of this would be navigation menu content, which could otherwise be reached via clicking the top-level navigation.

Same-document element appends

To append another element to your element, add a data-append-element attribute with a value that references ID of another element in the page. When the DOM is ready, the referenced element will be appended to the element with the data-append-element attribute.

Data-append attribute (div text content is green to show that the append has worked)

This text will be appended to the div

To append your element to another element, add a data-append-to attribute with a value that references ID of another element in the page. When the DOM is ready, the starting element will be appended to the element referenced in the data-append-element attribute value.

Data-append attribute (div text content is green to show that the append has worked)

This text will be appended to the div

External Ajax Includes

Portions of the templates may pull additional markup into the page via ajax, particularly when that content is already accessible through a link in the page. The ajax-include pattern makes it easy to define those includes from the markup, and specify how, and the conditions in which they should be injected into the page.

Data-append (append ajax-included content to element)

Data-replace (replace element with ajax-included content)

Data-after (insert ajax-included content after element)

Data-before (insert ajax-included content before element)