Addition script for checkout page

jvhtou
Tourist
5 0 1

Hi, I'm trying to create a message to pop up in the shipping section of the checkout page when a specific country is selected. 

I've followed the instructions listed on this site: https://help.shopify.com/en/manual/orders/status-tracking/customize-order-status/show-content-based-...

and below are my codes:

{% if checkout.shipping_address.country_code == 'FR' %}
<script type="text/javascript">
var customMessage = document.createElement("div");
customMessage.innerHTML = '<div class="section" style="padding-top: 3em"><div class="content-box"><div class="content-box__row"><p class="os-step__description">We're unable to ship to the following postal codes: Paris(postcode) 00000 ~ 00299, 00370~ 00449, 00500 ~ 00999. Please contact us for more info.</p></div></div></div>';
console.log(document.querySelector("[data-order-summary-section=payment-lines]"));
document.querySelector("[data-order-summary-section=payment-lines]").before(customMessage);
</script>
{% endif %}

Nothing shows up, and I'm not sure what went wrong. How can I fix this?

KetanKumar
Shopify Partner
15838 1758 5836

@jvhtou 

Thanks for post 

checkout page customization allows only for Shopify plus plan do you have this?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
jvhtou
Tourist
5 0 1

No, I don't. I was hoping there was an alternative way to do this.

0 Likes
KetanKumar
Shopify Partner
15838 1758 5836

@jvhtou 

no, sorry doesn't anther way

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
ChoosiZon
Navigator
248 44 72

I am not very good but you can try this :

 

 

 

 

{% if checkout.shipping_address.country_code == 'FR' %}
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function(event) {
  var customMessage = document.createElement("div");
  customMessage.innerHTML = '<div class="section" style="padding-top: 3em"><div class="content-box">
<div class="content-box__row"><p class="os-step__description">We're unable to ship to the following postal codes: Paris(postcode) 00000 ~ 00299, 00370~ 00449, 00500 ~ 00999. Please contact us for more info.</p></div></div></div>';
  console.log(document.querySelector(".address"));
  document.querySelector(".address").after(customMessage);
  alert(' We have a message !');
  })
</script>
{% endif %}

 

 

 

 

0 Likes