Problem: Discount table, discounted subtotal on cart page, discounted subtotal on AJAX cart or discounted prices in checkout are not showing.

Youtube video of the QB Now setup process

Written Steps

Section 1: Find the shop in our list of shops and click Edit

  1. Login to https://quantity-breaks-now.herokuapp.com/oversee and confirm the merchant still has our app installed by searching for the merchants *.myshopify.com domain on the page.

    Quantity_Breaks_Now__2_.png

Section 2: Confirm the discount table is appearing (or disabled)

Now we need to view a product page our app is enabled for to confirm the discount table is showing. To do this, scroll to the bottom of the page where the discount groups are displayed. If more than one discount group is displayed, choosing any group is fine.

  1. *Important* It’s possible for merchants to disable the discount table. If the show_discount_table value is set to false, no discount table will appear on the product page. In this case, add the product to cart and continue to the next step.

    screenshot-quantity-breaks-now.herokuapp.com-2018.12.01-11-48-14.png
  2. Visit a product page our app is enabled on. Finding the product page depends on the type of discount group:

  3. If the discount table is not showing AND show_discount_table is set to true, this means the default discount table placement selector does not match any elements on the page. You’ll need to update the discount table placement selector:

  4. If the table still is not appearing:

Section 3: Confirm discounts are appearing on the cart page

Step 1: Add the item to cart and go to the cart page

  1. Add the discounted product from Section 2 to cart.

  2. Go to the cart page if you’re not already there (i.e., click the cart icon in the top right corner on most pages).

Step 2: Identify and update the subtotal selector

If the discounted subtotal is not appearing, follow these steps:

  1. Right click on the subtotal on the cart page and click Inspect Element in Chrome

  2. Identify the ID / class of the subtotal element

    cart-page-step1.png
  3. Update the subtotal selector field in the oversee area for the shop and save changes.

    cart-page-step2.png
  4. Refresh the cart page and confirm the discounted subtotal / discount log / next tier offers / etc are appearing.

    screenshot-daygadget.com-2018.12.03-11-04-57.png

Step 3: Fix any style issues

  1. At this point, note any style issues (e.g., the discount log or next tier offers aren’t aligned below the subtotal.) Also, note any GooglePay/AmazonPay/Paypal/Buy Now buttons on the product page and cart page. Our app cannot provide discounts if shoppers checkout with those. They will need to be hidden on the cart and product pages.

    screenshot-daygadget.com-2018.12.03-11-04-33.png
  2. Add CSS in the “Custom CSS” field in the shop’s oversee area edit page to fix those issues.

    screenshot-quantity-breaks-now.herokuapp.com-2018.12.03-11-06-54.png
  3. Save and confirm the CSS fixes worked. You’ll need to confirm everything looks okay on BOTH desktop and mobile (using the mobile preview option in Chrome developer tools)

    screenshot-daygadget.com-2018.12.03-11-08-08.png
    screenshot-daygadget.com-2018.12.03-11-08-22.png

Section 4: Confirm discounts are appearing on the AJAX / popup cart (if present)

Step 1: Check if the theme has an AJAX cart.

  • If the theme has no AJAX cart, skip this section, otherwise continue below.

Step 2: Identify mutation class

  1. Open and close the AJAX cart several times and notice any CSS class that gets added to the top-most AJAX cart container element when the AJAX cart is visible and gets removed when the AJAX cart is closed. Common class names that get added include “active”, “mm-opened”, “drawer-open”, “mfp-ready”, etc.

    mutationclass.png
  2. Copy the class name, without any leading period, in to the mutation class field.

  3. Save changes

Step 3: Identify cart subtotal selector and checkout button selector for the AJAX cart

  1. While the AJAX cart is opened, identify the CSS class for the AJAX cart’s subtotal selector.

    ajax-subtotal.png
  2. Using $(‘.class-name’) in the JS console, ensure it matches ONLY one element on the page - the subtotal in the AJAX cart. You may need to add “:visible” to the last element in the selector OR further specify the selector - e.g., $(“.parent-container span .classname:visible”) or something.

  3. While the AJAX cart is opened, identify the CSS class for the AJAX cart’s checkout button selector.

    ajax-checkout.png
  4. Using $(“.class-name”) in the JS console, ensure the current checkout button selector matches the checkout button in the AJAX cart. It’s okay for the checkout button selector to match multiple elements on the page.

  5. Prepend (do not replace) the selectors to the correct fields in the shop’s oversee area. Add in the mutation class.

    screenshot-wholesale-pricing-now.herokuapp.com-2018.12.04-09-19-08.png
  6. Save changes in oversee, refresh the product page in the shop, open the AJAX cart again and confirm the discounted subtotal appears in the AJAX cart now.

    screenshot-j-c-cbd.myshopify.com-2018.12.04-09-20-45.png

Step 3: Fix any style / formatting issues

  1. Identify any style / formatting issues when the AJAX cart opens on BOTH mobile and desktop. (Mobile styling can be checked using the mobile preview option in Chrome developer tools.)

  2. Add CSS to the custom CSS field for the shop in the oversee area to correct those. Save changes and confirm styling looks good now.

Section 5: Finishing up the ticket in Zendesk

  1. Take screenshots of the following areas on the merchant’s website demonstrating the app is functioning properly.

  2. Use the macro “Changes made to make our app compatible with your theme”.

  3. Add the screenshots to the message.

  4. Click Submit as pending to send the response to the merchant.

  5. If / when the merchant responds back saying that all is okay, send the “QB review request” macro to the merchant.

Did this answer your question?