Dominio Email & Office Sito web WordPress Hosting VPS
Indietro
.com
$ 9.99 $ 26.99 /1 ° anno
.one
$ 4.99 $ 16.99 /1 ° anno
Indietro
Accedi
Pannello di controllo Webmail Editor Web E-commerce File Manager WordPress

Cos’è WooCommerce e come funziona? Guida per principianti

Come creare un negozio online con WordPress

Se stai pensando di creare un negozio online avrai già valutato diverse soluzioni per l’e-commerce. Una di queste è WooCommerce, uno dei software più popolari per costruire un negozio online. Vuoi saperne di più su WooCommerce? In questa guida per principianti ti spiegheremo come funziona WooCommerce, cosa ti offre questo software e di cosa hai bisogno per aprire il tuo negozio online.

vector

In breve

Glossary

WooCommerce è un plug-in di e-commerce per i siti WordPress. È una soluzione semplice e popolare con cui creare e gestire un negozio online.

Cos’è WooCommerce?

WooCommerce è un plugin per WordPress con cui puoi trasformare un nuovo sito web in un negozio online o aggiungere al tuo sito una sezione dedicata all’e-commerce. Con WooCommerce puoi gestire facilmente il tuo negozio:

  • aggiungendo prodotti;
  • tenendo traccia degli ordini;
  • controllando le scorte;
  • impostando i pagamenti;
  • monitorando le spedizioni.
Crea il tuo sito web con WordPress

Crea il tuo sito web con WordPress

Inizia a costruire il tuo sito con il CMS più famoso al mondo.

scegli un piano
  • Oltre 40 temi one.com gratuiti e unici
  • Hosting stabile e ultra veloce
  • Certificato SSL gratuito
  • Mobile friendly
  • Installazione in 1 clic
  • Assistenza 24 ore su 24, 7 giorni su 7

La storia di WooCommerce

WooCommerce è stato creato nel 2011 dagli sviluppatori Adii Pienaar, Magnus Jepson e Mark Forrester. Il loro obiettivo era creare una soluzione di negozio online per WordPress e così è stato. Gli sviluppatori hanno permesso a chiunque di creare gratuitamente un negozio online utilizzando il più famoso CMS.

WordPress al 100%

Nel 2015, WooCommerce è stato acquisito da Automattic, la società dietro WordPress e oggi è diventato una delle soluzioni di e-commerce più popolari al mondo.

Perché WooCommerce?

Se ti stai chiedendo perché dovresti scegliere WooCommerce, sappi che questo software offre molti vantaggi.

  1. Facile da usare

L’ambiente intuitivo semplifica lo sviluppo e la gestione del tuo negozio online.

  1. Flessibile

La flessibilità di WooCommerce ti consente di creare un negozio online che soddisfi le tue esigenze.

  1. Conveniente

Puoi scaricare e utilizzare WooCommerce gratuitamente. Non devi investire denaro per costruire il tuo negozio online.

  1. Buona integrazione

Tra i molti vantaggi di cui puoi beneficiare con WooCommerce c’è il fatto che funziona con molti temi WordPress (design), plug-in ed estensioni.

  1. Diverse opzioni di pagamento

Hai molte opzioni di pagamento a disposizione, a prescindere che lavori solo in Italia o in tutto il mondo.

  1. Sicuro

Gli sviluppatori di WordPress, WooCommerce e di tanti altri servizi migliorano costantemente il software per renderlo il più sicuro possibile.

  1. Intelligente

Hai accesso a funzioni di reportistica e analisi dettagliate, che ti forniscono informazioni su come sta andando il tuo negozio online. È possibile collegare WooCommerce a Google Analytics.

  1. Posizionamento su Google

Sono stati sviluppati diversi plug-in per WooCommerce che ti consentono di posizionarti in alto su Google, come il plug-in Yoast WooCommerce SEO. Inoltre, molti temi sono già ottimizzati per la SEO.

Gli svantaggi di WooCommerce

Oltre ad offrire diversi vantaggi, usare WooCommerce comporta anche alcuni svantaggi. Eccone sei:

  1. Poco scalabile

