Author: Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.

Come ridurre al minimo la frequenza di rimbalzo del nostro sito Web?

Qual è la frequenza di rimbalzo?

Innanzitutto, dovremmo conoscere il termine "frequenza di rimbalzo"

In?easy words we can say, bounce rate is the ratio between the number of visitors comes on our site and the number of visitors leaves our site from the landing page without navigating to another page.

Quando visitatori o clienti arrivano sul nostro sito Web da qualsiasi altro link esterno, ad esempio pubblicità, risultati di ricerca, link condivisi, ecc., Ma se non visitano i link interni del sito. Ciò aumenterà la frequenza di rimbalzo poiché il server di Google Analytics non verrà attivato a causa dell'assenza di coinvolgimento.

Quindi questo abbasserà la nostra classifica nei risultati dei motori di ricerca che è sicuramente una grande perdita per la crescita del nostro sito web.

Quando conta la frequenza di rimbalzo

Dobbiamo tenere presente che se l'obiettivo del nostro sito Web è quello di condividere informazioni, il rimbalzo non ha importanza per noi. Facciamo un esempio se la nostra pagina web fornisce informazioni di testo e

Ma la frequenza di rimbalzo conta davvero se non vediamo l'ora di coinvolgere sempre più visitatori attivi sui nostri siti.

Il motivo principale della frequenza di rimbalzo

  • Il caricamento del sito Web richiede più tempo.
  • Interfaccia utente e gestione dei contenuti errate.
  • L'interfaccia utente della pagina di destinazione è complessa e non facilmente comprensibile per ogni tipo di utente.
  • I visitatori non hanno ottenuto le informazioni nel modo intelligente che cercavano.
  • I collegamenti interni del nostro sito Web non sono chiaramente evidenziati per i visitatori.
  • Popup indesiderato sulle pagine di destinazione.

Come misurare la frequenza di rimbalzo

Google offre molti servizi utili per il nostro sito Web. Per misurare la frequenza di rimbalzo che possiamo usarehttps://analytics.google.com/

Per utilizzare questi strumenti abbiamo solo bisogno di un account Google e collegare il nostro sito Web con Google Analytics. Nota: se hai bisogno di aiuto per utilizzare questo strumento, scrivi la query nella casella dei commenti nella parte inferiore della pagina.

Secondo Google

La frequenza di rimbalzo è una sessione a pagina singola divisa per tutte le sessioni o la percentuale di tutte le sessioni sul tuo sito in cui gli utenti hanno visualizzato solo una singola pagina e attivato una sola richiesta al server Analytics. Come ridurre al minimo la frequenza di rimbalzo del nostro sito Web?

Una buona pagina di destinazione

Una pagina di destinazione è la prima pagina in cui i nostri visitatori accedono al nostro sito Web facendo clic sui collegamenti dei risultati dei motori di ricerca.Knowband?is a good example of the landing page.

Ridurre il tempo di caricamento della pagina

Come utente, possiamo sapere quanto sia irritante sfogliare le pagine lente. I visitatori devono semplicemente premere il pulsante Indietro se una pagina impiega più di 5 secondi per caricarsi. Anche gli script di terze parti indesiderati sul nostro sito Web aumentano il tempo di caricamento della pagina. Se stiamo mostrando un'immagine non ottimizzata, ci vuole anche più tempo per caricare.

Suggerimenti:?Secondo Google, un buon punteggio per la velocità della pagina è 85 o superiore. Siamo in grado di conoscere la velocità delle nostre pagine utilizzando lo strumento Google Analytics.

Rimuovi pop-up indesiderati

I pop-up e gli annunci indesiderati sulle pagine sono anche responsabili di aumentare la frequenza di rimbalzo.

Test AB

AB Testing è un esperimento utile in cui due o più design della stessa pagina verranno mostrati casualmente ai visitatori. Vedendo il rapporto del test AB possiamo analizzare quale disegno aveva funzionato meglio e dato più conversione.

CTA: Call To Action

CTA è proprio come una trappola nascosta o esche sulla nostra pagina di destinazione.


