Setting the file. One moment.
Subchapter 1.165
references/lightbox/EXAMPLES_CONDITION.mdMarkdown6 KBView on GitHub
From the request “Add a countdown timer that counts down from 10 seconds. When it reaches zero, open a lightbox that says “Time’s up!” with a Close button that closes the lightbox.”
The popup’s text is fixed, so it is a normal text element on the popup page. The payload of open() carries only timerExpired, which tells the provider instance on the popup page not to run a second countdown. The open runs once, from an effect, when the countdown reaches zero.
src/extensions/site/contexts/countdown-popup-context/countdown-popup-context.tsx:
import { createContext, useContext, useEffect, useRef, useState } from 'react';
import type { ReactNode } from 'react';
import type { BooleanValue, NumberType, 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';
context, data and resources in countdown-popup-context.extension.ts:
context: {
items: {
secondsRemaining: { dataType: 'number', displayName: 'Seconds remaining', description: 'Bind to a number display of the countdown.' },
countdownText: { dataType: 'text', displayName: 'Countdown text', description: 'Bind to the countdown text element.' },
isPopupErrorHidden: { dataType: 'booleanValue', displayName: 'Popup error hidden', description: 'False when the popup could not open. Bind to an error text hidden property.' },
closePopup: {
dataType: 'function',
displayName: 'Close popup',
description: "On the popup page, bind to the Close button's click.",
function: { parameters: [] },
},
},
},
data: {
popupId: { dataType: 'text', displayName: 'Popup ID', description: 'The ID of the popup page to open when the countdown ends.' },
},
resources: {
client: { url: './extensions/site/contexts/countdown-popup-context/countdown-popup-context.tsx' },
contextSpecifier: { hook: 'useCountdownPopupContext', moduleSpecifier: '@/countdown-popup-context' },
dependencies: { serviceDependencies: ['@wix/site-service-lightbox', '@wix/site-service-pages'] },
},Final message: Add a new text for the countdown and bind it to Countdown text; attach Countdown popup to that page and to the popup page and set its Popup ID to the popup’s ID; on the popup page, add a “Time’s up!” text and a Close button bound to Close popup; and turn off the popup’s automatic opening on page load.