WooCommerce è adatto a negozi online di piccole e medie dimensioni. Se stai crescendo velocemente ti potrebbe risultare stretto.

  1. Tecnico

WooCommerce e WordPress richiedono alcune conoscenze tecniche. Senza questa conoscenza, il software può essere difficile da utilizzare. Desideri creare un negozio online senza alcuna competenza tecnologica? Scegli la nostra soluzione per i negozi online.

  1. Dipendente da WordPress

Puoi utilizzare WooCommerce solo tramite WordPress. Quindi dipendi da questo CMS.

  1. Supporto limitato

Hai bisogno di aiuto? Di solito il supporto messo a disposizione dagli sviluppatori o dalla community è limitato. Se cerchi supporto personalizzato, spesso è necessario pagare.

  1. Non completamente gratuito

Mentre puoi scaricare WooCommerce gratuitamente, per iniziare ad usarlo è necessario avere un dominio, un hosting e spesso un tema a pagamento, che costano soldi.

  1. Vulnerabile

WordPress è molto popolare tra gli hacker. Pertanto, ti consigliamo di prendere ulteriori precauzioni di sicurezza per proteggere il tuo negozio online.

Cosa puoi fare con WooCommerce?

WooCommerce è una soluzione di e-commerce molto versatile, che ti permette di fare ottimi affari. Ecco cosa puoi commercializzare:

  • Prodotti digitali
  • Servizi (basati sul tempo)
  • Abbonamenti
  • Adesioni e iscrizioni
  • Appuntamenti e prenotazioni
  • Alloggi
  • Biglietti
  • Corsi
  • Dropshipping

WooCommerce Multistore

Vuoi gestire più siti? Con WooCommerce puoi creare un multistore. È possibile gestire più negozi attraverso la Dashboard di WordPress (l’ambiente in cui si gestisce un negozio). Puoi persino creare siti separati per ciascun negozio e aggiungere rapidamente prodotti o aiutare meglio i clienti. Per creare un multistore, devi installare un plugin come Veeqo.

Chi utilizza WooCommerce?

Un vasto pubblico utilizza WooCommerce. Per esempio:

  • Imprenditori
  • Liberi professionisti
  • Sviluppatori web
  • Medie imprese
  • Imprese internazionali
  • Blogger
  • Singoli individui
  • Negozi fisici
  • Organizzazioni senza scopo di lucro

La comunità WooCommerce

Poiché WooCommerce racchiude un vasto pubblico, ha creato una comunità con milioni di utenti. Questa comunità è composta da sviluppatori, designer, blogger e altri utenti che aiutano WooCommerce ad evolversi. Tutti contribuiscono a trovare bug e criticità per migliorare il software, ma anche ad aiutare i membri della comunità quando si imbattono in un problema. Controlla il forum di supporto o il gruppo Facebook privato, ad esempio. Eventi regolari si tengono in tutto il mondo per conoscere i membri della comunità e scambiare conoscenze.

Quanto costa WooCommerce?

Puoi scaricare e utilizzare il software di WooCommerce gratuitamente. Tuttavia, ci sono costi nascosti per la creazione di un negozio online. Come minimo, devi acquistare un nome di dominio e un hosting per mettere online il tuo negozio. Inoltre, spesso hai bisogno di un tema a pagamento e di plug-in ed estensioni a pagamento per aggiungere funzionalità preziose al tuo negozio. Infine, è necessario considerare anche eventuali costi per le transazioni dovuti a terze parti.

Non c’è un costo fisso

È impossibile stabilire quali siano i costi esatti. I prezzi dipendono dal tipo di dominio di primo livello che hai scelto, dall’hosting, dal tema, dai plug-in e dalle estensioni.

Come funziona WooCommerce?

WooCommerce ti offre potenti funzionalità per gestire tutto ciò che riguarda il tuo negozio online. Certo, puoi vendere prodotti o servizi, ma c’è molto di più. Di seguito, trovi elencate alcune delle sue funzionalità.

