showtime 可以直接用，其它theme可以参考：http://lpdemo.smartsaker.top/addtocart.html
修改并增加配置项
在Config版块中的settings_schema.json查找到cart_type修改为如下代码
{
"type": "select",
"id": "cart_type",
"label": "Cart type",
"options": [
{
"value": "modal",
"label": "Modal"
},
{
"value": "page",
"label": "Page"
},
{
"value": "slide",
"label": "Slide"
}
],
"default": "modal",
"info": "You must choose Page above to enable the sidebar and shipping calculator."
},
{
"type": "checkbox",
"id": "addtocart_cartpage",
"label": "Redirect To Cart Page For Button",
"default": false,
"info": "You must choose Page above to enable the sidebar for slide."
},
添加展示文件
在snippets中新建文件slide-cart.liquid，并使用menu-cart.liquid的代码并修改商品列表信息展示，可以参考以下代码
<div class="menu_c cart_menu box_main">
<form action="/cart" method="post" class="cartform" novalidate>
<div class="box_cart">
<div class="menu_title clearfix box_top 11">
<h4>{{ 'cart.general.title' | t }}</h4>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
{% if cart.item_count > 0 %}
<div class="box_center">
<div class="cart_row">
<ul>
<li>{{ 'cart.general.photo' | t }}</li>
<li>{{ 'cart.general.name' | t }}</li>
<li>{{ 'cart.general.price' | t }}</li>
<li>{{ 'cart.general.quantity' | t }}</li>
<li>{{ 'cart.general.total' | t }}</li>
</ul>
{% for item in cart.items %}
<ul>
<li>
<div class="thumb">
<a href="{{ item.product.url }}">
<img src="{{ item.product.featured_image.src | product_img_url: '300x' }}" alt="{{ item.title | escape }}" />
</a>
</div>
</li>
<li>
<h5><a href="{{ item.product.url | within: collections.all }}" class="item-name">{{ item.product.title | escape}}
<span class='booster-cart-item-success-notes' data-key='{{item.key}}'></span><span class='booster-cart-item-upsell-notes' data-key='{{item.key}}'></span></a></h5>
{% unless item.variant.title contains 'Default' %}
<p>{{ item.variant.title | escape }}</p>
{% endunless %}
<p class="mobile-label-quantity">Quantity</p>
<a class="minus_btn"></a>
<input type="text" id="updates_{{ item.id }}" name="updates[]" class="txtbox" value="{{ item.quantity }}" min="0" data-id="{{ item.id }}"/>
<a class="plus_btn"></a>
<div class="ajaxcart__errors text-center ajaxcart__item__{{ item.id }}__errors">
{{ 'cart.general.error' | t }}
</div>
<a href="#" data-id="{{ item.id }}" class="remove_item_button">{{ 'cart.general.remove' | t }}</a>
</li>
<li>
<p class="mobile-label-price">Price</p>
<span class="price money">{{ item.price | money }}</span>
</li>
</ul>
{% endfor %}
</div>
{% if settings.cart_notes %}
<div class="clearfix order_notes">
<label for="cartSpecialInstructions" class="sr-only">{{ 'cart.general.note' | t }}:</label>
<textarea name="note" id="cartSpecialInstructions" placeholder="{{ 'cart.general.note' | t }}">{% if cart.note != null %}{{cart.note}}{% endif %}</textarea>
</div>
{% endif %}
{% if settings.show_currency_disclaimer %}
<div class="disclaimer">
{{ 'cart.general.currency_disclaimer_html' | t: shopname: shop.name, currency: shop.currency }}
</div>
{% endif %}
</div>
<div class="box_bottom">
<div class="total_row clearfix">
<ul>
<li>
<span class="total_val">{{ 'cart.general.subtotal' | t }}:</span><span class="money total-price"><span class="wh-original-cart-total"><span class="wh-original-price">{{ cart.total_price | money }}</span></span><span class="wh-cart-total"></span><div class="additional-notes"><span class="wh-minimums-note"></span><span class="wh-extra-note "></span></div></span>
</li>
</ul>
</div>
{% if settings.addtocart_cartpage %}
<div class="checkout_row clearfix">
<a href="/cart" class="btn_c">{{ 'cart.general.view_cart' | t }}</a>
</div>
{% else %}
<div class="checkout_row clearfix">
<button type="submit" name="checkout" value="{{ 'cart.general.checkout' | t }}" class="btn_c">{{ 'cart.general.checkout' | t }}</button>
<a href="javascript:void(0)" class="info_btn"><span class="fa fa-chevron-left"></span>{{ 'cart.general.continue_browsing' | t }}</a>
</div>
<div id="additional-checkout-block" class="text-right">
</div>
{% endif %}
</div>
{% else %}
<div class="cart_row">
<div class="empty-cart">{{ 'cart.general.empty' | t }}</div>
<p><a href="javascript:void(0)" class="btn_c btn_close">{{ 'cart.general.continue_browsing' | t }}</a></p>
</div>
{% endif %}
</div>
</form>
</div>
修改展示条件
在snippets版块的header-logo.liquid和mani-menu.liquid中，将 {% include ‘menu-cart’ %} 替换为如下代码
{% if settings.cart_type == "slide" %}
{% include 'slide-cart' %}
{% else %}
{% include 'menu-cart' %}
{% endif %}
在scripts.js.liquid中查找{% if settings.cart_type == “page”%}，将此行 修改为以下代码
{% if settings.cart_type == "page" or settings.cart_type == "top" %}
在scripts.js.liquid中查找$(“.cart-popup”).on(“click”, function(){，将此方法中的mainClass: ‘mfp-move-from-top’ 修改为以下代码
mainClass: '{% if settings.cart_type == "slide" %}mfp-move-from-slide{%else%}mfp-move-from-top{% endif %}'
在scripts.js.liquid中查找return ProductPageSection，将此行上方（隔几行）的 {% if settings.cart_type == “modal”%} 修改为以下代码
{% if settings.cart_type != "page" %}
在ajaxify-shop.js.liquid查找 mainClass: ‘mfp-move-from-top’并替换为以下代码
mainClass: '{% if settings.cart_type == "slide" %}mfp-move-from-slide{%else%}mfp-move-from-top{% endif %}'
在ajaxify-shop.js.liquid查找 Shopify.updateQuickCart = function(cart){ ，将该方法中的所有代码替换为以下代码
Shopify.updateQuickCart = function(cart){
var t = jQ(selectors.QUICK_CART_MENU),
c = jQ(selectors.CART_PAGE_MENU);
if(t.length){
if(cart.items.length){
var toAppend = [],
tableHeader = '<ul><li>{{ 'cart.general.photo' | t }}</li>'+
'<li>{{ 'cart.general.name' | t }}</li>'+
'<li>{{ 'cart.general.price' | t }}</li>'+
'<li>{{ 'cart.general.quantity' | t }}</li>'+
'<li>{{ 'cart.general.total' | t }}</li></ul>';
for (var i = 0; i < cart.items.length; i++) {
var itemPrice = cart.items[i].price,
totalPrice = cart.total_price,
linePrice = cart.items[i].line_price,
title = cart.items[i].variant_title,
cartNote = cart.note;
if(title == null){
title = "";
}
if(cartNote == null){
cartNote = "";
}
//convert prices
var itemPriceConverted = Shopify.formatMoney(itemPrice,app.data.money_format),
totalPriceConverted = Shopify.formatMoney(totalPrice,app.data.money_format),
linePriceConverted = Shopify.formatMoney(linePrice,app.data.money_format);
{% if settings.show_multiple_currencies %}
if(typeof Currency !== 'undefined' && shopCurrency && cookieCurrency){
var convertedPrice = Currency.convert(itemPrice,shopCurrency,cookieCurrency);
itemPriceConverted = Shopify.formatMoney(convertedPrice, Currency.moneyFormats[cookieCurrency].{{settings.currency_format}});
var totalConvertedPrice = Currency.convert(totalPrice,shopCurrency,cookieCurrency);
totalPriceConverted = Shopify.formatMoney(totalConvertedPrice, Currency.moneyFormats[cookieCurrency].{{settings.currency_format}});
var lineConvertedPrice = Currency.convert(linePrice,shopCurrency,cookieCurrency);
linePriceConverted = Shopify.formatMoney(lineConvertedPrice, Currency.moneyFormats[cookieCurrency].{{settings.currency_format}});
}
{% endif %}
{% if settings.cart_type == "slide" %}
var row = '<ul><li><div class="thumb"><a href="' + cart.items[i].url +
'"><img src="' + Shopify.addImageSize(cart.items[i].image,'small') + '" alt="' + cart.items[i].title +
'"></a></div></li><li><h5><a href="' + cart.items[i].url +
'" class="item-name">' + cart.items[i].product_title +
'</a></h5><p class="product-type">'+title+'</p>'+
'<p class="mobile-label-quantity">Quantity</p><a class="minus_btn"></a><input type="text" name="updates[]" class="txtbox" min="0" id="updates_'+cart.items[i].id+'" data-id="'+cart.items[i].id+'" value="'+cart.items[i].quantity+'" /><a class="plus_btn"></a>'+
'<div class="ajaxcart__errors text-center ajaxcart__item__'+cart.items[i].id+'__errors">All available stock is in cart</div><a href="#" data-id="'+cart.items[i].id+'" class="remove_item_button">{{ 'cart.general.remove' | t }}</a>'+
'<li><p class="mobile-label-price">Price</p><span class="money price">'+itemPriceConverted+'</span></li>'+
'</li>'+
'</ul>';
{%else%}
var row = '<ul><li><div class="thumb"><a href="' + cart.items[i].url +
'"><img src="' + Shopify.addImageSize(cart.items[i].image,'small') + '" alt="' + cart.items[i].title +
'"></a></div></li><li><h5><a href="' + cart.items[i].url +
'" class="item-name">' + cart.items[i].product_title +
'</a></h5><p class="product-type">'+title+'</p><a href="#" data-id="'+cart.items[i].id+'" class="remove_item_button">{{ 'cart.general.remove' | t }}</a></li>'+
'<li><p class="mobile-label-price">Price</p><span class="money price">'+itemPriceConverted+'</span></li>'+
'<li><p class="mobile-label-quantity">Quantity</p><a class="minus_btn"></a><input type="text" name="updates[]" class="txtbox" min="0" id="updates_'+cart.items[i].id+'" data-id="'+cart.items[i].id+'" value="'+cart.items[i].quantity+'" /><a class="plus_btn"></a>'+
'<div class="ajaxcart__errors text-center ajaxcart__item__'+cart.items[i].id+'__errors">All available stock is in cart</div></li>'+
'<li><p class="mobile-label-total">Total</p><span class="money price">'+ linePriceConverted +'</span>'+
'</li></ul>';
{% endif %}
toAppend.push(row);
};
var checkoutRow = t.find('div.checkout_row'),
subtotalRow = t.find('span.total-price'),
subtotalRowCartPage = c.find("span.total-price");
if(checkoutRow.length){ /* we have existing items in the quick cart */
t.find('div.cart_row').html(toAppend.join(''));
t.find('div.cart_row').prepend(tableHeader);
c.find(".con_row").html(toAppend.join(''));
subtotalRowCartPage.html(totalPriceConverted);
subtotalRow.html(totalPriceConverted);
}else{
checkoutRow = '<div class="checkout_row clearfix"><button type="submit" name="checkout" value="Check Out" class="btn_c">{{ 'cart.general.checkout' | t }}</button> <a href="javascript:void(0)" class="info_btn"><span class="fa fa-chevron-left"></span>{{ 'cart.general.continue_browsing' | t }}</a></div>';
subtotalRow = '<div class="total_row clearfix"><ul><li><span class="total_val">{{ 'cart.general.subtotal' | t }}:</span><span class="money total-price">'+totalPriceConverted+'</span></li></ul></div>';
var addCheckOutBlock = '<div id="additional-checkout-block" class="text-right" ></div>';
var form = jQ('<form class="cartform" />',{
'action':'/cart',
'method':'post',
'novalidate':'novalidate'
})
{% if settings.show_currency_disclaimer and settings.show_multiple_currencies %}
var currencyNote = '{{ 'cart.general.currency_disclaimer_html' | t: shopname: shop.name, currency: shop.currency }}';
{% endif %}
if({{settings.cart_notes}}){
var notesRow='<div class="clearfix order_notes">'+
'<label for="cartSpecialInstructions" class="sr-only">{{ 'cart.general.note' | t }}:</label>'+
'<textarea name="note" id="cartSpecialInstructionsFromPopup" class="note_text" placeholder="{{ 'cart.general.note' | t }}">'+ cartNote +'</textarea></div>';
}
else{
var notesRow='';
}
{% if settings.cart_type == "slide" %}
$(".box_top").remove();
form.append($("div.cart_row"));
$(".box_center").remove();
form.find("div.cart_row").wrapAll('<div class="box_center ajax-center"></div>');
form.find("div.box_center").wrapAll('<div class="box_cart ajax-box-cart"></div>');
form.find("div.cart_row").html(toAppend.join(''));
form.find('div.cart_row').prepend(tableHeader);
form.append(notesRow);
{% if settings.show_currency_disclaimer and settings.show_multiple_currencies %}
form.append(currencyNote);
{% endif %}
form.find('div.box_center').before('<div class="menu_title clearfix box_top ajax-top"><h4>{{ 'cart.general.title' | t }}</h4><button title="Close (Esc)" type="button" class="mfp-close">×</button></div>')
form.find('div.box_center').after('<div class="box_bottom ajax-bottom"></div>')
form.find('div.box_bottom').append(subtotalRow);
form.find('div.box_bottom').append(checkoutRow);
form.find('div.box_bottom').append(addCheckOutBlock);
t.append(form);
{% else %}
form.append($("div.cart_row"));
form.find("div.cart_row").html(toAppend.join(''));
form.find('div.cart_row').prepend(tableHeader);
form.append(subtotalRow);
form.append(notesRow);
{% if settings.show_currency_disclaimer and settings.show_multiple_currencies %}
form.append(currencyNote);
{% endif %}
form.append(checkoutRow);
form.append(addCheckOutBlock);
t.append(form);
{% endif %}
}
}
else{
{% if settings.cart_type == "slide" %}
var ajax_empty = '<div class="menu_title clearfix box_top">'
ajax_empty += '<h4>{{ 'cart.general.title' | t }}</h4><button title="Close (Esc)" type="button" class="mfp-close">×</button>'
ajax_empty += '</div>'
ajax_empty += '<div class="box_center ajax-empty">'
ajax_empty += '<div class="cart_row">'
ajax_empty += '<div class="empty-cart">{{ 'cart.general.empty' | t }}</div>'
ajax_empty += '<p><a href="javascript:void(0)" class="btn_c btn_close">{{ 'cart.general.continue_browsing' | t }}</a></p>'
ajax_empty += '</div>'
ajax_empty += '</div>'
t.html(ajax_empty);
{% else %}
t.html('<div class="menu_title clearfix"><h4>{{ 'cart.general.title' | t }}</h4> </div><div class="cart_row"><div class="empty-cart">{{ 'cart.general.empty' | t }}</div><p><a href="javascript:void(0)" class="btn_c btn_close">{{ 'cart.general.continue_browsing' | t }}</a></p></div>');
{% endif %}
c.html('<div class="empty-cart-message"><p>{{ 'cart.general.empty' | t }}</p><p><a href="/collections/all" class="btn_c">{{ 'cart.general.continue_browsing' | t }}</a></p></div');
}
}
if(!$(selectors.CART_PAGE_MENU).length && !$('.mfp-move-from-slide').length){
setTimeout(function(){
Shopify.showModal($(selectors.QUICK_CART_MENU).wrap('<p>').parent().html());
}, 500);
}
Shopify.onCartUpdate(cart);
};
增加样式
在style.css.liquid文件中查找 .mfp-move-from-top.mfp-removing.mfp-bg，在此样式下方新增如下代码
.mfp-move-from-slide .mfp-content {
vertical-align: top;
}
.mfp-move-from-slide .mfp-with-anim {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
-o-transform: translateX(400px);
-ms-transform: translateX(400px);
transform: translateX(400px);
}
.mfp-move-from-slide.mfp-bg {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
.mfp-move-from-slide.mfp-ready .mfp-with-anim {
min-height:100%;
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.mfp-move-from-slide.mfp-ready.mfp-bg {
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.mfp-move-from-slide.mfp-removing .mfp-with-anim {
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
-o-transform: translateX(400px);
-ms-transform: translateX(400px);
transform: translateX(400px);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.mfp-move-from-slide.mfp-removing.mfp-bg {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.mfp-wrap.mfp-move-from-slide{
max-width: 400px;
width: 100%;
left: initial;
right:0;
}
.mfp-wrap.mfp-move-from-slide .mfp-container{
padding:0;
background:none !important;
}
.mfp-wrap.mfp-move-from-slide .mfp-content{
height:100%;
}
.mfp-wrap.mfp-move-from-slide button.mfp-close{
margin-top:7px;
}
.mfp-wrap.mfp-move-from-slide .modal-popup{
margin:0;
padding:0px;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .menu_title{
margin:0px;
}
.mfp-wrap.mfp-move-from-slide .cart_row h5{
margin: 0 0 5px 0 !important;
}
.mfp-wrap.mfp-move-from-slide .cart_row p{
margin-bottom:5px;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul{
display:block;
border-bottom: 1px solid #efefef;
padding:0 !important;
}
.mfp-wrap.mfp-move-from-slide .cart_row ul:first-child{
display:none;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul:last-child{
margin-bottom:30px;
border-bottom: none;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .total_row ul{
background: none;
margin-bottom:0;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .total_row ul li:last-child{
border:none;
padding: 0;
display: flex;
justify-content: space-between;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .total_row .wh-cart-total{
display:none !important;
}
.mfp-wrap.mfp-move-from-slide .cart_menu a.info_btn{
display:none;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .checkout_row, .mfp-wrap.mfp-move-from-slide .cart_menu #additional-checkout-block{
margin-top:15px;
margin-bottom:0;
padding:0px;
}
.mfp-wrap.mfp-move-from-slide .cart_menu #addCheckoutBtn{
max-width:100% !important;
float:none;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .checkout_row .btn_c, .mfp-wrap.mfp-move-from-slide #paypal-express-button{
width: 100%;
max-width: 100%;
border-radius: 4px;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li{
border-bottom: none;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li:nth-child(1){
padding-left:0px;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li .thumb{
width: 100px;
height: 100px;
margin-right: 15px;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li .remove_item_button{
clear:both;
/* display:none; */
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li .price{
float:right;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li:nth-child(2){
width:auto !important;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .box_cart {
display: flex;
flex-direction: column;
min-height: 100%;
background-color: #fff;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cartform{
position: absolute;
top: 0;
right: 0;
bottom: 0;
width:100%;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .box_top{
background-color: #fff;
position: sticky;
top: 0;
z-index: 90;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .box_center {
padding: 0 30px;
position: relative;
flex-grow: 1;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .box_center .disclaimer {
margin-bottom:30px;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .box_bottom{
border-top: 1px solid #efefef;
padding: 15px 25px;
background-color: #fff;
position: sticky;
bottom:0;
z-index: 90;
}
.mfp-wrap.mfp-move-from-slide #dynamic-checkout-cart ul{
width: 100% !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
.mfp-wrap.mfp-move-from-slide #dynamic-checkout-cart ul li{
padding: 0 !important;
width: 100% !important;
display: block !important;
margin: 0px !important;
}
@media (max-width: 480px){
.mfp-wrap.mfp-move-from-slide{
max-width:100% !important;
position: fixed !important;
right: 0 !important;
left: 0 !important;
bottom: 0 !important;
top: 0 !important;
}
.mfp-wrap.mfp-move-from-slide .cart_menu form{
margin-top:0;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .menu_title {
padding: 15px 25px;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .checkout_row .btn_c{
margin:0;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .additional-checkout{
margin:0;
}
.mfp-wrap.mfp-move-from-slide .cart_row .mobile-label-quantity, .mfp-wrap.mfp-move-from-slide .cart_row .mobile-label-price {
display:none !important;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li{
display: table-cell;
padding: 15px 0;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li:nth-child(1){
width:18% !important;
min-width: 100px;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li:nth-child(2){
width:auto !important;
border: none;
text-align:left;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li:nth-child(3){
width:12% !important;
float: none;
padding-bottom: 0;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li .minus_btn, .mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li .plus_btn, .mfp-wrap.mfp-move-from-slide .cart_menu .cart_row ul li .txtbox{
width:30px;
height:30px;
}
.mfp-wrap.mfp-move-from-slide .cart_menu .total_row ul{
padding:0;
border-bottom:none;
}
}
以上处理完后若有异常
请检查在theme.liquid中是否加载ajaxify-shop.js文件
{{ 'ajaxify-shop.js' | asset_url | script_tag }}