Removing map from customer's Order Status page for selected shipping methods

Solved
cherryw
Shopify Partner
5 0 1

Hi everyone, 

Newbie here. Is there a way to remove the map on the customer's Order Status page for selected shipping methods? We have a Pick Up option available (as part of our shipping rate settings), and I'd like the map to be removed from the order status page ONLY when they select "Pick up from our studio". 

I've gone through the steps on this page: Show content based on shipping
and also found the following CSS Script for removing the map completely

 

Just wondering if anyone know how to combine the 2 instructions? 

 

Thank you!

PaulNewton
Shopify Partner
2571 136 453

This is an accepted solution.

Javascript

<script>
  {% if checkout.shipping_method.title == 'Pick up from our studio' %}
   //Business Logic Javascript
if(document.getElementsByClassName('map')[0]){
document.getElementsByClassName('map')[0].parentNode.remove()
} {% endif %} </script>  

CSS

{% if checkout.shipping_method.title == 'Pick up from our studio' %}
<style> .map {display:none } </style>
{% endif %}

 

It's also a good idea to use the following to verify the exact text being output by examining your pages source(press ctrl+u in most browsers)

<!-- DEBUG {{ checkout.shipping_method.title }} has been used -->

 

Note: These pages should be periodically checked as working when you make this change. Shopify does make changes to these pages for testing and optimization purposes so the exact code that targets the map element may need to be changed. Here it uses the html class attribute "map" as a class selector (.map) in javascript and css. Hiding elements in the ways can lead to page jumping or FOUC effects.

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
cherryw
Shopify Partner
5 0 1

Hi Paul, 

 

Thanks so much for your help! Do you mind explaining exactly how to verify the exact text? I know how to view page source, but not sure what to do with it after. Should I be viewing the page source of the customer's Order Status page? 


What exactly do I do with the below? 
<!-- DEBUG {{ checkout.shipping_method.title }} has been used -->

 

0 Likes
PaulNewton
Shopify Partner
2571 136 453
<!-- DEBUG {{ checkout.shipping_method.title }} has been used -->

Put that also in the additional scripts while testing and fixing problems since you want an exact match of the strings being used.

 

So yes view source on the order status page to verify logic. When viewing the source search(ctrl+f or F3) for that text string DEBUG to find what was output quickly.

Remember to remove such things when done or {% comment %} comment it out with liquid so it isn't output {% endcomment %}

 

If this gets you what you need remember to accept the solution for others

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
cherryw
Shopify Partner
5 0 1

thanks so much for your help!

0 Likes
NONEKLACE
New Member
1 0 0

hey guys I was wondering if you know how to remove the map altogether on customer checkout pages? i do not offer a pickup option, just shipping. Appreciate the help

0 Likes