Setting the file. One moment.
Subchapter 1.166
references/lightbox/EXAMPLES.mdMarkdown7 KBView on GitHub
Each provider is scaffolded with wix generate and registered by it, as CONTEXT_PROVIDER.md describes. The examples are in this file (a repeater) and EXAMPLES_CONDITION.md (a countdown). Each shows the in full and only the manifest parts the scaffold does not write: , and .
.tsxcontextdataresourcesFrom the request “I want a repeater with 5 country names. In each item have a button that on click opens a lightbox with a greeting in the country’s language.”
The same provider is attached to the opening page and to the popup page. On the opening page, the repeater binds to countries and each item’s button click to that item’s openGreeting. On the popup page, the texts bind to selectedCountry and selectedGreeting. The clicked country reaches the popup only through the payload of open().
src/extensions/site/contexts/country-greeting-context/country-greeting-context.tsx:
import { createContext, useContext, useState } from 'react';
import type { ReactNode } from 'react';
import type { BooleanValue, Text } from '@wix/editor-react-types';
import { useService } from '@wix/services-manager-react';
import { LightboxDefinition, type ILightboxService } from '@wix/site-service-lightbox/definition';
import { PagesDefinition, type IPagesService } from '@wix/site-service-pages/definition';
type
context, data and resources in country-greeting-context.extension.ts:
context: {
items: {
countries: {
dataType: 'arrayItems',
displayName: 'Countries',
description: 'Bind to the country repeater.',
arrayItems: {
item: {
dataType: 'data',
data: {
items: {
id: { dataType: 'text', displayName: 'Country ID' },
countryName: { dataType: 'text', displayName: 'Country name', description: 'Bind to the item country text.' },
greeting: { dataType: 'text', displayName: 'Greeting' },
openGreeting: {
dataType: 'function',
displayName: 'Open greeting popup',
description: "Bind to this item's button click. Opens the popup with this country.",
function: { parameters: [] },
},
},
},
},
},
},
selectedCountry: { dataType: 'text', displayName: 'Selected country', description: 'On the popup page, bind to the country text.' },
selectedGreeting: { dataType: 'text', displayName: 'Selected greeting', description: 'On the popup page, bind to the greeting text.' },
isSelectionHidden: { dataType: 'booleanValue', displayName: 'Selection hidden', description: 'On the popup page, true when it opened with no country. Bind to the greeting content hidden property.' },
isEmptyStateHidden: { dataType: 'booleanValue', displayName: 'Empty state hidden', description: 'On the popup page, false when it opened with no country. Bind to the empty-state text hidden property.' },
isPopupErrorHidden: { dataType: 'booleanValue', displayName: 'Popup error hidden', description: 'False when the popup could not open. Bind to an error text hidden property.' },
},
},
data: {
popupId: { dataType: 'text', displayName: 'Popup ID', description: 'The ID of the greeting popup page.' },
},
resources: {
client: { url: './extensions/site/contexts/country-greeting-context/country-greeting-context.tsx' },
contextSpecifier: { hook: 'useCountryGreetingContext', moduleSpecifier: '@/country-greeting-context' },
dependencies: { serviceDependencies: ['@wix/site-service-lightbox', '@wix/site-service-pages'] },
},Final message: Attach Country greetings to the opening page and to the popup page, set its Popup ID to the popup’s ID, bind the repeater to Countries and each item’s button to Open greeting popup, and bind the popup texts to Selected country and Selected greeting.