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.
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.
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.
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") %}
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.
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.
{{ render }} del nostro template engine Scriggo "inietta" il contenuto di un file HTML all'interno di un altro file HTML che l'ha invocata."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. 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" }}
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>
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 cartShow cart=Mostrar carroShow cart=Afficher le panierShow 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 holderCreditCardName=Titular de la tarjetaCreditCardName=Titulaire de la carteCreditCardName=Intestatario cartaPer 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.
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; }
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; }
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; }
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; }
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; }
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.
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.
"/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 -->
<div class="street">"/includes/print-billing-address.html" e aggiungere:
<!-- .if invoiceRecipient -->
<div>{Print invoice recipient}: <!-- .show invoiceRecipient --> <!-- .end --></div>
<!-- .end if -->
<!-- .if billingPhoneNumber -->Invoice recipient=Codice o PEC fatturazione
Invoice recipient note=Compilare se si desidera la fattura elettronica
Print invoice recipient=Destinatario fattura elettronica"/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:
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 recipientInvoice 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 électroniqueInvoice 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ónicaLa 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.
"/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 -->
privacy-processings.html nelle seguenti pagine del template:
sign-up-user.htmluser-data.htmlcheckout-addresses.html ( oppure checkout-form.html )checkout-quote-request.htmlaggiungendo alle pagine il seguente codice:
<!-- .include "/includes/privacy-processings.html" -->
<form> e </form>, preferibilmente prima dei pulsanti alla fine del form.
"languages/it/system.ini" ), la seguente riga:
PrivacyProcessingMoreInfo=(Maggiori informazioni...)
.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.
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:
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 -->