$w namespace contains everything you need in order to work with your site's components. It contains all of the UI elements, nodes, and events that make up your site. It also includes
The APIs in
$w can only be used in front-end code.
You do not need to import
|EffectOptions||The Rendering API is used to control when code is run as a page is being loaded.|
|Anchor||Anchors are invisible position markers which you can place anywhere on your site. They are a useful way to direct users to important sections.|
|Background||Provides functionality for background images in certain elements.|
|Box||Container boxes are used to structure your site. You can attach any element to a container box and move the box around, which is a useful way to to keep elements together. Some actions performed on a box affect the elements it contains. For example, hiding a box also effectively hides all the elements in the box, although the values of the hidden properties of the elements contained in the box do not change.|
|Button||A text button or an icon button.|
|CartIcon||An icon that leads users to the shopping cart.|
|Checkbox||Checkboxes are used for a single binary choice.|
|Container||A container for Repeater items.|
|Document||A complete web page, which consists of a Header, Page, and Footer.|
|Dropdown||Dropdowns are used for selecting one of a number of options. They are especially useful when there are too many options to display using radio buttons. Dropdowns consist of a list of options. Each option contains a label, which is what the user sees, and a value, which is what is used in code and stored in you collections.|
|Event||Events are fired when certain actions occur to elements.|
|Footer||The footer is the area of your site that appears at the bottom and throughout all of your pages.|
|Gallery||A gallery for displaying multiple items.|
|GalleryItemChangedEvent||Event that is fired when a gallery moves to a new image.|
|GalleryItemClickedEvent||Event that is fired when an image in a gallery is clicked.|
|GoogleMap||A Google Map element that allows you to display a given location.|
|Header||The header is the area of your site that appears at the top and throughout all of your pages.|
|HtmlComponent||A container for internal or external HTML code. Messages can be sent from your page code to the code in an HTML component and from the HTML component to your page code using the
|HtmlComponentMessageEvent||Event that is fired when the code in an HtmlComponent sends a message.|
|Image||Images are images stored in the Media Manager or retreived from an external web location. The URL formats for images are: +
Images from the Media Manager:
|KeyboardEvent||Event that is fired when the keyboard is pressed.|
|MouseEvent||Event that is fired when the mouse is clicked.|
|Page||A page is a web page that can contain other elements.|
|Pagination||An element for working with paging.|
|ProductPage||A store page for a specific product.|
|QuickActionBar||A quick action bar helps your visitors contact you instantly from their mobile devices. You can choose which actions appear on it and customize the design to match your site.|
|QuickActionBarItemClickedEvent||Event that is fired when a quick action bar item is clicked.|
|RadioButtonGroup||Radio button groups are used for selecting one of a number of options. Radio button groups consist of a list of options. Each option contains a label, which is what the user sees, and a value, which is what is used in code and stored in you collections.|
|RatingsDisplay||A Rating Display element allows you to display a value to your users using icons.|
|Repeater||A repeating layout.|
|Slider||Sliders allow users to select a number from a given range.|
|Slideshow||Slideshows are playable containers for slides.|
|Style||An object representing an element's styles.|
|StyleMixin||Provides functionality for elements that can be styled.|
|Switch||Switches are used for a single binary choice.|
|Table||A table for displaying data.|
|TableCellEvent||Event that is fired when a table cell is selected.|
|TableRowEvent||Event that is fired when a table row is selected.|
|Text||Provides functionality for text elements.|
|TextBox||An input element for capturing large amounts of text.|
|TextInput||An input element for capturing small amounts of text.|
|UploadButton||An upload button enables users to upload files to your site.|
|VectorImage||Vector images are digital illustrations based on geometric shapes. They maintain their high quality when resized.|
|Video||An element that displays a video from Vimeo or Youtube.|
|$w( )||Selects and returns elements from a page.|
|at( )||Gets a selector function for a specific context.|
|onReady( )||Sets the function that runs when all the page elements have finished loading.|
Selects and returns elements from a page.
$w() function selects single or multiple elements by ID or type.
To select by ID, pass a selector string with the hash symbol (
#) followed by the ID of the item you want to select (e.g.
"#myElement"). The function returns the selected element object.
To select by type, pass a selector string with the name of the type without the preceding
"Button"). The function returns an array of
the selected element objects. An array is returned even if one or no elements are selected.
To select using multiple selectors, pass a selector string with multiple selectors separated by commas. The selectors in the comma-separated string can be ID selectors, type selectors, or a mixture of the two. The function returns an array of the selected element objects. An array is returned even if one or no elements are selected. If two or more selectors select the same element, it's still returned only once in the array.
||String||A selector or multiple comma-separated selectors.|
Select an element using its ID
Select elements by type
Select all the images on the page
Select elements using a multiple selectors
Hide all the page's images
Gets a selector function for a specific context.
at() function returns a scoped selector where the scope is based on the context property. Usually, you will use
at() in a event handler that handles
events fired on an element contained in a repeater to get a selector with
repeated item scope. The returned function selects the elements from the same repeater item where the event was fired.
For example, suppose we have a repeater where each item contains an image and a text element. Here, when an image is clicked, the value of the text element in the same repeated item is changed to "Selected". All the other text elements in the other repeated items are not affected.
||EventContext||An event context.|
|$w||A selector function for the given context.|
Sets the function that runs when all the page elements have finished loading.
onReady() function for code you want to run before the user starts interacting with your page.
The following code should be placed inside the
onReady() event handler:
- Initialization of element properties - Example: setting a text element's initial text value.
- Function calls on elements to set their initial state - Example: disabling a button.
- Dynamic event handlers that you want bound when the page loads - Example: setting an event handler to be called when the mouse pointer enters an element.
Return a Promise from the handler function to force the page to wait for your Promise to resolve before displaying the page to users.
For example, suppose you are using a query to retrieve data that you want to display in a table. If you don't return the query promise the table might show without your data until the query's Promise resolves. Instead return the query Promise so that the page doesn't load for users until the query returns results and the table is populated.
Static event handlers, those that are wired in the Properties panel in the Editor, are not placed inside inside the
onReady() event handler.
onReady() function in the Site tab is called before the
onReady() function in the Page tab.
||The name of the function or the function expression to run when the page has finished loading.|
|On fulfillment||void||When the
Run code in an anonymous function when the page loads
Wait for a Promise to resolve
Where to place code