पॉपओवर केस स्टडी

Swetha Gopalakrishnan

Saurabh Rajpal

पॉपओवर, वेब पर हर जगह मौजूद होते हैं. इन्हें मेन्यू, टॉगल, और डायलॉग बॉक्स, जिनका इस्तेमाल खाता सेटिंग, जानकारी देने वाले विजेट, और प्रॉडक्ट कार्ड की झलक. ये कॉम्पोनेंट पहले से ज़्यादा लोकप्रिय होने के बावजूद, उन्हें तब भी बहुत जटिल होता है. इसे हल करने के लिए, पॉपओवर बनाने के लिए, डिक्लेरेटिव एचटीएमएल एपीआई ब्राउज़र में लॉन्च किए जा रहे हैं. इनमें से पहला ये पॉपओवर एपीआई हैं.

पॉपओवर, बेसलाइन नए उपलब्ध है का हिस्सा है.

आम तौर पर, पॉपओवर को डायलॉग समझ लिया जाता है. हालांकि, कुछ कुंजी ऐसे भी हैं उनके व्यवहार में अंतर न हो. dialog एलिमेंट dialog.showModal के साथ खोला गया (मॉडल डायलॉग), एक ऐसा अनुभव है जिसके लिए साफ़ तौर पर उपयोगकर्ता इंटरैक्शन की ज़रूरत होती है मोडल विंडो बंद करो. popover, लाइट खारिज करने की सुविधा का इस्तेमाल करता है. मॉडल dialog ऐसा नहीं करता. मॉडल डायलॉग, पेज के बाकी हिस्से को बंद कर देता है. popover में ऐसा नहीं होता. अंतर के बारे में ज़्यादा पढ़ें.

यह लेख एक ऐसी सीरीज़ का हिस्सा है जिसमें ई-कॉमर्स कंपनियों के बारे में बताया गया है नई सीएसएस और यूज़र इंटरफ़ेस (यूआई) सुविधाओं का इस्तेमाल करके अपनी वेबसाइट को बेहतर बनाया. इस लेख में, जानें कि Tokopedia ने कैसे पॉपओवर एपीआई को लागू किया और उसका फ़ायदा लिया.

Tokopedia

React में पॉपओवर एट्रिब्यूट का इस्तेमाल करके, कोड की लाइन 70% तक कम कर दी जाती है. मोडल में इवेंट हैंडलिंग की ज़रूरत के बजाय, इसे एचटीएमएल से स्थानीय तौर पर कंट्रोल किया जा सकता है मोडल DOM को आखिर में ले जाने के लिए JavaScript और React.createPortal का इस्तेमाल करना document.body. हम इस कॉन्टेंट को ऐनिमेट करने के लिए, @starting-style का इस्तेमाल भी कर सकते हैं पॉपओवर के खुलने और बंद होने का समय.—एंडी विहलीम, सीनियर सॉफ़्टवेयर इंजीनियर, टोकोपीडिया.

Tokopedia के प्रॉडक्ट की जानकारी वाले पेजों (पीडीपी) पर, हर पेज के लिए प्रॉडक्ट की कई इमेज मौजूद हैं प्रॉडक्ट. जब प्रॉडक्ट के थंबनेल पर क्लिक किया जाता है, तो एक मॉडल खुलता है. बड़े साइज़ की इमेज. यह ई-कॉमर्स वेबसाइटों में इस्तेमाल किया जाने वाला एक सामान्य पैटर्न है.

कोड

Tokopedia, फ़्रंटएंड डेवलपमेंट के लिए React का इस्तेमाल करता है. लागू करने से पहले पॉपओवर एपीआई के साथ काम करते हैं, तो उन्होंने DOM मॉडल और एक बटन का इस्तेमाल किया है. बटन मॉडल खोलने के लिए, प्रतिक्रिया की स्थिति बदली गई. पॉपओवर एपीआई की मदद से, ये निर्देश एलिमेंट में popovertarget एट्रिब्यूट, जो वैल्यू के साथ पॉपओवर खोलता है जो पॉपओवर एलिमेंट के आईडी के जैसा ही हो.

इस बुनियादी तरीके को लागू करने पर, पॉपओवर काम करता है. हालांकि, यह दिखता और दिखना बंद हो जाता है बिना किसी ऐनिमेशन के. फ़ाइल के लिए एक आसान एंट्री और एग्ज़िट ऐनिमेशन बनाने के लिए पॉपओवर, :popover-open और @starting-style का उपयोग करें और इनके ऐनिमेशन की अनुमति दें अलग-अलग प्रॉपर्टी. नीचे दिए गए कोड उदाहरण में, पॉपओवर स्केलिंग करता है. इसके लिए, transform: 'scale()'प्रॉपर्टी.

यह कोड का उदाहरण दिखाता है पॉपओवर एपीआई के लिए, एंट्री और एग्ज़िट ऐनिमेशन लागू करने का तरीका.

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },
  transform: 'scale(0.8)',
  opacity: 0,

  '&:popover-open': {
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
    transform: 'scale(1)',
    opacity: 1,
  },
});

पॉपओवर एपीआई के साथ काम न करने वाले ब्राउज़र के हिसाब से, Tokopedia ने ऑडबर्ड से पॉपओवर-पॉलीफ़िल, जो gzip संपीड़न के साथ केवल 3.2 KB है. वे पॉलीफ़िल से संतुष्ट थे यह अच्छा काम कर रहा था और इससे परफ़ॉर्मेंस में कोई गिरावट नहीं आई. कुल मिलाकर, वे पॉपओवर एपीआई की मदद से, React में कोड की 70% तक लाइनें कम की जा सकती हैं.

पॉपओवर एपीआई का इस्तेमाल करते समय इन बातों का ध्यान रखें

Tokopedia ने React का इस्तेमाल किया और टीम ने उन पेजों के लिए पॉपओवर कॉम्पोनेंट जो इसका इस्तेमाल नहीं करते. इसके बाद, पॉपओवर कॉन्टेंट. इस तरह, उन्होंने अपने शुरुआती अनुरोध के साइज़ को कम कर दिया.

पॉपओवर को सीएसएस ऐंकर पोज़िशन के साथ मिलाना (Chrome पर जल्द आ रहा है) ताकि उन्हें दूसरे एलिमेंट के हिसाब से रखा जा सके. उदाहरण के लिए यह मेन्यू और टूलटिप के लिए मददगार है.

संसाधन

• पेश है पॉपओवर एपीआई
• पॉपओवर और डायलॉग के बीच का अंतर
• क्या आपको किसी गड़बड़ी की शिकायत करनी है या किसी नई सुविधा का अनुरोध करना है? हम आपकी राय जानना चाहते हैं.

इस सीरीज़ के अन्य लेख देखें. इनमें ई-कॉमर्स के बारे में बताया गया है कंपनियों को, सीएसएस और यूज़र इंटरफ़ेस (यूआई) की नई सुविधाओं, जैसे कि स्क्रोल की मदद से मिलने वाली सुविधाओं का इस्तेमाल करने का फ़ायदा मिला ऐनिमेशन, पॉपओवर, कंटेनर क्वेरी, और has() सिलेक्टर.

• आपकी ई-कॉमर्स साइट के लिए, वेब यूज़र इंटरफ़ेस (यूआई) की क्षमताएं अहम क्यों हैं?
• स्क्रोल किए गए ऐनिमेशन से जुड़ी केस स्टडी
• ट्रांज़िशन की केस स्टडी देखें
• कंटेनर क्वेरी की केस स्टडी
• :has() सिलेक्टर की केस स्टडी