Converting exisitng checkout custom code to app using Checkout UI Extensions

Nicola_E
Shopify Partner
2 0 0

We are looking to move to Checkout Extensibility upgrade. Currently we have 2 features custom coded into the checkout which I believe when upgraded will need to be added as apps via Checkout UI Extensions.

Can anyone advise 'exactly' how to do this?

Details as follows -

 

Feature 1 - reduce characters in checkout shipping fields to max 35. 

This is currently powered by the custom snippet in checkout-custom.liquid file 

 
$('#checkout_shipping_address_address1, #checkout_billing_address_address1').attr('maxlength', 35);
$('#checkout_shipping_address_address1, #checkout_billing_address_address1').on('input propertychange', function() {
if ($(this).val().length > 35) {
$(input).val($(input).val().substring(0, 35));
}
});
 
Feature 2 - Show c'ompare at prices' in checkout.
This is currently powered by the custom snippet in checkout-custom.liquid file 
 
<script>
function injectCompareAtPrice(event) {
var line_items = [
{% for line in checkout.line_items %}
{% if line.variant.compare_at_price > 0 %}
{
'variant_id':'{{ line.variant_id }}',
'compare_at_price':'{{ line.variant.compare_at_price }}',
'quantity':{{ line.quantity }},
},
{% endif %}
{% endfor %}
]
line_items.forEach(function(item) {
try {
var el = document.querySelector(`[data-variant-id='${item.variant_id}'] .product__price`);
if (!el) {
return;
}
var content = el.innerHTML;
var amount = (parseFloat(item.quantity)*parseFloat(item.compare_at_price)/100).toFixed(2);
el.innerHTML = `<del class='order-summary__small-text'>{{-'0' | money | replace: '0' | replace: '.' -}}${amount}</del><br>${content}`;
} catch (ex) {
console.error('Error rendering compare_at_price', ex);
}
})
let all_line_items =[
{% for line in checkout.line_items %}
{% if line.variant.compare_at_price > 0 %}
{
'compare_at_price':'{{ line.variant.compare_at_price }}',
'quantity':{{ line.quantity }},
},
{% else %}
{
'price':'{{ line.price }}',
'quantity':{{ line.quantity }},
},
{% endif %}
{% endfor %}
]
let totalSumCompare = 0
 
all_line_items.forEach(item =>{
if (item.compare_at_price){
let multiple = Number(item.quantity * item.compare_at_price)
totalSumCompare = totalSumCompare + multiple
} else {
let multiple = Number(item.quantity * item.price)
totalSumCompare = totalSumCompare + multiple
}
})
let element = `<tr class="total-line total-line--compare">
<th class="total-line__name" scope="row">
</th>
<td class="total-line__price">
<del class="order-summary__emphasis skeleton-while-loading">
{{-'0' | money | replace: '0' | replace: '.' -}}${parseFloat((totalSumCompare)/100).toFixed(2)}
</del>
</td>
</tr>`
if (totalSumCompare > {{ checkout.subtotal_price }} ){
$($('.total-line.total-line--subtotal')).after(element)
}
}
 
document.addEventListener('page:load', injectCompareAtPrice);
document.addEventListener('page:change', injectCompareAtPrice);
document.addEventListener('rebuy.refresh', injectCompareAtPrice);
</script>
 
Reply 1 (1)

Nicola_E
Shopify Partner
2 0 0

Still looking into the best way to do this - in particular reducing characters in shipping fields to 35.

Seems there are 3 options

1. Do via Shopify functions

2. Do via Extensions UI

3. Use a third party adress validator.

Looking for direction on what would be the best option long term?