Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Converting exisitng checkout custom code to app using Checkout UI Extensions

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?