1. Gestione del prodotto

Attraverso WooCommerce è possibile aggiungere, modificare ed eliminare prodotti o servizi. Crei un negozio online semplice ed intuitivo tramite categorie, tag e proprietà del prodotto. È anche possibile aggiungere opzioni di cross-sell o up-sell per incentivare le vendite.

2. Gestione delle scorte

Attraverso la dashboard di WooCommerce, puoi facilmente tenere traccia di quanti prodotti hai in magazzino e rifornirli automaticamente o manualmente. Inoltre, puoi specificare se i clienti possono ordinare un prodotto quando è esaurito o ricevere una notifica quando il prodotto è quasi esaurito. Se un prodotto è effettivamente esaurito, puoi nasconderlo temporaneamente.

3. Opzioni di pagamento

Gestisci la tua attività a livello locale o internazionale? I plug-in ti consentono di scegliere tra varie opzioni di pagamento, come PayPal, Stripe o altri metodi specifici di una zona. Inoltre, è possibile determinare se i clienti pagano:

  • con carta di credito;
  • con bonifico bancario;
  • alla consegna;
  • usando buoni regalo;
  • attraverso sistemi di pagamento rateizzato o successivo all’acquisto.

4. Spedizione

Anche la gestione delle spedizioni è una parte essenziale del tuo negozio online. In WooCommerce, i costi di spedizione vengono impostati in base a dimensioni, peso, distanza e tipologia di spedizione. Se hai un negozio fisico, è possibile far ritirare ai clienti i propri ordini, oppure offrire la spedizione gratuita per attirare i clienti. Infine, hai anche la possibilità di creare e stampare le etichette di spedizione per inviare i tuoi prodotti al cliente.

5. Tassazione

Le tasse sono una parte da tenere bene in considerazione, dopotutto, è obbligatorio calcolare le tasse sui prodotti o servizi che vendi. Puoi impostare facilmente questa funzione tramite plug-in come WooCommerce Tax o Avalara. È possibile:

  • impostare tariffe per vari paesi o prodotti;
  • selezionare prodotti esenti da tasse;
  • impostare delle tariffe ridotte.

6. Analisi dei dati

Naturalmente, vorrai sapere come sta andando il tuo negozio online, per valorizzarne i punti di forza o apportare modifiche dove necessario. Attraverso l’analisi dei dati, hai a disposizione informazioni su:

  • ordini;
  • clienti;
  • azioni;
  • tassazione;
  • etichette di spedizione.

Sei spesso in viaggio e vuoi gestire il tuo negozio online a distanza? Puoi farlo con l’ app WooCommerce per i dispositivi mobili (Android o iOS). Gestisci diversi negozi online? Ti basterà semplicemente cambiare account.

Di cosa hai bisogno per un negozio WooCommerce?

Ti sei convinto e vuoi creare un negozio WooCommerce? Tra le prime cose da fare, devi acquistare un dominio e un hosting. Leggi di più di seguito.

1. Dominio

Hai bisogno di un dominio per garantire che i futuri clienti possano raggiungere il tuo negozio online. Puoi confrontare un dominio con l’indirizzo di un negozio fisico solo online.

Un dominio su one.com

Su one.com puoi registrare un dominio. Abbiamo centinaia di domini di primo livello tra cui scegliere, quindi troverai sempre un nome adatto a te. Per esempio, potresti scegliere un dominio .store o .shop.

Trasforma la tua idea in realtà con un dominio

Trasforma la tua idea in realtà con un dominio

Mostra al mondo chi sei. Trova il dominio perfetto per la tua attività o idea.

Trova il tuo dominio
  • Scegli tra centinaia di estensioni di dominio
  • Facile accesso alle impostazioni DNS
  • Sottodomini illimitati
  • Da gestire in piena sicurezza
  • Prezzo conveniente
  • Assistenza 24 ore su 24, 7 giorni su 7

2. Hosting WordPress

Ovviamente vuoi che i clienti vedano i contenuti del tuo negozio. Quindi è necessario acquistare un hosting. L’hosting è uno spazio su un server che contiene tutti i file del tuo negozio.