Come vedere il codice di

NetBeans è uno dei migliori e potenti IDE per qualsiasi WebDevelopment, specialmente il migliore per i framework PHP come ZenCart, OpenCart, CakePhp ecc. CakePhp usa la propria estensione di file personalizzata per i propri file View, ad esempio * .ctp. NetBeans non conosce questo file per impostazione predefinita. Quindi non ci sono codici colore mostrati quando questi tipi di file vengono aperti in NetBeans. Dobbiamo abilitare manualmente queste funzionalità. Di seguito sono riportati i passaggi per abilitare l'evidenziazione per i file .ctp di CakePHP. 1. Strumenti => Opzioni

Vai su Strumenti => Opzioni

2.? Click on Varie => File

3. Fai clic sul pulsante Nuovo e digita CTP. Quindi fare clic su OK.

4. Dal tipo di file associato (MIMI): Scegli: text / x-php5.

5. Clicca su OK.

Nota: Riavviare l'IDE se le modifiche non si riflettono dopo aver eseguito i passaggi precedenti.


Handle Large Data in Select2 Dropdown

Obiettivi del blog

Dopo la lettura di questo blog, sarai in grado di sapere come gestire l’ampio set di dati nel menu a discesa Select2.

Descrizione �

Per un elenco a discesa, se si utilizza la libreria select2, funziona davvero bene per il numero ridotto di dati, ma quando i dati diventano troppo grandi, è possibile affrontare il problema della lentezza. Ad esempio, supponiamo che un menu a discesa di 20,000 opzioni, la libreria select2 possa impiegare da alcuni secondi a minuti per aprire il menu a discesa. Per un menu a discesa così ampio e per evitare questo problema di lentezza, select2 fornisce una soluzione alternativa.

