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:

Buy Online Pickup In Store: PLP Location Filters & Availability

PLP Filters

On the PLP page, this module is meant to sit just before the container for the primary content (and outside of the container that holds the other PLP filters). It will display above the content or filters depending on the viewport size, and is always visible. Its edit form is toggle-able clientside by adding the "pickup-show-form" class to the parent container. The checked state of the top checkbox comes by adding the "pickup-selected" class. Note: the checked and unchecked states include text for accessibility to describe the state and the change upon clicking the top link. Look for the "a11y-only" spans to see those label differences.

Variation - unchecked

Checked

Edit location view

Error: Not a valid ZIP code

Error: No store within radius

Free Store Pickup (Selected. Click to deselect filter.) Close

Your recent locations

Error: No stores within max radius

Free Store Pickup (Selected. Click to deselect filter.) Close

Your recent locations

PLP Grid Headers

We want to list out the store name if there are 1-2 so shoppers can access the store detail overlay. If 3 or more stores are selected, use a roll up count.

Store filter applied: Single store

15 Styles available for free in-store pickup at Westfarms Mall, CT - Clear filter (Remove store pickup filter and refresh page)

Store filter applied: Two stores

15 Styles available for free in-store pickup at Westfarms Mall, CT and Garden State Plaza, NJ - Clear filter (Remove store pickup filter and refresh page)

Store filter applied: 3+ stores, use count instead

15 Styles available for free in-store pickup at 3 stores - Clear filter (Remove store pickup filter and refresh page)

If the shopper scrolls past the in-store products, starts browsing the online products, then paginates forward, we want to make it clear in the header that they are no longer seeing products available for pickup by changing the header.

Store filter applied: Paginated to online only

Available online to ship to me - Free shipping on orders orders over $125

Available Online Divider

Available Online

Free shipping on orders over $125

PDP Pickup Location Options

Used on the Product Detail template and the PDP quickview (found via the Product Listing Template).

NOTE: in the PDP, the pickup-options div should come after the pdetail_actions div, while in the quickview, it should come after the pdetail_options div.

Standard View (with Edit Location toggle)

Free Store Pickup!
Want it today?
Order before 2pm

In stock within 30 miles of 01607 Edit location

Your recent locations

NOTE: In the quickview, the store names are not linked.

Standard View

Free Store Pickup!
Want it today?
Order before 2pm

In stock within 30 miles of 01607 Edit location

  • Westfarms Mall, CT (2.1 mi) Not in Stock
  • Garden State Plaza, NJ (8 mi) Low Stock
  • The Gate at Manhasset, NY (14 mi)

Choose a Size Error

Free Store Pickup!
Want it today?
Order before 2pm

In stock within 30 miles of 01607 Edit location

Please choose a Size above to view our in-store inventory.

No Inventory Error

Free Store Pickup!
Want it today?
Order before 2pm

In stock within 30 miles of 01607 Edit location

Sorry! This item isn’t in stock at a vineyard vines retail store near you. We recommend purchasing online—it’s no risk, returns and exchanges are free! Or check availability at stores 40, 50, or 60 miles away.