Hosting WordPress su one.com

Su one.com, sei nel posto giusto anche per l’hosting WordPress. Grazie ai nostri pacchetti di web hosting, puoi installare WordPress in un solo clic. Non vuoi preoccuparti della manutenzione e della sicurezza del tuo negozio online? Scegli Managed WordPress Hosting.

Crea il tuo sito web con WordPress

Crea il tuo sito web con WordPress

Inizia a costruire il tuo sito con il CMS più famoso al mondo.

scegli un piano
  • Oltre 40 temi one.com gratuiti e unici
  • Hosting stabile e ultra veloce
  • Certificato SSL gratuito
  • Mobile friendly
  • Installazione in 1 clic
  • Assistenza 24 ore su 24, 7 giorni su 7

3. Tema WooCommerce

Oltre a un nome di dominio e un hosting, dovresti attirare i futuri clienti con un design fuori dall’ordinario. Puoi farlo con i temi WooCommerce, creati appositamente per i negozi online. È grazie al tema che decidi come sarà il tuo negozio online, dai font, ai colori, alle immagini.

Trovare un tema WooCommerce

Online, puoi trovare diversi temi WooCommerce, per esempio tramite la directory dei temi di WordPress. Oppure puoi usare uno dei temi professionali degli stessi sviluppatori di WooCommerce. Infine, puoi sceglierne uno su ThemeForest, dove ne troverai centinaia, ognuno con le sue caratteristiche.

Esempi di temi WooCommerce popolari:

  1. Divi
  2. Astra
  3. Botiga
  4. Storefront
  5. Flatsome
  6. Shopkeeper
  7. OceanWP
  8. Ultra
  9. SeedProd
  10. Neve

Suggerimento: sai programmare? Immergiti nel codice e personalizza un tema a tuo piacimento.

ARTICOLO CORRELATO: https://www.one.com/it/wordpress/temi-wordpress-cosa-sono

4. Plugin ed estensioni WooCommerce

Con la sola installazione di WooCommerce, puoi creare e gestire un negozio online di base. Tuttavia, spesso hai bisogno di più funzioni. In questo caso a venirti incontro sono i plug-in e le estensioni di WooCommerce. Si tratta di software che aggiungono funzionalità extra al tuo negozio.

Plug-in WooCommerce

I plugin WooCommerce sono plugin che funzionano bene con WooCommerce. Puoi trovarli nella directory dei plugin di WordPress cercando “WooCommerce”. Per esempio:

  1. Checkout Field Manager
  2. PDF Invoices & Packing Slips
  3. Customer reviews
  4. YITH WooCommerce Wishlist
  5. Product Feed PRO 

ARTICOLO CORRELATO: https://www.one.com/it/wordpress/migliori-plugin-wp

Estensioni WooCommerce

Le estensioni WooCommerce sono software sviluppati esplicitamente per WooCommerce. Come i plugin, li usi per aggiungere funzionalità utili al tuo negozio online. Puoi trovarli, ad esempio, nell’Extension Store di WooCommerce o tramite CodeCanyon. Alcune valide estensioni WooCommerce sono:

  1. Mollie Payments
  2. Adyen
  3. Mailchimp
  4. GDPR Cookies
  5. Smart Coupons

Costruisci un negozio WooCommerce

Creare il tuo negozio WooCommerce può essere un compito tecnicamente difficile, senza contare che potresti avere cose più importanti a cui pensare. In questi casi, puoi rivolgerti a uno specialista WooCommerce per farti costruire un negozio online perfetto per le tue esigenze. Cerca su Google “come costruire un negozio online WooCommerce” per trovare lo specialista più adatto.

Conclusione

Dopo aver letto questa guida per principianti, puoi creare il tuo negozio online con WooCommerce, una potente soluzione di e-commerce flessibile e funzionale. Vuoi iniziare con one.com? Ordina oggi stesso un nome di dominio e un hosting WordPress e buona fortuna!

Crea il tuo sito web con WordPress