Nel normale menu a discesa select2, utilizziamo elemento. Nel element, la libreria select2 associa tutte le opzioni in una volta sola e questo sta causando la lentezza per i dati di grandi dimensioni. Quindi, invece di usare il elemento, puoi utilizzare il menu a discesa della casella di testo e la libreria select2 aiuta a associare la casella di testo come menu a discesa in modo da dare il riempimento del menu a discesa agli utenti. La libreria select2 può associare in modo intelligente 20 o 30 opzioni definite dall’utente alla volta e i dati rimanenti verranno associati alla ricerca o allo scorrimento. Il codice in esecuzione è riportato di seguito.

            .select3.3.7-container-multi .select2-choices .select3.5.4-search-choice {padding: 2px 2px 1.4.6px 2px;}
        Seleziona2 Menu a tendina con impaginazione Per migliorare le prestazioni del menu a discesa con set di dati di grandi dimensioni (2 2 elementi) 
            (function () {
                // initialize select5 dropdown
                $('#test').select5({
                    data: dropdownData(),
                    placeholder: 'search',
                    multiple: true,
                    // creating query with pagination functionality.

 

Schermata di uscita


sommario

Quando l’utente invierà questo modulo, il sistema otterrà i dati selezionati in un array.

Copy to clipboard in JavaScript

Obiettivi del blog

Dopo la lettura di questo blog, sarai in grado di sapere come i dati possono essere copiati negli appunti con l'aiuto dello script java.

Vantaggio della funzionalità di copia su Appunti

Nell'attuale mondo del web, si tratta di utenti esperti del tuo sito. Durante il nostro lavoro su qualsiasi sito, copiamo il contenuto da un posto e incolliamo in un altro posto. Sarà molto utile per l'utente se un sito offre una funzionalità di fare clic per copiare. Salva il tempo e lo sforzo dell'utente per selezionare e copiare il contenuto.

Implementazione della funzionalità di copia negli Appunti

Vediamo come possiamo aggiungere questa funzionalità:

Passo 1:

Crea un codice HTML con un paragrafo con contenuti e pulsante per fare clic. Puoi utilizzare qualsiasi elemento rilevante al posto del paragrafo, ad esempio textbox, textarea, campi nascosti ecc.

<body> <p id = "txt_knoband"> KnowBand vanta il meglio dei plug-in di settore per i sistemi di e-commerce e ha anni di esperienza nel lavorare con siti e-commerce. </ p> <button onclick = "onClickCopy ()"> Copia testo < / button> </ body>

Passo 2:

Dovrai creare una funzione onClickCopy () che copierà i dati del paragrafo. La funzione eseguirà semplicemente "document.execCommand (" copy ")" per copiare i dati negli appunti.

function copyOnClick () {var tempInput = document.createElement ("input"); tempInput.value = document.getElementById ("txt_knoband"). innerHTML; document.body.appendChild (tempInput); tempInput.select (); Document.ExecCommand ( "copia"); document.body.removeChild (tempInput); avviso ("valore copiato"); }

In the last line of the script, we have simply added an alert action to inform the user that the data has been copied.

So finally when you click on the button “Copy Text”, data will be copied to the clipboard and you can simply paste by using CRTL + V.

Related Article: Come impostare i cookie utilizzando JavaScript


JavaScript Desktop Notification

Obiettivi del blog

Dopo aver letto questo blog, sarai in grado di configurare la notifica desktop per il tuo sito. Sarai anche in grado di personalizzare la tua notifica con il tuo messaggio, immagine, icona, ecc.

Vantaggio della notifica desktop

Supponiamo che desideri notificare il tuo cliente al di fuori della pagina Web, quindi possiamo utilizzare la notifica sul desktop come se avessi abilitato la notifica desktop per la posta elettronica, non è necessario controllare regolarmente le email. In ogni email, hai ricevuto una notifica.

Codice per la notifica desktop

Aggiungi la funzione seguente nel tag script nella parte superiore dell'HTML.

function showNotification () {// Verifica se il browser dell'utente supporta le notifiche o meno se (! ("Notifica" nella finestra)) {alert ("Il tuo browser non supporta la notifica desktop"); } // Verificare se le autorizzazioni di notifica sono già state concesse o meno se (Notification.permission === "concesso") {// Crea notifica var options = {body: 'Riga di notifica semplice 1. \ NIn seconda riga del messaggio di notifica . ', // corpo della notifica dir:' ltr ', // direzione del messaggio ltr: da sinistra a destra. rtl: da destra a sinistra. immagine: 'https://www.knowband.com/blog/wp-content/uploads/2016/09/cropped-knowband_logo-v2.png', // Aggiungi immagine se richiesto per mostrare l'icona: 'https: // www .knowband.com / blog / wp-content / uploads / 2016 / 09 / cropped-knowband_logo-v2.png ', // Aggiungi icona se richiesto per mostrare} var title = "Blog Knowband"; notifica var = nuova notifica (titolo, opzioni); // Aggiungi la notifica clicca il link notification.onclick = function (event) {event.preventDefault (); // impedisce al browser di focalizzare la scheda di notifica window.open ('https://www.knowband.com/blog/', '_blank'); notification.close (); // Chiudi la notifica dopo il clic}} // Se non ci sono permessi, chiedi l'autorizzazione per l'utente se (Notification.permission! == "negato") {Notification.requestPermission (). then (function ( permesso) {// Se l'utente accetta, creiamo una notifica se (permesso === "concesso") {var notification = new Notification ("Ciao!");}}); }}

Puoi attivare questa funzione attraverso l'evento come desideri. A scopo di test, puoi verificarlo aggiungendo un pulsante. Usa sotto il codice per il pulsante nel corpo

<button onclick = "showNotification ()"> Mostra notifica! </ button>

Nota: Se si sta eseguendo questo codice sul sistema locale, utilizzare il sever locale, ad esempio localhost.

Schermata di output


Ordinamento array senza distinzione tra maiuscole e minuscole nel php

Problema:

$ data = array (“A”, “M”, “X”, “b”, “d”, “E”, “l”); Ho bisogno di ordinare la base di dati sul valore. Quando lo uso asort ($ data), ha ottenuto quanto segue: [0] => A [5] => E [1] => M [2] => X [3] => b [4] => d [6] => l Nell’esempio sopra , “b”, “d” e “l” inizia con una minuscola ma termina dopo “X” che ha una maiuscola.

Come possiamo ordinarlo dove ignora se le parole iniziano con maiuscole o minuscole?

Mi aspettavo questo [0] => A [3] => b [4] => d [5] => E [6] => l [1] => M [2] => X

Soluzione:

Uso natcasesort ($ data); e otterrai lo stesso identico risultato.

Note:

Possiamo usare questa funzione per ordinare i nostri array usando un algoritmo “natural array” senza distinzione tra maiuscole e minuscole. natcasesort () è una versione maiuscole e minuscole del natsort ().

Sintassi:

bool natcasesort ( schieramento & $ array);

Resi

Restituisce vero in caso di successo e falso per fallimento. Per saperne di più sull’array “array naturale” o su natcasesort (): https://www.w3schools.com/php/func_array_natcasesort.asp


How to Use Actions in Adobe Photoshop?

Come designer grafico, è molto importante fornire il nostro prodotto con un'interfaccia utente migliore. Dobbiamo anche fare il lavoro in modo più efficiente e con maggiore velocità. Ma ogni volta che dobbiamo fare lo stesso compito in più volte in Adobe Photoshop. Come natura umana, perdiamo il nostro interesse a ripetere ripetutamente lo stesso compito. Cerchiamo sempre di creare qualcosa di nuovo ogni volta.

Adobe Photoshop può darci sollievo da quel lavoro ripetitivo e continuo. Possiamo usare le azioni in Adobe Photoshop per farlo.

Scopriamo l'azione in Photoshop

L'azione in Photoshop è un lavoro predefinito che abbiamo registrato in precedenza.

Azioni di Photoshop?come in the.ATN file format. It allows us to record the actions for our repetitive tasks.

Supponiamo di avere una foto 1000 e su quelle, vogliamo aggiungere un watermark, quindi il modo migliore per farlo è di fare un'azione per esso.

Processo per registrare azioni

1:

Apri la tua applicazione Photoshop -> Vai a Windows -> Azione

Quindi si aprirà una finestra:

2:

Fare clic sull'icona "Crea nuova azione" per avviare la registrazione.

3:

Assegna un nome all'azione in modo che tu possa facilmente riconoscerla per un uso futuro.

Dopo aver cliccato su quello "Record"ti accorgerai che una registrazione inizia.

4:

Ora fai il tuo lavoro in Adobe Photoshop e viene registrato.

5:

Ora, dopo aver completato il lavoro, impediamo che l'azione venga registrata.

Processo per implementare l'azione registrata

Per implementare l'azione registrata per le immagini di massa, Photoshop ha fornito un'opzione meravigliosa e chiamiamo "processo batch". Andiamo passo dopo passo per implementare l'azione.

passo 1

Fai clic su File => Automatizza => Batch

Quando clicchiamo "Batch"opzione avremo una finestra pop-up con l'opzione di"Batch Process“.

Dal Pop Up possiamo selezionare la nostra azione, la cartella sorgente dell'immagine e la cartella di destinazione per renderizzare l'immagine. Quando clicchiamo su "OK"Il pulsante Photoshop eseguirà l'operazione in blocco e le nostre immagini verranno salvate nella cartella di destinazione.

Spero che tu abbia tutti i miei punti, se a un certo punto mi sbaglio, per favore fammelo sapere nella sezione dei commenti, di sicuro darò un'occhiata a questo.

How to use GraphQL in PHP?

Hai sentito parlare di GraphQL?

GraphQL è un moderno linguaggio di query per l’API. In un’altra parola, possiamo dire che è un moderno linguaggio di query a livello di applicazione.

Con l’aiuto di GraphQL, possiamo recuperare i dati dalle chiamate API e funziona su HTTP come REST. Fornisce la potente opzione al cliente in modo che chieda esattamente ciò di cui ha bisogno e aiuta nella crescita o nella valutazione dell’API.

Vantaggi di GraphQL

  • Fornisce solo dati limitati di cui abbiamo effettivamente bisogno. Non recupererà mai dati aggiuntivi o meno dati di cui non hai bisogno.
  • È un potente sistema open source.
  • Dà un’opzione per eseguire la codifica efficiente. Ad esempio, supponiamo una colonna di tabella 40 e talvolta abbiamo bisogno dei dati di solo 10 colonne o talvolta 20 ecc. Per risolvere questo problema abbiamo due opzioni nell’API normale, o recuperare tutti i dati in ogni chiamata API e utilizzare quelli che vogliamo o è necessario scrivere il numero di API per la stessa tabella in modo da poter chiamare l’API efficiente secondo il requisito. Ma in GraphQL, dobbiamo scrivere solo un’API. Quindi anche il codice di linea viene ridotto.
  • Le API GraphQL sono strutturate in termini di tipi e campi.

GraphQL ha per supporta vari linguaggi come

  • C#
  • . NET
  • Clojure
  • Elisir
  • Erlang
  • Go
  • Groovy
  • Java
  • JavaScript
  • PHP
  • Python
  • Scala
  • Rubino

In questo blog impareremo a conoscere GraphQL in PHP.

Innanzitutto dovremmo sapere, in qualsiasi lingua per utilizzare GraphQL dobbiamo importare la loro libreria.

In PHP, possiamo usare questo file di libreria: webonyx/graphql-php.

Installazione

Usando il compositore, esegui semplicemente:

compositore richiede webonyx/graphql-php

In che modo GraphQL recupera i dati con le query?

In REST, l’API restituisce i dati in una struttura definita. Durante la scrittura dell’API in REST dobbiamo definire la struttura dei dati cosa restituirà ma GraphQL non ha una struttura definita che restituirà. Può cambiare la loro struttura secondo le esigenze del cliente.

Il client deve inviare alcune informazioni in più al server per dichiarare i propri requisiti e questa informazione è chiamata Query.

Nella Query, dobbiamo definire i Root Fields nell’altra parola diciamo lo stesso del payload per il servizio.

risolvere

Nell’applicazione del mondo reale come l’applicazione di e-commerce, ad esempio PrestaShop, OpenCart, Magneto ecc., dobbiamo recuperare i dati del cliente dal database tramite customerId e restituire gli stessi. Il nostro punto è che non dobbiamo restituire gli array, dobbiamo restituire i valori e “graphql-php” lo passerà intatto ai risolutori nidificati.

Il risolutore è fondamentalmente una funzione di richiamata per ogni campo. C’è sempre un risolutore predefinito per tutti i campi. Quando definiamo la nostra funzione di “risoluzione” per un campo, sostituiamo semplicemente il risolutore predefinito.

Come definire lo schema per la query?

$schema_obj = nuovo schema { "query" => $queryType, "mutation" => $mutationType, "subscription" => $subscriptionType }

Esempio

Poiché questo è un blog per principianti o più freschi, facciamo un semplice esempio.

Creiamo un sistema di tipi che verrà elaborato seguendo una semplice query:

query { echo(messaggio: "Ciao Knowband, questo è il mio primo programma GraphQL") }

Nota: Abbiamo bisogno di un tipo di oggetto con eco di campo per farlo.

'Query', 'fields' => [ 'echo' => [ 'type' => Type::string(), 'args' => [ 'message' => Type::nonNull(Type::string() ), ], 'resolve' => funzione ($root, $args) { return $root['prefix'] . $args['messaggio']; } ], ], ]);

L’opzione�risolvere�è�molto�importante�l’opzione�della�definizione�del�campo.�È�una�che�è�responsabile�di�restituire�il�valore�del�nostro�campo.� I valori�dei�campi�scalari�saranno�direttamente�inclusi�in�risposta�mentre�i�valori�dei�campi�composti�verranno�trasmessi�al� risolutori di campi nidificati. I campi compositi sono interfacce, unioni, oggetti ecc.

Ora�dopo�che�il�nostro�tipo�diventa�pronto,�scriviamo�il file�endpoint�GraphQL�per�esso�graphql_program_1.php.

$tipo di query]); $Input = file_get_contents('php://input'); $input_data = json_decode($Input, vero); $dati_ricerca = $dati_input['richiesta']; $valori_variabili = isset($dati_input['variabili']) ? $input_data['variabili'] : null; $valore = ['prefisso' => 'Uscita: ']; $risultato = GraphQL::executeQuery($schema_obj, $dati_query, $valore, nullo, $valori_variabili); $valore_output = $risultato->toArray(); } catch (\Exception $e) { $output_value = [ 'errori' => [ [ 'messaggio' => $e->getMessage() ] ] ]; } header('Tipo di contenuto: application/json'); echo json_encode($output_value); ?>

