Question 11771 in Shopify Question posted in
The Shopify help center can be found here.

If cart total price under $10 hide checkout button in Shopify

I can hide the checkout button when the cart’s total price is under $10 and show the reminder text. But…
When the cart total price is over $10, how does the cart drawer automatically Update without refresh page?

Here is my code:

{% if cart.total_price < 1000 %}
  Over $10 to checkout!

  {% else %}

  <div class="button">
    <a class="btn-checkout" href="/cart">checkout</a>
  </div>
{% endif %}
Tags:

2

Answers


  1. 0

    Shopify is treating money in cents, so you should change it in order for everything to work:

    {% if cart.total_price < 1000 %}

    Over $10 to checkout!
    
    {% else %}
    
    <div class="button">
      <a class="btn-checkout" href="/cart">checkout</a>
    </div>
    
    {% endif %}
    Login or Signup to reply.
  2. 0

    The first thing to remember when working with a Shopify site is that Liquid is a templating language, not a scripting language. When a visitor requests a page on your store, Shopify’s servers interpret the Liquid commands to assemble a final document that is sent over the internet to the customer’s browser without any templating marks in it – the final result is just a normal page of HTML, Javascript or CSS.

    Wrapping your checkout button with an if…else in Liquid will therefore work just fine for a static site, where any cart operation causes the page to reload – but cannot work for a dynamic site, as the page can only be accurate as of the moment when the server put it together.

    For dynamic changes to a page that has already loaded, you’re going to need a scripting language – specifically, Javascript. To make the edit you want, you’re going to need to find the Javascript code that is responsible for rendering your theme’s drawer cart and make the code updates that can toggle the checkout button there. Unfortunately, as themes can (and do) go about this any way that the theme developers feel like at the time, there is no single One True Way that I can share with you to make this update without also seeing the relevant code.

    If you’re lucky, you have a theme where the JS file you need is well laid out and easily found in the assets folder, often with a name like theme.js or shop.js. If you’re having trouble finding the right file but have some familiarity with your browser’s developer tools, one method to track down the Javascript function that updates the cart that I have used many times before is:

    • Open your dev tools to the "Network" tab
    • Navigate to a product page
    • Clear the network logs once the page is fully loaded to reduce clutter
    • Add an item to the cart. You should see a bunch of network calls happen.
    • Once the item has been added and the drawer cart is visually updated, look in the network traffic for a call to /cart.js – this will have been invoked by whatever code your theme used to get the most current state of the cart so that the items, subtotal, etc. could be updated. (If you can’t find /cart.js in the list, look for /cart/add.js as the second-best option)
    • Your network tab should have a column called "Initiator." Hover your mouse cursor over the entry for this line to see the "call stack" of functions that led to the network request, with the most recent on top. Clicking on any of the function names will take you to that line in the associated javascript file.
      • If you land in the middle of something that just looks like
        gibberish, you probably landed in some helper library that sits
        between the code you want to find and the actual request – go back to
        the call stack and try the next function down until you find
        something that looks like it’s supposed to be read by actual humans.
      • We’re hoping to find a function with a descriptive name
        that relates to the cart update, such as drawCart, doCartUpdate,
        onProductAdded, etc.

    Once you have found the function in question, how you make the update to actually render the change that you want will depend heavily on how the theme is updating the side cart. For some themes, where all the Javascript files (and not just the helper libraries) are minified down to illegible names and scrunched onto a single line, you’re probably as far as you can go without really getting into the nuts and bolts of the code. Other themes might use a templating library for Javascript, such as Handlebars, to render the updates and so your change will be a much easier update to some template file hidden somewhere in your theme files. And of course your theme could be doing anything in between – but if you can at least find where and how your theme is generating the cart drawer you are most of the way to being able to customize it! If you manage to make it this far but the changes you need to make aren’t obvious to you, this would certainly warrant a follow-up question here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search