Open2b versione 7.2

Aggiornamenti

Aggiornare un template con le collezioni aggiuntive

La versione 7.2 introdotta a Marzo 2022, consente, per l'edizione Advanced B2B, di mostrare sul sito le collezioni aggiuntive di un cliente con i relativi prodotti.

Le collezioni aggiuntive sono delle collezioni di prodotti a cui un cliente può accedere. I prodotti possono essere gli stessi di quelli mostrati nel catalogo principale o diversi. La variable collections rappresenta tutte le collezioni aggiuntive del cliente e può essere usata in tutte le pagine.

Il file di template "collection.html" visualizza invece la pagina di una collezione aggiuntiva assieme ai prodotti che ne fanno parte.

Aggiornare un template per Stripe

La versione 7.2 introdotta a Marzo 2022, consente i pagamenti tramite Stripe durante il checkout. Il cliente paga tramite carta di credito direttamente sul negozio e l'ordine viene creato solo a pagamento avvenuto. Per supportare Stripe, bisogna modificare la procedura di checkout sul sito, il che comporta delle modifiche da fare al template.

Se si usa Stripe, gli step del checkout passano da 4 a 3. È stato rimossa la pagina "checkout-review.html" dove il cliente poteva vedere il riepilogo dell'ordine e confermarlo. Adesso la conferma dell'ordine viene effettuata direttamente nella pagina "checkout-methods.html" dove il cliente sceglie i metodi di spedizione e pagamento, e il riepilogo dell'ordine viene mostrato in tutte le pagine del checkout precedenti a quella di conferma.

I nuovi template che potete installare dallo Store dei template sono già adattati con queste modifiche. Invece i precedenti template vanno adeguati, di seguito vi spieghiamo come fare.

Modificare il template

Le modifiche possono essere fatte tramite il Template Editor del gestionale oppure con un qualunque altro editor e un programma di FTP per mettere i file sul sito.

