La versione 7.5 introduce le promozioni su quantità. Queste promozioni possono determinare prezzi diversi per una stessa referenza nel carrello, di conseguenza le variabili della pagina carrello e correlate sono cambiate.
Se non si utilizzano le promozioni su quantità non è necessario effettuare modifiche.
In caso contrario si può decidere di installare una versione aggiornata del template dallo store, oppure si possono comunque seguire alcuni passaggi per aggiornare il template in autonomia.
Le istruzioni qui riportate si riferiscono all'aggiornamento di templates che non hanno subito modifiche ai files relativi al carrello (cart.html, cart-checkout.html e partials/mini-cart.html) nel caso che sul vostro template questi files siano stati modificati, potete comunque utilizzare le istruzioni come riferimento.
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.
Nel file "cart.html" sostituire il blocco
<div class="items"> ... </div>
<div class="items">
<table>
<thead>
<tr>
<th class="image"></th>
<th class="details"></th>
<th class="price"></th>
<th class="quantity">{{ translate("Cart quantity") }}</th>
<th></th>
<th class="total-price">{{ translate("Cart total price") }}</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td class="image">{{ item.Image }}</td>
<td class="details">
<div class="name">{{ item.Name }}</div>
{{ item.Warning }}
{% for p in item.Promotions %}
<div class="promotion">{{ p.Name }}</div>
{% end for %}
</td>
<td class="price">
<span class="list-price">{{ item.ListPrice }}</span>
<span class="sell-price">{{ item.Price }}</span>
{% if item.Discount %}
<div class="discount">
{{ translate("Discount") }}
{{ item.Discount }}
</div>
{% end if %}
</td>
<td class="quantity design-cart-quantity">
<div>
{{ item.Quantity }}
{{ item.ButtonRemove }}
{{ item.ButtonUpdate }}
</div>
</td>
<td></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>
{% for row in item.Rows %}
<tr class="row">
<td></td>
<td class="row-details">
{% for p in row.Promotions %}
<div>{{ p.Name }}</div>
{% end for%}
</td>
<td class="row-price">
<span class="row-list-price">{{ row.ListPrice }}</span>
<span class="row-sell-price">{{ row.Price }}</span>
{% if row.Discount %}
<div class="row-discount">
{{ translate("Discount") }}
{{ row.Discount }}
</div>
{% end if %}
</td>
<td class="row-quantity">{{ row.Quantity }}</td>
<td></td>
<td></td>
</tr>
{% end for %}
{% if item.InfoForRequests %}
<tr class="requests">
<td></td>
<td>
<label>{{ item.InfoForRequests }}</label>
<div>{{ item.Requests }}</div>
</td>
<td colspan="4"></td>
</tr>
{% end if %}
{% end for %}
</tbody>
<tfoot>
{% if not toQuote %}
{% for discount in discounts %}
<tr class="discount">
<td colspan="5"><label>{{ translate("Cart discount") }}:</label></td>
<td>{{ discount }}</td>
</tr>
{% end for %}
<tr class="subtotal">
<td colspan="5"><label>{{ translate("Cart subtotal") }}:</label></td>
<td>{{ subtotal }}</td>
</tr>
<tr class="shipping">
<td colspan="5">
<label for="design-cart-shipping">{{ translate("Cart shipping") }}:</label>
{{ shipping }}
</td>
<td>{{ shippingCost }}</td>
</tr>
<tr class="payment">
<td colspan="5">
<label for="design-cart-payment">{{ translate("Cart payment") }}:</label>
{{ payment }}
</td>
<td>{{ paymentCost }}</td>
</tr>
{% if taxesAreExcluded %}
<tr class="taxes">
<td colspan="5"><label>{{ translate("Cart taxes") }}:</label></td>
<td>{{ taxAmount }}</td>
</tr>
{% end if %}
{% end if %}
<tr class="total">
<td colspan="5"><label>{{ translate("Cart total") }}:</label></td>
<td>
{% if toQuote %}
<span class="to-quote">{{ translate("Price to quote") }}</span>
{% else %}
{{ total.Gross }}
{% end if %}
</td>
</tr>
</tfoot>
</table>
</div>
Nel file "cart.html" sostituire il blocco
{% if buttonApplyCoupon %} ... {% end if %}
<div class="coupon-recap">
{% if buttonApplyCoupon %}
<form action="cart.html" method="post">
<div class="coupon">
<label>{{ translate("Enter coupon") }}:</label>
<div class="apply">
<div>{{ coupon }}</div>
<div>{{ buttonApplyCoupon }}</div>
</div>
</div>
</form>
{% end if %}
{%%
riepilogo := map[string]map[string]bool{}
sortedPromotions := []string{}
for i in items {
for r in i.Rows {
for p in r.Promotions {
if riepilogo[p.Name] == nil {
riepilogo[p.Name] = map[string]bool{}
sortedPromotions = append(sortedPromotions, p.Name)
}
riepilogo[p.Name][string(_extract(i.Name, ``))] = true
}
}
for p in i.Promotions {
if riepilogo[p.Name] == nil {
riepilogo[p.Name] = map[string]bool{}
sortedPromotions = append(sortedPromotions, p.Name)
}
riepilogo[p.Name][string(_extract(i.Name, ``))] = true
}
}
%%}
{% if len(sortedPromotions) > 0 %}
<div class="promotions-recap">
<div class="promotions-recap-title">{{ translate("Products on offer") }}</div>
{% for _, promo:= range sortedPromotions %}
{% names := riepilogo[promo] %}
<div class="promotion-name">{{ promo }}</div>
{% for name := range names %}
<div class="promotion-product">{{ name }}</div>
{% end for %}
{% end for %}
</div>
{% end if %}
</div>
Sostituire il contenuto del file "checkout-cart.html" con il seguente codice:
<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 }}
{% for p in item.Promotions %}
<div class="promotion">{{ p.Name }}</div>
{% end for %}
{% if item.InfoForRequests %}
<div class="requests">
<label>{{ item.InfoForRequests }}</label>
<div>{{ item.Requests }}</div>
</div>
{% end if %}
</td>
<td class="quantity-price">
<div>
<div class="quantity">{{ item.Quantity }}</div>
<span class="price">
{% if item.ListPrice %}
<span class="list-price">{{ item.ListPrice }}</span>
{% end if %}
{% if item.Price %}
<div class="sell-price">{{ item.Price }} × {{ item.Quantity }}</div>
{% end if %}
{% if item.Discount %}
<div class="discount">
{{ translate("Discount") }}
{{ item.Discount }}
</div>
{% end if %}
</span>
</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>
{% for row in item.Rows %}
<tr class="row">
<td></td>
<td class="row-details">
{% for p in row.Promotions %}
<div>{{ p.Name }}</div>
{% end for%}
</td>
<td class="row-price">
<div class="row-list-price">{{ row.ListPrice }}</div>
<div class="row-sell-price">{{ row.Price }} x {{ row.Quantity }}</div>
{% if row.Discount %}
<div class="row-discount">
{{ translate("Discount") }}
{{ row.Discount }}
</div>
{% end if %}
</td>
<td></td>
</tr>
{% end for %}
{% 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>
Nel file "partials/minicart.html" dopo la riga
<div class="name"><!-- .show name --><!-- .end --></div> <span class="promotion"><!-- .show promotionsMessage --><!-- .end --></span>Aggiungere in fondo al file "css/base.css" il seguente codice:
#design-mini-cart ul.items .properties .promotion { font-size: 11px; }
.cart-html .items tbody tr.row { border-top: 0; }
.cart-html .items td.details .promotion { font-size: 12px; padding-top: 5px; }
.cart-html .items td.price { text-wrap: nowrap }
.cart-html .items td.price .list-price { font-size: 13px; opacity: .7; text-decoration: line-through; }
.cart-html .items td.price .discount { color: var(--color-primary); font-size: 13px; }
.cart-html .items tr.row { font-size: 13px; }
.cart-html .items tr.row .row-price { white-space: nowrap; text-align: right; }
.cart-html .items tr.row .row-sell-price { font-size: 14px; }
.cart-html .items tr.row .row-list-price { text-decoration: line-through; opacity: .8; }
.cart-html .items tr.row .row-discount { color:var(--color-primary); }
.cart-html .items tr.row .row-details { font-size: 12px; padding-left: 50px; }
.cart-html .items tr.row .row-quantity { padding-left: 35px; }
.cart-html .items tr.row td { padding-bottom: 5px; padding-top: 5px; }
.cart-html .coupon-recap { border-top: 1px dotted var(--border); column-gap: 30px; display: flex; flex-flow: row wrap; margin-top: 20px; padding: 20px 10px 20px 10px; row-gap: 10px; }
.cart-html .coupon { max-width: 500px; border-top: none; margin-top: 0; padding: 0;}
.cart-html .promotions-recap { border: 1px solid var(--border); display: block; font-size: 13px; margin-bottom: 0; padding: 10px 20px; text-align: left; }
.cart-html .promotions-recap .promotions-recap-title { font-size: 16px; font-weight: 600; }
.cart-html .promotions-recap .promotion-name { font-weight: 600; }
.cart-html .promotions-recap .promotion-product { font-size: 13px; }
.checkout .items tr.row { font-size: 13px; }
.checkout .items td.details .promotion { font-size: 12px; padding-top: 5px; }
.checkout .items td.quantity-price { text-wrap: nowrap }
.checkout .items td.quantity-price .quantity { display: none; }
.checkout .items td.quantity-price .list-price { font-size: 13px; opacity: .8; text-decoration: line-through; }
.checkout .items td.quantity-price .discount { color: var(--color-primary); font-size: 13px; }
.checkout .items td.row-price { white-space: nowrap; }
.checkout .items td.row-price .row-list-price { text-decoration: line-through; opacity: .8; }
.checkout .items td.row-price .row-discount { color: var(--color-primary); }
.checkout .items tbody tr { border-top: none; }
.checkout .items tbody tr:first-child td, .checkout .items tbody tr.row td { border-top: 0; }
.checkout .items tbody tr td { border-top: 1px solid var(--border); }
Nel file "css/mobile.css" nella sezione
@media screen and (max-width:767px) { ... }
.checkout .items td.details { padding-bottom: 50px; vertical-align: middle; }
.checkout .items td.quantity-price { height: 50px; line-height: 50px; padding: 0; position: relative; }
.checkout .items td.quantity-price div { bottom: 0; position: absolute; right: 100px; }
.checkout .items td.total-price { height: 50px; line-height: 50px; padding: 0; position: relative; }
.checkout .items td.total-price div { bottom: 0; position: absolute; right: 10px; }
.checkout .items tr.row td { border-top: 0; }
.checkout .items td.quantity-price .price { display: none; }
.checkout .items td.quantity-price .quantity { display: block; }
.cart-html .items td.row-quantity { padding-left: 10px!important; }
.cart-html .items tr.row .row-details { padding-left: 20px; }
Nel file "css/mobile.css" nella sezione
@media screen and (max-width:415px) { ... }
.cart-html .items tr.row .row-price { white-space: normal; }
.checkout .items td.image { width: 25%; }
.checkout #checkout-cart-slider td.image img { max-width: 100%; min-width: 50px; }
.checkout .items td.row-price { white-space: normal; }
Traduzioni"template.ini" delle varie lingue, potete trovarli nelle sottocartelle della cartella "languages" del template.
Products on offer=Products on offerProducts on offer=Productos en ofertaProducts on offer=Produits à prix réduitiveProducts on offer=Prodotti in offertaNel file "cart.html" sostituire il blocco
<div class="items"> ... </div>
<div class="items">
<table>
<thead>
<tr>
<th class="image"></th>
<th class="details"></th>
<th class="price"></th>
<th class="quantity">{{ translate("Cart quantity") }}</th>
<th></th>
<th class="total-price">{{ translate("Cart total price") }}</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td class="image">{{ item.Image }}</td>
<td class="details">
<div class="name">{{ item.Name }}</div>
{{ item.Warning }}
{% for p in item.Promotions %}
<div class="promotion">{{ p.Name }}</div>
{% end for %}
</td>
<td class="price">
<span class="list-price">{{ item.ListPrice }}</span>
<span class="sell-price">{{ item.Price }}</span>
{% if item.Discount %}
<div class="discount">
{{ translate("Discount") }}
{{ item.Discount }}
</div>
{% end if %}
</td>
<td class="quantity design-cart-quantity">
<div>
{{ item.Quantity }}
{{ item.ButtonRemove }}
{{ item.ButtonUpdate }}
</div>
</td>
<td></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>
{% for row in item.Rows %}
<tr class="row">
<td></td>
<td class="row-details">
{% for p in row.Promotions %}
<div>{{ p.Name }}</div>
{% end for%}
</td>
<td class="row-price">
<span class="row-list-price">{{ row.ListPrice }}</span>
<span class="row-sell-price">{{ row.Price }}</span>
{% if row.Discount %}
<div class="row-discount">
{{ translate("Discount") }}
{{ row.Discount }}
</div>
{% end if %}
</td>
<td class="row-quantity">{{ row.Quantity }}</td>
<td></td>
<td></td>
</tr>
{% end for %}
{% if item.InfoForRequests %}
<tr class="requests">
<td></td>
<td>
<label>{{ item.InfoForRequests }}</label>
<div>{{ item.Requests }}</div>
</td>
<td colspan="4"></td>
</tr>
{% end if %}
{% end for %}
</tbody>
<tfoot>
{% if not toQuote %}
{% for discount in discounts %}
<tr class="discount">
<td colspan="5"><label>{{ translate("Cart discount") }}:</label></td>
<td>{{ discount }}</td>
</tr>
{% end for %}
<tr class="total-cost">
<td colspan="5"><label>{{ translate("Cart total cost") }}:</label></td>
<td>{{ subtotal }}</td>
</tr>
<tr class="shipping">
<td colspan="5">
<label for="design-cart-shipping">{{ translate("Cart shipping") }}:</label>
{{ shipping }}
</td>
<td>{{ shippingCost }}</td>
</tr>
<tr class="payment">
<td colspan="5">
<label for="design-cart-payment">{{ translate("Cart payment") }}:</label>
{{ payment }}
</td>
<td>{{ paymentCost }}</td>
</tr>
{% if taxesAreExcluded %}
<tr class="taxes">
<td colspan="5"><label>{{ translate("Cart taxes") }}:</label></td>
<td>{{ taxAmount }}</td>
</tr>
{% end if %}
{% end if %}
<tr class="total">
<td colspan="5"><label>{{ translate("Cart total") }}:</label></td>
<td>
{% if toQuote %}
<span class="to-quote">{{ translate("Price to quote") }}</span>
{% else %}
{{ total.Gross }}
{% end if %}
</td>
</tr>
</tfoot>
</table>
</div>
Nel file "cart.html" sostituire il blocco
{% if buttonApplyCoupon %} ... {% end if %}
<div class="coupon-recap">
{% if buttonApplyCoupon %}
<form action="cart.html" method="post">
<div class="coupon">
<label>{{ translate("Enter coupon") }}:</label>
<div class="apply">
<div>{{ coupon }}</div>
<div>{{ buttonApplyCoupon }}</div>
</div>
</div>
</form>
{% end if %}
{%%
riepilogo := map[string]map[string]bool{}
sortedPromotions := []string{}
for i in items {
for r in i.Rows {
for p in r.Promotions {
if riepilogo[p.Name] == nil {
riepilogo[p.Name] = map[string]bool{}
sortedPromotions = append(sortedPromotions, p.Name)
}
riepilogo[p.Name][string(_extract(i.Name, ``))] = true
}
}
for p in i.Promotions {
if riepilogo[p.Name] == nil {
riepilogo[p.Name] = map[string]bool{}
sortedPromotions = append(sortedPromotions, p.Name)
}
riepilogo[p.Name][string(_extract(i.Name, ``))] = true
}
}
%%}
{% if len(sortedPromotions) > 0 %}
<div class="promotions-recap">
<div class="promotions-recap-title">{{ translate("Products on offer") }}</div>
{% for _, promo:= range sortedPromotions %}
{% names := riepilogo[promo] %}
<div class="promotion-name">{{ promo }}</div>
{% for name := range names %}
<div class="promotion-product">{{ name }}</div>
{% end for %}
{% end for %}
</div>
{% end if %}
</div>
Sostituire il contenuto del file "checkout-cart.html" con il seguente codice:
<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 }}
{% for p in item.Promotions %}
<div class="promotion">{{ p.Name }}</div>
{% end for %}
{% if item.InfoForRequests %}
<div class="requests">
<label>{{ item.InfoForRequests }}</label>
<div>{{ item.Requests }}</div>
</div>
{% end if %}
</td>
<td class="quantity-price">
<div>
<div class="quantity">{{ item.Quantity }}</div>
<span class="price">
{% if item.ListPrice %}
<span class="list-price">{{ item.ListPrice }}</span>
{% end if %}
{% if item.Price %}
<div class="sell-price">{{ item.Price }} × {{ item.Quantity }}</div>
{% end if %}
{% if item.Discount %}
<div class="discount">
{{ translate("Discount") }}
{{ item.Discount }}
</div>
{% end if %}
</span>
</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>
{% for row in item.Rows %}
<tr class="row">
<td></td>
<td class="row-details">
{% for p in row.Promotions %}
<div>{{ p.Name }}</div>
{% end for%}
</td>
<td class="row-price">
<div class="row-list-price">{{ row.ListPrice }}</div>
<div class="row-sell-price">{{ row.Price }} x {{ row.Quantity }}</div>
{% if row.Discount %}
<div class="row-discount">
{{ translate("Discount") }}
{{ row.Discount }}
</div>
{% end if %}
</td>
<td></td>
</tr>
{% end for %}
{% 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>
Nel file "partials/minicart.html" dopo la riga
<div class="name"><!-- .show name --><!-- .end --></div> <span class="promotion"><!-- .show promotionsMessage --><!-- .end --></span>Aggiungere in fondo al file "css/base.css" il seguente codice:
#design-mini-cart ul.items .properties .promotion { font-size: 12px; }
.cart-html .items tbody tr.row { border-top: 0; }
.cart-html .items td.details .promotion { font-size: 13px; padding-top: 5px; }
.cart-html .items td.price { text-wrap: nowrap }
.cart-html .items td.price .list-price { font-size: 13px; opacity: .7; text-decoration: line-through; }
.cart-html .items td.price .discount { color: var(--color-primary); font-size: 13px; }
.cart-html .items tr.row { font-size: 13px; }
.cart-html .items tr.row .row-price { white-space: nowrap; text-align: right; }
.cart-html .items tr.row .row-sell-price { font-size: 14px; }
.cart-html .items tr.row .row-list-price { text-decoration: line-through; opacity: .8; }
.cart-html .items tr.row .row-discount { color:var(--color-primary); }
.cart-html .items tr.row .row-details { padding-left: 50px; }
.cart-html .items tr.row .row-quantity { padding-left: 35px; }
.cart-html .items tr.row td { padding-bottom: 5px; padding-top: 5px; }
.cart-html .coupon-recap { border-top: 1px dotted var(--border-strong); column-gap: 30px; display: flex; flex-flow: row wrap; margin-top: 20px; padding: 20px 10px 20px 10px; row-gap: 10px; }
.cart-html .coupon { max-width: 500px; border-top: none; margin-top: 0px; padding: 0px; }
.cart-html .promotions-recap { border: 1px solid var(--border-strong); display: block; font-size: 13px; margin-bottom: 0; padding: 10px 20px; text-align: left; }
.cart-html .promotions-recap .promotions-recap-title { font-size: 16px; font-weight: 600; }
.cart-html .promotions-recap .promotion-name { font-weight: 600; }
.cart-html .promotions-recap .promotion-product { font-size: 13px; }
.checkout .items tr.row { font-size: 13px; }
.checkout .items td.details .promotion { font-size: 12px; padding-top: 5px; }
.checkout .items td.quantity-price { white-space: nowrap; text-align: right; }
.checkout .items td.quantity-price .quantity { display: none; }
.checkout .items td.quantity-price .list-price { font-size: 13px; opacity: .8; text-decoration: line-through; }
.checkout .items td.quantity-price .discount { color: var(--color-primary); font-size: 13px; }
.checkout .items td.row-price { white-space: nowrap; }
.checkout .items td.row-price .row-list-price { text-decoration: line-through; opacity: .8; }
.checkout .items td.row-price .row-discount { color: var(--color-primary); }
.checkout .items tbody tr:first-child td, .checkout .items tbody tr.row td { border-top: 0; }
.checkout .items tbody tr td { border-top: 1px solid var(--border); }
.checkout .items tbody tr { border-top: none; }
Nel file "css/mobile.css" nella sezione
@media screen and (max-width:767px) { ... }
.checkout .items td.details { padding-bottom: 50px; vertical-align: middle; }
.checkout .items td.quantity-price { height: 50px; line-height: 50px; padding: 0; position: relative; }
.checkout .items td.quantity-price div { bottom: 0; position: absolute; right: 100px; }
.checkout .items td.total-price { height: 50px; line-height: 50px; padding: 0; position: relative; }
.checkout .items td.total-price div { bottom: 0; position: absolute; right: 10px; }
.checkout .items td.quantity-price .price { display: none; }
.checkout .items td.quantity-price .quantity { display: block; }
.cart-html .items td.row-quantity { padding-left: 10px!important; }
.cart-html .items tr.row .row-details { padding-left: 20px; }
Nel file "css/mobile.css" aggiungere in fondo il seguente codice:
@media screen and (max-width: 415px) {
.cart-html .items td.image img { min-width: 50px; }
.cart-html .items tr.row .row-price { white-space: normal; }
.checkout .items td.image { width: 25%; min-width: 50px; }
.checkout #checkout-cart-slider td.image img { max-width: 100%; min-width: 50px; }
.checkout .items td.row-price { white-space: normal; }
}
Traduzioni"template.ini" delle varie lingue, potete trovarli nelle sottocartelle della cartella "languages" del template.
Products on offer=Products on offerProducts on offer=Productos en ofertaProducts on offer=Produits à prix réduitiveProducts on offer=Prodotti in offertaNel file "cart.html" sostituire il blocco
<div class="items"> ... </div>
<div class="items">
<table>
<thead>
<tr>
<th class="image"></th>
<th class="details"></th>
<th class="price"></th>
<th class="quantity">{{ translate("Cart quantity") }}</th>
<th></th>
<th class="total-price">{{ translate("Cart total price") }}</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td class="image">{{ item.Image }}</td>
<td class="details">
<div class="name">{{ item.Name }}</div>
{{ item.Warning }}
{% for p in item.Promotions %}
<div class="promotion">{{ p.Name }}</div>
{% end for %}
</td>
<td class="price">
{% if len(item.Prices) > 1 %}
<div>{{ item.Price }}</div>
<div class="opener show-tier-prices" data-design-open="tier-prices">{{ translate("More you buy, more you save") }}</div>
<div id="tier-prices">
{{ TierPrices(item.Prices) }}
</div>
{% else %}
<span class="list-price">{{ item.ListPrice }}</span>
<span class="sell-price">{{ item.Price }}</span>
{% if item.Discount %}
<div class="discount">
{{ translate("Discount") }}
{{ item.Discount }}
</div>
{% end if %}
{% end if %}
</td>
<td class="quantity design-cart-quantity">
<div>
{{ item.Quantity }}
{{ item.ButtonRemove }}
{{ item.ButtonUpdate }}
</div>
</td>
<td></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>
{% for row in item.Rows %}
<tr class="row">
<td></td>
<td class="row-details">
{% for p in row.Promotions %}
<div>{{ p.Name }}</div>
{% end for%}
</td>
<td class="row-price">
<span class="row-list-price">{{ row.ListPrice }}</span>
<span class="row-sell-price">{{ row.Price }}</span>
{% if row.Discount %}
<div class="row-discount">
{{ translate("Discount") }}
{{ row.Discount }}
</div>
{% end if %}
</td>
<td class="row-quantity">{{ row.Quantity }}</td>
<td ></td>
<td></td>
</tr>
{% end for %}
{% if item.InfoForRequests %}
<tr class="requests">
<td></td>
<td>
<label>{{ item.InfoForRequests }}</label>
<div>{{ item.Requests }}</div>
</td>
<td colspan="4"></td>
</tr>
{% end if %}
{% end for %}
</tbody>
<tfoot>
{% if not toQuote %}
{% for discount in discounts %}
<tr class="discount">
<td colspan="5"><label>{{ translate("Cart discount") }}:</label></td>
<td>{{ discount }}</td>
</tr>
{% end for %}
<tr class="total-cost">
<td colspan="5"><label>{{ translate("Cart total cost") }}:</label></td>
<td>{{ subtotal }}</td>
</tr>
<tr class="shipping">
<td colspan="5">
<label for="design-cart-shipping">{{ translate("Cart shipping") }}:</label>
{{ shipping }}
</td>
<td>{{ shippingCost }}</td>
</tr>
<tr class="payment">
<td colspan="5">
<label for="design-cart-payment">{{ translate("Cart payment") }}:</label>
{{ payment }}
</td>
<td>{{ paymentCost }}</td>
</tr>
{% if taxesAreExcluded %}
<tr class="taxes">
<td colspan="5"><label>{{ translate("Cart taxes") }}:</label></td>
<td>{{ taxAmount }}</td>
</tr>
{% end if %}
{% end if %}
<tr class="total">
<td colspan="5"><label>{{ translate("Cart total") }}:</label></td>
<td>
{% if toQuote %}
<span class="to-quote">{{ translate("Price to quote") }}</span>
{% else %}
{{ total.Gross }}
{% end if %}
</td>
</tr>
</tfoot>
</table>
</div>
Nel file "cart.html" sostituire il blocco
{% if buttonApplyCoupon %} ... {% end if %}
<div class="coupon-recap">
{% if buttonApplyCoupon %}
<form action="cart.html" method="post">
<div class="coupon">
<label>{{ translate("Enter coupon") }}:</label>
<div class="apply">
<div>{{ coupon }}</div>
<div>{{ buttonApplyCoupon }}</div>
</div>
</div>
</form>
{% end if %}
{%%
riepilogo := map[string]map[string]bool{}
sortedPromotions := []string{}
for i in items {
for r in i.Rows {
for p in r.Promotions {
if riepilogo[p.Name] == nil {
riepilogo[p.Name] = map[string]bool{}
sortedPromotions = append(sortedPromotions, p.Name)
}
riepilogo[p.Name][string(_extract(i.Name, ``))] = true
}
}
for p in i.Promotions {
if riepilogo[p.Name] == nil {
riepilogo[p.Name] = map[string]bool{}
sortedPromotions = append(sortedPromotions, p.Name)
}
riepilogo[p.Name][string(_extract(i.Name, ``))] = true
}
}
%%}
{% if len(sortedPromotions) > 0 %}
<div class="promotions-recap">
<div class="promotions-recap-title">{{ translate("Products on offer") }}</div>
{% for _, promo:= range sortedPromotions %}
{% names := riepilogo[promo] %}
<div class="promotion-name">{{ promo }}</div>
{% for name := range names %}
<div class="promotion-product">{{ name }}</div>
{% end for %}
{% end for %}
</div>
{% end if %}
</div>
Sostituire il contenuto del file "checkout-cart.html" con il seguente codice:
<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 }}
{% for p in item.Promotions %}
<div class="promotion">{{ p.Name }}</div>
{% end for %}
{% if item.InfoForRequests %}
<div class="requests">
<label>{{ item.InfoForRequests }}</label>
<div>{{ item.Requests }}</div>
</div>
{% end if %}
</td>
<td class="quantity-price">
<div>
<div class="quantity">{{ item.Quantity }}</div>
<span class="price">
{% if item.ListPrice %}
<span class="list-price">{{ item.ListPrice }}</span>
{% end if %}
{% if item.Price %}
<div class="sell-price">{{ item.Price }} × {{ item.Quantity }}</div>
{% end if %}
{% if item.Discount %}
<div class="discount">
{{ translate("Discount") }}
{{ item.Discount }}
</div>
{% end if %}
</span>
</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>
{% for row in item.Rows %}
<tr class="row">
<td></td>
<td class="row-details">
{% for p in row.Promotions %}
<div>{{ p.Name }}</div>
{% end for%}
</td>
<td class="row-price">
<div class="row-list-price">{{ row.ListPrice }}</div>
<div class="row-sell-price">{{ row.Price }} x {{ row.Quantity }}</div>
{% if row.Discount %}
<div class="row-discount">
{{ translate("Discount") }}
{{ row.Discount }}
</div>
{% end if %}
</td>
<td></td>
</tr>
{% end for %}
{% 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>
Nel file "partials/minicart.html" dopo la riga
<div class="name"><!-- .show name --><!-- .end --></div> <span class="promotion"><!-- .show promotionsMessage --><!-- .end --></span>Aggiungere in fondo al file "css/base.css" il seguente codice:
#design-mini-cart ul.items .properties .promotion { font-size: 11px; }
.cart-html .items tbody tr.row { border-top: 0; }
.cart-html .items td.details .promotion { font-size: 12px; padding-top: 5px; }
.cart-html .items td.price { text-wrap: nowrap }
.cart-html .items td.price .list-price { font-size: 13px; opacity: .7; text-decoration: line-through; }
.cart-html .items td.price .discount { color: var(--color-primary); font-size: 13px; }
.cart-html .items tr.row { font-size: 13px; }
.cart-html .items tr.row .row-price { text-wrap: nowrap; text-align: right; }
.cart-html .items tr.row .row-sell-price { font-size: 14px; }
.cart-html .items tr.row .row-list-price { text-decoration: line-through; opacity: .8; }
.cart-html .items tr.row .row-discount { color:var(--color-primary); }
.cart-html .items tr.row .row-details { font-size: 12px; padding-left: 50px; }
.cart-html .items tr.row .row-quantity { padding-left: 35px; }
.cart-html .items tr.row td { padding-bottom: 5px; padding-top: 5px; }
.cart-html .coupon-recap { border-top: 1px dotted var(--border); column-gap: 30px; display: flex; flex-flow: row wrap; margin-top: 20px; padding: 20px 10px 20px 10px; row-gap: 10px; }
.cart-html .coupon { max-width: 500px; border-top: none; margin-top: 0px; padding: 0px;}
.checkout .items tr.row { font-size: 13px; }
.checkout .items td.details .promotion { font-size: 12px; padding-top: 5px; }
.checkout .items td.quantity-price { text-align: right; white-space: nowrap; }
.checkout .items td.quantity-price .quantity { display: none; }
.checkout .items td.quantity-price .list-price { font-size: 13px; opacity: .8; text-decoration: line-through; }
.checkout .items td.quantity-price .discount { color: var(--color-primary); font-size: 13px; }
.checkout .items td.row-price { text-wrap: nowrap; }
.checkout .items td.row-price .row-list-price { text-decoration: line-through; opacity: .8; }
.checkout .items td.row-price .row-discount { color: var(--color-primary); }
.checkout .items tbody tr { border-top: none }
.checkout .items tbody tr:first-child td, .checkout .items tbody tr.row td { border-top: 0; }
.checkout .items tbody tr td { border-top: 1px solid var(--border); }
Nel file "css/mobile.css" nella sezione
@media screen and (max-width:767px) { ... }
.checkout .items td.details { padding-bottom: 50px; vertical-align: middle; }
.checkout .items td.quantity-price { height: 50px; line-height: 50px; padding: 0; position: relative; }
.checkout .items td.quantity-price div { bottom: 0; position: absolute; right: 100px; }
.checkout .items td.total-price { height: 50px; line-height: 50px; padding: 0; position: relative; }
.checkout .items td.total-price div { bottom: 0; position: absolute; right: 10px; }
.checkout .items tr.row td { border-top: 0; }
.checkout .items td.quantity-price .price { display: none; }
.checkout .items td.quantity-price .quantity { display: block; }
.cart-html .items td.row-quantity { padding-left: 10px!important; }
.cart-html .items tr.row .row-details { padding-left: 20px; }
Nel file "css/mobile.css" aggiungere in fondo il seguente codice:
@media screen and (max-width: 415px) {
.cart-html .items td.image img { min-width: 50px; }
.cart-html .items tr.row .row-price { white-space: normal; }
.checkout .items td.image { width: 25%; min-width: 50px; }
.checkout #checkout-cart-slider td.image img { max-width: 100%; min-width: 50px; }
.checkout .items td.row-price { white-space: normal; }
}
Traduzioni"template.ini" delle varie lingue, potete trovarli nelle sottocartelle della cartella "languages" del template.
Products on offer=Products on offerProducts on offer=Productos en ofertaProducts on offer=Produits à prix réduitiveProducts on offer=Prodotti in offertaNel file "cart.html" sostituire il blocco
<div class="items"> ... </div>
<div class="items">
<table>
<thead>
<tr>
<th class="image"></th>
<th class="details"></th>
<th class="price"></th>
<th class="quantity">{{ translate("Cart quantity") }}</th>
<th></th>
<th class="total-price">{{ translate("Cart total price") }}</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td class="image">{{ item.Image }}</td>
<td class="details">
<div class="name">{{ item.Name }}</div>
{{ item.Warning }}
{% for p in item.Promotions %}
<div class="promotion">{{ p.Name }}</div>
{% end for %}
</td>
<td class="price">
<span class="list-price">{{ item.ListPrice }}</span>
<span class="sell-price">{{ item.Price }}</span>
{% if item.Discount %}
<div class="discount">
{{ translate("Discount") }}
{{ item.Discount }}
</div>
{% end if %}
</td>
<td class="quantity design-cart-quantity">
<div>
{{ item.Quantity }}
{{ item.ButtonRemove }}
{{ item.ButtonUpdate }}
</div>
</td>
<td></td>
<td class="total-price">
{% if item.ToQuote %}<div class="to-quote">{{ translate("Price to quote") }}</div>{% end %}
{% if not item.ToQuote %}<div>{{ item.TotalPrice }}</div>{% end %}
</td>
</tr>
{% for row in item.Rows %}
<tr class="row">
<td></td>
<td class="row-details">
{% for p in row.Promotions %}
<div>{{ p.Name }}</div>
{% end for%}
</td>
<td class="row-price">
<span class="row-list-price">{{ row.ListPrice }}</span>
<span class="row-sell-price">{{ row.Price }}</span>
{% if row.Discount %}
<div class="row-discount">
{{ translate("Discount") }}
{{ row.Discount }}
</div>
{% end if %}
</td>
<td class="row-quantity">{{ row.Quantity }}</td>
<td></td>
<td></td>
</tr>
{% end for %}
{% if item.InfoForRequests %}
<tr class="requests">
<td></td>
<td>
<label>{{ item.InfoForRequests }}</label>
<div>{{ item.Requests }}</div>
</td>
<td colspan="4"></td>
</tr>
{% end if %}
{% end for %}
</tbody>
<tfoot>
{% if not toQuote %}
{% for discount in discounts %}
<tr class="discount">
<td colspan="5"><label>{{ translate("Cart discount") }}:</label></td>
<td>{{ discount }}</td>
</tr>
{% end for %}
<tr class="total-cost">
<td colspan="5"><label>{{ translate("Cart total cost") }}:</label></td>
<td>{{ subtotal }}</td>
</tr>
<tr class="shipping">
<td colspan="5">
<label for="design-cart-shipping">{{ translate("Cart shipping") }}:</label>
{{ shipping }}
</td>
<td>{{ shippingCost }}</td>
</tr>
<tr class="payment">
<td colspan="5">
<label for="design-cart-payment">{{ translate("Cart payment") }}:</label>
{{ payment }}
</td>
<td>{{ paymentCost }}</td>
</tr>
{% if taxesAreExcluded %}
<tr class="taxes">
<td colspan="5"><label>{{ translate("Cart taxes") }}:</label></td>
<td>{{ taxAmount }}</td>
</tr>
{% end if %}
{% end if %}
<tr class="total">
<td colspan="5"><label>{{ translate("Cart total") }}:</label></td>
<td>
{% if toQuote %}<span class="to-quote">{{ translate("Price to quote") }}</span>{% end %}
{% if not toQuote %}{{ total.Gross }}{% end if %}
</td>
</tr>
</tfoot>
</table>
</div>
Nel file "cart.html" sostituire il blocco
{% if buttonApplyCoupon %} ... {% end if %}
<div class="coupon-recap">
{% if buttonApplyCoupon %}
<form action="cart.html" method="post">
<div class="coupon">
<label>{{ translate("Enter coupon") }}:</label>
<div class="apply">
<div>{{ coupon }}</div>
<div>{{ buttonApplyCoupon }}</div>
</div>
</div>
</form>
{% end if %}
{%%
riepilogo := map[string]map[string]bool{}
sortedPromotions := []string{}
for i in items {
for r in i.Rows {
for p in r.Promotions {
if riepilogo[p.Name] == nil {
riepilogo[p.Name] = map[string]bool{}
sortedPromotions = append(sortedPromotions, p.Name)
}
riepilogo[p.Name][string(_extract(i.Name, ``))] = true
}
}
for p in i.Promotions {
if riepilogo[p.Name] == nil {
riepilogo[p.Name] = map[string]bool{}
sortedPromotions = append(sortedPromotions, p.Name)
}
riepilogo[p.Name][string(_extract(i.Name, ``))] = true
}
}
%%}
{% if len(sortedPromotions) > 0 %}
<div class="promotions-recap">
<div class="promotions-recap-title">{{ translate("Products on offer") }}</div>
{% for _, promo:= range sortedPromotions %}
{% names := riepilogo[promo] %}
<div class="promotion-name">{{ promo }}</div>
{% for name := range names %}
<div class="promotion-product">{{ name }}</div>
{% end for %}
{% end for %}
</div>
{% end if %}
</div>
Sostituire il contenuto del file "checkout-cart.html" con il seguente codice:
<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 }}
{% for p in item.Promotions %}
<div class="promotion">{{ p.Name }}</div>
{% end for %}
{% if item.InfoForRequests %}
<div class="requests">
<label>{{ item.InfoForRequests }}</label>
<div>{{ item.Requests }}</div>
</div>
{% end if %}
</td>
<td class="quantity-price">
<div>
<div class="quantity">{{ item.Quantity }}</div>
<span class="price">
{% if item.ListPrice %}
<span class="list-price">{{ item.ListPrice }}</span>
{% end if %}
{% if item.Price %}
<div class="sell-price">{{ item.Price }} × {{ item.Quantity }}</div>
{% end if %}
{% if item.Discount %}
<div class="discount">
{{ translate("Discount") }}
{{ item.Discount }}
</div>
{% end if %}
</span>
</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>
{% for row in item.Rows %}
<tr class="row">
<td></td>
<td class="row-details">
{% for p in row.Promotions %}
<div>{{ p.Name }}</div>
{% end for%}
</td>
<td class="row-price">
<div class="row-list-price">{{ row.ListPrice }}</div>
<div class="row-sell-price">{{ row.Price }} x {{ row.Quantity }}</div>
{% if row.Discount %}
<div class="row-discount">
{{ translate("Discount") }}
{{ row.Discount }}
</div>
{% end if %}
</td>
<td></td>
</tr>
{% end for %}
{% 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>
Nel file "partials/minicart.html" dopo la riga
<div class="name"><!-- .show name --><!-- .end --></div> <span class="promotion"><!-- .show promotionsMessage --><!-- .end --></span>Aggiungere in fondo al file "css/base.css" il seguente codice:
#design-mini-cart ul.items .properties .promotion { font-size: 11px; }
.cart-html .items tbody tr.row { border-top: 0; }
.cart-html .items td.details .promotion { font-size: 12px; padding-top: 5px; }
.cart-html .items td.price { text-wrap: nowrap }
.cart-html .items td.price .list-price { font-size: 13px; opacity: .7; text-decoration: line-through; }
.cart-html .items td.price .discount { color: #952C2C; font-size: 13px; }
.cart-html .items tr.row { font-size: 13px; }
.cart-html .items tr.row .row-price { white-space: nowrap; text-align: right; }
.cart-html .items tr.row .row-sell-price { font-size: 14px; }
.cart-html .items tr.row .row-list-price { text-decoration: line-through; opacity: .8; }
.cart-html .items tr.row .row-discount { color:#952C2C; }
.cart-html .items tr.row .row-details { font-size: 12px; padding-left: 50px; }
.cart-html .items tr.row .row-quantity { padding-left: 35px; }
.cart-html .items tr.row td { padding-bottom: 5px; padding-top: 5px; }
.cart-html .coupon-recap { border-top: 1px dotted #EEE; column-gap: 30px; display: flex; flex-flow: row wrap; margin-top: 20px; padding: 20px 10px 20px 10px; row-gap: 10px; }
.cart-html .coupon { max-width: 500px; border-top: none; margin-top: 0; padding: 0; }
.cart-html .promotions-recap { border: 1px solid #EEE; display: block; font-size: 13px; margin-bottom: 0; padding: 10px 20px; text-align: left; }
.cart-html .promotions-recap .promotions-recap-title { font-size: 16px; font-weight: 600; }
.cart-html .promotions-recap .promotion-name { font-weight: 600; }
.cart-html .promotions-recap .promotion-product { font-size: 13px; }
.checkout .items tr.row { font-size: 13px; }
.checkout .items td.details .promotion { font-size: 12px; padding-top: 5px; }
.checkout .items td.quantity-price { white-space: nowrap; text-align: left; }
.checkout .items td.quantity-price .quantity { display: none; }
.checkout .items td.quantity-price .list-price { font-size: 13px; opacity: .8; text-decoration: line-through; }
.checkout .items td.quantity-price .discount { color: #952C2C; font-size: 13px; }
.checkout .items td.row-price { white-space: nowrap; }
.checkout .items td.row-price .row-list-price { text-decoration: line-through; opacity: .8; }
.checkout .items td.row-price .row-discount { color: #952C2C; }
.checkout .items tbody tr { border-top: none; }
.checkout .items tbody tr:first-child td, .checkout .items tbody tr.row td { border-top: 0; }
.checkout .items tbody tr td { border-top: 1px solid #EEE; }
Nel file "css/mobile.css" nella sezione
@media screen and (max-width:767px) { ... }
.checkout .items td.details { padding-bottom: 50px; vertical-align: middle; }
.checkout .items td.quantity-price { height: 50px; line-height: 50px; padding: 0; position: relative; }
.checkout .items td.quantity-price div { bottom: 0; position: absolute; right: 100px; }
.checkout .items td.total-price { height: 50px; line-height: 50px; padding: 0; position: relative; }
.checkout .items td.total-price div { bottom: 0; position: absolute; right: 10px; }
.checkout .items tr.row td { border-top: 0; }
.checkout .items td.quantity-price .price { display: none; }
.checkout .items td.quantity-price .quantity { display: block; }
.cart-html .items td.row-quantity { padding-left: 10px!important; }
.cart-html .items tr.row .row-details { padding-left: 20px; }Nel file "css/mobile.css" nella sezione
@media screen and (max-width:415px) { ... }
.cart-html .items tr.row .row-price { white-space: normal; }
.checkout .items td.image { width: 25%; }
.checkout #checkout-cart-slider td.image img { max-width: 100%; min-width: 50px; }
.checkout .items td.row-price { white-space: normal; }
Traduzioni"template.ini" delle varie lingue, potete trovarli nelle sottocartelle della cartella "languages" del template.
Products on offer=Products on offerProducts on offer=Productos en ofertaProducts on offer=Produits à prix réduitiveProducts on offer=Prodotti in offertaNel file "cart.html" sostituire il blocco
<div class="items"> ... </div>
<div class="items">
<table>
<thead>
<tr>
<th class="image"></th>
<th class="details"></th>
<th class="price"></th>
<th class="quantity">{{ translate("Cart quantity") }}</th>
<th></th>
<th class="total-price">{{ translate("Cart total price") }}</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td class="image">{{ item.Image }}</td>
<td class="details">
<div class="name">{{ item.Name }}</div>
{{ item.Warning }}
{% for p in item.Promotions %}
<div class="promotion">{{ p.Name }}</div>
{% end for %}
</td>
<td class="price">
<span class="list-price">{{ item.ListPrice }}</span>
<span class="sell-price">{{ item.Price }}</span>
{% if item.Discount %}
<div class="discount">
{{ translate("Discount") }}
{{ item.Discount }}
</div>
{% end if %}
</td>
<td class="quantity design-cart-quantity">
<div>
{{ item.Quantity }}
{{ item.ButtonRemove }}
{{ item.ButtonUpdate }}
</div>
</td>
<td></td>
<td class="total-price">
{% if item.ToQuote %}<div class="to-quote">{{ translate("Price to quote") }}</div>{% end %}
{% if not item.ToQuote %}<div>{{ item.TotalPrice }}</div>{% end %}
</td>
</tr>
{% for row in item.Rows %}
<tr class="row">
<td></td>
<td class="row-details">
{% for p in row.Promotions %}
<div>{{ p.Name }}</div>
{% end for%}
</td>
<td class="row-price">
<span class="row-list-price">{{ row.ListPrice }}</span>
<span class="row-sell-price">{{ row.Price }}</span>
{% if row.Discount %}
<div class="row-discount">
{{ translate("Discount") }}
{{ row.Discount }}
</div>
{% end if %}
</td>
<td class="row-quantity">{{ row.Quantity }}</td>
<td></td>
<td></td>
</tr>
{% end for %}
{% if item.InfoForRequests %}
<tr class="requests">
<td></td>
<td>
<label>{{ item.InfoForRequests }}</label>
<div>{{ item.Requests }}</div>
</td>
<td colspan="4"></td>
</tr>
{% end if %}
{% end for %}
</tbody>
<tfoot>
{% if not toQuote %}
{% for discount in discounts %}
<tr class="discount">
<td colspan="5"><label>{{ translate("Cart discount") }}:</label></td>
<td>{{ discount }}</td>
</tr>
{% end for %}
<tr class="total-cost">
<td colspan="5"><label>{{ translate("Cart total cost") }}:</label></td>
<td>{{ subtotal }}</td>
</tr>
<tr class="shipping">
<td colspan="5">
<label for="design-cart-shipping">{{ translate("Cart shipping") }}:</label>
{{ shipping }}
</td>
<td>{{ shippingCost }}</td>
</tr>
<tr class="payment">
<td colspan="5">
<label for="design-cart-payment">{{ translate("Cart payment") }}:</label>
{{ payment }}
</td>
<td>{{ paymentCost }}</td>
</tr>
{% if taxesAreExcluded %}
<tr class="taxes">
<td colspan="5"><label>{{ translate("Cart taxes") }}:</label></td>
<td>{{ taxAmount }}</td>
</tr>
{% end if %}
{% end if %}
<tr class="total">
<td colspan="5"><label>{{ translate("Cart total") }}:</label></td>
<td>
{% if toQuote %}<span class="to-quote">{{ translate("Price to quote") }}</span>{% end %}
{% if not toQuote %}{{ total.Gross }}{% end if %}
</td>
</tr>
</tfoot>
</table>
</div>
Nel file "cart.html" sostituire il blocco
{% if buttonApplyCoupon %} ... {% end if %}
<div class="coupon-recap">
{% if buttonApplyCoupon %}
<form action="cart.html" method="post">
<div class="coupon">
<label>{{ translate("Enter coupon") }}:</label>
<div class="apply">
<div>{{ coupon }}</div>
<div>{{ buttonApplyCoupon }}</div>
</div>
</div>
</form>
{% end if %}
{%%
riepilogo := map[string]map[string]bool{}
sortedPromotions := []string{}
for i in items {
for r in i.Rows {
for p in r.Promotions {
if riepilogo[p.Name] == nil {
riepilogo[p.Name] = map[string]bool{}
sortedPromotions = append(sortedPromotions, p.Name)
}
riepilogo[p.Name][string(_extract(i.Name, ``))] = true
}
}
for p in i.Promotions {
if riepilogo[p.Name] == nil {
riepilogo[p.Name] = map[string]bool{}
sortedPromotions = append(sortedPromotions, p.Name)
}
riepilogo[p.Name][string(_extract(i.Name, ``))] = true
}
}
%%}
{% if len(sortedPromotions) > 0 %}
<div class="promotions-recap">
<div class="promotions-recap-title">{{ translate("Products on offer") }}</div>
{% for _, promo:= range sortedPromotions %}
{% names := riepilogo[promo] %}
<div class="promotion-name">{{ promo }}</div>
{% for name := range names %}
<div class="promotion-product">{{ name }}</div>
{% end for %}
{% end for %}
</div>
{% end if %}
</div>
Sostituire il contenuto del file "checkout-cart.html" con il seguente codice:
<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 }}
{% for p in item.Promotions %}
<div class="promotion">{{ p.Name }}</div>
{% end for %}
{% if item.InfoForRequests %}
<div class="requests">
<label>{{ item.InfoForRequests }}</label>
<div>{{ item.Requests }}</div>
</div>
{% end if %}
</td>
<td class="quantity-price">
<div>
<div class="quantity">{{ item.Quantity }}</div>
<span class="price">
{% if item.ListPrice %}
<span class="list-price">{{ item.ListPrice }}</span>
{% end if %}
{% if item.Price %}
<div class="sell-price">{{ item.Price }} × {{ item.Quantity }}</div>
{% end if %}
{% if item.Discount %}
<div class="discount">
{{ translate("Discount") }}
{{ item.Discount }}
</div>
{% end if %}
</span>
</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>
{% for row in item.Rows %}
<tr class="row">
<td></td>
<td class="row-details">
{% for p in row.Promotions %}
<div>{{ p.Name }}</div>
{% end for%}
</td>
<td class="row-price">
<div class="row-list-price">{{ row.ListPrice }}</div>
<div class="row-sell-price">{{ row.Price }} x {{ row.Quantity }}</div>
{% if row.Discount %}
<div class="row-discount">
{{ translate("Discount") }}
{{ row.Discount }}
</div>
{% end if %}
</td>
<td></td>
</tr>
{% end for %}
{% 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>
Nel file "partials/minicart.html" dopo la riga
<div class="name"><!-- .show name --><!-- .end --></div> <span class="promotion"><!-- .show promotionsMessage --><!-- .end --></span>Aggiungere in fondo al file "css/base.css" il seguente codice:
#design-mini-cart ul.items .properties .promotion { font-size: 11px; }
.cart-html .items tbody tr.row { border-top: 0; }
.cart-html .items td.details .promotion { font-size: 12px; padding-top: 5px; }
.cart-html .items td.price { text-wrap: nowrap }
.cart-html .items td.price .list-price { font-size: 13px; opacity: .7; text-decoration: line-through; }
.cart-html .items td.price .discount { color: #952C2C; font-size: 13px; }
.cart-html .items tr.row { font-size: 13px; }
.cart-html .items tr.row .row-price { white-space: nowrap; text-align: right; }
.cart-html .items tr.row .row-sell-price { font-size: 14px; }
.cart-html .items tr.row .row-list-price { text-decoration: line-through; opacity: .8; }
.cart-html .items tr.row .row-discount { color:#952C2C; }
.cart-html .items tr.row .row-details { font-size: 12px; padding-left: 50px; }
.cart-html .items tr.row .row-quantity { padding-left: 35px; }
.cart-html .items tr.row td { padding-bottom: 5px; padding-top: 5px; }
.cart-html .coupon-recap { border-top: 1px dotted #EEE; column-gap: 30px; display: flex; flex-flow: row wrap; margin-top: 20px; padding: 20px 10px 20px 10px; row-gap: 10px; }
.cart-html .coupon { max-width: 500px; border-top: none; margin-top: 0; padding: 0; }
.cart-html .promotions-recap { border: 1px solid #EEE; display: block; font-size: 13px; margin-bottom: 0; padding: 10px 20px; text-align: left; }
.cart-html .promotions-recap .promotions-recap-title { font-size: 16px; font-weight: 600; }
.cart-html .promotions-recap .promotion-name { font-weight: 600; }
.cart-html .promotions-recap .promotion-product { font-size: 13px; }
.checkout .items tr.row { font-size: 13px; }
.checkout .items td.details .promotion { font-size: 12px; padding-top: 5px; }
.checkout .items td.quantity-price { white-space: nowrap; text-align: left; }
.checkout .items td.quantity-price .quantity { display: none; }
.checkout .items td.quantity-price .list-price { font-size: 13px; opacity: .8; text-decoration: line-through; }
.checkout .items td.quantity-price .discount { color: #952C2C; font-size: 13px; }
.checkout .items td.row-price { white-space: nowrap; }
.checkout .items td.row-price .row-list-price { text-decoration: line-through; opacity: .8; }
.checkout .items td.row-price .row-discount { color: #952C2C; }
.checkout .items tbody tr { border-top: none; }
.checkout .items tbody tr:first-child td, .checkout .items tbody tr.row td { border-top: 0; }
.checkout .items tbody tr td { border-top: 1px solid #EEE; }
Nel file "css/mobile.css" nella sezione
@media screen and (max-width:767px) { ... }
.checkout .items td.details { padding-bottom: 50px; vertical-align: middle; }
.checkout .items td.quantity-price { height: 50px; line-height: 50px; padding: 0; position: relative; }
.checkout .items td.quantity-price div { bottom: 0; position: absolute; right: 100px; }
.checkout .items td.total-price { height: 50px; line-height: 50px; padding: 0; position: relative; }
.checkout .items td.total-price div { bottom: 0; position: absolute; right: 10px; }
.checkout .items tr.row td { border-top: 0; }
.checkout .items td.quantity-price .price { display: none; }
.checkout .items td.quantity-price .quantity { display: block; }
.cart-html .items td.row-quantity { padding-left: 10px!important; }
.cart-html .items tr.row .row-details { padding-left: 20px; }Nel file "css/mobile.css" nella sezione
@media screen and (max-width:415px) { ... }
.cart-html .items tr.row .row-price { white-space: normal; }
.checkout .items td.image { width: 25%; }
.checkout #checkout-cart-slider td.image img { max-width: 100%; min-width: 50px; }
.checkout .items td.row-price { white-space: normal; }
Traduzioni"template.ini" delle varie lingue, potete trovarli nelle sottocartelle della cartella "languages" del template.
Products on offer=Products on offerProducts on offer=Productos en ofertaProducts on offer=Produits à prix réduitiveProducts on offer=Prodotti in offertaNel file "cart.html" sostituire il blocco
<form action="cart" method="post">...</form>
<form action="cart" method="post">
{% if len(items) > 0 %}
<div class="table">
<div class="head">
<div class="product">{{ translate("Product") }}</div>
<div class="price">{{ translate("Price") }}</div>
<div class="quantity">{{ translate("Quantity") }}</div>
<div class="total">{{ translate("Total") }}</div>
</div>
<div class="body">
{% for item in items %}
<div class="row">
<div class="item-image">{{ item.Image }}</div>
<div class="item-name">
<div>{{ item.Name }}</div>
{{ item.Warning }}
{% for p in item.Promotions %}
<div class="item-promotion">{{ p.Name }}</div>
{% end for %}
</div>
<div class="{% if item.Price %}item-price{% end if %}">
{% if item.ListPrice %}
<span class="item-list-price" >{{ item.ListPrice }}</span>
{% end if %}
<span>{{ item.Price }}</span>
{% if item.Discount %}
<div class="item-discount">
{{ translate("Discount") }}
{{ item.Discount }}
</div>
{% end if %}
</div>
<div class="item-quantity design-cart-quantity">
{{ item.Quantity }}
{{ item.ButtonRemove }}
{{ item.ButtonUpdate }}
</div>
<div class="item-total">
{% if item.ToQuote %}
{{ translate("Price to quote") }}
{% else %}
{{ item.TotalPrice }}
{% end if %}
</div>
</div>
{% if item.Rows %}
<div class="item-quantity-promotions">
{% for row in item.Rows %}
<div class="item-quantity-promotions-details">
{% for p in row.Promotions %}
<div>{{ p.Name }}</div>
{% end for%}
</div>
<div class="item-quantity-promotions-price">
<span class="item-quantity-promotions-list-price">{{ row.ListPrice }}</span>
<span class="item-quantity-promotions-price">{{ row.Price }}</span>
{% if row.Discount %}
<div class="item-quantity-promotions-discount">
{{ translate("Discount") }}
{{ row.Discount }}
</div>
{% end if %}
</div>
<div class="item-quantity-promotions-quantity">{{ row.Quantity }}</div>
<div></div>
{% end for %}
</div>
{% end if %}
{% if item.InfoForRequests %}
<div class="requests-row">
<div class="requests">
<label>{{ item.InfoForRequests }}</label>
<div>{{ item.Requests }}</div>
</div>
</div>
{% end if %}
{% end for %}
</div>
</div>
<div class="actions">
<div class="buttons">
{% if buttonApplyCoupon %}
<div class="apply-coupon">
{{ coupon }}
{{ buttonApplyCoupon }}
<script>document.querySelector(".apply-coupon > input:first-of-type").setAttribute("placeholder", "Coupon");</script>
</div>
{% end if %}
{%%
recap := map[string]map[string]bool{}
sortedPromotions := []string{}
for i in items {
for r in i.Rows {
for p in r.Promotions {
if recap[p.Name] == nil {
recap[p.Name] = map[string]bool{}
sortedPromotions = append(sortedPromotions, p.Name)
}
recap[p.Name][string(_extract(i.Name, ``))] = true
}
}
for p in i.Promotions {
if recap[p.Name] == nil {
recap[p.Name] = map[string]bool{}
sortedPromotions = append(sortedPromotions, p.Name)
}
recap[p.Name][string(_extract(i.Name, ``))] = true
}
}
%%}
{% if len(sortedPromotions) > 0 %}
<div class="promotions-recap">
<div class="promotions-recap-title">{{ translate("Products on offer") }}</div>
{% for _, promo:= range sortedPromotions %}
{% names := recap[promo] %}
<div class="promotion-name">{{ promo }}</div>
{% for name := range names %}
<div class="promotion-product">{{ name }}</div>
{% end for %}
{% end for %}
</div>
{% end if %}
<div class="secondary-actions">
{{ buttonContinueShopping }}
{{ buttonUpdate }}
</div>
</div>
<div class="final-box">
{% if not toQuote %}
{% for discount in discounts %}
<div class="discount">
<label>{{ translate("Cart discount") }}:</label>
<span>{{ discount }}</span>
</div>
{% end for %}
<div class="subtotal">
<div class="title">{{ translate("Subtotal") }}:</div>
<div class="value">{{ subtotal }} </div>
</div>
<div class="shipping">
<div class="title"> {{ translate("Shipping") }}: {{ shipping }}</div>
<div class="value">{{ shippingCost }}</div>
</div>
<div class="payment">
<div class="title">{{ translate("Payment") }}: {{ payment }}</div>
<div class="value">{{ paymentCost }}</div>
</div>
{% if taxesAreExcluded %}
<div class="taxes">
<div class="title">{{ translate("Taxes") }}:</div>
<div class="value">{{ taxAmount }}</div>
</div>
{% end if %}
{% end if %}
<div class="total">
<div class="title">{{ translate("Total") }}:</div>
<div class="value">
{% if toQuote %}
{{ translate("Price to quote") }}
{% else %}
{{ total.Gross }}
{% end if %}
</div>
</div>
<div class="checkout">{{ buttonCheckout }}</div>
</div>
</div>
</form>
Nel file "checkout-cart.html" sostituire il blocco
<div class="body">...</div>
<div class="body">
{% for item in cart.Items %}
<div class="row">
<div class="image">{{ item.Image }}</div>
<div class="name">
<div>{{ item.Name }}</div>
<div>{{ item.Warning }}</div>
{% for p in item.Promotions %}
<div class="promotion">{{ p.Name }}</div>
{% end for %}
</div>
<div class="price">
<div class="quantity">{{ item.Quantity }}</div>
{% if item.ToQuote %}
{{ translate("Price to quote") }}
{% else %}
{% if item.ListPrice %}
<span class="list-price">{{ item.ListPrice }} </span>
{% end if %}
{% if item.Price %}
<span class="sell-price">{{ item.Price }} x {{ item.Quantity }}</span>
{% end if %}
{% if item.Discount %}
<div class="discount">
{{ translate("Discount") }}
{{ item.Discount }}
</div>
{% end if %}
{% end if %}
</div>
<div class="total">
{% if item.ToQuote %}
<div class="to-quote">{{ translate("Price to quote") }}</div>
{% else %}
<div>{{ item.TotalPrice }}</div>
{% end if %}
</div>
{% if item.InfoForRequests %}
<div class="requests-row">
<div class="requests">
<label>{{ item.InfoForRequests }}</label>
<div>{{ item.Requests }}</div>
</div>
</div>
{% end if %}
</div>
{% if item.Rows %}
<div class="quantity-promotions">
{% for row in item.Rows %}
<div class="quantity-promotions-details">
{% for p in row.Promotions %}
<div>{{ p.Name }}</div>
{% end for%}
</div>
<div class="quantity-promotions-price">
<div class="quantity-promotions-list-price">{{ row.ListPrice }}</div>
<div class="quantity-promotions-sell-price">{{ row.Price }} x {{ row.Quantity }}</div>
{% if row.Discount %}
<div class="quantity-promotions-discount">
{{ translate("Discount") }}
{{ row.Discount }}
</div>
{% end if %}
</div>
<div></div>
{% end for %}
</div>
{% end if %}
{% end for %}
</div>
Nel file "partials/minicart.html" sostituire il blocco
<div class="name"><!-- .show name --><!-- .end --></div>
<div class="name">
<!-- .show name --><!-- .end -->
<span class="promotion"><!-- .show promotionsMessage --><!-- .end --></span>
</div>
Aggiungere in fondo al file "css/pages.css" il seguente codice:
.cart-page .table .body .row .item-promotion { font-size: 13px; }
.cart-page .table .body .row .item-price { font-weight: 400; opacity: 1; }
.cart-page .table .body .row .item-list-price { font-weight: 400; font-size: 13px; text-decoration: line-through; opacity: .8; }
.cart-page .table .body .row .item-discount { font-size: 13px; font-weight: 400; color: var(--color-primary); }
.cart-page .table .body .row .item-total { font-weight: 400; }
.cart-page .table .body .item-quantity-promotions { width: 80%; margin: auto; background-color: var(--bg-product-image); padding: 30px 50px; padding-bottom: 20px; margin-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr .8fr .8fr; align-items: center; font-size: 13px; gap: 10px; }
.cart-page .table .body .item-quantity-promotions .item-quantity-promotions-list-price > span { font-weight: 400; font-size: 13px; text-decoration: line-through; opacity: .8; }
.cart-page .table .body .item-quantity-promotions .item-quantity-promotions-price { font-size: 15px; }
.cart-page .table .body .item-quantity-promotions .item-quantity-promotions-discount { font-size: 13px; font-weight: 400; color: var(--color-primary); }
.cart-page .table .body .item-quantity-promotions .item-quantity-promotions-price, .cart-page .table .body .item-quantity-promotions .item-quantity-promotions-quantity, .cart-page .table .body .item-quantity-promotions .item-quantity-promotions-total-price { text-align: right; }
.cart-page .table .body .item-quantity-promotions .item-quantity-promotions-total-price { font-weight: 600; }
.cart-page .actions .promotions-recap { display: block; border: 1px solid var(--border-strong); border-radius: 5px; padding: 10px; text-align: left; margin-bottom: 0; font-size: 13px; }
.cart-page .actions .promotions-recap .promotions-recap-title { font-size: 16px; font-weight: 600; }
.cart-page .actions .promotions-recap .promotion-name { font-weight: 600; }
.cart-page .actions .promotions-recap .promotion-product { font-size: 13px; }
@media (max-width:768px) {
.cart-page .table .body .row .item-price { display: block; grid-area: price; }
.cart-page .actions .final-box { grid-template-areas: "promotions promotions"
"shipping payment"
"taxes subtotal"
"total total"
"btn btn"; }
.cart-page .actions .final-box .promotions-recap { grid-area: promotions; text-align: center; }
.cart-page .table .body .row { grid-template-areas: "image"
"name"
"quantity"
"total"
"actions"; }
.cart-page .table .body .item-quantity-promotions { width: 100%; padding: 10px; grid-template-columns: 1fr .8fr .8fr 0; }
.cart-page .table .body .row .item-price { display: none; }
.cart-page .table .body .row .item-total { grid-area: total; text-align: center; width: 100%; left: 0; }
}
.checkout-cart .body .row { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "image name price total"
"requests requests requests requests"; font-size: 14px; column-gap: 10px; }
.checkout-cart .body .row .name { text-align: left; padding: 0 10px 0 0; }
.checkout-cart .body .row .name .promotion { font-size: 12px; }
.checkout-cart .body .row .price { text-align: left; }
.checkout-cart .body .row .price .quantity { display: none; }
.checkout-cart .body .row .list-price { display: block; }
.checkout-cart .body .list-price > span { font-size: 13px; text-decoration: line-through; opacity: .8; }
.checkout-cart .body .discount { color: var(--color-primary) }
.checkout-cart .body .discount { font-size: 13px; }
.checkout-cart .body .row .total { grid-area: total; text-align: right; }
.checkout-cart .body .quantity-promotions { background-color: var(--bg-product-image); padding: 30px; padding-bottom: 20px; margin-bottom: 20px; margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr 50px; align-items: center; font-size: 13px; gap: 10px; }
.checkout-cart .body .quantity-promotions-list-price { text-decoration: line-through; }
.checkout-cart .body .quantity-promotions-details { font-size: 12px; }
.checkout-cart .body .quantity-promotions-price, .checkout-cart .body .quantity-promotions-quantity, .checkout-cart .body .quantity-promotions-total-price { text-align: right; }
.checkout-cart .body .quantity-promotions-list-price { font-size: 13px; text-decoration: line-through; opacity: .8; }
.checkout-cart .body .quantity-promotions-sell-price { white-space: nowrap; }
.checkout-cart .body .quantity-promotions-discount { font-size: 13px; font-weight: 400; color: var(--color-primary); white-space: nowrap; }
@media (max-width:768px) {
.checkout-cart .body .row .price .quantity { display: block; }
.checkout-cart .body .row .price .list-price, .checkout-cart .body .row .price .sell-price, .checkout-cart .body .row .price .discount { display: none; }
}
Aggiungere in fondo al file "css/partials.css" il seguente codice:
.mini-cart .items .name > a, .mini-cart .items .name .promotion { white-space: break-spaces; }
.mini-cart .items .name .promotion { font-size: 12px; padding-top: 3px; display: block; }
Traduzioni"template.ini" delle varie lingue, potete trovarli nelle sottocartelle della cartella "languages" del template.
Products on offer=Products on offerProducts on offer=Productos en ofertaProducts on offer=Produits à prix réduitiveProducts on offer=Prodotti in offertaLa versione 7.4 dà all'utente la possibilità di utilizzare Stripe e PayPal Checkout direttamente in fase di accettazione di un preventivo.
Se non si possiede uno dei nuovi template già aggiornati per supportare questa funzionalità, si possono comunque seguire alcuni passaggi per aggiornare in autonomia.
Per cominciare, nella pagina di accettazione dei preventivi si dovrà aggiungere un nuovo elemento grafico che conterrà il widget del metodo di pagamento.
Nel file "view.html", subito dopo i tasti di accettazione e stampa del preventivo, incollare il seguente blocco di codice:
<div class="pay design-pay">
{% if card %}
<div class="card">
{% card.SetCssFont("https://fonts.googleapis.com/css?family=Architects+Daughter") %}
<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>
{{ buttonPay }}
</div>
{% end if %}
</div>
I pagamenti nei preventivi introducono due nuove stringhe che devono essere tradotte.
A tale scopo ci si dovrà recare nella directory "languages" del proprio template per incollare le corrette traduzioni nei file "system.ini" corrispondenti ad ognuna delle lingue.
Innanzitutto, si dovranno incollare le traduzioni della stringa "ErrorQuoteChanged", in ordine alfabetico con le altre traduzioni sotto al commento "# Errors":
ErrorQuoteChanged=The quote has changed, please reload the page, review the summary, and try the payment againErrorQuoteChanged=La cotización ha cambiado, vuelva a cargar la página, revise el resumen e intente realizar el pago nuevamenteErrorQuoteChanged=Le devis a changé, veuillez recharger la page, revoir le récapitulatif et réessayer le paiementErrorQuoteChanged=Il preventivo è cambiato, ricarica la pagina, controlla il riepilogo e riprova a effettuare il pagamentoIn seguito, si dovranno incollare le traduzioni della stringa "ButtonPayQuote", in ordine alfabetico con le altre traduzioni sotto al commento "# Card form":
ButtonPayQuote=PayButtonPayQuote=PagarButtonPayQuote=PayerButtonPayQuote=PagaInfine, si dovranno aggiungere gli stili per visualizzare correttamente i nuovi elementi grafici introdotti dalle modifiche alla pagina di accettazione dei preventivi.
Dato 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 /* view.html */.
Fra questo commento ed il seguente incollare il CSS:
.view-html .pay { background-color: #fff; height: 0; opacity: 0; text-align: center; will-change: opacity; }
.view-html .pay.design-pay-isopen { display: block; margin: 30px 0; padding: 30px 40px; height: auto; opacity: 1; transition: transform 500ms, opacity 200ms; }
.view-html .pay .card > div:first-child { margin-top: 0; }
.view-html .pay .card > div { margin-top: 10px; }
.view-html .pay .card .expire-cvc-row { column-gap: 10px; display: flex; }
.view-html .pay .card .expire-cvc-row > div { width: 50%; }
.view-html .pay .card .cvc,
.view-html .pay .card .expiry,
.view-html .pay .card .number,
.view-html .pay .card .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
.view-html .pay .card .cvc > div,
.view-html .pay .card .expiry > div,
.view-html .pay .card .number > div,
.view-html .pay .card .name input { padding: 10px 15px; }
.view-html .pay .card .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
.view-html .pay .card .name input::placeholder { color: #333; text-transform: uppercase; }
.view-html .pay .card .pay-button { margin-top: 15px; }
.view-html .pay .card .design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
.view-html .pay .card .errors { color: #c00; font-weight: 600; text-align: center; margin-bottom: 10px; }
.view-html .pay .card .design-cc-number,
.view-html .pay .card .design-cc-expiry,
.view-html .pay .card .design-cc-cvc { height: 41px; }
.view-html [name="acceptQuote"].design-accept-quote-button-loading { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
.view-html [name="acceptQuote"].design-accept-quote-button-hidden { display: none; }
.view-html #design-paypal-button { margin: auto; width: 250px; }
.view-html .document-frame { box-shadow: unset; }
Sempre nel file "base.css", verificare se sono presenti dichiarazioni CSS per i selettori #design-paypal-button, #design-paypal-button.design-custom-order-button e #design-order-button.design-cc-button-paying.
Se riscontrate la presenza dei selettori, aggiungetegli il prefisso .checkout seguito da uno spazio, per limitare l'efficacia degli stili alla sola pagina del checkout ed evitare che intervengano anche sui nuovi elementi nella pagina dei preventivi.
Aprire il file "base.css" nella directory "css" e trovare il commento /* view.html */.
Fra questo commento ed il seguente incollare il CSS:
.view-html .pay { background-color: #fff; height: 0; opacity: 0; text-align: center; will-change: opacity; }
.view-html .pay.design-pay-isopen { display: block; margin: 30px 0; padding: 30px 40px; height: auto; opacity: 1; transition: transform 500ms, opacity 200ms; }
.view-html .pay .card > div:first-child { margin-top: 0; }
.view-html .pay .card > div { margin-top: 10px; }
.view-html .pay .card .expire-cvc-row { column-gap: 10px; display: flex; }
.view-html .pay .card .expire-cvc-row > div { width: 50%; }
.view-html .pay .card .cvc,
.view-html .pay .card .expiry,
.view-html .pay .card .number,
.view-html .pay .card .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
.view-html .pay .card .cvc > div,
.view-html .pay .card .expiry > div,
.view-html .pay .card .number > div,
.view-html .pay .card .name input { padding: 10px 15px; }
.view-html .pay .card .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
.view-html .pay .card .name input::placeholder { color: #333; text-transform: uppercase; }
.view-html .pay .card .pay-button { margin-top: 15px; }
.view-html .pay .card .design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
.view-html .pay .card .errors { color: #c00; font-weight: 600; text-align: center; margin-bottom: 10px; }
.view-html .pay .card .design-cc-number,
.view-html .pay .card .design-cc-expiry,
.view-html .pay .card .design-cc-cvc { height: 41px; }
.view-html [name="acceptQuote"].design-accept-quote-button-loading { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
.view-html [name="acceptQuote"].design-accept-quote-button-hidden { display: none; }
.view-html #design-paypal-button { margin: auto; width: 250px; }
.view-html .document-frame { box-shadow: unset; }
Sempre nel file "base.css", verificare se sono presenti dichiarazioni CSS per i selettori #design-paypal-button, #design-paypal-button.design-custom-order-button e #design-order-button.design-cc-button-paying.
Se riscontrate la presenza dei selettori, aggiungetegli il prefisso .checkout seguito da uno spazio, per limitare l'efficacia degli stili alla sola pagina del checkout ed evitare che intervengano anche sui nuovi elementi nella pagina dei preventivi.
Aprire il file "base.css" nella directory "css" e trovare il commento /* view.html */.
Fra questo commento ed il seguente incollare il CSS:
.view-html .pay { background-color: #fff; height: 0; opacity: 0; text-align: center; will-change: opacity; }
.view-html .pay.design-pay-isopen { display: block; margin: 30px 0; padding: 30px 40px; height: auto; opacity: 1; transition: transform 500ms, opacity 200ms; }
.view-html .pay .card > div:first-child { margin-top: 0; }
.view-html .pay .card > div { margin-top: 10px; }
.view-html .pay .card .expire-cvc-row { column-gap: 10px; display: flex; }
.view-html .pay .card .expire-cvc-row > div { width: 50%; }
.view-html .pay .card .cvc,
.view-html .pay .card .expiry,
.view-html .pay .card .number,
.view-html .pay .card .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
.view-html .pay .card .cvc > div,
.view-html .pay .card .expiry > div,
.view-html .pay .card .number > div,
.view-html .pay .card .name input { padding: 10px 15px; }
.view-html .pay .card .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
.view-html .pay .card .name input::placeholder { color: #333; text-transform: uppercase; }
.view-html .pay .card .pay-button { margin-top: 15px; }
.view-html .pay .card .design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
.view-html .pay .card .errors { color: #c00; font-weight: 600; text-align: center; margin-bottom: 10px; }
.view-html .pay .card .design-cc-number,
.view-html .pay .card .design-cc-expiry,
.view-html .pay .card .design-cc-cvc { height: 41px; }
.view-html [name="acceptQuote"].design-accept-quote-button-loading { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
.view-html [name="acceptQuote"].design-accept-quote-button-hidden { display: none; }
.view-html #design-paypal-button { margin: auto; width: 250px; }
.view-html .document-frame { box-shadow: unset; }
Sempre nel file "base.css", verificare se sono presenti dichiarazioni CSS per i selettori #design-paypal-button, #design-paypal-button.design-custom-order-button e #design-order-button.design-cc-button-paying.
Se riscontrate la presenza dei selettori, aggiungetegli il prefisso .checkout seguito da uno spazio, per limitare l'efficacia degli stili alla sola pagina del checkout ed evitare che intervengano anche sui nuovi elementi nella pagina dei preventivi.
Aprire il file "base.css" nella directory "css" e trovare il commento /* view.html */.
Fra questo commento ed il seguente incollare il CSS:
.view-html .pay { background-color: #fff; height: 0; opacity: 0; text-align: center; will-change: opacity; }
.view-html .pay.design-pay-isopen { display: block; margin: 30px 0; padding: 30px 40px; height: auto; opacity: 1; transition: transform 500ms, opacity 200ms; }
.view-html .pay .card > div:first-child { margin-top: 0; }
.view-html .pay .card > div { margin-top: 10px; }
.view-html .pay .card .expire-cvc-row { column-gap: 10px; display: flex; }
.view-html .pay .card .expire-cvc-row > div { width: 50%; }
.view-html .pay .card .cvc,
.view-html .pay .card .expiry,
.view-html .pay .card .number,
.view-html .pay .card .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
.view-html .pay .card .cvc > div,
.view-html .pay .card .expiry > div,
.view-html .pay .card .number > div,
.view-html .pay .card .name input { padding: 10px 15px; }
.view-html .pay .card .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
.view-html .pay .card .name input::placeholder { color: #333; text-transform: uppercase; }
.view-html .pay .card .pay-button { margin-top: 15px; }
.view-html .pay .card .design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
.view-html .pay .card .errors { color: #c00; font-weight: 600; text-align: center; margin-bottom: 10px; }
.view-html .pay .card .design-cc-number,
.view-html .pay .card .design-cc-expiry,
.view-html .pay .card .design-cc-cvc { height: 41px; }
.view-html [name="acceptQuote"].design-accept-quote-button-loading { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
.view-html [name="acceptQuote"].design-accept-quote-button-hidden { display: none; }
.view-html #design-paypal-button { margin: auto; width: 250px; }
.view-html .document-frame { box-shadow: unset; }
Sempre nel file "base.css", verificare se sono presenti dichiarazioni CSS per i selettori #design-paypal-button, #design-paypal-button.design-custom-order-button e #design-order-button.design-cc-button-paying.
Se riscontrate la presenza dei selettori, aggiungetegli il prefisso .checkout seguito da uno spazio, per limitare l'efficacia degli stili alla sola pagina del checkout ed evitare che intervengano anche sui nuovi elementi nella pagina dei preventivi.
Aprire il file "base.css" nella directory "css" e trovare il commento /* view.html */.
Fra questo commento ed il seguente incollare il CSS:
.view-html .pay { background-color: #fff; height: 0; opacity: 0; text-align: center; will-change: opacity; }
.view-html .pay.design-pay-isopen { display: block; margin: 30px 0; padding: 30px 40px; height: auto; opacity: 1; transition: transform 500ms, opacity 200ms; }
.view-html .pay .card > div:first-child { margin-top: 0; }
.view-html .pay .card > div { margin-top: 10px; }
.view-html .pay .card .expire-cvc-row { column-gap: 10px; display: flex; }
.view-html .pay .card .expire-cvc-row > div { width: 50%; }
.view-html .pay .card .cvc,
.view-html .pay .card .expiry,
.view-html .pay .card .number,
.view-html .pay .card .name { background:#F9F9F9; border-radius: 4px; border: 2px solid #eee; width: 100%; padding: 0; }
.view-html .pay .card .cvc > div,
.view-html .pay .card .expiry > div,
.view-html .pay .card .number > div,
.view-html .pay .card .name input { padding: 10px 15px; }
.view-html .pay .card .name input { background-color: transparent; border: 0; height: 40px; max-width: none; width: 100%; }
.view-html .pay .card .name input::placeholder { color: #333; text-transform: uppercase; }
.view-html .pay .card .pay-button { margin-top: 15px; }
.view-html .pay .card .design-cc-button-paying { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
.view-html .pay .card .errors { color: #c00; font-weight: 600; text-align: center; margin-bottom: 10px; }
.view-html .pay .card .design-cc-number,
.view-html .pay .card .design-cc-expiry,
.view-html .pay .card .design-cc-cvc { height: 41px; }
.view-html [name="acceptQuote"].design-accept-quote-button-loading { background: url("../images/loader.gif") no-repeat center center; font-size: 0; }
.view-html [name="acceptQuote"].design-accept-quote-button-hidden { display: none; }
.view-html #design-paypal-button { margin: auto; width: 250px; }
.view-html .document-frame { box-shadow: unset; }
Sempre nel file "base.css", verificare se sono presenti dichiarazioni CSS per i selettori #design-paypal-button, #design-paypal-button.design-custom-order-button e #design-order-button.design-cc-button-paying.
Se riscontrate la presenza dei selettori, aggiungetegli il prefisso .checkout seguito da uno spazio, per limitare l'efficacia degli stili alla sola pagina del checkout ed evitare che intervengano anche sui nuovi elementi nella pagina dei preventivi.
Aprire il file "pages.css" nella directory "css" e trovare il commento /* || View - 'view.html' */.
Fra questo commento ed il seguente incollare il CSS:
.view-page .pay {
background-color: #fff;
height: 0;
opacity: 0;
text-align: center;
will-change: opacity;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.view-page .pay.design-pay-isopen {
display: block;
margin-top: 30px;
padding: 30px 40px;
height: auto;
opacity: 1;
transition: transform 500ms, opacity 200ms;
}
.view-page .pay .card > div:first-child {
margin-top: 0;
}
.view-page .pay .card > div {
margin-top: 10px;
}
.view-page .pay .card .expire-cvc-row {
column-gap: 10px;
display: flex;
}
.view-page .pay .card .expire-cvc-row > div {
width: 50%;
}
.view-page .pay .card .cvc,
.view-page .pay .card .expiry,
.view-page .pay .card .number,
.view-page .pay .card .name {
background:#F9F9F9;
border-radius: 4px;
border: 2px solid #eee;
width: 100%;
padding: 0;
}
.view-page .pay .card .cvc > div,
.view-page .pay .card .expiry > div,
.view-page .pay .card .number > div,
.view-page .pay .card .name input {
padding: 10px 15px;
}
.view-page .pay .card .name input {
background-color: transparent;
border: 0;
height: 40px;
max-width: none;
width: 100%;
}
.view-page .pay .card .name input::placeholder {
color: #333;
text-transform: uppercase;
}
.view-page .pay .card .pay-button {
margin-top: 15px;
}
.view-page .pay .card .design-cc-button-paying {
background: url("../images/loader.gif") no-repeat center center;
font-size: 0;
}
.view-page .pay .card .errors {
color: #c00;
font-weight: 600;
text-align: center;
margin-bottom: 10px;
}
.view-page .pay .card .design-cc-number,
.view-page .pay .card .design-cc-expiry,
.view-page .pay .card .design-cc-cvc {
height: 41px;
}
.view-page [name="acceptQuote"] {
transition: unset!important;
}
.view-page [name="acceptQuote"].design-accept-quote-button-loading {
background: url("../images/loader.gif") no-repeat center center;
font-size: 0;
}
.view-page [name="acceptQuote"].design-accept-quote-button-loading:hover {
background-color: unset!important;
cursor: default;
}
.view-page [name="acceptQuote"].design-accept-quote-button-hidden {
display: none;
}
.view-page #design-paypal-button {
margin: auto;
width: 250px;
}
.view-page .document-frame {
box-shadow: unset;
}
Sempre nel file "pages.css", verificare se sono presenti dichiarazioni CSS per i selettori #design-paypal-button e #design-paypal-button.design-custom-order-button.
Se riscontrate la presenza dei selettori, aggiungetegli il prefisso .checkout-page seguito da uno spazio, per limitare l'efficacia degli stili alla sola pagina del checkout ed evitare che intervengano anche sui nuovi elementi nella pagina dei preventivi.
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 -->