Programmatically detecting steps in checkout

Highlighted
New Member
4 0 0

Hi all 

Apologies for the silly question, but I am new to Shopify coding.  I am trying to programmatically detect the current shipping step in order to fire some logic. 

 

- Is there a recommended way to do this? 

- are there any good "goto" documentation where I can look up these sort of common best practice without needing to ask questions on forum.

 

Thanks for the help 

 

0 Likes
Highlighted
Shopify Expert
9850 97 1611

To be clear, we're talking about methods for Shopify Plus merchants only correct?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
4 0 0

Correct for Shopify Plus. 

 I tried to used the Shopify object however when I ran this code below - the if statements were never passed  and it fell through to the `else` statement.  Whats strange was when I logged the Shopify.checkout.step  it returns a string with "contact_information" so I am unclear why the if statement is failing!

{% if checkout %}
    var step = 0;
  //The conditional statement below doesn't seem to be executing correctly despite Shopify.Checkout.step returning as a string with value "contact_information". 
    {% if Shopify.Checkout.step == "contact_information" %}
        console.log("1")
    {% elsif Shopify.Checkout.step == "shipping_method" %}
        console.log("1")
    {% elsif Shopify.Checkout.step ==  "payment_method" %}
        console.log("1")
  {% elsif Shopify.Checkout.step ==  "review" %}
        console.log("1")
  {% elsif Shopify.Checkout.step ==  "processing" %}
        console.log("1")
   {% else %}
  console.log("other unhandled Checkout step");
     {% endif %}
0 Likes
Highlighted
Shopify Partner
274 22 41

Unsure of the last 2 off hand, but the first 3 can be seen and detected in the URL.  You can also use them to an extent with Liquid Logic.    The following is a Piece of code I use in my Abandoned cart notifications.  Might be able to extrapolate what you need from it.

 

<br><hr><br>
{% if shipping_method.title == null %} Enter the Following Discount Code for FreeShipping:<b>FreeShipping</b> {% else %}  Enter the Following Discount Code for 10% off:<b>10PercentOff</b> {% endif %}
<br><hr><br>

In the above code, it checks for which page the customer left off on for abandoned carts.  IF on shipping page give Discount code 1, else (payment page) give discount 2.  Not sure if that will help but might point towards a way to do it with Liquid and playing with it that way instead of JS

Best Regards,
Duncan.
Isle of misfit code & development
http://ecomdev.ca
0 Likes
Highlighted
Shopify Expert
9850 97 1611

You're mixing up Liquid and JavaScript.

Use JavaScript to grab the object. eg:

 

 

if (Shopify.Checkout.step == 'contact_information'){
  ...
}

You could probably detect what step you're on with Liquid if you really needed to but wouldn't be a path I'd suggest.

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
4 0 0

Thanks Jason ! That worked. Is there guideline when you should use JS and when you should use Liquid?

0 Likes
Highlighted
New Member
1 0 0

A colleague of mine just had a similar question but needed to do it in liquid.
He wanted to check if it's the thank you page.
I did it by checking the checkout_html_classes:

{%- assign is_thank_you_page = false -%}
{%- if checkout_html_classes contains 'page--thank-you' -%}
    {%- assign is_thank_you_page = true -%}
{%- endif -%}

then you evaluate the is_thank_you_page var and you're good to go.

In your case, if you need to check all the steps, do a case conditional and evaluate against the step-specific classes.

0 Likes