We have a dropdown field in Shipping that has been setup as follows so that the price doesn’t display -
<form action="#" class="system_form">
{% assign destinationCountryCode = shoppingCartData.destinationCountry.code %}
{% if shoppingCartData.destinationCountry.code == "" or shoppingCartData.destinationCountry.code == null%}
{% assign destinationCountryCode = shoppingCartData.domainCountry.code %}
{% endif %}
<div class="cms_fake_select">
<select data-cms_cart_shipping_options="">
<option value="">Please Select</option>
<option value="7361027874612051970" >Pickup from Morisset</option>
<option value="7361027874612051971" >Delivery to Newcastle, Hunter Valley, Lake Macquarie or Central Coast</option>
<option value="7361027874612051972" >Delivery to Sydney or Port Stephens (fees may apply)</option>
<option value="7361027874612051973" >Delivery to Regional NSW, QLD, ACT, VIC, SA & WA (quote will be supplied)</option>
</select>
The problem is that when you click on the dropdown it still shows ($0.00)
Does anyone know how to fix this?
Yeah, it’s the eCommerce Javascript overriding the select options back to the default layout.
We are a little restricted with customising this particular layout and basically there are only 2 parts we can modify:
- the
<select> element and any wrapper around it.
- the visible text of the
<options>, but only via the placeholders provided, which are:
{itemName} and {itemPrice}
You can see this now in the Documentation here:
https://docs.treepl.co/component-types/shipping_options#secVirtualLayout
So basically, you need to add a new data attribute to the <select> element like this, which basically sets up your text format:
data-cms_cart_shipping_option_name_layout="{itemName} ({itemPrice})"
and remove or reformat the 2 placeholders as you require them.
This probably means you’ll need to make your own custom layout file and reference that in the shipping_options component tag, like so:
{% component type: "shipping_options", layout: "/PATH-TO/YOUR-CUSTOM-LAYOUT.layout" %}
and use a copy of the Virtual Layout as per the documentation link above (changing the placeholders as required - in your case, removing the {itemPrice} placeholder altogether).
This worked like a charm! I used the Virtual Layout and removed the price and it is perfect. Thank you @Adam.Wilson