Crea il tuo sito web con WordPress

Inizia a costruire il tuo sito con il CMS più famoso al mondo.

scegli un piano
  • Oltre 40 temi one.com gratuiti e unici
  • Hosting stabile e ultra veloce
  • Certificato SSL gratuito
  • Mobile friendly
  • Installazione in 1 clic
  • Assistenza 24 ore su 24, 7 giorni su 7
' html += '
' html += '' + ocKeys[locale].allPlans + '' html += '
' return html; } function ocGetLocale() { var localString = document.getElementsByTagName('html')[0].getAttribute("lang"); if (!localString) { return "en"; } if (localString.indexOf('-') === -1) { return localString; } return localString.split("-")[0] } function isInViewport(element) { var rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || osShadowElement.documentElement.clientHeight) && rect.right <= (window.innerWidth || osShadowElement.documentElement.clientWidth) ); } function ocLogBuyClick(e) { if (!e.target.classList.contains("onecom_plans_cta_main")) { return; } var parent = e.target.parentNode.parentNode.parentNode.parentNode.parentNode; window.dataLayer.push({ event: "addToCart", ecommerce: { currencyCode: parent.getAttribute("data-currency"), add: { actionField: { list: document.getElementsByTagName('h1')[0].textContent }, products: [ { id: parent.getAttribute("data-title"), name: parent.getAttribute("data-title"), brand: "one.com", category: "pps", variant: parent.getAttribute("data-plan"), location: document.getElementsByTagName('h1')[0].textContent, price: parent.getAttribute("data-price"), quantity: 1 } ] } } }); } function ocLogTrackingInfo(e) { if ((e.getAttribute("data-marked") !== "1") || (!dataLayer)) { return; } e.removeAttribute("data-marked"); if (!e.getAttribute("data-title") || e.getAttribute("data-fresh") !== "1") { return; } console.info("push initiated") window.dataLayer.push({ id: e.getAttribute("data-title"), name: e.getAttribute("data-title"), brand: "one.com", category: "pps", variant: e.getAttribute("data-plan"), list: "/" + ocGetLocale() + "/", location: document.getElementsByTagName('h1')[0].textContent, price: e.getAttribute("data-price"), position: e.getAttribute("data-position") } ); e.setAttribute("data-fresh", "0"); } function ocSetImpression() { var plans = document.getElementsByClassName('oc-plan-container'); for (var i = 0; i < plans.length; i++) { if (isInViewport(plans[i])) { ocLogTrackingInfo(plans[i]); } } } function ocProductImpression(e) { var plans = document.getElementsByClassName('oc-plan-container'); for (var i = 0; i < plans.length; i++) { if (isInViewport(plans[i])) { plans[i].setAttribute("data-marked", "1"); ocTimeout = setTimeout(ocSetImpression, 2000) } } } /* var headingTag = window.location.hash.substr(1); if(headingTag.length > 0){ console.log(headingTag); osShadowElement.querySelector('#'+headingTag).scrollIntoView(); } */ //frontpage function scrollSmooth() { var elmntToView = osShadowElement.querySelector("#oc-plansandprices"); elmntToView.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" }); } const rightBtn = osShadowElement.querySelector('#right-button'); const leftBtn = osShadowElement.querySelector('#left-button'); if (rightBtn && leftBtn) { rightBtn.addEventListener("click", function (event) { const conent = osShadowElement.querySelector('#content'); conent.scrollLeft += 100; event.preventDefault(); let activeElement = osShadowElement.querySelector(".banner-thumb.active"); if (osShadowElement.querySelector(".banner-menu li:last-child").classList.contains('active')) { osShadowElement.querySelector(".banner-menu li:first-child").click(); } else { if (activeElement.nextElementSibling) { activeElement.nextElementSibling.click(); } } }); leftBtn.addEventListener("click", function (event) { const conent = osShadowElement.querySelector('#content'); conent.scrollLeft -= 100; event.preventDefault(); let activeElement = osShadowElement.querySelector(".banner-thumb.active"); if (osShadowElement.querySelector(".banner-menu li:first-child").classList.contains('active')) { osShadowElement.querySelector(".banner-menu li:last-child").click(); } else { if (activeElement.previousElementSibling) { activeElement.previousElementSibling.click(); } } }); } function nextSlide(thumbClass) { if (thumbClass.length > 0) { var elements = osShadowElement.querySelectorAll(".banner-section"); for (var i = 0, len = elements.length; i < len; i++) { elements[i].style.display = "none"; } var elements = osShadowElement.querySelectorAll(".banner-thumb"); for (var i = 0, len = elements.length; i < len; i++) { elements[i].classList.remove("active"); } var elmntToView = osShadowElement.querySelector('.banner-section-' + thumbClass); elmntToView.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" }); var menuClicked = osShadowElement.querySelector('.banner-thumb-' + thumbClass); menuClicked.classList.add("active"); menuClicked.scrollIntoView(); osShadowElement.querySelector('.banner-section-' + thumbClass).style.display = "block"; } } const accordionTitlesSuccess = osShadowElement.querySelectorAll(".success-steps-col"); accordionTitlesSuccess.forEach((accordionTitle) => { accordionTitle.addEventListener("click", () => { if (accordionTitle.classList.contains("active")) { accordionTitle.classList.remove("active"); } else { const accordionTitlesWithIsOpen = document.querySelectorAll(".success-steps-col"); accordionTitlesWithIsOpen.forEach((accordionTitleWithIsOpen) => { accordionTitleWithIsOpen.classList.remove("active"); }); accordionTitle.classList.add("active"); } }); }); const accordionTitlesFaq = osShadowElement.querySelectorAll(".faq-col"); accordionTitlesFaq.forEach((accordionTitle) => { accordionTitle.addEventListener("click", () => { if (accordionTitle.classList.contains("active")) { accordionTitle.classList.remove("active"); } else { const accordionTitlesWithIsOpen = document.querySelectorAll(".faq-col"); accordionTitlesWithIsOpen.forEach((accordionTitleWithIsOpen) => { accordionTitleWithIsOpen.classList.remove("active"); }); accordionTitle.classList.add("active"); } }); }); (function () { slide('right'); })(); /***script to call APIs starts here**/ function checkStatus(response) { if (response.status >= 200 && response.status < 300) { return Promise.resolve(response); } else { return Promise.reject(new Error(response.statusText)); } } function parseJson(response) { return response.json(); } function niceRounding(stringDigit) { var lastDigit = stringDigit.at(-1); if (lastDigit == 8) { stringDigit = stringDigit.replace(/.$/, "9"); } return stringDigit; } /***script to call APIs ends here**/ /**Glosssary page***/ function scrollSmoothGlossary(alphabet) { var alphaList = osShadowElement.querySelectorAll(".alphabet-list"); for (let i = 0; i < alphaList.length; i++) { alphaList[i].classList.remove("active"); } var activeAlpha = osShadowElement.querySelector(".alpha-" + alphabet); activeAlpha.classList.add("active"); var elmntToView = osShadowElement.querySelector("#div-" + alphabet); //elmntToView.scrollTop = elmntToView.scrollHeight; elmntToView.scrollIntoView({ behavior: "smooth" }); //elmntToView.scrollTop(elmntToView.scrollHeight); } /**searching**/ const $search = osShadowElement.getElementById('search-glossary'); if ($search) { $search.addEventListener('input', (event) => { const searchText = event.target.value; const regex = new RegExp(searchText, 'gi'); const noSearchDiv = osShadowElement.querySelector(".no-glossary-search-found"); const itemList = osShadowElement.querySelectorAll(".oc-glossary-item-articles"); //const articleList = osShadowElement.querySelectorAll(".item-article"); var mainCount = 0; for (let j = 0; j < itemList.length; j++) { var articleList = itemList[j].querySelectorAll(".item-article"); var countDisplayBlock = 0; for (let i = 0; i < articleList.length; i++) { var h3 = articleList[i].getElementsByTagName("a")[0]; var text = h3.innerHTML; text = text.replace(/(|<\/mark>)/gim, ''); const newText = text.replace(regex, '$&'); h3.innerHTML = newText; if (text !== newText) { articleList[i].style.display = "flex"; countDisplayBlock++; } else { articleList[i].style.display = "none"; } } if (countDisplayBlock === 0) { itemList[j].parentNode.parentNode.style.display = "none"; } else { itemList[j].parentNode.parentNode.style.display = "flex"; mainCount++; } } if (mainCount === 0) { noSearchDiv.classList.remove("hidden"); } else { noSearchDiv.classList.add("hidden"); } }); } var select = osShadowElement.getElementById('alphabet-mobile-select'); if (select) { select.onchange = function () { var alphabet = this.options[this.selectedIndex].value; this.options[this.selectedIndex].classList.add('active'); scrollSmoothGlossary(alphabet); //var elmntToView = osShadowElement.querySelector("#" + alphabet); //elmntToView.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"}); }; } var glossaryHeader = osShadowElement.getElementById("glossary-header"); var glossaryStickyHeader = osShadowElement.getElementById( "glossary-header-sticky" ); // Get the offset position of the navbar if (glossaryHeader) { var sticky = glossaryHeader.offsetTop; } var glossarySearch = osShadowElement.querySelector(".oc-glossary-search"); // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position function stickyAlphabets() { if (window.pageYOffset > sticky) { glossaryHeader.classList.add("hidden"); glossaryStickyHeader.classList.remove("hidden"); glossaryStickyHeader.style.zIndex = "99999"; glossarySearch.classList.add("hidden"); } else { glossaryHeader.classList.remove("hidden"); glossaryStickyHeader.classList.add("hidden"); glossarySearch.classList.remove("hidden"); } } /** HIGHLIGHT ALPHABET NAVIGATION LINKS WHILE SCROLLING */ // cache the navigation list-items containing links var navigationLinks = osShadowElement.querySelectorAll('#glossary-header-sticky > .glossary-header-alphabets > ul > li'); // cache the alphabet sections var sections = osShadowElement.querySelectorAll('.oc-glossary-item > div > span.item-head'); // map each target section ID to the corresponding navigation list-items var sectionIdToNavigationLink = {}; for (var i = 0; i < sections.length; i++) { var id = sections[i].id; sectionIdToNavigationLink[id] = osShadowElement.querySelectorAll('#glossary-header-sticky > .glossary-header-alphabets > ul > li.alpha-' + id); } function getOffset(el) { var _x = 0; var _y = 0; while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { _x += el.offsetLeft - el.scrollLeft; _y += el.offsetTop - el.scrollTop; el = el.offsetParent; } return { top: _y, left: _x }; } function highlightNavigation() { // get the current vertical position of the scroll bar var scrollPosition = window.pageYOffset || document.documentElement.scrollTop; // iterate the sections for (var i = sections.length - 1; i >= 0; i--) { var currentSection = sections[i]; // get the position of the section var sectionTop = getOffset(currentSection).top; // if the user has scrolled over the top of the section if (scrollPosition >= sectionTop - 250) { // get the section id var id = currentSection.id; // get the corresponding navigation link var navigationLink = sectionIdToNavigationLink[id]; // if the link is not active if (typeof navigationLink[0] !== 'undefined') { if (!navigationLink[0].classList.contains('active')) { // remove .active class from all the links for (i = 0; i < navigationLinks.length; i++) { navigationLinks[i].className = navigationLinks[i].className.replace(/ active/, ''); } // add .active class to the current link navigationLink[0].className += (' active'); } } else { // remove .active class from all the links for (i = 0; i < navigationLinks.length; i++) { navigationLinks[i].className = navigationLinks[i].className.replace(/ active/, ''); } } // we have found our section, so we return false to exit the each loop return false; } } } if (glossaryHeader) { window.addEventListener('scroll', highlightNavigation); } /** Glossary page ends here**/ /** NL frontpage modification - version 2.0 **/ // Get the HTML element you need. const imageOverlay = osShadowElement.getElementById('testimonial-video-section-block-image-overlay'); const playButton = osShadowElement.getElementById('testimonial-video-section-block-play'); if (playButton) { var vidId = playButton.getAttribute("data"); // Add the event listener for the play button. playButton.addEventListener('click', play) } // The function that is called when the button is clicked. function play(e) { e.preventDefault(); let iframe_tag = osShadowElement.getElementById('ytplayer'); iframe_tag.setAttribute('src', 'https://www.youtube.com/embed/' + vidId + '?autoplay=1&enablejsapi=1&origin=http%3A%2F%2Flocalhost&widgetid=1'); imageOverlay.style.opacity = '0'; playButton.style.opacity = '0'; window.setTimeout(function () { playButton.style.display = 'none'; imageOverlay.style.display = 'none'; }, 800); // timed to match animation-duration } // Glossary page navigationbar issue fix Start let elemWebTopMenu = document.querySelector(".WebTop-Nav"); let elemWebTopSearch = document.querySelector(".MegaMenuAndSearchWrapper"); let elem = document.querySelector("#glossary-header-sticky"); if (elem && ( elemWebTopMenu || elemWebTopSearch ) ) { let rect = elem.getBoundingClientRect(); let elemTop = rect.top; let elemBottom = rect.bottom; let rectWebTop = elemWebTopMenu.getBoundingClientRect(); let elemTopWebTop = rectWebTop.top; let elemBottomWebTop = rectWebTop.bottom; let rectWebTopSearch = elemWebTopSearch.getBoundingClientRect(); let elemTopWebTopSearch = rectWebTopSearch.top; let elemBottomWebTopSearch = rectWebTopSearch.bottom; if ( ( elemBottomWebTopSearch >= elemTop ) || ( elemBottomWebTop >= elemTop ) ) { elem.style.zIndex = 200; } else { elem.style.zIndex = 0; } document.addEventListener('scroll', function() { let rect = elem.getBoundingClientRect(); let elemTop = rect.top; let elemBottom = rect.bottom; let rectWebTop = elemWebTopMenu.getBoundingClientRect(); let elemTopWebTop = rectWebTop.top; let elemBottomWebTop = rectWebTop.bottom; let rectWebTopSearch = elemWebTopSearch.getBoundingClientRect(); let elemTopWebTopSearch = rectWebTopSearch.top; let elemBottomWebTopSearch = rectWebTopSearch.bottom; if ( ( elemBottomWebTopSearch >= elemTop ) || ( elemBottomWebTop >= elemTop ) ) { elem.style.zIndex = 200; } else { elem.style.zIndex = 0; } }); } let glossaryNav = document.querySelector("#glossary-header-sticky"); let topSearchBarGloss = document.querySelector(".MegaMenuAndSearchWrapper"); let navSpacer = document.querySelector(".NavSpacer"); if ( glossaryNav && topSearchBarGloss) { topSearchBarGloss.style.position = 'static'; navSpacer.style.display = 'none'; } // Glossary page navigationbar issue fix End /******* Custom YouTube video embed js start *******/ let yt_thumb_wraps = document.querySelectorAll('.yt-video-wrapper.yt-play-icon'); if (yt_thumb_wraps) { yt_thumb_wraps.forEach(yt_thumb_wrap => { yt_thumb_wrap.addEventListener("click", function(event) { event.preventDefault(); let vid = event.target.dataset.vid; let yt_thumb = event.target; let vtitle = yt_thumb.getAttribute("title"); if(!vid){ yt_thumb = yt_thumb.querySelector('.yt-thumb-image'); vid = yt_thumb.dataset.vid; vtitle = yt_thumb.getAttribute("title"); } if(vid && yt_thumb){ let ytvideo = ''; let yt_thumb_wrap = yt_thumb.closest('.yt-video-wrapper.yt-play-icon'); yt_thumb_wrap.innerHTML = ytvideo; yt_thumb_wrap.classList.remove("yt-play-icon"); } }); }); } /******* Custom YouTube video embed js end *******/