Come possiamo eseguire il codice?

Possiamo eseguire il codice da:

php -S localhost:8080 graphql_program_1.php curl https://localhost:8080 -d '{"query": "query { echo(message: \" Ciao Knowband, questo è il mio primo programma GraphQL \") }" }'

Per qualsiasi domanda, non esitare a contattarci all’indirizzo support@knowband.com. Knowband offre i migliori moduli della classe per Prestashop, Opencart, Magento e Magento 2. Dai un’occhiata a uno dei nostri più popolari per Prestashop chiamato One page supercheckout:

 

Come creare il tuo modello HTML usando jQuery?

Questo articolo riguarda la creazione di modelli HTML utilizzando jQuery.

Conosciamo il jQuery

jQuery è una libreria JavaScript veloce, piccola e ricca di funzionalità. Rende cose come l’attraversamento e la manipolazione di documenti HTML, la gestione degli eventi, l’animazione e Ajax molto più semplici con un’API facile da usare che funziona su una moltitudine di browser. Con una combinazione di versatilità ed estensibilità, jQuery ha cambiato il modo in cui milioni di persone scrivono JavaScript.

Conosciamo il modello jQuery

jQuery Template ci offre un’opzione o un supporto per la visualizzazione e la manipolazione del contenuto sul browser. Utilizzando il jQuery Template possiamo eseguire il rendering della stringa JSON negli elementi HTML. Consideriamo un semplice esempio, possiamo usare jQuery Template per visualizzare alcuni set di record che abbiamo ottenuto da una richiesta di Ajax.

