Upon completion of Enabling Customer Add-on Donations steps.
1. Create a new section template called “customer-direct-donation.liquid”
2. Add the following code to the new section template “customer-direct-donation.liquid”
{% if section.settings.select_product != blank and section.settings.is_enable_product == true %}
<div class="custom-product-section page-width">
{%- assign product = all_products[section.settings.select_product] -%}
<input type="hidden" value="{{ product.handle }}" id="product__handle">
{% if section.settings.custom_product_title != blank %}
<div class="title-heading">
<h3>{{ section.settings.custom_product_title }}</h3>
</div>
{% endif %}
<div class="gridd">
<div class="image__wrapper">
{% if product.featured_image != blank %}
<div class="product__image">
<img src="{{ product.featured_image | img_url:'original' }}">
</div>
{% endif %}
<div class="cover-div">
<div class="content__wrapper">
{% if product.title != blank %}
<div class="title">
<h4>{{ product.title }}</h4>
</div>
{% endif %}
{% comment %}
<!-- Comment section -->
{% if product.description != blank %}
<div class="description">
{{ product.description }}
</div>
{% endif %}
<div class="price">
<!-- Start: Price section -->
<span class="grid-product__price-wrap">
{% if variant.price != blank %}
<span>{{ variant.price | money_without_trailing_zeros }}</span>
<strike>{{ variant.compare_at_price | money_without_trailing_zeros }}</strike>
{% else %}
<span>{{ product.price | money_without_trailing_zeros }}</span>
<strike>{{ product.compare_at_price | money_without_trailing_zeros }}</strike>
{% endif %}
</span>
<!-- END: Price section -->
</div>
<!-- END Comment section -->
{% endcomment %}
<div class="product_variant">
{% assign count = 0 %}
{% for variant in product.variants %}
{% assign count = count | plus: 1 %}
{% endfor %}
{% for variant in product.variants %}
{% if count<2 %}
<input type="hidden" value="{{ variant.id }}" class="default_variant_id">
{% if variant.title != 'Default Title' %}
<span>{{ variant.title }}</span>
{% endif %}
{% else %}
{% if forloop.first == true %}
<span class="variant_option_span" style="display:none;">{{ variant.title }}</span>
<select class="variant_option" style="display:none;">
{% endif %}
{% if variant.inventory_quantity>0 %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% endif %}
{% if forloop.last == true %}
</select>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
<div class="add_to__cart">
<input type="checkbox" class="custom_add_to_cart">
{% comment %}
{% if section.settings.check_box_text != blank %}
{{ section.settings.check_box_text }}
{% endif %}
{% endcomment %}
<!-- <button type="button" class="custom_add_to_cart btn">Add to cart</button> -->
</div>
</div>
</div>
</div>
</div>
<style>
/* Custom product section */
/* @media(max-width:767px){
.image__wrapper{margin-bottom:50px;
background-color: {{ section.settings.section_background_color }};padding: 15px;
border: 1px solid #ccc;border-radius: 5px;
}
.image__wrapper .product__image img{width:100%;}
.cover-div .add_to__cart{margin-top: 10px;}
.cover-div .title h4{margin-bottom: 10px;margin-top: 10px;}
} */
.custom-product-section{margin-bottom: 60px;}
.custom-product-section .title-heading{text-align: center; margin: 50px 0;}
.image__wrapper{display: flex;align-items: center;max-width: 500px;justify-content: space-between;margin: 0 auto;
background-color: {{ section.settings.section_background_color }};padding: 15px;border: 1px solid #ccc;border-radius: 5px;
}
.image__wrapper .product__image{max-width:50px;width:100%;}
.image__wrapper .product__image img{display:block;border:1px solid #ccc;border-radius:3px;}
.cover-div{display: flex;align-items: center;width:calc(100% - 80px);justify-content: space-between;}
.cover-div .content__wrapper{display: flex; align-items: center; width: 100%; justify-content: space-around;}
.cover-div .add_to__cart{min-width: 50px;text-align: right;}
.cover-div .title h4{margin:0;padding-right: 10px;}
.cover-div .product_variant select{max-width: 140px;padding: 10px 30px 10px 10px;}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
var cnt = 0;
var newPrice = 0;
var drawercnt = 0;
var without_drw_p_price = 0;
var item_status = false;
var product__handle = $("#product__handle").val();
$.getJSON('/cart.json', function(cart) {
$.each(cart.items, function(key,value){
var id = value.id;
var cart_handle = value.handle;
var item_count = cart.item_count;
var product_handle = product__handle;
console.log(product_handle);
if(cart_handle==product_handle)
{
$(".custom-product-section").hide();
}
});
});
$(function(){
$(".custom_add_to_cart").click(function(){
var variant_id1 = $(".variant_option option:selected").val();
var variant_id2 = $(".default_variant_id").val();
if(typeof variant_id1 === "undefined"){
var variant_id = variant_id2;
}else{
var variant_id = variant_id1;
}
setTimeout(function(){
if(variant_id == null){
}
else{
var data = {
"quantity": 1,
"id": variant_id,
}
jQuery.ajax({
type: 'POST',
url: '/cart/add.js',
async: false,
data: data,
dataType: 'json',
success: function() {
window.location.reload();
}
});
}
},300);
});
var total_length = $(".variant_option option").length;
if(total_length<2){
$(".variant_option_span").show();
$(".variant_option").hide();
}else{
$(".variant_option_span").hide();
$(".variant_option").show();
}
});
</script>
{% endif %}
{% schema %}
{
"name": "Customer Donation",
"settings": [
{
"type":"checkbox",
"id":"is_enable_product",
"label":"Is Enable Product",
"default":true
},
{
"type":"text",
"id":"custom_product_title",
"label":"Title"
},
{
"type":"product",
"id":"select_product",
"label":"Select Product"
},
{
"type":"color",
"id":"section_background_color",
"label":"Background Color",
"default":"#eee"
}
]
}
{% endschema %}
4. Add the following line of code to the top of your “cart.liquid” and "product.liquid" or respective product liquid templates to the location you would like the donation widget to show.
{% section 'customer-direct-donation' %}
Recommended location as shown below:
5. Go to your theme and click “customize” then navigate to your cart page.
6. Click on “Customer Donation”
7. Click “Change” product in the selector, and select the product created from Step 1.
8. Optional: You can edit the background color of your customer donation product by clicking the color selector.
9. Optional: You can add a title to the donation section to show above the customer donation on the cart page.
10. Optional: You can click “show product description” to show the description below the product title.
11. To disable customer donation, you can deselect “Enable Customer Donation” which will hide the widget from your cart.