Shopify Plus Checkout Premium Installation

First step is to make a small liquid tweak to hide our pricing line items inline, so that when our price fix javascript runs, we don't get a very noticeable collapsing of the item list table as we remove the pricing item lines. Edit layout/checkout.liquid and find the following:

<div class="sidebar__content">
            {{ content_for_order_summary }}
          </div>

Replace that with:

<div class="sidebar__content">
            {{ content_for_order_summary | replace: 'data-product-type="SHOPSTORM_HIDDEN_PRODUCT"', 'data-product-type="SHOPSTORM_HIDDEN_PRODUCT" style="display:none;"' }}
</div>

Then, insert the following javascript to fix the main product prices just before the </body> closing tag (this is important, as it won't work properly in the document head):

<script type="text/javascript">
  // http://help.shopstorm.com/article/420-shopify-plus-checkout-premium-installation
  // Version: 3
  // Date: 2017-08-03
  
  // Assumptions:
  // * We assume a certain page structure, and bail out aggressively if things
  //   aren't as we expect (e.g. Shopify changed the layout)
  // * Each pricing item is proceeded by an associated main product
  // * An event named 'page:change' is fired on the document each time the 
  //   checkout page is ajax-refreshed
  // * Line item prices use a dot as decimal separator (1,299.99) or no decimals.
  //   If decimal separator is comma (1.299,99), code will NOT work.

  // Hide any pricing items, and add their cost to the associated main product line
  function fixPaidCustomizationProducts(node) {
    // Money (not cents) string w/o currency. Only digits, commas, and dots are preserved.
    // e.g. '$50.00' becomes '50.00', '$1,234.99' becomes '1,234.99'
    // @param moneyString [String]
    // @return [String]
    var getMoneyStringWithoutCurrency = function(moneyString) {
      return moneyString.replace(/[^\d.,]/g, '');
    };
    
    // Money (not cents) number.
    // e.g. '$50.00' becomes 50, '$1,234.99' becomes 1234.99
    // @param moneyString [String]
    // @return [Number, NaN] Number if conversion went well, NaN otherwise.
    var getMoneyNumber = function(moneyString) {
      return +getMoneyStringWithoutCurrency(moneyString).replace(/[^\d.]/g, '');
    };

    // @param element [HTMLElement] will have its textContent replaced.
    // @param rawPriceString [String] money string, without currency
    // @param pricingItemLinePrice [Number] price to add to raw price string
    var replacePriceTextAddingCustomization = function(element, rawPriceString, pricingItemLinePrice) {
      var priceCustomized = (getMoneyNumber(rawPriceString) + pricingItemLinePrice).toFixed(2);
      element.textContent = element.textContent.replace(rawPriceString, priceCustomized);
    };

    var pricingItemRows = node.querySelectorAll('[data-product-type="SHOPSTORM_HIDDEN_PRODUCT"]');
    for (var i = 0; i < pricingItemRows.length; i++) {
      var pricingItemRow = pricingItemRows[i];
      var productPriceEl = pricingItemRow.getElementsByClassName('product__price')[0];
      if (!productPriceEl) {
        return;
      }
      // Pricing item line price as money (not cents) Number, e.g. '$50.00' becomes 50, '$1.99' becomes 1.99
      var pricingItemLinePrice = getMoneyNumber(productPriceEl.textContent);
      if (!pricingItemLinePrice) {
        return;
      }
      var mainItemRow = pricingItemRow.previousElementSibling;
      if (!mainItemRow) {
        return;
      }
      var mainItemLinePriceEl = mainItemRow.getElementsByClassName('product__price')[0];
      if (!mainItemLinePriceEl) {
       return;
      }
      // Main item line price element may include a crossed out original price (usually in a <del> tag)
      // which results in a non-numeric string, e.g. '106.0090.10'. We need
      // the final line price, assumed to be in the last child element.
      var mainItemLinePriceStrikeThru = mainItemLinePriceEl.getElementsByTagName('del')[0];
      var mainItemLinePriceLastChild = mainItemLinePriceEl.lastElementChild;
      var mainItemLinePriceRaw = getMoneyStringWithoutCurrency(mainItemLinePriceLastChild.textContent);
      if (isNaN(+mainItemLinePriceRaw)) {
          return;
      }

      // update the main product price
      if (!mainItemLinePriceLastChild) {
        return;
      }

      replacePriceTextAddingCustomization(
        mainItemLinePriceLastChild,
        mainItemLinePriceRaw,
        pricingItemLinePrice
      );
      
      if (mainItemLinePriceStrikeThru) {
        console.debug(mainItemLinePriceStrikeThru);
        var mainItemLinePriceStrikeThruRaw = getMoneyStringWithoutCurrency(mainItemLinePriceStrikeThru.textContent);
        replacePriceTextAddingCustomization(
          mainItemLinePriceStrikeThru,
          mainItemLinePriceStrikeThruRaw,
          pricingItemLinePrice
        );
      }

      // remove the pricing item row
      pricingItemRow.parentElement.removeChild(pricingItemRow);
    }
  }

  // fix the paid customization products on page load.
  fixPaidCustomizationProducts(document);
  // fix the paid customization products on ajax refresh (this results in a small but noticeable flash as the main product price is fixed)
  document.addEventListener('page:change', function() { fixPaidCustomizationProducts(document); });
</script>

Less common cases

In addition to the above changes, the plus checkout may include a customized order summary loop summary, which shows the hidden product. For example,

	<tr data-product-id="{{ line.product_id }}" data-variant-id="{{ line.variant_id }}" data-product-type="{{ line.product.type }}">

Replace with

	<tr data-product-id="{{ line.product_id }}" data-variant-id="{{ line.variant_id }}" data-product-type="{{ line.product.type }}" {% if line.product.type == 'SHOPSTORM_HIDDEN_PRODUCT' %} style="display:none;"{% endif %}>

Additionally, if the main product(s) show the _pc_pricing line item properties at checkout, we have to detect and skip those properties in the line.properties loop.

    {% for prop in line.properties %}
        {%- capture prop_first_char -%}{{ prop.first | slice: 0, 1 }}{%- endcapture -%}
        {%- if prop_first_char == '_' -%}{% continue %}{%- endif -%}

Still need help? Contact Us Contact Us