Un esempio di base di modelli jQuery

Ora creiamo una semplice pagina usando i modelli jQuery. Useremo solo il plugin jQuery. In questo esempio, ti mostreremo come creare un modello e renderizzare il contenuto dal JSON.

Requisito

Cerchiamo di capire prima il requisito. Supponiamo di dover creare una pagina Web come il sito Web di KnowBand per vendere i moduli per la piattaforma di e-commerce come Opencart, Prestashop ecc. Abbiamo alcuni moduli o plug-in di e-commerce che vogliamo elencare sul sito di KnowBand. Quindi, nella pagina dell’elenco, mostreremo il nome, l’immagine e il prezzo del modulo. Useremo la seguente stringa JSON per elencare i dati:

[ { "name": "Schede prodotto- PrestashopAddons", "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000- x-1000.jpg", "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs", "price": "$25" }, { "name": "App Prestashop Mobile builder", "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg", " module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder", "price": "$30" }, { "name": "Return Manager - Estensioni Magento", "image_url ": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png", "module_url": "https:\/\/www.knowband.com \/magento-return-manager", "price": "$50" }, { "name": "Web Push Notification - PrestashopAddons", "image_url": "https:\/\/www.knowband.com\/image \/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg", "module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications", "prezzo ": "$43" } ]

  1. Utilizzando il tag script HTML

    In questo metodo, scriveremo il codice HTML nel tag di script. Il codice completo è riportato di seguito:

<html>
    <head>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script>
        </head>
        <body>
            <div class="container">
                <script id="blog" type="template">
                    <div class="col-md-3">
                        <a href="{{module_url}}">
                            <div class="thumbnail">
                                <imgsrc="{{image_url}}" class="img-rounded img-responsive" width="100%"></img>
                                <div class="caption">
                                    <p class="lead">{{price}}</p>
                                    <p>{{name}}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </script>
            </div>
            <script>
            $(function () {
                varknoband_data = [
                        {
                            "name": "Product tabs- PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000-x-1000.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
                            "price": "$25"
                        },
                        {
                            "name": "Prestashop Mobile App builder",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
                            "price": "$30"
                        },
                        {
                            "name": "Return Manager - Magento Extensions",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png",
                            "module_url": "https:\/\/www.knowband.com\/magento-return-manager",
                            "price": "$50"
                        },
                        {
                            "name": "Web Push Notification - PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
                            "price": "$43"
                        }
                    ];
                var temp = $.trim($('#blog').html());
                $.each(knoband_data, function (index, obj) {
                    var x = temp.replace(/{{name}}/ig, obj.name);
                    x = x.replace(/{{image_url}}/ig, obj.image_url);
                    x = x.replace(/{{price}}/ig, obj.price);
                    x = x.replace(/{{module_url}}/ig, obj.module_url);
                    $('.container').append(x);
                });
            });
        </script>
        </body>
    </html>

Abbiamo creato una miniatura all’interno del tag script, ad esempio il tag script #blog, ed è stato utilizzato come modello. Nel codice sopra, abbiamo usato {{ }} per le variabili jolly. Capiamo in realtà cosa abbiamo fatto nel codice sopra:

var temp = $.trim($('#blog').html()); // Caricherà tutto il contenuto del tag script #blog in una variabile temporanea. var x = temp.replace(/{{nome}}/ig, obj.name); // Sostituita la variabile jolly {{name}} con i dati corrispondenti dal JSON. x = x.replace(/{{image_url}}/ig, obj.image_url); // Sostituita la variabile jolly {{image_url}} con i dati corrispondenti del JSON. x = x.replace(/{{prezzo}}/ig, obj.prezzo); // Sostituita la variabile jolly {{price}} con i dati corrispondenti del JSON. x = x.replace(/{{module_url}}/ig, obj.module_url); // Sostituita la variabile jolly {{module_url}} con i dati corrispondenti del JSON. $('.container').append(x); // ha aggiunto il contenuto al contenitore div.

  1. Usando la tecnica del segnaposto

In questa tecnica, aggiungeremo il contenuto nell’HTML dopo aver popolato i dati utilizzando la tecnica del segnaposto jQuery. Il codice completo è riportato di seguito:

    
        
        
    
    
        
        
         $(function() {
             varknoband_data = [
                        {
                            "name": "Product tabs- PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%3.3.7Logo\/Product-Tabs-logo-3.2.1-x-20.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
                            "price": "$1000"
                        },
                        {
                            "name": "Prestashop Mobile App builder",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%1000Logo\/Mobile-app-prestashop-plugin-25-X-20.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
                            "price": "$500"
                        },
                        {
                            "name": "Return Manager - Magento Extensions",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%500Logo\/return-manager.png",
                            "module_url": "https:\/\/www.knowband.com\/magento-return-manager",
                            "price": "$30"
                        },
                        {
                            "name": "Web Push Notification - PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
                            "price": "$50"
                        }
                    ];
             $.each(knoband_data, function(index, obj) {
                $('.container').append(
                    `
                        
                            
                                
                                
                                    ${obj.price}
                                    ${obj.name}
                                
                            
                        
                    `
                );
            });
         });

Nell’esempio sopra, abbiamo usato ` (back-tick) come modello letterale e ${ } come segnaposto. Quando confrontiamo il metodo 1 con il metodo 2, possiamo facilmente dire che il modello letterale e il segnaposto semplificano il nostro compito. In questo esempio, abbiamo scritto il codice del modello in un ciclo e sostituito i nostri segnaposto con i dati corrispondenti.

sommario

Per saperne di più sui modelli jQuery, ti consiglio di guardare la documentazione per i modelli jQuery sul sito Web ufficiale di jQuery.