Tag: creare template HTML eCommerce usando JQuery

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.