La seguente guida richiede un'ottima conoscenza di HTML e CSS.
  1. Aggiungere i campi della carta di credito

    Innanzitutto, per abilitare i pagamenti tramite Stripe, è necessario aggiungere al template il form in cui l'utente potrà inserire i dati della carta di credito.

    Aprire quindi il file "checkout-methods.html", il quale visualizza la lista dei metodi di pagamento disponibili, e modificare il suo codice HTML.

    Selezionare tutte le linee che si trovano dopo il tag di chiusura dell'elemento "<div class="steps">" (ad eccezione della linea finale "{% end macro %}", se presente) e al loro posto incollare il seguente codice HTML:

    
            {% if title %}<h1>{{ title }}</h1>{% end %}
    
            <div class="main-column">
    
              <div class="image">{{ image }}</div>
              <div class="content">{{ content }}</div>
    
              <form action="checkout-methods" method="post">
    
              {{ statusMessage }}
    
              <fieldset class="form methods payments">
                <legend>{{ translate("Checkout payment") }}</legend>
                {% for i, payment := range payments %}
                <div>
                  {{ payment.Choice }}
                  <label for="design-payments-choice-{{i}}">
                    <div class="name">{{ payment.Name }}</div>
                    {% if payment.Description %}
                    <div class="description">{{ payment.Description }}</div>
                    {% end if %}
                  </label>
                  {% if payment.Pay %}
                  <div class="pay">
                    {% if card, ok := payment.Pay.(CreditCard); ok %}
                    {% card.SetCssFont("https:[your-template-URL]") %}
                    <div class="number ">{{ card.Number }}</div>
                    <div class="expire-cvc-row">
                      <div class="expiry">{{ card.Expiry }}</div>
                      <div class="cvc">{{ card.CVC }}</div>
                    </div>
                    <div class="name">{{ card.Name }}</div>
                    <div class="errors">{{ card.Errors }}</div>
                    {% end %}
                  </div>
                  {% end if %}
                </div>
                {% end for %}
              </fieldset>
    
              <fieldset class="form methods shippings">
                <legend>{{ translate("Checkout shipping") }}</legend>
                {% for i, shipping := range shippings %}
                <div>
                  {{ shipping.Choice }}
                  <label for="design-shippings-choice-{{i}}">
                    <div class="name">{{ shipping.Name }}</div>
                  </label>
                </div>
                {% end for %}
              </fieldset>
    
              <fieldset class="form requests">
                <legend>{{ translate("Order requests") }}</legend>
                {{ requests }}
              </fieldset>
    
              <div class="buttons">
                <div class="go-back-button">{{ buttonGoBack }}</div>
                <div class="continue-button main-button">{{ buttonOrder }}</div>
              </div>
    
              </form>
    
            </div>
          

    Nel precedente codice, si noti la seguente linea:

    
          {% card.SetCssFont("https:[your-template-URL]") %}
          

    Questa linea si occupa di settare il font di Stripe, ovvero la tipografia visualizzata all'interno dei campi della carta di credito.

    Ogni template realizzato per Open2b utilizza uno stile di tipografia (e quindi un font) diverso. Stripe, d'altra parte, setta di default un suo stile tipografico diverso da quello dei template. Per fare in modo che tutta la tipografia sia uniforme ed evitare quindi che le varie parti dell'interfaccia collidano fra di loro, deve essere inserita la URL corrispondente al vostro font nella precedente chiamata al metodo SetCssFont.

    Aprire innanzitutto il file "standard.html" nella directory "layouts": all'interno dell'elemento "<head></head>" sarà presente una linea di codice HTML simile a questa:

    
          <link href="//fonts.googleapis.com/css?family=Raleway|Roboto:300" rel="stylesheet">
          

    L'attributo "href" di questo elemento "link", contiene la URL del font utilizzato nel vostro template. Copiare ed incollare la URL nella chiamata al metodo card.SetCssFont sostituendo il testo segnaposto "[your-template-URL]", in questo modo:

    
          {% card.SetCssFont("https://fonts.googleapis.com/css?family=Raleway|Roboto:300") %}
          

  2. Creare il nuovo riepilogo dell'ordine

    Oltre ad aggiungere il supporto per Stripe, il precedente codice sostituisce il pulsante che nelle precedenti versioni portava alla pagina di riepilogo dell'ordine con un pulsante che ha invece lo scopo di confermare l'ordine direttamente.

    Questa sostituzione, di fatto, toglie all'utente la possibilità di rivedere gli articoli e i costi prima di effettuare il pagamento. Nei prossimi step, vi guideremo nella realizzazione di una nuova sezione dell'interfaccia che avrà lo scopo di visualizzare il riepilogo dell'ordine in tutte le pagine del checkout precedenti a quella di conferma.

    Creare nella directory principale del vostro template un file chiamato "checkout-cart.html" contenente il seguente HTML:

    
            <div class="items">
              <table>
                <thead>
                <tr>
                  <th class="product">{{ translate("Cart products") }}</th>
                  <th colspan="2" class="price-quantity">{{ translate("Cart quantity and price") }}</th>
                  <th class="total-price">{{ translate("Cart total price") }}</th>
                </tr>
                </thead>
                <tbody>
                {% for item in cart.Items %}
                <tr>
                  <td class="image">{{ item.Image }}</td>
                  <td class="details">
                    <div class="name">{{ item.Name }}</div>
                    {{ item.Warning }}
                    {% if item.InfoForRequests %}
                    <div class="requests">
                      <label>{{ item.InfoForRequests }}</label>
                      <div>{{ item.Requests }}</div>
                    </div>
                    {% end if %}
                  </td>
                  <td class="quantity-price">
                    <div>{{ item.Quantity }} × {{ item.Price }}</div>
                  </td>
                  <td class="total-price">
                    {% if item.ToQuote %}
                    <div class="to-quote">{{ translate("Price to quote") }}</div>
                    {% else %}
                    <div>{{ item.TotalPrice }}</div>
                    {% end if %}
                  </td>
                </tr>
                {% end for %}
                </tbody>
                <tfoot>
                {% if not cart.ToQuote %}
                {% for discount in cart.Discounts %}
                <tr class="discount">
                  <td colspan="3"><label>{{ translate("Cart discount") }}:</label></td>
                  <td><span>{{ discount }}</span></td>
                </tr>
                {% end for %}
                <tr class="subtotal">
                  <td colspan="3"><label>{{ translate("Cart subtotal") }}:</label></td>
                  <td>{{ cart.Subtotal }}</td>
                </tr>
                <tr class="shipping">
                  <td colspan="3">
                    <label>{{ translate("Cart shipping") }}:</label>
                    {{ cart.Shipping }}
                  </td>
                  <td>{{ cart.ShippingCost }}</td>
                </tr>
                <tr class="payment">
                  <td colspan="3">
                    <label>{{ translate("Cart payment") }}:</label>
                    {{ cart.Payment }}
                  </td>
                  <td>{{ cart.PaymentCost }}</td>
                </tr>
                {% end if %}
                <tr class="total">
                  <td colspan="3"><label>{{ translate("Cart total") }}:</label></td>
                  <td>
                    {% if cart.ToQuote %}
                    <span class="to-quote">{{ translate("Price to quote") }}</span>
                    {% else %}
                    {{ cart.Total.Gross }}
                    {% end if %}
                  </td>
                </tr>
                </tfoot>
              </table>
            </div>
            

    Questo nuovo file, contiene tutte le informazioni relative agli articoli e ai costi dell'ordine in corso.

  3. Creare il partial contenente il riepilogo dell'ordine

    Per fare in modo che il riepilogo dell'ordine venga aggiornato in seguito ad un cambiamento nel metodo di spedizione o di pagamento, dobbiamo prima inserirlo all'interno di un elemento HTML che abbia come ID: "design-checkout-cart". Questo ID, darà modo al sistema di identificare la sezione ed aggiornarla in seguito alle scelte dell'utente.

    A questo scopo, entrare nella directory "partials" e creare un nuovo file chiamato "checkout-cart-partial.html", copiandoci dentro il seguente HTML.

    
              <div class="mobile-checkout-cart-button" data-design-open="checkout-cart-slider">{{ translate("Show cart") }} </div>
      
              <div id="checkout-cart-slider">
                  <div class="mobile-checkout-cart-close" data-design-close> </div>
                  <div id="design-checkout-cart">
                    {{ render "/checkout-cart.html" }}
                  </div>
              </div>
            

    Si noti che l'elemento <div id="design-checkout-cart"> è racchiuso in un ulteriore elemento <div id="checkout-cart-slider">. Questo ulteriore elemento (abilitato solo su smartphone e tablet) potrà essere aperto a tutto schermo ed in seguito richiuso dall'utente semplicemente toccando sui relativi tasti (gli elementi con classe "mobile-checkout-cart-button" e "mobile-checkout-cart-close"), rendendo le informazioni facili da leggere anche su dispositivi di piccole dimensioni.

    Approfondimenti
    • L'istruzione {{ render }} del nostro template engine Scriggo "inietta" il contenuto di un file HTML all'interno di un altro file HTML che l'ha invocata.
    • Un "partial" è un file contenente codice HTML che verrà in seguito riutilizzato in più parti del template. Creare un partial è un modo per mantenere il codice in un solo file, potendolo però riutilizzare in più punti, evitando quindi di duplicarlo e rendendo anche più semplici e veloci eventuali modifiche future.
  4. Mostrare il riepilogo dell'ordine nelle pagine del checkout

    Possiamo finalmente aggiungere il nuovo riepilogo dell'ordine nelle pagine del checkout. Per farlo, basterà aggiungere in fondo alle pagine "checkout-addresses.html", "checkout-methods.html" e "checkout-quote-request.html", la seguente linea:

    
            {{ render "partials/checkout-cart-partial.html" }}
            

    In aggiunta, si noti che nella pagina "checkout-quote-request.html" era già presente un breve riepilogo dell'ordine, il quale veniva visualizzato in fondo alla pagina. Per evitare quindi di duplicare le informazioni, rimuovere dal file la seguente linea:

    
            {{ render "partials/checkout-quote-items.html" }}
            
  5. Rimuovere i riferimenti a checkout-review

    Avendo ridotto con successo i passaggi del checkout da 4 a 3, possiamo procedere con la rimozione dei riferimenti al passaggio "checkout review", attualmente non più utilizzato.

    Nelle pagine "checkout-addresses.html" e "checkout-methods.html", rimuovere la seguente linea, che si troverà all'interno dell'elemento HTML <div class="steps"> e che visualizzava "checkout review" come terzo step all'interno dell'interfaccia utente.

    
            <li>{{ translate("Checkout review") }}</li>
            

    Allo stesso modo, nella pagina "checkout-confirmation.html" e sempre all'interno dell'elemento HTML "<div class="steps">", rimuovere la seguente linea:

    
            <li class="done"><div>{{ translate("Checkout review") }}</div></li>  
            
  6. Aggiungere le traduzioni

    Nel corso di questa procedura di aggiornamento del template sono stati aggiunti due elementi che necessitano di traduzioni per poter essere visualizzati nella lingua corretta. Le seguenti istruzioni guidano nell'aggiunta delle traduzioni per inglese, spagnolo, francese ed italiano, ma gli stessi passaggi possono essere utilizzati per la traduzione in qualsiasi lingua abilitata nel vostro sito web.

    Il primo elemento che necessita di una traduzione è il pulsante di apertura riepilogo dell'ordine, visualizzato su smartphone e tablet. Per aggiungere le traduzioni aprire la directory "languages". Saranno presenti diverse cartelle, ognuna delle quali avrà come nome il codice di una lingua utilizzata dal vostro sito web ("en" per inglese, "es" per spagnolo, "fr" per francese e "it" per italiano). In ogni cartella, aprire il file "template.ini" ed aggiungere la relativa traduzione del pulsante, posizionandola in ordine alfabetico rispetto alle altre traduzioni già presenti.

    Inglese

    Show cart=Show cart
    Spagnolo
    Show cart=Mostrar carro
    Francese
    Show cart=Afficher le panier
    Italiano
    Show cart=Mostra carrello

    Il secondo elemento che necessita di traduzione è il testo segnaposto che viene visualizzato all'interno del campo "intestatario" della carta di credito. Come fatto in precedenza, aprire la cartella corrispondente alla lingua che volete tradurre, ma questa volta aprire il file "system.ini". Procedere ad aggiungere la traduzione, posizionandola questa volta in fondo al file.

    Inglese

    CreditCardName=Card holder
    Spagnolo
    CreditCardName=Titular de la tarjeta
    Francese
    CreditCardName=Titulaire de la carte
    Italiano
    CreditCardName=Intestatario carta

  7. Aggiungere il CSS

    Per concludere la procedura di aggiornamento dovranno essere aggiunte nuove regole CSS, ovvero quelle regole che indicano al browser il layout e lo stile da utilizzare per visualizzare gli elementi dell'interfaccia.

    Nel nostro caso, gli obiettivi principali del nuovo CSS, saranno: indicare il layout della carta di credito ed indicare il posizionamento del nuovo riepilogo dell'ordine, sia su monitor, sia su dispositivi mobile.

    Visto che le istruzioni variano leggermente in base al template, cliccare sul pulsante corrispondente al vostro template per visualizzare il giusto CSS e la giusta posizione in cui inserirlo.

    Axis
    Silva
    Supply
    Respy-Wide
    Respy-Classic
    Axis

    Aprire il file "base.css" nella directory "css" e trovare il commento /* checkout-(…).html */.

    Fra questo commento ed il successivo sarà presente tutto il CSS relativo alle pagine del checkout: selezionare e cancellare questo CSS, incollando al suo posto le seguenti regole.

    
              .checkout header > .cart, .checkout header > .banners { display: none; }
              .checkout .steps { float: left; grid-area: steps; margin-bottom: 50px; margin-top: 50px; width: 100%; }
              .checkout .steps ol { align-items: center; column-gap: 40px; counter-reset: li; cursor: default; display: flex; justify-content: center; list-style: none; margin-left: 2px; padding: 0; }
              .checkout .steps li { color: #A0A0A0; font-size: 15px; height: 26px; line-height: 26px; margin: 12px 0 0 35px; position: relative; text-transform: uppercase; }
              .checkout .steps li a { color: #A0A0A0; }
              .checkout .steps li:before { background: #A0A0A0; border-radius: 20px; color: #FFF; content: counter(li); counter-increment: li; left: -33px; position: absolute; text-align: center; top: 0; width: 26px; }
              .checkout .steps li.current { color: #222; }
              .checkout .steps li.current:before { background: #222; }
              .checkout .main { column-gap: 100px; display: grid; grid-template-areas: "steps steps" "title title" "form cart"; grid-template-columns: 1fr 1fr; padding: 0px 20px; }
              html.checkout-review-html .checkout .main { display: inherit!important; }
              html.checkout-confirmation-html .checkout .main { display: block; }
              .checkout .main h1 { grid-area: title; text-align: center }
              .checkout .main form { margin-top: 20px; }
              .checkout .main-column { clear: none; grid-area: form; margin-left: 0; width: 100%; }
              fieldset.form#billing-address input { max-width: 300px; }
              fieldset.form.methods > div { align-items: center; background: #FFF; border: 1px solid #EEE; border-bottom: none; color: #333; display: grid!important; grid-template-areas: "input label" "pay pay"; grid-template-columns: max-content 1fr; padding: 10px; width: 100%; }
              fieldset.form.methods > div:first-of-type { border-top-left-radius: 5px; border-top-right-radius: 5px; }
              fieldset.form.methods > div:last-of-type { border-bottom: 1px solid #EEE; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
              fieldset.form.methods label { background: transparent; border: none!important; border-bottom: none!important; cursor: pointer; display: block; padding: 0px!important; white-space: unset!important; }
              fieldset.form.methods input[type=radio] { margin: 0 20px 0 10px }
              fieldset.form.methods .name { color: #333; font-size: 16px; margin-left: 0; padding-right: 15px; }
              fieldset.form.methods .description { color: #666; margin-left: 0; padding-right: 15px; }
              fieldset.form.methods .pay { display: none; grid-area: pay; margin-top: 10px; padding-top: 5px; text-align: center; }
              fieldset.form.methods input[type=radio]:checked ~ .pay { display: block; padding-left: 10px; padding-right: 10px; }
              fieldset.form.methods .pay > div { margin-top: 10px; }
              fieldset.form.methods .pay .expire-cvc-row { column-gap: 10px; display: flex; }
              fieldset.form.methods .pay .expire-cvc-row > div { width: 50%; }
              fieldset.form.methods .pay .cvc,
              fieldset.form.methods .pay .expiry,
              fieldset.form.methods .pay .number,
              fieldset.form.methods .pay .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
              fieldset.form.methods .pay .cvc > div,
              fieldset.form.methods .pay .expiry > div,
              fieldset.form.methods .pay .number > div,
              fieldset.form.methods .pay .name input { padding: 10px 15px; }
              fieldset.form.methods .pay .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
              fieldset.form.methods .pay .name input::placeholder { color: #333; text-transform: uppercase; }
              fieldset.form.methods .pay .pay-button.main-button { clear: both; margin-top: 15px; padding-right: 0; }
              fieldset.form.methods .pay .logos { background-color: #FFF; background: url('../images/cards.png') 20px center no-repeat #FFF; background-size: auto 25px; border-bottom: 1px solid #EEE; height: 50px; margin: 0 -20px 20px -20px; }
              fieldset.form.methods .pay .logos span { color: #b3b3b3; padding: 20px 0 0 125px; vertical-align: middle; }
              fieldset.form.methods .pay .errors { color: #c00; font-weight: 600; text-align: center; }
              #design-order-button.design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
              .checkout textarea[name="requests"] { height: 100px; width: 100%; }
              .checkout .ship-to-another-address { display: block; margin: 20px 0; }
              .checkout .accept-terms { display: block; line-height: 2em; margin: 15px 0; }
              .checkout .buttons { display: table; margin-top: 50px; margin-bottom: 20px; width: 100%; }
              .checkout .buttons > div { display: table-cell; }
              .checkout .go-back-button input { min-width: 180px; }
              .checkout .continue-button, .checkout .order-button { text-align: right; }
              .checkout .send-quote-request-button { text-align: right; }
              .checkout .continue-button input, .checkout .order-button input, .checkout .send-quote-request-button input { min-width: 200px; }
              .checkout .pay-button { text-align: center; }
              .checkout .pay-button input { min-width: 180px; }
              @media screen and (min-width:1024px) {
                .checkout .pay-button { padding-right: 190px; }
              }
              .order h2 { margin-bottom: 10px; }
              .order .addresses { display: table; width: 100%; }
              .order .addresses .billing-address { display: table-cell; padding-right: 10px; width: 50%; }
              .order .addresses .billing-address .contact-address { margin-top: 10px; }
              .order .addresses .shipping-address { display: table-cell; padding-right: 10px; width: 50%; }
              .checkout #checkout-cart-slider { grid-area: cart; }
              .checkout #checkout-cart-slider table { padding: 10px; } 
              .checkout #checkout-cart-slider th.product { padding-left: 10px!important; }
              .checkout #checkout-cart-slider td.image img { height: auto; max-width: 90px; }
              @media screen and (min-width: 1024px) {  
                .checkout .mobile-checkout-cart-button,
                .checkout .mobile-checkout-cart-close { display: none; }
              }
              .checkout .items { clear: both; padding-top: 0; }
              .checkout .items table { border-collapse: separate; width: 100%; }
              .checkout .items th { border-bottom: 1px solid #E5E5E5; padding: 0 10px 10px 10px; font-size: 13px; font-weight: normal; text-align: right; text-transform: uppercase; }
              .checkout .items th.product { font-size: 15px; padding-left: 0; text-align: left; }
              .checkout .items tbody tr { background: #FFF; }
              .checkout .items td { padding: 10px; }
              .checkout .items td:first-child { border-left: 1px solid #EEE; }
              .checkout .items td:last-child { border-right: 1px solid #EEE; }
              .checkout .items td.details { width: 100%; }
              .checkout .items td.quantity-price { text-align: center; white-space: nowrap; }
              .checkout .items td.total-price { text-align: right; white-space: nowrap; }
              .checkout .items td.total-price .to-quote { color: #999; }
              .checkout .items tbody tr { border-top: 1px solid #EEE; }
              .checkout .items tbody tr:last-child td { border-bottom: 1px solid #E5E5E5; }
              .checkout .items tfoot tr { background: #F9F9F9; }
              .checkout .items tfoot td { text-align: right; }
              .checkout .items .subtotal label { font-size: 15px; }
              .checkout .items .subtotal span { font-size: 15px; }
              .checkout .items .total { background: none; }
              .checkout .items .total td { border: none; border-top: 1px solid #E5E5E5; }
              .checkout .items .total label { font-size: 22px; }
              .checkout .items .total span { font-size: 22px; }
              .checkout .confirmation { margin: 20px 0; }
              .checkout .confirmation p { margin-bottom: 10px; margin-top: 10px; }
              .checkout .confirmation p em { font-style: normal; }
              

    Adesso aprire il file "mobile.css", sempre nella directory "css". A differenza del file "base.css", questo file contiene due sezioni con CSS relativo al checkout, le quali specificano regole per dispositivi di grandezza diversa.

    Cercare quindi il primo commento /* checkout-(…).html */. Selezionare tutto il CSS presente fra questo commento ed il successivo ed al suo posto inserire le seguenti regole CSS:

    
              .checkout .main { display: grid; grid-template-areas: "steps" "title" "cart" "form"; grid-template-columns: 1fr; }
              .checkout .main form { margin-right: 10px; }
              .checkout .order,
              .checkout .confirmation { margin-left: 10px; margin-right: 10px; }
              .checkout #checkout-cart-slider { background-color: #F9F9F9; height: 100%; overflow-y: scroll; padding-top: 10px; position: fixed; right: -100%; top: 0; transition: right .5s ease-out; width: 100%; z-index: 99999; }
              .checkout #checkout-cart-slider.design-isopen { right: 0; }
              .checkout .mobile-checkout-cart-close { border-radius: 6px; height: 40px; margin-left: auto; position: relative; right: 15px; width: 40px; }
              .checkout .mobile-checkout-cart-close:before, .checkout .mobile-checkout-cart-close:after { background-color: #000; content:''; height: 2px; position: absolute; top: 20px; width: 20px; }
              .checkout .mobile-checkout-cart-close:before { left: 10px; transform: rotate(45deg); }
              .checkout .mobile-checkout-cart-close:after { right: 10px; transform: rotate(-45deg); }
              .checkout .items { padding-top: 10px; }
              .checkout .mobile-checkout-cart-button { background: #f5f5f5; border: 1px solid #e3e3e3; box-shadow: 0 1px 0 1px #cacaca; color: #6f6f6f; font-size: 16px; margin-bottom: 50px; margin: auto; outline: none; padding: 8px 30px; position: relative; width: max-content; }
              fieldset.form.methods > div { grid-template-columns: max-content 1fr; }
              .checkout form fieldset input { max-width: 432px; }
              

    Adesso cercare il secondo commento /* checkout-(…).html */. Selezionare e cancellare le prime 4 righe di CSS presenti dopo il commento. Al loro posto incollare il seguente CSS:

    
              .checkout .steps { float: none; margin-top: 5px; margin-bottom: 20px; overflow: hidden; width: auto; }
              .checkout .steps ol { display: table; width: 100%; padding-left: 33px; }
              .checkout .steps li { display: table-cell; font-size: 11px; width: 33.33%; }
              .checkout .steps li:last-child { display: none; }
              .checkout .steps > ol { flex-flow: row wrap; justify-content: left; }
              
    Silva

    Aprire il file "base.css" nella directory "css" e trovare il commento /* checkout-(…).html */.

    Fra questo commento ed il successivo sarà presente tutto il CSS relativo alle pagine del checkout: selezionare e cancellare questo CSS, incollando al suo posto le seguenti regole.

    
              @media screen and (min-width:1024px) {
                .checkout nav { display: none; }
              }
              .checkout header > .cart, .checkout header > .banners { display: none; }
              .checkout .steps { float: left; grid-area: steps; margin-bottom: 50px; margin-top: 50px; width: 100%; }
              .checkout .steps ol { align-items: center; column-gap: 40px; counter-reset: li; cursor: default; display: flex; justify-content: center; list-style: none; margin-left: 2px; padding: 0; }
              .checkout .steps li { color: #A0A0A0; font-size: 15px; height: 26px; line-height: 26px; margin: 12px 0 0 35px; position: relative; text-transform: uppercase; }
              .checkout .steps li a { color: #A0A0A0; }
              .checkout .steps li:before { background: #A0A0A0; border-radius: 20px; color: #FFF; content: counter(li); counter-increment: li; left: -33px; position: absolute; text-align: center; top: 0; width: 26px; }
              .checkout .steps li.current { color: #222; }
              .checkout .steps li.current:before { background: #222; }
              .checkout .main { column-gap: 100px; display: grid; grid-template-areas: "steps steps" "title title" "form cart"; grid-template-columns: 1fr 1fr; padding: 0px 20px; }
              html.checkout-review-html .checkout .main { display: inherit!important; }
              html.checkout-confirmation-html .checkout .main { display: block; }
              .checkout .main h1 { grid-area: title; text-align: center }
              .checkout .main form { margin-top: 20px; }
              .checkout .main-column { clear: none; grid-area: form; margin-left: 0; width: 100%; }
              fieldset.form#billing-address input { max-width: 300px; }
              fieldset.form.methods > div { align-items: center; background: #FFF; border: 1px solid #EEE; border-bottom: none; color: #333; display: grid!important; grid-template-areas: "input label" "pay pay"; grid-template-columns: max-content 1fr; padding: 10px; width: 100%; }
              fieldset.form.methods > div:first-of-type { border-top-left-radius: 5px; border-top-right-radius: 5px; }
              fieldset.form.methods > div:last-of-type { border-bottom: 1px solid #EEE; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
              fieldset.form.methods label { background: transparent; border: none!important; border-bottom: none!important; cursor: pointer; display: block; padding: 0px!important; white-space: unset!important; }
              fieldset.form.methods input[type=radio] { margin: 0 20px 0 10px }
              fieldset.form.methods .name { color: #333; font-size: 16px; margin-left: 0; padding-right: 15px; }
              fieldset.form.methods .description { color: #666; margin-left: 0; padding-right: 15px; }
              fieldset.form.methods .pay { display: none; grid-area: pay; margin-top: 10px; padding-top: 5px; text-align: center; }
              fieldset.form.methods input[type=radio]:checked ~ .pay { display: block; padding-left: 10px; padding-right: 10px; }
              fieldset.form.methods .pay > div { margin-top: 10px; }
              fieldset.form.methods .pay .expire-cvc-row { column-gap: 10px; display: flex; }
              fieldset.form.methods .pay .expire-cvc-row > div { width: 50%; }
              fieldset.form.methods .pay .cvc,
              fieldset.form.methods .pay .expiry,
              fieldset.form.methods .pay .number,
              fieldset.form.methods .pay .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
              fieldset.form.methods .pay .cvc > div,
              fieldset.form.methods .pay .expiry > div,
              fieldset.form.methods .pay .number > div,
              fieldset.form.methods .pay .name input { padding: 10px 15px; }
              fieldset.form.methods .pay .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
              fieldset.form.methods .pay .name input::placeholder { color: #333; text-transform: uppercase; }
              fieldset.form.methods .pay .pay-button.main-button { clear: both; margin-top: 15px; padding-right: 0; }
              fieldset.form.methods .pay .logos { background-color: #FFF; background: url('../images/cards.png') 20px center no-repeat #FFF; background-size: auto 25px; border-bottom: 1px solid #EEE; height: 50px; margin: 0 -20px 20px -20px; }
              fieldset.form.methods .pay .logos span { color: #b3b3b3; padding: 20px 0 0 125px; vertical-align: middle; }
              fieldset.form.methods .pay .errors { color: #c00; font-weight: 600; text-align: center; }
              #design-order-button.design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
              .checkout textarea[name="requests"] { height: 100px; width: 100%; }
              .checkout .ship-to-another-address { display: block; margin: 20px 0; }
              .checkout .accept-terms { display: block; line-height: 2em; margin: 15px 0; }
              .checkout .buttons { display: table; margin-top: 50px; margin-bottom: 20px; width: 100%; }
              .checkout .buttons > div { display: table-cell; }
              .checkout .go-back-button input { min-width: 180px; }
              .checkout .continue-button, .checkout .order-button { text-align: right; }
              .checkout .send-quote-request-button { text-align: right; }
              .checkout .continue-button input, .checkout .order-button input, .checkout .send-quote-request-button input { min-width: 200px; }
              .checkout .pay-button { text-align: center; }
              .checkout .pay-button input { min-width: 180px; }
              @media screen and (min-width:1024px) {
                .checkout .pay-button { padding-right: 190px; }
              }
              .order h2 { margin-bottom: 10px; }
              .order .addresses { display: table; width: 100%; }
              .order .addresses .billing-address { display: table-cell; padding-right: 10px; width: 50%; }
              .order .addresses .billing-address .contact-address { margin-top: 10px; }
              .order .addresses .shipping-address { display: table-cell; padding-right: 10px; width: 50%; }
              .checkout #checkout-cart-slider { grid-area: cart; }
              .checkout #checkout-cart-slider table { padding: 10px; } 
              .checkout #checkout-cart-slider th.product { padding-left: 10px!important; }
              .checkout #checkout-cart-slider td.image img { height: auto; max-width: 90px; }
              @media screen and (min-width: 1024px) {  
                .checkout .mobile-checkout-cart-button,
                .checkout .mobile-checkout-cart-close { display: none; }
              }
              .checkout .items { clear: both; padding-top: 0; }
              .checkout .items table { border-collapse: separate; width: 100%; }
              .checkout .items th { border-bottom: 1px solid #E5E5E5; padding: 0 10px 10px 10px; font-size: 13px; font-weight: normal; text-align: right; text-transform: uppercase; }
              .checkout .items th.product { font-size: 15px; padding-left: 0; text-align: left; }
              .checkout .items tbody tr { background: #FFF; }
              .checkout .items td { padding: 10px; }
              .checkout .items td:first-child { border-left: 1px solid #EEE; }
              .checkout .items td:last-child { border-right: 1px solid #EEE; }
              .checkout .items td.details { width: 100%; }
              .checkout .items td.quantity-price { text-align: center; white-space: nowrap; }
              .checkout .items td.total-price { text-align: right; white-space: nowrap; }
              .checkout .items td.total-price .to-quote { color: #999; }
              .checkout .items tbody tr { border-top: 1px solid #EEE; }
              .checkout .items tbody tr:last-child td { border-bottom: 1px solid #E5E5E5; }
              .checkout .items tfoot tr { background: #F9F9F9; }
              .checkout .items tfoot td { text-align: right; }
              .checkout .items .subtotal label { font-size: 15px; }
              .checkout .items .subtotal span { font-size: 15px; }
              .checkout .items .total { background: none; }
              .checkout .items .total td { border: none; border-top: 1px solid #E5E5E5; }
              .checkout .items .total label { font-size: 22px; }
              .checkout .items .total span { font-size: 22px; }
              .checkout .confirmation { margin: 20px 0; }
              .checkout .confirmation p { margin-bottom: 10px; margin-top: 10px; }
              .checkout .confirmation p em { font-style: normal; }
              

    Adesso aprire il file "mobile.css", sempre nella directory "css". A differenza del file "base.css", questo file contiene due sezioni con CSS relativo al checkout, le quali specificano regole per dispositivi di grandezza diversa.

    Cercare quindi il primo commento /* checkout-(…).html */. Selezionare tutto il CSS presente fra questo commento ed il successivo ed al suo posto inserire le seguenti regole CSS:

    
              .checkout .main { display: grid; grid-template-areas: "steps" "title" "cart" "form"; grid-template-columns: 1fr; }
              .checkout .main form { margin-right: 10px; }
              .checkout .order,
              .checkout .confirmation { margin-left: 10px; margin-right: 10px; }
              .checkout #checkout-cart-slider { background-color: #F9F9F9; height: 100%; overflow-y: scroll; padding-top: 10px; position: fixed; right: -100%; top: 0; transition: right .5s ease-out; width: 100%; z-index: 99999; }
              .checkout #checkout-cart-slider.design-isopen { right: 0; }
              .checkout .mobile-checkout-cart-close { border-radius: 6px; height: 40px; margin-left: auto; position: relative; right: 15px; width: 40px; }
              .checkout .mobile-checkout-cart-close:before, .checkout .mobile-checkout-cart-close:after { background-color: #000; content:''; height: 2px; position: absolute; top: 20px; width: 20px; }
              .checkout .mobile-checkout-cart-close:before { left: 10px; transform: rotate(45deg); }
              .checkout .mobile-checkout-cart-close:after { right: 10px; transform: rotate(-45deg); }
              .checkout .items { padding-top: 10px; }
              div.mobile-checkout-cart-button { background: linear-gradient(to bottom, hsla(134, 50%, 35%, 1), #2d862d); border-radius: 0.3em; border: 0; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 30%); color: #fff; cursor: pointer; font-size: 16px; margin-bottom: 50px; margin: auto; outline: none; padding: 8px 30px; position: relative; text-shadow: 0 0 1px #000; top: 0; transition: top 0.3s cubic-bezier(0.19, 1, 0.22, 1); width: max-content; }
              fieldset.form.methods > div { grid-template-columns: max-content 1fr; }
              .checkout form fieldset input { max-width: 432px; }
              

    Adesso cercare il secondo commento /* checkout-(…).html */. Selezionare e cancellare le prime 4 righe di CSS presenti dopo il commento. Al loro posto incollare il seguente CSS:

    
              .checkout .steps { float: none; margin-top: 5px; margin-bottom: 20px; overflow: hidden; width: auto; }
              .checkout .steps ol { display: table; width: 100%; padding-left: 33px; }
              .checkout .steps li { display: table-cell; font-size: 11px; width: 33.33%; }
              .checkout .steps li:last-child { display: none; }
              .checkout .steps > ol { flex-flow: row wrap; justify-content: left; }
              
    Supply

    Aprire il file "base.css" nella directory "css" e trovare il commento /* checkout-(…).html */.

    Fra questo commento ed il successivo sarà presente tutto il CSS relativo alle pagine del checkout: selezionare e cancellare questo CSS, incollando al suo posto le seguenti regole.

    
              @media screen and (min-width:1024px) {
                .checkout nav { display: none; }
              }
              .checkout header > .cart, .checkout header > .banners { display: none; }
              .checkout .steps { float: left; grid-area: steps; margin-bottom: 50px; margin-top: 50px; width: 100%; }
              .checkout .steps ol { align-items: center; column-gap: 40px; counter-reset: li; cursor: default; display: flex; justify-content: center; list-style: none; margin-left: 2px; padding: 0; }
              .checkout .steps li { color: #A0A0A0; font-size: 15px; height: 26px; line-height: 26px; margin: 12px 0 0 35px; position: relative; text-transform: uppercase; }
              .checkout .steps li a { color: #A0A0A0; }
              .checkout .steps li:before { background: #A0A0A0; border-radius: 20px; color: #FFF; content: counter(li); counter-increment: li; left: -33px; position: absolute; text-align: center; top: 0; width: 26px; }
              .checkout .steps li.current { color: #222; }
              .checkout .steps li.current:before { background: #222; }
              .checkout .main { column-gap: 100px; display: grid; grid-template-areas: "steps steps" "title title" "form cart"; grid-template-columns: 1fr 1fr; padding: 0px 20px; }
              html.checkout-review-html .checkout .main { display: inherit!important; }
              html.checkout-confirmation-html .checkout .main { display: block; }
              .checkout .main h1 { grid-area: title; text-align: center }
              .checkout .main form { margin-top: 20px; }
              .checkout .main-column { clear: none; grid-area: form; margin-left: 0; width: 100%; }
              fieldset.form#billing-address input { max-width: 300px; }
              fieldset.form.methods > div { align-items: center; background: #FFF; border: 1px solid #EEE; border-bottom: none; color: #333; display: grid!important; grid-template-areas: "input label" "pay pay"; grid-template-columns: max-content 1fr; padding: 10px; width: 100%; }
              fieldset.form.methods > div:first-of-type { border-top-left-radius: 5px; border-top-right-radius: 5px; }
              fieldset.form.methods > div:last-of-type { border-bottom: 1px solid #EEE; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
              fieldset.form.methods label { background: transparent; border: none!important; border-bottom: none!important; cursor: pointer; display: block; padding: 0px!important; white-space: unset!important; }
              fieldset.form.methods input[type=radio] { margin: 0 20px 0 10px }
              fieldset.form.methods .name { color: #333; font-size: 16px; margin-left: 0; padding-right: 15px; }
              fieldset.form.methods .description { color: #666; margin-left: 0; padding-right: 15px; }
              fieldset.form.methods .pay { display: none; grid-area: pay; margin-top: 10px; padding-top: 5px; text-align: center; }
              fieldset.form.methods input[type=radio]:checked ~ .pay { display: block; padding-left: 10px; padding-right: 10px; }
              fieldset.form.methods .pay > div { margin-top: 10px; }
              fieldset.form.methods .pay .expire-cvc-row { column-gap: 10px; display: flex; }
              fieldset.form.methods .pay .expire-cvc-row > div { width: 50%; }
              fieldset.form.methods .pay .cvc,
              fieldset.form.methods .pay .expiry,
              fieldset.form.methods .pay .number,
              fieldset.form.methods .pay .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
              fieldset.form.methods .pay .cvc > div,
              fieldset.form.methods .pay .expiry > div,
              fieldset.form.methods .pay .number > div,
              fieldset.form.methods .pay .name input { padding: 10px 15px; }
              fieldset.form.methods .pay .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
              fieldset.form.methods .pay .name input::placeholder { color: #333; text-transform: uppercase; }
              fieldset.form.methods .pay .pay-button.main-button { clear: both; margin-top: 15px; padding-right: 0; }
              fieldset.form.methods .pay .logos { background-color: #FFF; background: url('../images/cards.png') 20px center no-repeat #FFF; background-size: auto 25px; border-bottom: 1px solid #EEE; height: 50px; margin: 0 -20px 20px -20px; }
              fieldset.form.methods .pay .logos span { color: #b3b3b3; padding: 20px 0 0 125px; vertical-align: middle; }
              fieldset.form.methods .pay .errors { color: #c00; font-weight: 600; text-align: center; }
              #design-order-button.design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
              .checkout textarea[name="requests"] { height: 100px; width: 100%; }
              .checkout .ship-to-another-address { display: block; margin: 20px 0; }
              .checkout .accept-terms { display: block; line-height: 2em; margin: 15px 0; }
              .checkout .buttons { display: table; margin-top: 50px; margin-bottom: 20px; width: 100%; }
              .checkout .buttons > div { display: table-cell; }
              .checkout .go-back-button input { min-width: 180px; }
              .checkout .continue-button, .checkout .order-button { text-align: right; }
              .checkout .send-quote-request-button { text-align: right; }
              .checkout .continue-button input, .checkout .order-button input, .checkout .send-quote-request-button input { min-width: 200px; }
              .checkout .pay-button { text-align: center; }
              .checkout .pay-button input { min-width: 180px; }
              @media screen and (min-width:1024px) {
                .checkout .pay-button { padding-right: 190px; }
              }
              .order h2 { margin-bottom: 10px; }
              .order .addresses { display: table; width: 100%; }
              .order .addresses .billing-address { display: table-cell; padding-right: 10px; width: 50%; }
              .order .addresses .billing-address .contact-address { margin-top: 10px; }
              .order .addresses .shipping-address { display: table-cell; padding-right: 10px; width: 50%; }
              .checkout #checkout-cart-slider { grid-area: cart; }
              .checkout #checkout-cart-slider table { padding: 10px; } 
              .checkout #checkout-cart-slider th.product { padding-left: 10px!important; }
              .checkout #checkout-cart-slider td.image img { height: auto; max-width: 90px; }
              @media screen and (min-width: 1024px) {  
                .checkout .mobile-checkout-cart-button,
                .checkout .mobile-checkout-cart-close { display: none; }
              }
              .checkout .items { clear: both; padding-top: 0; }
              .checkout .items table { border-collapse: separate; width: 100%; }
              .checkout .items th { border-bottom: 1px solid #E5E5E5; padding: 0 10px 10px 10px; font-size: 13px; font-weight: normal; text-align: right; text-transform: uppercase; }
              .checkout .items th.product { font-size: 15px; padding-left: 0; text-align: left; }
              .checkout .items tbody tr { background: #FFF; }
              .checkout .items td { padding: 10px; }
              .checkout .items td:first-child { border-left: 1px solid #EEE; }
              .checkout .items td:last-child { border-right: 1px solid #EEE; }
              .checkout .items td.details { width: 100%; }
              .checkout .items td.quantity-price { text-align: center; white-space: nowrap; }
              .checkout .items td.total-price { text-align: right; white-space: nowrap; }
              .checkout .items td.total-price .to-quote { color: #999; }
              .checkout .items tbody tr { border-top: 1px solid #EEE; }
              .checkout .items tbody tr:last-child td { border-bottom: 1px solid #E5E5E5; }
              .checkout .items tfoot tr { background: #F9F9F9; }
              .checkout .items tfoot td { text-align: right; }
              .checkout .items .subtotal label { font-size: 15px; }
              .checkout .items .subtotal span { font-size: 15px; }
              .checkout .items .total { background: none; }
              .checkout .items .total td { border: none; border-top: 1px solid #E5E5E5; }
              .checkout .items .total label { font-size: 22px; }
              .checkout .items .total span { font-size: 22px; }
              .checkout .confirmation { margin: 20px 0; }
              .checkout .confirmation p { margin-bottom: 10px; margin-top: 10px; }
              .checkout .confirmation p em { font-style: normal; }
              

    Adesso aprire il file "mobile.css", sempre nella directory "css". A differenza del file "base.css", questo file contiene due sezioni con CSS relativo al checkout, le quali specificano regole per dispositivi di grandezza diversa.

    Cercare quindi il primo commento /* checkout-(…).html */. Selezionare tutto il CSS presente fra questo commento ed il successivo ed al suo posto inserire le seguenti regole CSS:

    
              .checkout .main { display: grid; grid-template-areas: "steps" "title" "cart" "form"; grid-template-columns: 1fr; }
              .checkout .main form { margin-right: 10px; }
              .checkout .order,
              .checkout .confirmation { margin-left: 10px; margin-right: 10px; }
              .checkout #checkout-cart-slider { background-color: #F9F9F9; height: 100%; overflow-y: scroll; padding-top: 10px; position: fixed; right: -100%; top: 0; transition: right .5s ease-out; width: 100%; z-index: 99999; }
              .checkout #checkout-cart-slider.design-isopen { right: 0; }
              .checkout .mobile-checkout-cart-close { border-radius: 6px; height: 40px; margin-left: auto; position: relative; right: 15px; width: 40px; }
              .checkout .mobile-checkout-cart-close:before, .checkout .mobile-checkout-cart-close:after { background-color: #000; content:''; height: 2px; position: absolute; top: 20px; width: 20px; }
              .checkout .mobile-checkout-cart-close:before { left: 10px; transform: rotate(45deg); }
              .checkout .mobile-checkout-cart-close:after { right: 10px; transform: rotate(-45deg); }
              .checkout .items { padding-top: 10px; }
              div.mobile-checkout-cart-button { -webkit-appearance: none; background: #FFF; border: 1px solid #1267bc; color: #1267bc; cursor: pointer; font-size: 16px; margin-bottom: 50px; margin: auto; outline: none; outline: none; padding: 8px 30px; position: relative; text-transform: uppercase; top: 0; width: max-content; }
              fieldset.form.methods > div { grid-template-columns: max-content 1fr; }
              .checkout form fieldset input { max-width: 432px; }
              

    Adesso cercare il secondo commento /* checkout-(…).html */. Selezionare e cancellare le prime 4 righe di CSS presenti dopo il commento. Al loro posto incollare il seguente CSS:

    
              .checkout .steps { float: none; margin-top: 5px; margin-bottom: 20px; overflow: hidden; width: auto; }
              .checkout .steps ol { display: table; width: 100%; padding-left: 33px; }
              .checkout .steps li { display: table-cell; font-size: 11px; width: 33.33%; }
              .checkout .steps li:last-child { display: none; }
              .checkout .steps > ol { flex-flow: row wrap; justify-content: left; }
              
    Respy Wide

    Aprire il file "base.css" nella directory "css" e trovare il commento /* checkout-(…).html */.

    Fra questo commento ed il successivo sarà presente tutto il CSS relativo alle pagine del checkout: selezionare e cancellare questo CSS, incollando al suo posto le seguenti regole.

    
              @media screen and (min-width:1024px) {
                .checkout nav { display: none; }
              }
              .checkout header > .cart, .checkout header > .banners { display: none; }
              .checkout .steps { float: left; grid-area: steps; margin-bottom: 50px; margin-top: 50px; width: 100%; }
              .checkout .steps ol { align-items: center; column-gap: 40px; counter-reset: li; cursor: default; display: flex; justify-content: center; list-style: none; margin-left: 2px; padding: 0; }
              .checkout .steps li { color: #A0A0A0; font-size: 15px; height: 26px; line-height: 26px; margin: 12px 0 0 35px; position: relative; text-transform: uppercase; }
              .checkout .steps li a { color: #A0A0A0; }
              .checkout .steps li:before { background: #A0A0A0; border-radius: 20px; color: #FFF; content: counter(li); counter-increment: li; left: -33px; position: absolute; text-align: center; top: 0; width: 26px; }
              .checkout .steps li.current { color: #222; }
              .checkout .steps li.current:before { background: #222; }
              .checkout .main { column-gap: 100px; display: grid; grid-template-areas: "steps steps" "title title" "form cart"; grid-template-columns: 1fr 1fr; margin-left: 0; padding: 0px 20px; }
              html.checkout-review-html .checkout .main { display: inherit!important; }
              html.checkout-confirmation-html .checkout .main { display: block; }
              .checkout .main h1 { grid-area: title; text-align: center }
              .checkout .main form { margin-top: 20px; }
              .checkout .main-column { clear: none; grid-area: form; margin-left: 0; width: 100%; }
              fieldset.form#billing-address input { max-width: 300px; }
              fieldset.form.methods > div { align-items: center; background: #FFF; border: 1px solid #EEE; border-bottom: none; color: #333; display: grid!important; grid-template-areas: "input label" "pay pay"; grid-template-columns: max-content 1fr; padding: 10px; width: 100%; }
              fieldset.form.methods > div:first-of-type { border-top-left-radius: 5px; border-top-right-radius: 5px; }
              fieldset.form.methods > div:last-of-type { border-bottom: 1px solid #EEE; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
              fieldset.form.methods label { background: transparent; border: none!important; border-bottom: none!important; cursor: pointer; display: block; padding: 0px!important; white-space: unset!important; }
              fieldset.form.methods input[type=radio] { margin: 0 20px 0 10px }
              fieldset.form.methods .name { color: #333; font-size: 16px; margin-left: 0; padding-right: 15px; }
              fieldset.form.methods .description { color: #666; margin-left: 0; padding-right: 15px; }
              fieldset.form.methods .pay { display: none; grid-area: pay; margin-top: 10px; padding-top: 5px; text-align: center; }
              fieldset.form.methods input[type=radio]:checked ~ .pay { display: block; padding-left: 10px; padding-right: 10px; }
              fieldset.form.methods .pay > div { margin-top: 10px; }
              fieldset.form.methods .pay .expire-cvc-row { column-gap: 10px; display: flex; }
              fieldset.form.methods .pay .expire-cvc-row > div { width: 50%; }
              fieldset.form.methods .pay .cvc,
              fieldset.form.methods .pay .expiry,
              fieldset.form.methods .pay .number,
              fieldset.form.methods .pay .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
              fieldset.form.methods .pay .cvc > div,
              fieldset.form.methods .pay .expiry > div,
              fieldset.form.methods .pay .number > div,
              fieldset.form.methods .pay .name input { padding: 10px 15px; }
              fieldset.form.methods .pay .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
              fieldset.form.methods .pay .name input::placeholder { color: #333; text-transform: uppercase; }
              fieldset.form.methods .pay .pay-button.main-button { clear: both; margin-top: 15px; padding-right: 0; }
              fieldset.form.methods .pay .logos { background-color: #FFF; background: url('../images/cards.png') 20px center no-repeat #FFF; background-size: auto 25px; border-bottom: 1px solid #EEE; height: 50px; margin: 0 -20px 20px -20px; }
              fieldset.form.methods .pay .logos span { color: #b3b3b3; padding: 20px 0 0 125px; vertical-align: middle; }
              fieldset.form.methods .pay .errors { color: #c00; font-weight: 600; text-align: center; }
              #design-order-button.design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
              .checkout textarea[name="requests"] { height: 100px; width: 100%; }
              .checkout .ship-to-another-address { display: block; margin: 20px 0; }
              .checkout .accept-terms { display: block; line-height: 2em; margin: 15px 0; }
              .checkout .buttons { display: table; margin-top: 50px; margin-bottom: 20px; width: 100%; }
              .checkout .buttons > div { display: table-cell; }
              .checkout .go-back-button input { min-width: 180px; }
              .checkout .continue-button, .checkout .order-button { text-align: right; }
              .checkout .send-quote-request-button { text-align: right; }
              .checkout .continue-button input, .checkout .order-button input, .checkout .send-quote-request-button input { min-width: 200px; }
              .checkout .pay-button { text-align: center; }
              .checkout .pay-button input { min-width: 180px; }
              @media screen and (min-width:1024px) {
                .checkout .pay-button { padding-right: 190px; }
              }
              .order h2 { margin-bottom: 10px; }
              .order .addresses { display: table; width: 100%; }
              .order .addresses .billing-address { display: table-cell; padding-right: 10px; width: 50%; }
              .order .addresses .billing-address .contact-address { margin-top: 10px; }
              .order .addresses .shipping-address { display: table-cell; padding-right: 10px; width: 50%; }
              .checkout #checkout-cart-slider { grid-area: cart; }
              .checkout #checkout-cart-slider table { padding: 10px; } 
              .checkout #checkout-cart-slider th.product { padding-left: 10px!important; }
              .checkout #checkout-cart-slider td.image img { height: auto; max-width: 90px; }
              @media screen and (min-width: 1151px) {  
                .checkout .mobile-checkout-cart-button,
                .checkout .mobile-checkout-cart-close { display: none; }
              }
              .checkout .items { clear: both; padding-top: 0; }
              .checkout .items table { border-collapse: separate; width: 100%; }
              .checkout .items th { border-bottom: 1px solid #E5E5E5; padding: 0 10px 10px 10px; font-size: 13px; font-weight: normal; text-align: right; text-transform: uppercase; }
              .checkout .items th.product { font-size: 15px; padding-left: 0; text-align: left; }
              .checkout .items tbody tr { background: #FFF; }
              .checkout .items td { padding: 10px; }
              .checkout .items td:first-child { border-left: 1px solid #EEE; }
              .checkout .items td:last-child { border-right: 1px solid #EEE; }
              .checkout .items td.details { width: 100%; }
              .checkout .items td.quantity-price { text-align: center; white-space: nowrap; }
              .checkout .items td.total-price { text-align: right; white-space: nowrap; }
              .checkout .items td.total-price .to-quote { color: #999; }
              .checkout .items tbody tr { border-top: 1px solid #EEE; }
              .checkout .items tbody tr:last-child td { border-bottom: 1px solid #E5E5E5; }
              .checkout .items tfoot tr { background: #F9F9F9; }
              .checkout .items tfoot td { text-align: right; }
              .checkout .items .subtotal label { font-size: 15px; }
              .checkout .items .subtotal span { font-size: 15px; }
              .checkout .items .total { background: none; }
              .checkout .items .total td { border: none; border-top: 1px solid #E5E5E5; }
              .checkout .items .total label { font-size: 22px; }
              .checkout .items .total span { font-size: 22px; }
              .checkout .confirmation { margin: 20px 0; }
              .checkout .confirmation p { margin-bottom: 10px; margin-top: 10px; }
              .checkout .confirmation p em { font-style: normal; }
              

    Adesso aprire il file "mobile.css", sempre nella directory "css". A differenza del file "base.css", questo file contiene due sezioni con CSS relativo al checkout, le quali specificano regole per dispositivi di grandezza diversa.

    Cercare quindi il primo commento /* checkout-(…).html */. Selezionare tutto il CSS presente fra questo commento ed il successivo ed al suo posto inserire le seguenti regole CSS:

    
              .checkout .main { display: grid; grid-template-areas: "steps" "title" "cart" "form"; grid-template-columns: 1fr; }
              .checkout .main form { margin-right: 10px; }
              .checkout .order,
              .checkout .confirmation { margin-left: 10px; margin-right: 10px; }
              .checkout #checkout-cart-slider { background-color: #F9F9F9; height: 100%; overflow-y: scroll; padding-top: 10px; position: fixed; right: -100%; top: 0; transition: right .5s ease-out; width: 100%; z-index: 99999; }
              .checkout #checkout-cart-slider.design-isopen { right: 0; }
              .checkout .mobile-checkout-cart-close { border-radius: 6px; height: 40px; margin-left: auto; position: relative; right: 15px; width: 40px; }
              .checkout .mobile-checkout-cart-close:before, .checkout .mobile-checkout-cart-close:after { background-color: #000; content:''; height: 2px; position: absolute; top: 20px; width: 20px; }
              .checkout .mobile-checkout-cart-close:before { left: 10px; transform: rotate(45deg); }
              .checkout .mobile-checkout-cart-close:after { right: 10px; transform: rotate(-45deg); }
              .checkout .items { padding-top: 10px; }
              div.mobile-checkout-cart-button { background-color: #952C2C; color: #ffffff; font-size: 16px; margin-bottom: 50px; margin: auto; padding: 8px 30px; width: max-content; }
              fieldset.form.methods > div { grid-template-columns: max-content 1fr; }
              .checkout form fieldset input { max-width: 432px; }
              

    Adesso cercare il secondo commento /* checkout-(…).html */. Selezionare e cancellare le prime 4 righe di CSS presenti dopo il commento. Al loro posto incollare il seguente CSS:

    
              .checkout .steps { float: none; margin-top: 5px; margin-bottom: 12px; overflow: hidden; width: auto; }
              .checkout .steps ol { display: table; width: 100%; padding-left: 33px; }
              .checkout .steps li { display: table-cell; font-size: 11px; width: 33.33%; }
              .checkout .steps li:last-child { display: none; }
              .checkout div.steps > ol { flex-flow: row wrap; justify-content: left; }
              .checkout div.steps { margin-bottom: 20px; }
              
    Respy Classic

    Aprire il file "base.css" nella directory "css" e trovare il commento /* checkout-(…).html */.

    Fra questo commento ed il successivo sarà presente tutto il CSS relativo alle pagine del checkout: selezionare e cancellare questo CSS, incollando al suo posto le seguenti regole.

    
              @media screen and (min-width:1024px) {
                .checkout nav { display: none; }
              }
              .checkout header > .cart, .checkout header > .banners { display: none; }
              .checkout .steps { float: left; grid-area: steps; margin-bottom: 50px; margin-top: 50px; width: 100%; }
              .checkout .steps ol { align-items: center; column-gap: 40px; counter-reset: li; cursor: default; display: flex; justify-content: center; list-style: none; margin-left: 2px; padding: 0; }
              .checkout .steps li { color: #A0A0A0; font-size: 15px; height: 26px; line-height: 26px; margin: 12px 0 0 35px; position: relative; text-transform: uppercase; }
              .checkout .steps li a { color: #A0A0A0; }
              .checkout .steps li:before { background: #A0A0A0; border-radius: 20px; color: #FFF; content: counter(li); counter-increment: li; left: -33px; position: absolute; text-align: center; top: 0; width: 26px; }
              .checkout .steps li.current { color: #222; }
              .checkout .steps li.current:before { background: #222; }
              .checkout .main { column-gap: 100px; display: grid; grid-template-areas: "steps steps" "title title" "form cart"; grid-template-columns: 1fr 1fr; padding: 0px 20px; }
              html.checkout-review-html .checkout .main { display: inherit!important; }
              html.checkout-confirmation-html .checkout .main { display: block; }
              .checkout .main h1 { grid-area: title; text-align: center }
              .checkout .main form { margin-top: 20px; }
              .checkout .main-column { clear: none; grid-area: form; margin-left: 0; width: 100%; }
              fieldset.form#billing-address input { max-width: 300px; }
              fieldset.form.methods > div { align-items: center; background: #FFF; border: 1px solid #EEE; border-bottom: none; color: #333; display: grid!important; grid-template-areas: "input label" "pay pay"; grid-template-columns: max-content 1fr; padding: 10px; width: 100%; }
              fieldset.form.methods > div:first-of-type { border-top-left-radius: 5px; border-top-right-radius: 5px; }
              fieldset.form.methods > div:last-of-type { border-bottom: 1px solid #EEE; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
              fieldset.form.methods label { background: transparent; border: none!important; border-bottom: none!important; cursor: pointer; display: block; padding: 0px!important; white-space: unset!important; }
              fieldset.form.methods input[type=radio] { margin: 0 20px 0 10px }
              fieldset.form.methods .name { color: #333; font-size: 16px; margin-left: 0; padding-right: 15px; }
              fieldset.form.methods .description { color: #666; margin-left: 0; padding-right: 15px; }
              fieldset.form.methods .pay { display: none; grid-area: pay; margin-top: 10px; padding-top: 5px; text-align: center; }
              fieldset.form.methods input[type=radio]:checked ~ .pay { display: block; padding-left: 10px; padding-right: 10px; }
              fieldset.form.methods .pay > div { margin-top: 10px; }
              fieldset.form.methods .pay .expire-cvc-row { column-gap: 10px; display: flex; }
              fieldset.form.methods .pay .expire-cvc-row > div { width: 50%; }
              fieldset.form.methods .pay .cvc,
              fieldset.form.methods .pay .expiry,
              fieldset.form.methods .pay .number,
              fieldset.form.methods .pay .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
              fieldset.form.methods .pay .cvc > div,
              fieldset.form.methods .pay .expiry > div,
              fieldset.form.methods .pay .number > div,
              fieldset.form.methods .pay .name input { padding: 10px 15px; }
              fieldset.form.methods .pay .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
              fieldset.form.methods .pay .name input::placeholder { color: #333; text-transform: uppercase; }
              fieldset.form.methods .pay .pay-button.main-button { clear: both; margin-top: 15px; padding-right: 0; }
              fieldset.form.methods .pay .logos { background-color: #FFF; background: url('../images/cards.png') 20px center no-repeat #FFF; background-size: auto 25px; border-bottom: 1px solid #EEE; height: 50px; margin: 0 -20px 20px -20px; }
              fieldset.form.methods .pay .logos span { color: #b3b3b3; padding: 20px 0 0 125px; vertical-align: middle; }
              fieldset.form.methods .pay .errors { color: #c00; font-weight: 600; text-align: center; }
              #design-order-button.design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
              .checkout textarea[name="requests"] { height: 100px; width: 100%; }
              .checkout .ship-to-another-address { display: block; margin: 20px 0; }
              .checkout .accept-terms { display: block; line-height: 2em; margin: 15px 0; }
              .checkout .buttons { display: table; margin-top: 50px; margin-bottom: 20px; width: 100%; }
              .checkout .buttons > div { display: table-cell; }
              .checkout .go-back-button input { min-width: 180px; }
              .checkout .continue-button, .checkout .order-button { text-align: right; }
              .checkout .send-quote-request-button { text-align: right; }
              .checkout .continue-button input, .checkout .order-button input, .checkout .send-quote-request-button input { min-width: 200px; }
              .checkout .pay-button { text-align: center; }
              .checkout .pay-button input { min-width: 180px; }
              @media screen and (min-width:1024px) {
                .checkout .pay-button { padding-right: 190px; }
              }
              .order h2 { margin-bottom: 10px; }
              .order .addresses { display: table; width: 100%; }
              .order .addresses .billing-address { display: table-cell; padding-right: 10px; width: 50%; }
              .order .addresses .billing-address .contact-address { margin-top: 10px; }
              .order .addresses .shipping-address { display: table-cell; padding-right: 10px; width: 50%; }
              .checkout #checkout-cart-slider { grid-area: cart; }
              .checkout #checkout-cart-slider table { padding: 10px; } 
              .checkout #checkout-cart-slider th.product { padding-left: 10px!important; }
              .checkout #checkout-cart-slider td.image img { height: auto; max-width: 90px; }
              @media screen and (min-width: 1024px) {  
                .checkout .mobile-checkout-cart-button,
                .checkout .mobile-checkout-cart-close { display: none; }
              }
              .checkout .items { clear: both; padding-top: 0; }
              .checkout .items table { border-collapse: separate; width: 100%; }
              .checkout .items th { border-bottom: 1px solid #E5E5E5; padding: 0 10px 10px 10px; font-size: 13px; font-weight: normal; text-align: right; text-transform: uppercase; }
              .checkout .items th.product { font-size: 15px; padding-left: 0; text-align: left; }
              .checkout .items tbody tr { background: #FFF; }
              .checkout .items td { padding: 10px; }
              .checkout .items td:first-child { border-left: 1px solid #EEE; }
              .checkout .items td:last-child { border-right: 1px solid #EEE; }
              .checkout .items td.details { width: 100%; }
              .checkout .items td.quantity-price { text-align: center; white-space: nowrap; }
              .checkout .items td.total-price { text-align: right; white-space: nowrap; }
              .checkout .items td.total-price .to-quote { color: #999; }
              .checkout .items tbody tr { border-top: 1px solid #EEE; }
              .checkout .items tbody tr:last-child td { border-bottom: 1px solid #E5E5E5; }
              .checkout .items tfoot tr { background: #F9F9F9; }
              .checkout .items tfoot td { text-align: right; }
              .checkout .items .subtotal label { font-size: 15px; }
              .checkout .items .subtotal span { font-size: 15px; }
              .checkout .items .total { background: none; }
              .checkout .items .total td { border: none; border-top: 1px solid #E5E5E5; }
              .checkout .items .total label { font-size: 22px; }
              .checkout .items .total span { font-size: 22px; }
              .checkout .confirmation { margin: 20px 0; }
              .checkout .confirmation p { margin-bottom: 10px; margin-top: 10px; }
              .checkout .confirmation p em { font-style: normal; }
              

    Adesso aprire il file "mobile.css", sempre nella directory "css". A differenza del file "base.css", questo file contiene due sezioni con CSS relativo al checkout, le quali specificano regole per dispositivi di grandezza diversa.

    Cercare quindi il primo commento /* checkout-(…).html */. Selezionare tutto il CSS presente fra questo commento ed il successivo ed al suo posto inserire le seguenti regole CSS:

    
              .checkout .main { display: grid; grid-template-areas: "steps" "title" "cart" "form"; grid-template-columns: 1fr; }
              .checkout .main form { margin-right: 10px; }
              .checkout .order,
              .checkout .confirmation { margin-left: 10px; margin-right: 10px; }
              .checkout #checkout-cart-slider { background-color: #F9F9F9; height: 100%; overflow-y: scroll; padding-top: 10px; position: fixed; right: -100%; top: 0; transition: right .5s ease-out; width: 100%; z-index: 99999; }
              .checkout #checkout-cart-slider.design-isopen { right: 0; }
              .checkout .mobile-checkout-cart-close { border-radius: 6px; height: 40px; margin-left: auto; position: relative; right: 15px; width: 40px; }
              .checkout .mobile-checkout-cart-close:before, .checkout .mobile-checkout-cart-close:after { background-color: #000; content:''; height: 2px; position: absolute; top: 20px; width: 20px; }
              .checkout .mobile-checkout-cart-close:before { left: 10px; transform: rotate(45deg); }
              .checkout .mobile-checkout-cart-close:after { right: 10px; transform: rotate(-45deg); }
              .checkout .items { padding-top: 10px; }
              div.mobile-checkout-cart-button { background-color: #952C2C; color: #ffffff; font-size: 16px; margin-bottom: 50px; margin: auto; padding: 8px 30px; width: max-content; }
              fieldset.form.methods > div { grid-template-columns: max-content 1fr; }
              .checkout form fieldset input { max-width: 432px; }
              

    Adesso cercare il secondo commento /* checkout-(…).html */. Selezionare e cancellare le prime 4 righe di CSS presenti dopo il commento. Al loro posto incollare il seguente CSS:

    
              .checkout .steps { float: none; margin-top: 5px; margin-bottom: 12px; overflow: hidden; width: auto; }
              .checkout .steps ol { display: table; width: 100%; padding-left: 33px; }
              .checkout .steps li { display: table-cell; font-size: 11px; width: 33.33%; }
              .checkout .steps li:last-child { display: none; }
              .checkout div.steps > ol { flex-flow: row wrap; justify-content: left; }
              .checkout div.steps { margin-bottom: 20px; }
              
  8. Controllare ed applicare le modifiche

    Adesso, nel gestionale recarsi alla sezione "Sito web" e cliccare sul link "Visualizza in anteprima" del template sul quale sono state effettuate le modifiche. Controllare che le modifiche siano corrette. Se tutto funziona come previsto tornare alla sezione "Sito web", cliccare i tre puntini (...) accanto al pulsante "Personalizza" ed infine cliccare "Applica al sito" dal menù a tendina che si sarà aperto.

    A questo punto l'aggiornamento del template sarà stato applicato al vostro sito e la procedura sarà conclusa.

Aggiornare un template per la Fattura Elettronica

La versione 2018 Fattura Elettronica, introdotta a dicembre 2018, comprende le funzionalità per adeguarsi alla nuova normativa sulla fattura elettronica.

Sul sito quando un cliente inserisce i propri dati di fatturazione è ora possibile raccogliere anche il codice o la PEC del destinatario della fattura elettronica. Questo campo sarà poi riportato nell'anagrafica cliente, nell'ordine e quindi nella fattura.

I nuovi template che potete installare dallo Store dei template sono già adattati con il nuovo campo. Invece i precedenti template vanno adeguati, di seguito vi spiegamo come fare.

Le modifiche possono essere fatte tramite il Template Editor del gestionale oppure con un qualunque altro editor e un programma di FTP per mettere i file sul sito.

  1. Aprire il file "/includes/billing-address.html" (non confondere con "print-billing-address.html" che verrà modificato in seguito) e aggiungere:
    
        <!-- .if invoiceRecipient -->
        <div>
          <label for="design-invoice-recipient">{Invoice recipient}:</label>
          <div>
            <!-- .show invoiceRecipient --> <!-- .end -->
            <div style="clear:left">{Invoice recipient note}</div>
          </div>
        </div>
        <!-- .end if -->
        
    appena prima della riga:
        <div class="street">
  2. Aprire il file "/includes/print-billing-address.html" e aggiungere:
    
          <!-- .if invoiceRecipient -->
          <div>{Print invoice recipient}: <!-- .show invoiceRecipient --> <!-- .end --></div>
          <!-- .end if  -->
        
    appena prima della riga:
          <!-- .if billingPhoneNumber -->
  3. Se si sta usando il Template Editor allora andare in Traduzioni > Italiano e sotto la linguetta Template aggiungere, alla fine, le seguenti voci:
    Invoice recipient=Codice o PEC fatturazione
    Invoice recipient note=Compilare se si desidera la fattura elettronica
    Print invoice recipient=Destinatario fattura elettronica
    Se invece si stanno modificando i file via FTP allora modificare il file "/languages/it/template.ini" nella cartella del template.

    Se si utilizzano più lingue sul sito di seguito sono ritportati i testi per le altre lingue:

    Inglese

    Invoice recipient=Electronic invoice recipient
    Invoice recipient note=Fill in with you PEC or recipient code if you need an electronic invoice
    Print invoice recipient=Electronic invoice recipient

    Francese

    Invoice recipient=Destinataire de facture électronique
    Invoice recipient note=Entrez votre PEC ou votre code de destinataire si vous souhaitez une facture électronique
    Print invoice recipient=Destinataire de facture électronique

    Spagnolo

    Invoice recipient=Destinatario factura electrónica
    Invoice recipient note=Rellene con su PEC o código de destinatario si desea una factura electrónica
    Print invoice recipient=Destinatario factura electrónica
  4. Vedete le modifiche fatte nell'anteprima del template e se vanno bene applicate il template al sito.

Aggiornare un template alla versione 2018 GDPR

La versione 2018 GDPR, introdotta a maggio 2018, comprende le funzionalità per adeguarsi alla nuova normativa sulla privacy GDPR.

Quando sul sito si raccolgono i dati personali di un cliente bisogna informarlo dei trattamenti fatti sui suoi dati ed eventualmente chiedere il consenso al loro trattamento.

I nuovi template forniti con l'aggiornamento ("Respy Classic GDPR", "Respy Wide GDPR" e "Axis") sono già predisposti. Invece i precedenti template vanno adeguati, di seguito vi spiegamo come fare.

Le modifiche possono essere fatte tramite il Template Editor del gestionale oppure con un qualunque altro editor e un programma di FTP per mettere i file sul sito.

Pagine registrazione e checkout

  1. Creare un nuovo file chiamato ad esempio "/includes/privacy-processings.html" con il seguente contenuto:
    
    <!-- .if processings -->
    <div class="privacy-processings">
    
        <!-- .for processings -->
        <div class="processing">
    
          <label class="title">
            <!-- .show consent --><!-- .end -->
            <span><!-- .show title --> Data processing <!-- .end --></span>
            <!-- .if isConsentRequired --><span class="design-required">*</span><!-- .end -->
          </label>
    
          <div class="description">
            <span><!-- .show description --> We collect data from our customers for advertising purposes <!-- .end --></span>
            <span class="more-info"><!-- .show moreInfo --> (More info...) <!-- .end --></span>
          </div>
    
        </div>
        <!-- .end for -->
    
    </div>
    <!-- .end if -->
        
  2. Includere il file privacy-processings.html nelle seguenti pagine del template:
    • sign-up-user.html
    • user-data.html
    • checkout-addresses.html ( oppure checkout-form.html )
    • checkout-quote-request.html

    aggiungendo alle pagine il seguente codice:

    
        <!-- .include "/includes/privacy-processings.html" -->
        
    tra i tag <form> e </form>, preferibilmente prima dei pulsanti alla fine del form.
  3. Aggiungere nel Template Editor in Traduzioni > Sistema ( oppure in alternativa direttamente al file "languages/it/system.ini" ), la seguente riga:
    
        PrivacyProcessingMoreInfo=(Maggiori informazioni...)
        
    Se si hanno più lingue sul sito allora farlo per tutte le lingue.
  4. Modificare i CSS del template aggiungendo il seguente codice:
    
    .privacy-processings { padding: 1em 0; }
    .privacy-processings .processing { margin-bottom: 1.5em; }
    .privacy-processings .processing:last-child { margin-bottom: 0; }
    .privacy-processings .processing label { cursor: pointer; }
    .privacy-processings .processing input[type="checkbox"] { position: relative; top: 2px; }
    .privacy-processings .processing .title { padding: .35em 0; }
    .privacy-processings .processing .description { padding: 0 1.4em; word-break: break-word; }
    .privacy-processings .processing .more-info a:hover { text-decoration: underline; }
    .privacy-processings .processing .design-required { color: red; }
    .sign-up-user-html .privacy-processings { padding-top: 0; }
    .sign-up-user-html .privacy-processings .processing,
    .user-data-html    .privacy-processings .processing { margin: 0 2px; padding: .35em .625em .75em; }
    .design-highlight-consent-required { background-color: #FFF1A8; }
        

    Se si sta usando un template Respy Wide o Respy Classic non modificati allora basta aggiungere questo CSS alla fine del file "/css/base.css". Se si sta usando un template personalizzato allora potrebbe essere necessario adattare il codice CSS del template in uso.

  5. Vedete le modifiche fatte nell'anteprima del template e se vanno bene applicate il template al sito.

Pagine ordini e preventivi

Per aggiungere i trattamenti e consensi anche sugli ordini e preventivi già fatti, per consentire ad un cliente di vedere i consensi dati, revocare un consenso o dare un consenso non dato in precedenza, seguire le seguenti istruzioni per modificare il template:

  • Modificate la pagina view.html del template aggiungendo il seguente codice subito dopo la chiusura del tag <div> con classe "document-frame":
    
    <!-- .if processings -->
    <form method="post">
      <div>
          <!-- .include "includes/privacy-processings.html" -->
          <div class="buttons">
              <input type="submit" value="Salva consensi">
          </div>
      </div>
    </form>
    <!-- .end if -->
        
  • Vedete le modifiche fatte nell'anteprima del template e se vanno bene applicate il template al sito.