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">
<div class="gridd">
<div class="image__wrapper">
<div class="cover-div">
<div class="content__wrapper">
{% if section.settings.custom_product_title != blank %}
<div class="title-heading">
<h3 class="custom-product-title">{{ section.settings.custom_product_title }}</h3>
</div>
{% endif %}
{% if product.featured_image != blank and section.settings.is_hide_product_logo == false %}
<div class="product__image">
<img src="{{ product.featured_image | img_url:'original' }}">
</div>
{% endif %}
{% if product.title != blank and section.settings.hide_product_title != true %}
<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">
{%- for option in product.options_with_values -%}
{%- if section.settings.input_type != 'select' -%}
{% 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 }}" data-value="{{product.id}}" class="default_variant_id product_id">
{% if variant.title != 'Default Title' %}
<span>{{ variant.title }}</span>
{% endif %}
{% else %}
{% if forloop.first == true %}
<div class="radio-wrapper" id="ProductSelect-option-{{ forloop.index0 }}" name="{{ option.name | handleize }}">
{% for variant in product.variants %}
<!-- Check to see if there's a product size option. If there is a size, check to see if there's any availble for purchase. If not, set the variat control in a "disabled" state. -->
{%- assign variant_label_state = true -%}
{%- if product.options.size == 1 -%}
{%- unless product.variants[forloop.index0].available -%}
{%- assign variant_label_state = false -%}
{%- endunless -%}
{%- endif -%}
<div class="radio-btn ">
<input type="radio" {% if option.selected_value==value %} checked="checked" {% endif %} {% unless variant_label_state %} disabled="disabled" {% endunless %} value="{{variant.id}}" data-value="{{product.id}}" data-index="option{{ forloop.index }}" name="{{ product.title}}" id="{{ variant.id}}" class="default_variant_id radio-btn product_id">
<label for="{{ variant.id}}">
{{ variant.title}}
</label>
</div>
{%- endfor -%}
</div>
{% if forloop.last == true %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{%- else -%}
{% 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">
{% endif %}
<option value="{{ variant.id }}" data-value="{{product.id}}" class="product_id">{{ variant.title }}</option>
{% if forloop.last == true %}
</select>
{% endif %}
{% endif %}
{% endfor %}
{%- endif -%}
{%- endfor -%}
</div>
<div class="add_to__cart">
<input type="checkbox" id="sg-custom_add_to_cart" class="custom_add_to_cart" {%- if section.settings.btn_type !='checkbox' -%}style="display:none;" {% endif %}>
{% if section.settings.check_box_text != blank %}
<label for="sg-custom_add_to_cart" class="sg-custom-donation-cart-label">{{ section.settings.check_box_text }}</label>
{% endif %}
</div>
</div>
</div>
</div>
<!-- <button type="button" class="custom_add_to_cart btn">Add to cart</button> -->
</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: 0px;
}
.custom-product-section.page-width {
padding: 0px !important;
}
.custom-product-section .title-heading {
text-align: center;
margin: 0px 0px;
flex: 1 0 100%;
}
.image__wrapper {
display: flex;
align-items: center;
max-width: {{ section.settings.widget_width }}px;
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: 100%;
justify-content: space-between;
}
.cover-div .content__wrapper {
display: flex;
align-items: center;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
}
.cover-div .add_to__cart {
min-width: 50px;
text-align: right;
white-space: nowrap;
}
.cover-div .title {
flex: 0 1 25%;
}
.cover-div .title h4 {
margin: 0;
padding-right: 10px;
}
.cover-div .product_variant select {
max-width: 200px;
padding: 10px 30px 10px 10px;
}
.sg-custom-donation-cart-label {
display: inline-block;
margin: 0px 0px;
}
.custom_add_to_cart {
cursor: pointer;
}
input[type="radio"] {
display: none;
}
.product_variant label {
display: block;
margin: 10px;
padding: 10px;
background: {{ section.settings.label_color }};
border-radius: {{ section.settings.label_borderradius }}px;
color: {{ section.settings.label_txtcolor }};
border: solid {{ section.settings.label_bordercolor }} {{ section.settings.label_borderwidth }}px;
width: {{ section.settings.label_width }}px;
text-align:center;
}
.radio-btn {
width: 100%;
display: flex;
justify-content: space-evenly;
}
.radio-wrapper {
display: flex;
justify-content: space-evenly;
}
.product_variant {
text-align: center;
}
input[type='radio']:checked+label {
border-color: {{ section.settings.addbtn_color }};
font-weight: 900;
background: {{ section.settings.label_txtcolor }};
color: {{ section.settings.label_color }};
}
.add_to__cart label {
color: {{ section.settings.addbtn_txtcolor }};
}
{%- if section.settings.btn_type=='button'%}
.add_to__cart label {
background: {{ section.settings.addbtn_color }};
border-radius: {{ section.settings.addbtn_radius }}px;
width: {{ section.settings.addbtn_width }}px;
padding:10px;
text-align:center;
}
{% endif %}
{%- if section.settings.input_type !='select'-%}
.add_to__cart {
display: none;
}
{%- if section.settings.btn_type=='checkbox'and section.settings.input_type=='radio'%}
.add_to__cart label {
display: none;
}
{% endif %}
{% endif %}
</style>
{% endif %}
{% schema %}
{
"name": "Customer Donation",
"settings": [
{
"type": "checkbox",
"id": "is_enable_product",
"label": "Is Enable Product",
"default": true
},
{
"type": "range",
"id": "widget_width",
"min": 500,
"max": 1000,
"step": 10,
"unit": "px",
"label": "Widget Width",
"default": 500
},
{
"type": "text",
"id": "custom_product_title",
"label": "Title"
},
{
"type": "product",
"id": "select_product",
"label": "Select Product"
},
{
"type": "checkbox",
"id": "hide_product_title",
"label": "Hide Product Title",
"default": false
},
{
"type": "checkbox",
"id": "is_hide_product_logo",
"label": "Hide Product Logo",
"default": false
},
{
"type": "color",
"id": "section_background_color",
"label": "Widget Background Color",
"default": "#eee"
},
{
"type": "select",
"id": "input_type",
"options": [
{
"value": "select",
"label": "Drop down"
},
{
"value": "radio",
"label": "Radio Buttons"
}
],
"label": "Choose the input type"
},
{
"type": "color",
"id": "label_color",
"label": "Radio Buttons Background Color",
"default": "#fff"
},
{
"type": "color",
"id": "label_txtcolor",
"label": "Radio Buttons Text Color",
"default": "#000"
},
{
"type": "color",
"id": "label_bordercolor",
"label": "Radio Buttons Border Color",
"default": "#000"
},
{
"type": "range",
"id": "label_borderwidth",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Label Border Width",
"default": 0
},
{
"type": "range",
"id": "label_borderradius",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Label Border Radius",
"default": 0
},
{
"type": "range",
"id": "label_width",
"min": 50,
"max": 200,
"step": 5,
"unit": "px",
"label": "Label Width",
"default": 100
},
{
"type": "select",
"id": "btn_type",
"options": [
{
"value": "checkbox",
"label": "Checkbox"
},
{
"value": "button",
"label": "Button"
}
],
"label": "Choose the button type"
},
{
"type": "color",
"id": "addbtn_color",
"label": "Background Color Add to Cart",
"default": "#000"
},
{
"type": "color",
"id": "addbtn_txtcolor",
"label": "Text Color Add to Cart",
"default": "#fff"
},
{
"type": "range",
"id": "addbtn_radius",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Add to Cart Border Radius",
"default": 0
},
{
"type": "range",
"id": "addbtn_width",
"min": 50,
"max": 200,
"step": 5,
"unit": "px",
"label": "Add to Cart Button Width",
"default": 100
},
{
"type": "text",
"id": "check_box_text",
"label": "Add to Cart Label (optional)"
}
]
}
{% endschema %}
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function() {
$(".radio-btn").click(function() {
$("input").removeAttr("checked");
$(this).attr('checked', true);
});
});
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() {
$("input[type='radio']").click(function() {
var radioValue = $("input[type='radio']").val();
var radioSelected = $(this).val();
var num = radioSelected.toString();
console.log(num)
});
$(".custom_add_to_cart, .radio-btn").click(function() {
var radioValue = $("input[type='radio']").val();
var radioSelected = $(this).val();
var variant_id1 = $(".variant_option option:selected").val();
var variant_id2 = radioSelected.toString();
var variant_id3 = $(".default_variant_id").val();
var product_id = $(".product_id").data("value");
if (typeof variant_id1 === "undefined") {
if (typeof variant_id2 === "undefined") {
var variant_id = variant_id3;
} else {
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,
"product_id": product_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>
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.