├── README.md
├── bigcommerce-points-products-dropdown
    ├── README.md
    └── smile-points-products-dropdown.html
├── bigcommerce-points-slider
    ├── README.md
    ├── smile-points-slider.html
    └── sweettooth-points-slider.html
├── bigcommerce-stencil-files
    ├── README.md
    └── files 4.zip
├── points-products-dropdown
    ├── README.md
    ├── smile-points-products-dropdown.html
    └── sweettooth-points-products-dropdown.html
├── shopify-points-products-dropdown
    ├── README.md
    ├── smile-points-products-dropdown.liquid
    └── sweettooth-points-products-dropdown.liquid
├── shopify-points-slider
    ├── README.md
    ├── smile-points-slider.liquid
    └── sweettooth-points-slider.liquid
├── smile-dev.png
├── welcome-developers.png
└── welcome1.png


/README.md:
--------------------------------------------------------------------------------
 1 | ![Welcome](welcome1.png)
 2 | 
 3 | ## Welcome to Smile.io
 4 | 
 5 | This repo is home to a growing number of code samples to help integrate Smile deeply into your store. We hope these samples save you time and help document best practices. PRs are always welcome to help improve these samples for everyone.
 6 | 
 7 | ## List of code samples
 8 | 
 9 | - PointsProducts dropdown
10 | - BigCommerce points slider
11 | - Shopify points slider
12 | - Shopify PointsProducts dropdown
13 | 
14 | ## Contributing
15 | 
16 | We need you! This repo is built to make developer lives easier while building with Smile. If you have new examples, improvements to existing ones, or anything else you think will help others please submit a PR so we can get the conversations going. 🙏
17 | 


--------------------------------------------------------------------------------
/bigcommerce-points-products-dropdown/README.md:
--------------------------------------------------------------------------------
 1 | # BigCommerce PointsProducts Dropdown
 2 | 
 3 | This file will explain how to get setup.
 4 | 
 5 | ## Implementation
 6 | 
 7 | 1. Ensure you have Smile.io setup on your store
 8 | 1. Copy the code in the `smile-points-products-dropdown.html` file in this repo
 9 | 1. Add the code snippet below to your checkout
10 | 1. Add your public API key to the snippet
11 | 1. Implement adding the discount code to your cart in the `applyPointsPurchaseToCart` callback
12 | 1. You're all set!
13 | 
14 | ## Snippets
15 | 
16 | ### Points dropdown container
17 | 
18 | Add the following code to your checkout in the location you want to show the points dropdown.
19 | ```html
20 | <div class="smile-points-products-dropdown"></div>
21 | ```
22 | 


--------------------------------------------------------------------------------
/bigcommerce-points-products-dropdown/smile-points-products-dropdown.html:
--------------------------------------------------------------------------------
  1 | <!-- NOTE: You will need to add your public key to the
  2 |   data-channel-key attribute below. -->
  3 | <script class="smile-bigcommerce-init"
  4 |   src="https://js.smile.io/v1/smile-bigcommerce.js"
  5 |   data-channel-key="">
  6 | </script>
  7 | 
  8 | <!-- NOTE: Your store may not use jQuery, if not uncomment this
  9 |            script to load it on the page -->
 10 | <!-- <script
 11 |   src="https://code.jquery.com/jquery-1.12.4.min.js"
 12 |   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
 13 |   crossorigin="anonymous"></script> -->
 14 | 
 15 | <script>
 16 |   (function() {
 17 |     // PointsProduct ID's that will be hidden from the dropdown
 18 |     var hidePointsProductIds = [];
 19 | 
 20 |     /**
 21 |      * The function used in the Array filter to determine if the
 22 |      * PointsProduct should be hidden.
 23 |      */
 24 |     var shouldHidePointsProduct = function(pointsProduct) {
 25 |       return hidePointsProductIds.indexOf(pointsProduct.id) === -1;
 26 |     };
 27 | 
 28 |     // The name used for points in your reward program.
 29 |     var pointsLabel = 'points';
 30 | 
 31 |     /**
 32 |      * This function is used as a way to filter out certain PointsProducts
 33 |      * from the dropdown. This is left up to the developer. Just add the
 34 |      * PointsProduct ID's you don't want to show up to the
 35 |      * hidePointsProductIds array.
 36 |      */
 37 |     var filterPointsProducts = function(pointsProducts) {
 38 |       let filteredPointsProducts = pointsProducts;
 39 | 
 40 |       filteredPointsProducts = filteredPointsProducts.filter(shouldHidePointsProduct);
 41 | 
 42 |       return filteredPointsProducts;
 43 |     };
 44 | 
 45 |     /**
 46 |      * This method is used to automatically apply the discount code to the cart. It
 47 |      * takes a PointsPurchase object as the argument, documented here:
 48 |      * https://docs.smile.io/js/other-objects/points-purchase-object.
 49 |      * One way to do this is with jQuery. Find the selector for your discount code
 50 |      * input and set the value to the discount code that was just created:
 51 |      * $('.your-discount-code-input-class').val(pointsPurchase.reward_fulfillment.code);
 52 |      */
 53 |     var applyPointsPurchaseToCart = function(pointsPurchase) {
 54 |       /**
 55 |        * NOTE: Developers should replace this with the class of their
 56 |        * discount code input field class
 57 |        */
 58 |       var $discountCodeInput = $('.your-discount-code-input-class');
 59 | 
 60 |       // The generated discount code
 61 |       var discountCode = pointsPurchase.reward_fulfillment.code;
 62 | 
 63 |       /**
 64 |        * Next is to apply this discount code to your cart. This could be completed
 65 |        * via jQuery or your cart's API.
 66 |        */
 67 |     };
 68 | 
 69 |     $(document).on('smile-ui-loaded', function() {
 70 |       SmileUI.ready().then(function(smileUI) {
 71 |         // Initialized Smile.js instance.
 72 |         var smile = smileUI.smile;
 73 | 
 74 |         // Don't show if there is no logged in customer or if the customer is disabled.
 75 |         if (!smile.customer || smile.customer.state === 'disabled') {
 76 |           return;
 77 |         }
 78 | 
 79 |         var $pointsProductsDropdown = $('.smile-points-products-dropdown');
 80 | 
 81 |         smile.fetchAllPointsProducts({ exchange_type: 'fixed' }).then(function(pointsProducts) {
 82 |           pointsProducts = filterPointsProducts(pointsProducts);
 83 | 
 84 |           var affordableRewards = $.grep(pointsProducts, function(pointsProduct) {
 85 |             return (pointsProduct.points_price <= smile.customer.points_balance);
 86 |           });
 87 | 
 88 |           var unaffordableRewards = $.grep(pointsProducts, function(pointsProduct) {
 89 |             return (pointsProduct.points_price > smile.customer.points_balance);
 90 |           });
 91 | 
 92 |           var canRedeem = (affordableRewards.length > 0);
 93 | 
 94 |           var redeemLabel = canRedeem ?
 95 |             "Redeem points to apply rewards to your order." :
 96 |             "Keep saving to earn rewards on your next order.";
 97 | 
 98 |           var customerPointsBalance = smile.customer.points_balance;
 99 | 
100 |           var dropdownHtml = ' \
101 |           <div class="smile-points-balance-heading">You have <span class="smile-points-balance">' + customerPointsBalance + '</span> ' + pointsLabel + '</div> \
102 |           <div class="smile-redeem-label">' + redeemLabel + '</div> \
103 |           <div class="smile-form"> \
104 |             <div class="smile-select-container"> \
105 |               <select placeholder="Rewards" class="smile-points-products-select form-control"> \
106 |           ';
107 | 
108 |           $.each(affordableRewards, function(index, pointsProduct) {
109 |             var reward = pointsProduct.reward;
110 |             dropdownHtml += '<option value="' + pointsProduct.id + '">' + reward.name + ' - ' + pointsProduct.exchange_description + '</option>';
111 |           });
112 | 
113 |           $.each(unaffordableRewards, function(index, pointsProduct) {
114 |             var reward = pointsProduct.reward;
115 |             dropdownHtml += '<option value="' + pointsProduct.id + '" disabled>' + reward.name + ' - ' + pointsProduct.exchange_description + '</option>';
116 |           });
117 | 
118 |           var disabledClassName = canRedeem ? '' : 'btn--disabled';
119 |           var disabledAttribute = canRedeem ? '' : 'disabled';
120 | 
121 |           dropdownHtml += ' \
122 |               </select> \
123 |             </div> \
124 |             <div class="smile-redeem-button-container"> \
125 |               <button type="submit" class="smile-redeem-button btn btn-primary' + disabledClassName + '" ' + disabledAttribute + '> \
126 |                 Redeem \
127 |                 <i class="btn__content shown-on-mobile icon icon--arrow"></i> \
128 |                 <i class="btn__spinner icon icon--button-spinner"></i> \
129 |               </button> \
130 |             </div> \
131 |           </div> \
132 |           ';
133 | 
134 |           // Add dropdown html to the points slider container
135 |           $pointsProductsDropdown.append(dropdownHtml);
136 |           var $redeemButton = $pointsProductsDropdown.find('.smile-redeem-button');
137 |           if (affordableRewards.length === 0) {
138 |             $redeemButton.addClass('btn--disabled');
139 |             $redeemButton.attr('disabled', true);
140 |           }
141 | 
142 |           var rewardsExist = (pointsProducts.length > 0);
143 | 
144 |           if (rewardsExist) {
145 |             $pointsProductsDropdown.find('.smile-points-products-select').val(pointsProducts[0].id);
146 |           }
147 | 
148 |           // Handle redeem button click events
149 |           $pointsProductsDropdown.on('click', '.smile-redeem-button', function() {
150 |             var $redeemButton = $(this);
151 |             var $selectedPointsProduct = $pointsProductsDropdown.find('.smile-points-products-select :selected');
152 |             var pointsProductId = $selectedPointsProduct.val();
153 | 
154 |             // Start loading indicator
155 |             $redeemButton.addClass('btn--loading');
156 | 
157 |             // Hit the Smile.io API to spend customer's points
158 |             smile.purchasePointsProduct(pointsProductId).then(function(pointsPurchase) {
159 |               // Clear the field error if there was one previously
160 |               $pointsProductsDropdown.find('.field').removeClass('field--error');
161 | 
162 |               applyPointsPurchaseToCart(pointsPurchase);
163 | 
164 |               // Immediately update the customers points balance
165 |               $('.smile-points-balance').text(smile.customer.points_balance - pointsPurchase.points_spent);
166 | 
167 |               /**
168 |                * Update customer's points balance based on the server's value.
169 |                * This should be the same as the above but always nice to confirm.
170 |                */
171 |               smile.fetchCustomer().then(function(customer) {
172 |                 $('.smile-points-balance').text(customer.points_balance);
173 |               });
174 |             }).catch(function(err) {
175 |               console.error('Something went wrong when purchasing PointsProduct with ID ' + pointsProductId + '.');
176 |               $pointsProductsDropdown.find('.field').addClass('field--error');
177 |             }).then(function() {
178 |               /**
179 |                * This block runs whether the call succeeds or fails, kind of like finally() in other languages.
180 |                * Source: http://stackoverflow.com/a/35999141/540194
181 |                */
182 | 
183 |               $redeemButton.removeClass('btn--loading');
184 |             });
185 |           });
186 |         }); // fetchPointsProducts
187 |       });
188 |     });
189 |   }());
190 | </script>
191 | 
192 | <style>
193 |   .smile-points-products-dropdown .smile-redeem-label {
194 |     margin-bottom: 10px;
195 |   }
196 | 
197 |   .smile-points-balance-heading {
198 |     margin-bottom: 10px;
199 |   }
200 | 
201 |   .smile-redeem-amount-label {
202 |     padding-bottom: 5px;
203 |   }
204 | 
205 |   .smile-points-products-dropdown .smile-form {
206 |     display: -webkit-box;
207 |     display: -ms-flexbox;
208 |     display: flex;
209 |     -webkit-box-orient: horizontal;
210 |     -webkit-box-direction: normal;
211 |     -ms-flex-direction: row;
212 |     flex-direction: row;
213 |   }
214 | 
215 |   .smile-points-products-dropdown .smile-select-container {
216 |     -webkit-box-flex: 1;
217 |     -ms-flex-positive: 1;
218 |     flex-grow: 1;
219 |     margin-right: 5px;
220 |   }
221 | 
222 |   .smile-points-products-dropdown .smile-redeem-button-container {
223 |     -ms-flex-negative: 1;
224 |     flex-shrink: 1;
225 |   }
226 | </style>
227 | 


--------------------------------------------------------------------------------
/bigcommerce-points-slider/README.md:
--------------------------------------------------------------------------------
 1 | # Points Slider
 2 | 
 3 | This file will explain how to get setup.
 4 | 
 5 | ## Implementation
 6 | 
 7 | 1. Ensure you have Smile.io setup on your store
 8 | 1. Copy the code in the `smile-points-slider.html` file in this repo
 9 | 1. Add the code snippet below to your checkout
10 | 1. Add your public API key to the snippet
11 | 1. Implement adding the discount code to your cart in the `applyPointsPurchaseToCart` callback
12 | 1. You're all set!
13 | 
14 | ## Snippets
15 | 
16 | ### Points slider container
17 | 
18 | Add the following code to your checkout in the location you want to show the points slider:
19 | ```html
20 | <div class="smile-points-slider" data-points-product-id="TODO"></div>
21 | ```
22 | 
23 | Be sure to replace `TODO` with the ID of the points product that you want to use with the slider!
24 | 


--------------------------------------------------------------------------------
/bigcommerce-points-slider/smile-points-slider.html:
--------------------------------------------------------------------------------
  1 | <!-- NOTE: You will need to add your public key to the
  2 |   data-channel-key attribute below. -->
  3 | <script class="smile-bigcommerce-init"
  4 |   src="https://js.smile.io/v1/smile-bigcommerce.js"
  5 |   data-channel-key="">
  6 | </script>
  7 | 
  8 | <!-- A third party library for improved slider functionality on mobile.
  9 |      Available at: https://rangetouch.com/. Developers are welcome to host
 10 |      this file in place of using RangeTouch's CDN. -->
 11 | <script src="https://cdn.rangetouch.com/2.0.1/rangetouch.js"></script>
 12 | 
 13 | <!-- A third party library for formatting currencies in multiple locales -->
 14 | <script async src="https://cdnjs.cloudflare.com/ajax/libs/currencyformatter.js/2.2.0/currencyFormatter.min.js"></script>
 15 | 
 16 | <!-- NOTE: Your store may not use jQuery, if not uncomment this
 17 |            script to load it on the page -->
 18 | <!-- <script
 19 |   src="https://code.jquery.com/jquery-1.12.4.min.js"
 20 |   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
 21 |   crossorigin="anonymous"></script> -->
 22 | 
 23 | <script>
 24 |   (function() {
 25 |     // Store's currency symbol
 26 |     var currencyCode = 'USD';
 27 | 
 28 |     // Store's currency display type. Can be 'symbol' or 'code'
 29 |     // ex: 'symbol' results in "$15"
 30 |     // ex: 'display' results in "15 USD"
 31 |     var currencyDisplayType = 'symbol';
 32 | 
 33 |     // Optional translation:
 34 |     // Label for main button to apply their points value after using the points slider
 35 |     var translateRedeemLabel = 'Redeem';
 36 | 
 37 |     // Optional translation:
 38 |     // The name used for points in your reward program.
 39 |     var translatePointsLabel = 'points';
 40 | 
 41 |     // Optional translation:
 42 |     // Message when points reward has been added.
 43 |     var translateRewardAppliedLabel = 'Congrats! Your reward has been applied to the cart.';
 44 | 
 45 |     // Optional translation:
 46 |     // This phrase will have SLIDER_VALUE replaced with the points value the customer has currently dragged the slider to
 47 |     // This phrase will also have POINTS_LABEL replaced with your label above.
 48 |     // Ex: 'Redeem SLIDER_VALUE POINTS_LABEL' would show as 'Redeem 120 points'
 49 |     // Do not remove `SLIDER_VALUE` or `POINTS_LABEL` from the phrase, this will happen automatically.
 50 |     var translateRedeemPoints = 'Redeem SLIDER_VALUE POINTS_LABEL';
 51 | 
 52 |     // Optional translation:
 53 |     // This phrase will have NUMBER_POINTS replaced with the number of points the customer has
 54 |     // This phrase will also have POINTS_LABEL replaced with your label above.
 55 |     // Ex: 'You have NUMBER_POINTS POINTS_LABEL' would show as 'You have 120 points'
 56 |     // Do not remove `NUMBER_POINTS` or `POINTS_LABEL` from the phrase, this will happen automatically.
 57 |     var translatePointsBalance = 'You have NUMBER_POINTS POINTS_LABEL';
 58 | 
 59 |     // Optional translation:
 60 |     // This phrase will have MINIMUM_AMOUNT replaced with the number of points the customer needs to redeem.
 61 |     // This phrase will also have POINTS_LABEL replaced with your label above.
 62 |     // Ex: 'You need a minimum of MINIMUM_AMOUNT POINTS_LABEL to redeem.' would show as 'You need a minimum of 10 points to redeem.'
 63 |     // Do not remove `MINIMUM_AMOUNT` or `POINTS_LABEL` from the phrase, this will happen automatically.
 64 |     var translateRewardNameRedeemLabel = 'You need a minimum of MINIMUM_AMOUNT POINTS_LABEL to redeem.'
 65 | 
 66 |     // Optional translation:
 67 |     // This phrase will have DISCOUNT_AMOUNT replaced with the currency amount to be discounted.
 68 |     // Ex: 'DISCOUNT_AMOUNT off' would show as '$15 off' or '15 CAD off' depending on your preference above.
 69 |     // Do not remove `DISCOUNT_AMOUNT` from the phrase, this will happen automatically.
 70 |     var translatedDiscount = 'DISCOUNT_AMOUNT off';
 71 | 
 72 |     var generateRewardNameRedeemLabel = function(min) {
 73 |       var label = translateRewardNameRedeemLabel.replace('MINIMUM_AMOUNT', min);
 74 |       return label.replace('POINTS_LABEL', ` ${translatePointsLabel} `);
 75 |     }
 76 | 
 77 |     var generatePointsBalanceHtml = function(customerPointsBalance) {
 78 |       var html = translatePointsBalance.replace(
 79 |         'NUMBER_POINTS',
 80 |         ` <span class="smile-points-balance">' ${customerPointsBalance} '</span> `
 81 |       );
 82 | 
 83 |       return html.replace('POINTS_LABEL', ` ${translatePointsLabel} `);
 84 |     }
 85 | 
 86 |    var generateRedeemAmountLabelHtml = function(initialSliderValue) {
 87 |       var html = translateRedeemPoints.replace('SLIDER_VALUE', ` <span class="smile-slider-value">' ${initialSliderValue} '</span> `);
 88 |       return html.replace('POINTS_LABEL', ` ${translatePointsLabel} `);
 89 |     }
 90 | 
 91 |     var generateFormattedRewardValue = function(value) {
 92 |       var pattern = currencyDisplayType === 'code' ? '#,##0' : '!#,##0';
 93 |       var opts = { currency: currencyCode, pattern: pattern };
 94 |       var formatted = OSREC.CurrencyFormatter.format(value, opts);
 95 | 
 96 |       if (currencyDisplayType === 'code') {
 97 |         formatted = formatted + ' ' + currencyCode;
 98 |       }
 99 | 
100 |       return formatted;
101 |     };
102 | 
103 |     var generateRewardName = function(formattedValue) {
104 |       return translatedDiscount.replace('DISCOUNT_AMOUNT', formattedValue);
105 |     }
106 | 
107 |     /**
108 |      * This method is used to automatically apply the discount code to the cart. It
109 |      * takes a PointsPurchase object as the argument, documented here:
110 |      * https://docs.smile.io/js/other-objects/points-purchase-object.
111 |      * One way to do this is with jQuery. Find the selector for your discount code
112 |      * input and set the value to the discount code that was just created:
113 |      * $('.your-discount-code-input-class').val(pointsPurchase.reward_fulfillment.code);
114 |      */
115 |     var applyPointsPurchaseToCart = function(pointsPurchase) {
116 |       /**
117 |        * NOTE: Developers should replace this with the class of their
118 |        * discount code input field class.
119 |        */
120 |       var $discountCodeInput = $('.your-discount-code-input-class');
121 | 
122 |       // The generated discount code
123 |       var discountCode = pointsPurchase.reward_fulfillment.code;
124 | 
125 |       /**
126 |        * Next is to apply this discount code to your cart. This could be completed
127 |        * via jQuery or your cart's API.
128 |        */
129 |     };
130 | 
131 |     $(document).on('smile-ui-loaded', function() {
132 |       SmileUI.ready().then(function(smileUI) {
133 |         // Initialized Smile.js instance
134 |         var smile = smileUI.smile;
135 | 
136 |         // Don't show if there is no customer logged in or if the customer is disabled.
137 |         if (!smile.customer || smile.customer.state === 'disabled') {
138 |           return;
139 |         }
140 | 
141 |         var $pointsSlider = $('.smile-points-slider');
142 |         var pointsSliderData = $pointsSlider.data();
143 |         var pointsProductId = pointsSliderData.pointsProductId;
144 | 
145 |         smile.fetchPointsProduct(pointsProductId).then(function(pointsProduct) {
146 |           if (pointsProduct.exchange_type !== 'variable') {
147 |             console.error("Oops! The Smile.io PointsProduct you're using for the points slider does not support variable reward values and thus cannot be displayed as a slider. To use the points slider, setup a PointsProduct that supports variable reward values. Learn more at https://docs.smile.io/install-smile/bigcommerce/points-slider-at-checkout.");
148 |             return;
149 |           }
150 | 
151 |           var reward = pointsProduct.reward;
152 |           var min = pointsProduct.variable_points_min || 0;
153 |           // Max defaults to the customers max points balance
154 |           var max = smile.customer.points_balance;
155 |           var step = pointsProduct.variable_points_step;
156 |           var stepRewardValue = pointsProduct.variable_points_step_reward_value;
157 |           var customerPointsBalance = smile.customer.points_balance;
158 |           var initialSliderValue = min;
159 | 
160 |           if (pointsProduct.variable_points_max) {
161 |             /**
162 |              * Cap max of the slider as the smaller of the customers points
163 |              * balance and the pointsProducts variable points max
164 |              */
165 |             max = Math.min(pointsProduct.variable_points_max, max);
166 |           }
167 | 
168 |           var rewardValue = (initialSliderValue / step) * stepRewardValue;
169 |           var rewardName = generateRewardName(generateFormattedRewardValue(rewardValue));
170 |           var pointsBalanceHtml = generatePointsBalanceHtml(customerPointsBalance);
171 |           var redeemAmountLabelHtml = generateRedeemAmountLabelHtml(initialSliderValue);
172 | 
173 |           var sliderHtml = ' \
174 |             <div class="smile-points-balance-heading">' + pointsBalanceHtml + '</div> \
175 |             <div class="smile-redeem-amount-label">' + redeemAmountLabelHtml + '</div> \
176 |             <div class="smile-form"> \
177 |               <div class="smile-range-input-container"> \
178 |                 <input \
179 |                   class="smile-range-input" \
180 |                   type="range" \
181 |                   min="' + min + '" \
182 |                   max="' + max + '" \
183 |                   step="' + step + '" \
184 |                   value="' + initialSliderValue + '" \
185 |                   data-orientation="horizontal" \
186 |                 > \
187 |                 <div class="smile-reward-name">' + rewardName + '</div> \
188 |               </div> \
189 |               <div class="smile-redeem-button-container"> \
190 |                 <button type="submit" class="smile-redeem-button btn btn-primary" disabled> \
191 |                   ' + translateRedeemLabel + ' \
192 |                 </button> \
193 |               </div> \
194 |             </div> \
195 |             ';
196 | 
197 |           // Add slider html to the points slider container
198 |           $pointsSlider.append(sliderHtml);
199 | 
200 |           // Set up improved touch event handling on the points slider.
201 |           // This is wrapped in a setTimeout call to ensure the element
202 |           // is in the DOM before we try setting up RangeTouch on it.
203 |           window.setTimeout(function() { new RangeTouch('.smile-range-input'); }, 0);
204 | 
205 |           /**
206 |            * Check whether the Customer can spend points or if
207 |            * the slider has a value of 0. If one of those is true
208 |            * disable the 'Redeem' button.
209 |            */
210 |            var $redeemButton = $pointsSlider.find('.smile-redeem-button');
211 |            if (smile.customer.points_balance < min) {
212 |              $pointsSlider.find('.smile-reward-name').text(generateRewardNameRedeemLabel(min));
213 |              $redeemButton.addClass('btn--disabled');
214 |              $redeemButton.attr('disabled', true);
215 |            }
216 | 
217 |            if (rewardValue === 0) {
218 |              $redeemButton.addClass('btn--disabled');
219 |              $redeemButton.attr('disabled', true);
220 |            }
221 | 
222 |           /**
223 |            * Handle slider value change events
224 |            *
225 |            * Listening on two events:
226 |            *   input - To update values as the customer is sliding the slider
227 |            *   change - To update values when the slider is changed via javascript
228 |            *
229 |            * Source: First comment on this answer http://stackoverflow.com/a/19067260/540194
230 |            */
231 |           $pointsSlider.on('input change', '.smile-range-input', function() {
232 |             var sliderValue = $(this).val();
233 |             var rewardValue = (sliderValue / step) * stepRewardValue;
234 | 
235 |             // Update points to be spent based on slider value
236 |             $pointsSlider.find('.smile-slider-value').text(sliderValue);
237 | 
238 |             // Update reward name based on the slider value
239 |             var rewardName = generateRewardName(generateFormattedRewardValue(rewardValue));
240 |             $pointsSlider.find('.smile-reward-name').text(rewardName);
241 | 
242 |             /**
243 |              * Ensure the redeem button is disabled if the slider
244 |              * value is 0.
245 |              */
246 |             var $redeemButton = $pointsSlider.find('.smile-redeem-button');
247 |             if (rewardValue === 0) {
248 |               $redeemButton.addClass('btn--disabled');
249 |               $redeemButton.attr('disabled', true);
250 |             } else {
251 |               $redeemButton.removeClass('btn--disabled');
252 |               $redeemButton.attr('disabled', false);
253 |             }
254 |           });
255 | 
256 |           // Handle redeem button click events
257 |           $pointsSlider.on('click', '.smile-redeem-button', function() {
258 |             var $redeemButton = $(this);
259 |             var sliderValue = $pointsSlider.find('.smile-range-input').val();
260 | 
261 |             // Start loading indicator
262 |             $redeemButton.addClass('btn--loading');
263 | 
264 |             // Hit the Smile.io API to spend a Customer's points
265 |             smile.purchasePointsProduct(pointsProductId, { points_to_spend: sliderValue }).then(function(pointsPurchase) {
266 |               // Clear the field error if there was one previously
267 |               $pointsSlider.find('.field').removeClass('field--error');
268 | 
269 |               applyPointsPurchaseToCart(pointsPurchase);
270 | 
271 |               // Immediately update the customers points balance
272 |               $('.smile-points-balance').text(smile.customer.points_balance - pointsPurchase.points_spent);
273 | 
274 |               /**
275 |                * Update customer's points balance based on the server's value.
276 |                * This should be the same as the above but always nice to confirm.
277 |                */
278 |               smile.fetchCustomer().then(function(customer) {
279 |                 $('.smile-points-balance').text(customer.points_balance);
280 |               });
281 | 
282 |               /**
283 |                * Replace the points slider with a message about the discount being applied
284 |                * to the cart.
285 |                */
286 |               $pointsSlider.find('.smile-redeem-amount-label').text('');
287 |               $pointsSlider.find('.smile-range-input-container').text(translateRewardAppliedLabel);
288 |             }).catch(function(err) {
289 |               console.error('Something went wrong when purchasing PointsProduct with ID ' + pointsProductId + '.');
290 |               $pointsSlider.find('.field').addClass('field--error');
291 |             }).then(function() {
292 |               /**
293 |                * This block runs whether the call succeeds or fails, kind of like finally() in other languages.
294 |                * Source: http://stackoverflow.com/a/35999141/540194
295 |                */
296 | 
297 |               $redeemButton.removeClass('btn--loading');
298 | 
299 |               var $rangeInput = $pointsSlider.find('.smile-range-input');
300 |               $rangeInput.val(0);
301 |               $rangeInput.change();
302 |             });
303 |           });
304 | 
305 |         }).catch(function(err) {
306 |           console.error('Something went wrong fetching the Smile.io PointsProduct. Points slider will not be rendered. Learn more at https://docs.smile.io');
307 |         }); // fetchPointsProduct
308 |       });
309 |     });
310 |   }());
311 | </script>
312 | 
313 | <style>
314 |   .smile-points-balance-heading {
315 |     margin-bottom: 20px;
316 |   }
317 | 
318 |   .smile-redeem-amount-label {
319 |     padding-bottom: 5px;
320 |   }
321 | 
322 |   .smile-points-slider .smile-form {
323 |     display: -webkit-box;
324 |     display: -ms-flexbox;
325 |     display: flex;
326 |     -webkit-box-orient: horizontal;
327 |     -webkit-box-direction: normal;
328 |     -ms-flex-direction: row;
329 |     flex-direction: row;
330 |   }
331 | 
332 |   .smile-points-slider .smile-range-input-container {
333 |     -webkit-box-flex: 1;
334 |     -ms-flex-positive: 1;
335 |     flex-grow: 1;
336 |     margin-right: 5px;
337 |   }
338 | 
339 |   .smile-points-slider .smile-range-input-container .smile-range-input {
340 |     margin: 12px 0;
341 |   }
342 | 
343 |   .smile-points-slider .smile-redeem-button-container {
344 |     -ms-flex-negative: 1;
345 |     flex-shrink: 1;
346 |   }
347 | 
348 |   .smile-points-slider .smile-redeem-button {
349 |     height: 42px;
350 |   }
351 | 
352 |   .smile-points-slider .smile-reward-name {
353 |     text-align: center;
354 |     padding-top: 5px;
355 |   }
356 | 
357 |   .smile-points-slider .smile-range-input {
358 |     display: block;
359 |     width: 100%;
360 |   }
361 | 
362 |   @media (max-width: 767px) {
363 |     .smile-points-slider .smile-form {
364 |       padding-left: 30px;
365 |     }
366 |   }
367 | </style>
368 | 


--------------------------------------------------------------------------------
/bigcommerce-points-slider/sweettooth-points-slider.html:
--------------------------------------------------------------------------------
  1 | <!-- Smile BigCommerce points slider v0.0.2 -->
  2 | 
  3 | <!-- A third party library for improved slider functionality on mobile.
  4 |      Available at: https://rangetouch.com/. Developers are welcome to host
  5 |      this file in place of using RangeTouch's CDN. -->
  6 | <script src="https://cdn.rangetouch.com/1.0.5/rangetouch.js"></script>
  7 | 
  8 | <!-- NOTE: Your store may not use jQuery, if not uncomment this
  9 |            script to load it on the page -->
 10 | <!-- <script
 11 |   src="https://code.jquery.com/jquery-1.12.4.min.js"
 12 |   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
 13 |   crossorigin="anonymous"></script> -->
 14 | 
 15 | <script>
 16 |   (function() {
 17 |     // Store's currency symbol
 18 |     var currencySymbol = '$';
 19 |     // The name used for points in your reward program.
 20 |     var pointsLabel = 'points';
 21 | 
 22 |     /**
 23 |      * Create a name that will exist and update under the points slider.
 24 |      * Developers should update this to reflect their reward value and
 25 |      * currency.
 26 |      */
 27 |     var generateFulfilledRewardNameFromValue = function(value) {
 28 |       return currencySymbol + value + ' off';
 29 |     };
 30 | 
 31 |     /**
 32 |      * This method is used to automatically apply the discount code to the cart. It
 33 |      * takes a PointsPurchase object as the argument, documented here:
 34 |      * https://docs.smile.io/js/other-objects/points-purchase-object.
 35 |      * One way to do this is with jQuery.
 36 |      * Find the selector for your discount code input and set the value to the discount
 37 |      * code that was just created:
 38 |      * $('.your-discount-code-input-class').val(pointsPurchase.fulfilled_reward.code);
 39 |      */
 40 |     var applyPointsPurchaseToCart = function(pointsPurchase) {
 41 |       /**
 42 |        * NOTE: Developers should replace this with the class of their
 43 |        * discount code input field class.
 44 |        */
 45 |       var $discountCodeInput = $('.your-discount-code-input-class');
 46 | 
 47 |       // The generated discount code
 48 |       var discountCode = pointsPurchase.fulfilled_reward.code;
 49 | 
 50 |       /**
 51 |        * Next is to apply this discount code to your cart. This could be completed
 52 |        * via jQuery or your cart's API.
 53 |        */
 54 |     };
 55 | 
 56 |     $(document).on('sweettooth-initialized', function() {
 57 |       // Don't show if there is no customer
 58 |       // or the customer is excluded from reward programs
 59 |       if (!SweetTooth.customer || SweetTooth.customer.state === 'disabled') {
 60 |         return;
 61 |       }
 62 | 
 63 |       var $pointsSlider = $('.sweettooth-points-slider');
 64 |       var pointsSliderData = $pointsSlider.data();
 65 |       var pointsProductId = pointsSliderData.pointsProductId;
 66 | 
 67 |       SweetTooth.fetchPointsProduct(pointsProductId).then(function(pointsProduct) {
 68 |         if (pointsProduct.exchange_type !== 'variable') {
 69 |           console.error("Oops! The Smile.io PointsProduct you're using for the points slider does not support variable reward values and thus cannot be displayed as a slider. To use the points slider, setup a PointsProduct that supports variable reward values. Learn more at https://docs.smile.io/v1/points-slider-at-bigcommerce-checkout.");
 70 |           return;
 71 |         }
 72 | 
 73 |         var reward = pointsProduct.reward;
 74 |         var min = pointsProduct.variable_points_min || 0;
 75 |         // Max defaults to the customers max points balance
 76 |         var max = SweetTooth.customer.points_balance;
 77 |         var step = pointsProduct.variable_points_step;
 78 |         var stepRewardValue = pointsProduct.variable_points_step_reward_value;
 79 |         var customerPointsBalance = SweetTooth.customer.points_balance;
 80 |         var initialSliderValue = min;
 81 | 
 82 |         if (pointsProduct.variable_points_max) {
 83 |           /**
 84 |            * Cap max of the slider as the smaller of the customers points
 85 |            * balance and the pointsProducts variable points max
 86 |            */
 87 |           max = Math.min(pointsProduct.variable_points_max, max);
 88 |         }
 89 | 
 90 |         var rewardValue = (initialSliderValue / step) * stepRewardValue;
 91 |         var rewardName = generateFulfilledRewardNameFromValue(rewardValue);
 92 | 
 93 |         var sliderHtml = ' \
 94 |           <div class="sweettooth-points-balance-heading">You have <span class="sweettooth-points-balance">' + customerPointsBalance + '</span> ' + pointsLabel + '</div> \
 95 |           <div class="sweettooth-redeem-amount-label">Redeem <span class="sweettooth-slider-value">' + initialSliderValue + '</span> ' + pointsLabel + '</div> \
 96 |           <div class="sweettooth-form"> \
 97 |             <div class="sweettooth-range-input-container"> \
 98 |               <input \
 99 |                 class="sweettooth-range-input" \
100 |                 type="range" \
101 |                 min="' + min + '" \
102 |                 max="' + max + '" \
103 |                 step="' + step + '" \
104 |                 value="' + initialSliderValue + '" \
105 |                 data-orientation="horizontal" \
106 |               > \
107 |               <div class="sweettooth-reward-name">' + rewardName + '</div> \
108 |             </div> \
109 |             <div class="sweettooth-redeem-button-container"> \
110 |               <button type="submit" class="sweettooth-redeem-button btn btn-primary" disabled> \
111 |                 Redeem \
112 |               </button> \
113 |             </div> \
114 |           </div> \
115 |           ';
116 | 
117 |         // Add slider html to the points slider container
118 |         $pointsSlider.append(sliderHtml);
119 | 
120 |         /**
121 |          * Check whether the Customer can spend points or if
122 |          * the slider has a value of 0. If one of those is true
123 |          * disable the 'Redeem' button.
124 |          */
125 |          var $redeemButton = $pointsSlider.find('.sweettooth-redeem-button');
126 |          if (SweetTooth.customer.points_balance < min) {
127 |            $pointsSlider.find('.sweettooth-reward-name').text('You need a minimum of ' + min + ' ' + pointsLabel + ' to redeem');
128 |            $redeemButton.addClass('btn--disabled');
129 |            $redeemButton.attr('disabled', true);
130 |          }
131 | 
132 |          if (rewardValue === 0) {
133 |            $redeemButton.addClass('btn--disabled');
134 |            $redeemButton.attr('disabled', true);
135 |          }
136 | 
137 |         /**
138 |          * Handle slider value change events
139 |          *
140 |          * Listening on two events:
141 |          *   input - To update values as the customer is sliding the slider
142 |          *   change - To update values when the slider is changed via javascript
143 |          *
144 |          * Source: First comment on this answer http://stackoverflow.com/a/19067260/540194
145 |          */
146 |         $pointsSlider.on('input change', '.sweettooth-range-input', function() {
147 |           var sliderValue = $(this).val();
148 |           var rewardValue = (sliderValue / step) * stepRewardValue;
149 | 
150 |           // Update points to be spent based on slider value
151 |           $pointsSlider.find('.sweettooth-slider-value').text(sliderValue);
152 | 
153 |           // Update reward name based on the slider value
154 |           var rewardName = generateFulfilledRewardNameFromValue(rewardValue);
155 |           $pointsSlider.find('.sweettooth-reward-name').text(rewardName);
156 | 
157 |           /**
158 |            * Ensure the redeem button is disabled if the slider
159 |            * value is 0.
160 |            */
161 |           var $redeemButton = $pointsSlider.find('.sweettooth-redeem-button');
162 |           if (rewardValue === 0) {
163 |             $redeemButton.addClass('btn--disabled');
164 |             $redeemButton.attr('disabled', true);
165 |           } else {
166 |             $redeemButton.removeClass('btn--disabled');
167 |             $redeemButton.attr('disabled', false);
168 |           }
169 |         });
170 | 
171 |         // Handle redeem button click events
172 |         $pointsSlider.on('click', '.sweettooth-redeem-button', function() {
173 |           var $redeemButton = $(this);
174 |           var sliderValue = $pointsSlider.find('.sweettooth-range-input').val();
175 | 
176 |           // Start loading indicator
177 |           $redeemButton.addClass('btn--loading');
178 | 
179 |           // Hit the Smile.io API to spend a Customer's points
180 |           SweetTooth.purchasePointsProduct(pointsProductId, { points_to_spend: sliderValue }).then(function(pointsPurchase) {
181 |             // Clear the field error if there was one previously
182 |             $pointsSlider.find('.field').removeClass('field--error');
183 | 
184 |             applyPointsPurchaseToCart(pointsPurchase);
185 | 
186 |             // Immediately update the customers points balance
187 |             $('.sweettooth-points-balance').text(SweetTooth.customer.points_balance - pointsPurchase.points_spent);
188 | 
189 |             /**
190 |              * Update customer's points balance based on the server's value.
191 |              * This should be the same as the above but always nice to confirm.
192 |              */
193 |             SweetTooth.fetchCustomer().then(function(customer) {
194 |               $('.sweettooth-points-balance').text(customer.points_balance);
195 |             });
196 | 
197 |             /**
198 |              * Replace the points slider with a message about the discount being applied
199 |              * to the cart.
200 |              */
201 |             $pointsSlider.find('.sweettooth-redeem-amount-label').text('');
202 |             $pointsSlider.find('.sweettooth-range-input-container').text('Congrats! Your reward has been applied to the cart.');
203 |           }).catch(function(err) {
204 |             console.error('Something went wrong when purchasing PointsProduct with ID ' + pointsProductId + '.');
205 |             $pointsSlider.find('.field').addClass('field--error');
206 |           }).then(function() {
207 |             /**
208 |              * This block runs whether the call succeeds or fails, kind of like finally() in other languages.
209 |              * Source: http://stackoverflow.com/a/35999141/540194
210 |              */
211 | 
212 |             $redeemButton.removeClass('btn--loading');
213 | 
214 |             var $rangeInput = $pointsSlider.find('.sweettooth-range-input');
215 |             $rangeInput.val(0);
216 |             $rangeInput.change();
217 |           });
218 |         });
219 | 
220 |       }).catch(function(err) {
221 |         console.error('Something went wrong fetching the Smile.io PointsProduct. Points slider will not be rendered. Learn more at https://docs.smile.io');
222 |       }); // fetchPointsProduct
223 |     });
224 |   }());
225 | </script>
226 | 
227 | <style>
228 |   .sweettooth-points-balance-heading {
229 |     margin-bottom: 20px;
230 |   }
231 | 
232 |   .sweettooth-redeem-amount-label {
233 |     padding-bottom: 5px;
234 |   }
235 | 
236 |   .sweettooth-points-slider .sweettooth-form {
237 |     display: -webkit-box;
238 |     display: -ms-flexbox;
239 |     display: flex;
240 |     -webkit-box-orient: horizontal;
241 |     -webkit-box-direction: normal;
242 |     -ms-flex-direction: row;
243 |     flex-direction: row;
244 |   }
245 | 
246 |   .sweettooth-points-slider .sweettooth-range-input-container {
247 |     -webkit-box-flex: 1;
248 |     -ms-flex-positive: 1;
249 |     flex-grow: 1;
250 |     margin-right: 5px;
251 |   }
252 | 
253 |   .sweettooth-points-slider .sweettooth-range-input-container .sweettooth-range-input {
254 |     margin: 12px 0;
255 |   }
256 | 
257 |   .sweettooth-points-slider .sweettooth-redeem-button-container {
258 |     -ms-flex-negative: 1;
259 |     flex-shrink: 1;
260 |   }
261 | 
262 |   .sweettooth-points-slider .sweettooth-redeem-button {
263 |     height: 42px;
264 |   }
265 | 
266 |   .sweettooth-points-slider .sweettooth-reward-name {
267 |     text-align: center;
268 |     padding-top: 5px;
269 |   }
270 | 
271 |   .sweettooth-points-slider .sweettooth-range-input {
272 |     display: block;
273 |     width: 100%;
274 |   }
275 | 
276 |   @media (max-width: 767px) {
277 |   	.sweettooth-points-slider .sweettooth-form {
278 |       padding-left: 30px;
279 |     }
280 |   }
281 | </style>
282 | 


--------------------------------------------------------------------------------
/bigcommerce-stencil-files/README.md:
--------------------------------------------------------------------------------
1 | # BigCommerce Stencil Setup
2 | 
3 | These are the files required to setup Smile.io with your Stencil theme. Check out our docs [here](https://docs.smile.io/docs/install-smile/bigcommerce/explainer-page-using-stencil).
4 | 


--------------------------------------------------------------------------------
/bigcommerce-stencil-files/files 4.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smile-io/code-samples/2d26bf8fb13fe9cf7814b9325fd277bfee17a97c/bigcommerce-stencil-files/files 4.zip


--------------------------------------------------------------------------------
/points-products-dropdown/README.md:
--------------------------------------------------------------------------------
 1 | # PointsProducts Dropdown
 2 | 
 3 | This file will explain how to get setup.
 4 | 
 5 | ## Implementation
 6 | 
 7 | 1. Ensure you have Smile.io setup on your store
 8 | 1. Copy the code in the `smile-points-products-dropdown.html` file in this repo
 9 | 1. Add the code snippet below to your checkout
10 | 1. Implement adding the discount code to your cart in the `applyPointsPurchaseToCart` callback
11 | 1. You're all set!
12 | 
13 | ## Snippets
14 | 
15 | ### Points dropdown container
16 | 
17 | Add the following code to your checkout in the location you want to show the points dropdown.
18 | ```html
19 | <div class="smile-points-products-dropdown"></div>
20 | ```
21 | 


--------------------------------------------------------------------------------
/points-products-dropdown/smile-points-products-dropdown.html:
--------------------------------------------------------------------------------
  1 | <!-- NOTE: Your store may not use jQuery, if not uncomment this
  2 |            script to load it on the page -->
  3 | <!-- <script
  4 |   src="https://code.jquery.com/jquery-1.12.4.min.js"
  5 |   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  6 |   crossorigin="anonymous"></script> -->
  7 | 
  8 | <script>
  9 |   (function() {
 10 |     // PointsProduct ID's that will be hidden from the dropdown
 11 |     var hidePointsProductIds = [];
 12 | 
 13 |     /**
 14 |      * The function used in the Array filter to determine if the
 15 |      * PointsProduct should be hidden.
 16 |      */
 17 |     var shouldHidePointsProduct = function(pointsProduct) {
 18 |       return hidePointsProductIds.indexOf(pointsProduct.id) === -1;
 19 |     };
 20 | 
 21 |     // The name used for points in your reward program.
 22 |     var pointsLabel = 'points';
 23 | 
 24 |     /**
 25 |      * This function is used as a way to filter out certain PointsProducts
 26 |      * from the dropdown. This is left up to the developer. Just add the
 27 |      * PointsProduct ID's you don't want to show up to the
 28 |      * hidePointsProductIds array.
 29 |      */
 30 |     var filterPointsProducts = function(pointsProducts) {
 31 |       let filteredPointsProducts = pointsProducts;
 32 | 
 33 |       filteredPointsProducts = filteredPointsProducts.filter(shouldHidePointsProduct);
 34 | 
 35 |       return filteredPointsProducts;
 36 |     };
 37 | 
 38 |     /**
 39 |      * This method is used to automatically apply the discount code to the cart. It
 40 |      * takes a PointsPurchase object as the argument, documented here:
 41 |      * https://docs.smile.io/js/other-objects/points-purchase-object.
 42 |      * One way to do this is with jQuery. Find the selector for your discount code
 43 |      * input and set the value to the discount code that was just created:
 44 |      * $('.your-discount-code-input-class').val(pointsPurchase.reward_fulfillment.code);
 45 |      */
 46 |     var applyPointsPurchaseToCart = function(pointsPurchase) {
 47 |       /**
 48 |        * NOTE: Developers should replace this with the class of their
 49 |        * discount code input field class
 50 |        */
 51 |       var $discountCodeInput = $('.your-discount-code-input-class');
 52 | 
 53 |       // The generated discount code
 54 |       var discountCode = pointsPurchase.reward_fulfillment.code;
 55 | 
 56 |       /**
 57 |        * Next is to apply this discount code to your cart. This could be completed
 58 |        * via jQuery or your cart's API.
 59 |        */
 60 |     };
 61 | 
 62 |     $(document).on('smile-ui-loaded', function() {
 63 |       SmileUI.ready().then(function(smileUI) {
 64 |         // Initialized Smile.js instance.
 65 |         var smile = smileUI.smile;
 66 | 
 67 |         // Don't show if there is no logged in customer or if the customer is disabled.
 68 |         if (!smile.customer || smile.customer.state === 'disabled') {
 69 |           return;
 70 |         }
 71 | 
 72 |         var $pointsProductsDropdown = $('.smile-points-products-dropdown');
 73 | 
 74 |         smile.fetchAllPointsProducts({ exchange_type: 'fixed' }).then(function(pointsProducts) {
 75 |           pointsProducts = filterPointsProducts(pointsProducts);
 76 | 
 77 |           var affordableRewards = $.grep(pointsProducts, function(pointsProduct) {
 78 |             return (pointsProduct.points_price <= smile.customer.points_balance);
 79 |           });
 80 | 
 81 |           var unaffordableRewards = $.grep(pointsProducts, function(pointsProduct) {
 82 |             return (pointsProduct.points_price > smile.customer.points_balance);
 83 |           });
 84 | 
 85 |           var canRedeem = (affordableRewards.length > 0);
 86 | 
 87 |           var redeemLabel = canRedeem ?
 88 |             "Redeem points to apply rewards to your order." :
 89 |             "Keep saving to earn rewards on your next order.";
 90 | 
 91 |           var customerPointsBalance = smile.customer.points_balance;
 92 | 
 93 |           var dropdownHtml = ' \
 94 |           <div class="smile-points-balance-heading">You have <span class="smile-points-balance">' + customerPointsBalance + '</span> ' + pointsLabel + '</div> \
 95 |           <div class="smile-redeem-label">' + redeemLabel + '</div> \
 96 |           <div class="smile-form"> \
 97 |             <div class="smile-select-container"> \
 98 |               <select placeholder="Rewards" class="smile-points-products-select form-control"> \
 99 |           ';
100 | 
101 |           $.each(affordableRewards, function(index, pointsProduct) {
102 |             var reward = pointsProduct.reward;
103 |             dropdownHtml += '<option value="' + pointsProduct.id + '">' + reward.name + ' - ' + pointsProduct.exchange_description + '</option>';
104 |           });
105 | 
106 |           $.each(unaffordableRewards, function(index, pointsProduct) {
107 |             var reward = pointsProduct.reward;
108 |             dropdownHtml += '<option value="' + pointsProduct.id + '" disabled>' + reward.name + ' - ' + pointsProduct.exchange_description + '</option>';
109 |           });
110 | 
111 |           var disabledClassName = canRedeem ? '' : 'btn--disabled';
112 |           var disabledAttribute = canRedeem ? '' : 'disabled';
113 | 
114 |           dropdownHtml += ' \
115 |               </select> \
116 |             </div> \
117 |             <div class="smile-redeem-button-container"> \
118 |               <button type="submit" class="smile-redeem-button btn btn-primary' + disabledClassName + '" ' + disabledAttribute + '> \
119 |                 Redeem \
120 |                 <i class="btn__content shown-on-mobile icon icon--arrow"></i> \
121 |                 <i class="btn__spinner icon icon--button-spinner"></i> \
122 |               </button> \
123 |             </div> \
124 |           </div> \
125 |           ';
126 | 
127 |           // Add dropdown html to the points slider container
128 |           $pointsProductsDropdown.append(dropdownHtml);
129 |           var $redeemButton = $pointsProductsDropdown.find('.smile-redeem-button');
130 |           if (affordableRewards.length === 0) {
131 |             $redeemButton.addClass('btn--disabled');
132 |             $redeemButton.attr('disabled', true);
133 |           }
134 | 
135 |           var rewardsExist = (pointsProducts.length > 0);
136 | 
137 |           if (rewardsExist) {
138 |             $pointsProductsDropdown.find('.smile-points-products-select').val(pointsProducts[0].id);
139 |           }
140 | 
141 |           // Handle redeem button click events
142 |           $pointsProductsDropdown.on('click', '.smile-redeem-button', function() {
143 |             var $redeemButton = $(this);
144 |             var $selectedPointsProduct = $pointsProductsDropdown.find('.smile-points-products-select :selected');
145 |             var pointsProductId = $selectedPointsProduct.val();
146 | 
147 |             // Start loading indicator
148 |             $redeemButton.addClass('btn--loading');
149 | 
150 |             // Hit the Smile.io API to spend customer's points
151 |             smile.purchasePointsProduct(pointsProductId).then(function(pointsPurchase) {
152 |               // Clear the field error if there was one previously
153 |               $pointsProductsDropdown.find('.field').removeClass('field--error');
154 | 
155 |               applyPointsPurchaseToCart(pointsPurchase);
156 | 
157 |               // Immediately update the customers points balance
158 |               $('.smile-points-balance').text(smile.customer.points_balance - pointsPurchase.points_spent);
159 | 
160 |               /**
161 |                * Update customer's points balance based on the server's value.
162 |                * This should be the same as the above but always nice to confirm.
163 |                */
164 |               smile.fetchCustomer().then(function(customer) {
165 |                 $('.smile-points-balance').text(customer.points_balance);
166 |               });
167 |             }).catch(function(err) {
168 |               console.error('Something went wrong when purchasing PointsProduct with ID ' + pointsProductId + '.');
169 |               $pointsProductsDropdown.find('.field').addClass('field--error');
170 |             }).then(function() {
171 |               /**
172 |                * This block runs whether the call succeeds or fails, kind of like finally() in other languages.
173 |                * Source: http://stackoverflow.com/a/35999141/540194
174 |                */
175 | 
176 |               $redeemButton.removeClass('btn--loading');
177 |             });
178 |           });
179 |         }); // fetchPointsProducts
180 |       });
181 |     });
182 |   }());
183 | </script>
184 | 
185 | <style>
186 |   .smile-points-products-dropdown .smile-redeem-label {
187 |     margin-bottom: 10px;
188 |   }
189 | 
190 |   .smile-points-balance-heading {
191 |     margin-bottom: 10px;
192 |   }
193 | 
194 |   .smile-redeem-amount-label {
195 |     padding-bottom: 5px;
196 |   }
197 | 
198 |   .smile-points-products-dropdown .smile-form {
199 |     display: -webkit-box;
200 |     display: -ms-flexbox;
201 |     display: flex;
202 |     -webkit-box-orient: horizontal;
203 |     -webkit-box-direction: normal;
204 |     -ms-flex-direction: row;
205 |     flex-direction: row;
206 |   }
207 | 
208 |   .smile-points-products-dropdown .smile-select-container {
209 |     -webkit-box-flex: 1;
210 |     -ms-flex-positive: 1;
211 |     flex-grow: 1;
212 |     margin-right: 5px;
213 |   }
214 | 
215 |   .smile-points-products-dropdown .smile-redeem-button-container {
216 |     -ms-flex-negative: 1;
217 |     flex-shrink: 1;
218 |   }
219 | </style>
220 | 


--------------------------------------------------------------------------------
/points-products-dropdown/sweettooth-points-products-dropdown.html:
--------------------------------------------------------------------------------
  1 | <!-- Smile points product dropdown v0.0.2 -->
  2 | 
  3 | <!-- NOTE: Your store may not use jQuery, if not uncomment this
  4 |            script to load it on the page -->
  5 | <!-- <script
  6 |   src="https://code.jquery.com/jquery-1.12.4.min.js"
  7 |   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  8 |   crossorigin="anonymous"></script> -->
  9 | 
 10 | <script>
 11 |   (function() {
 12 |     // PointsProduct ID's that will be hidden from the dropdown
 13 |     var hidePointsProductIds = [];
 14 | 
 15 |     /**
 16 |      * The function used in the Array filter to determine if the
 17 |      * PointsProduct should be hidden.
 18 |      */
 19 |     var shouldHidePointsProduct = function(pointsProduct) {
 20 |       return hidePointsProductIds.indexOf(pointsProduct.id) === -1;
 21 |     };
 22 | 
 23 |     // The name used for points in your reward program.
 24 |     var pointsLabel = 'points';
 25 | 
 26 |     /**
 27 |      * This function is used as a way to filter out certain PointsProducts
 28 |      * from the dropdown. This is left up to the developer. Just add the
 29 |      * PointsProduct ID's you don't want to show up to the
 30 |      * hidePointsProductIds array.
 31 |      */
 32 |     var filterPointsProducts = function(pointsProducts) {
 33 |       let filteredPointsProducts = pointsProducts;
 34 | 
 35 |       filteredPointsProducts = filteredPointsProducts.filter(shouldHidePointsProduct);
 36 | 
 37 |       return filteredPointsProducts;
 38 |     };
 39 | 
 40 |     /**
 41 |      * This method is used to automatically apply the discount code to the cart. It
 42 |      * takes a PointsPurchase object as the argument, documented here:
 43 |      * https://docs.smile.io/js/other-objects/points-purchase-object.
 44 |      * One way to do this is with jQuery.
 45 |      * Find the selector for your discount code input and set the value to the discount
 46 |      * code that was just created:
 47 |      * $('.your-discount-code-input-class').val(pointsPurchase.fulfilled_reward.code);
 48 |      */
 49 |     var applyPointsPurchaseToCart = function(pointsPurchase) {
 50 |       /**
 51 |        * NOTE: Developers should replace this with the class of their
 52 |        * discount code input field class
 53 |        */
 54 |       var $discountCodeInput = $('.your-discount-code-input-class');
 55 | 
 56 |       // The generated discount code
 57 |       var discountCode = pointsPurchase.fulfilled_reward.code;
 58 | 
 59 |       /**
 60 |        * Next is to apply this discount code to your cart. This could be completed
 61 |        * via jQuery or your cart's API.
 62 |        */
 63 |     };
 64 | 
 65 |     $(document).on('sweettooth-initialized', function() {
 66 |       // Don't show if there is no customer
 67 |       // or the customer is excluded from reward programs
 68 |       if (!SweetTooth.customer || SweetTooth.customer.state === 'disabled') {
 69 |         return;
 70 |       }
 71 | 
 72 |       var $pointsProductsDropdown = $('.sweettooth-points-products-dropdown');
 73 | 
 74 |       SweetTooth.fetchPointsProducts({ exchange_type: 'fixed' }).then(function(pointsProducts) {
 75 |         pointsProducts = filterPointsProducts(pointsProducts);
 76 | 
 77 |         var affordableRewards = $.grep(pointsProducts, function(pointsProduct) {
 78 |           return (pointsProduct.points_price <= SweetTooth.customer.points_balance);
 79 |         });
 80 | 
 81 |         var unaffordableRewards = $.grep(pointsProducts, function(pointsProduct) {
 82 |           return (pointsProduct.points_price > SweetTooth.customer.points_balance);
 83 |         });
 84 | 
 85 |         var canRedeem = (affordableRewards.length > 0);
 86 | 
 87 |         var redeemLabel = canRedeem ?
 88 |           "Redeem points to apply rewards to your order." :
 89 |           "Keep saving to earn rewards on your next order.";
 90 | 
 91 |         var customerPointsBalance = SweetTooth.customer.points_balance;
 92 | 
 93 |         var dropdownHtml = ' \
 94 |         <div class="sweettooth-points-balance-heading">You have <span class="sweettooth-points-balance">' + customerPointsBalance + '</span> ' + pointsLabel + '</div> \
 95 |         <div class="sweettooth-redeem-label">' + redeemLabel + '</div> \
 96 |         <div class="sweettooth-form"> \
 97 |           <div class="sweettooth-select-container"> \
 98 |             <select placeholder="Rewards" class="sweettooth-points-products-select form-control"> \
 99 |         ';
100 | 
101 |         $.each(affordableRewards, function(index, pointsProduct) {
102 |           var reward = pointsProduct.reward;
103 |           dropdownHtml += '<option value="' + pointsProduct.id + '">' + reward.name + ' - ' + pointsProduct.exchange_description + '</option>';
104 |         });
105 | 
106 |         $.each(unaffordableRewards, function(index, pointsProduct) {
107 |           var reward = pointsProduct.reward;
108 |           dropdownHtml += '<option value="' + pointsProduct.id + '" disabled>' + reward.name + ' - ' + pointsProduct.exchange_description + '</option>';
109 |         });
110 | 
111 |         var disabledClassName = canRedeem ? '' : 'btn--disabled';
112 |         var disabledAttribute = canRedeem ? '' : 'disabled';
113 | 
114 |         dropdownHtml += ' \
115 |             </select> \
116 |           </div> \
117 |           <div class="sweettooth-redeem-button-container"> \
118 |             <button type="submit" class="sweettooth-redeem-button btn btn-primary' + disabledClassName + '" ' + disabledAttribute + '> \
119 |               Redeem \
120 |               <i class="btn__content shown-on-mobile icon icon--arrow"></i> \
121 |               <i class="btn__spinner icon icon--button-spinner"></i> \
122 |             </button> \
123 |           </div> \
124 |         </div> \
125 |         ';
126 | 
127 |         // Add dropdown html to the points slider container
128 |         $pointsProductsDropdown.append(dropdownHtml);
129 |         var $redeemButton = $pointsProductsDropdown.find('.sweettooth-redeem-button');
130 |         if (affordableRewards.length === 0) {
131 |           $redeemButton.addClass('btn--disabled');
132 |           $redeemButton.attr('disabled', true);
133 |         }
134 | 
135 |         var rewardsExist = (pointsProducts.length > 0);
136 | 
137 |         if (rewardsExist) {
138 |           $pointsProductsDropdown.find('.sweettooth-points-products-select').val(pointsProducts[0].id);
139 |         }
140 | 
141 |         // Handle redeem button click events
142 |         $pointsProductsDropdown.on('click', '.sweettooth-redeem-button', function() {
143 |           var $redeemButton = $(this);
144 |           var $selectedPointsProduct = $pointsProductsDropdown.find('.sweettooth-points-products-select :selected');
145 |           var pointsProductId = $selectedPointsProduct.val();
146 | 
147 |           // Start loading indicator
148 |           $redeemButton.addClass('btn--loading');
149 | 
150 |           // Hit the Smile.io API to spend customer's points
151 |           SweetTooth.purchasePointsProduct(pointsProductId).then(function(pointsPurchase) {
152 |             // Clear the field error if there was one previously
153 |             $pointsProductsDropdown.find('.field').removeClass('field--error');
154 | 
155 |             applyPointsPurchaseToCart(pointsPurchase);
156 | 
157 |             // Immediately update the customers points balance
158 |             $('.sweettooth-points-balance').text(SweetTooth.customer.points_balance - pointsPurchase.points_spent);
159 | 
160 |             /**
161 |              * Update customer's points balance based on the server's value.
162 |              * This should be the same as the above but always nice to confirm.
163 |              */
164 |             SweetTooth.fetchCustomer().then(function(customer) {
165 |               $('.sweettooth-points-balance').text(customer.points_balance);
166 |             });
167 |           }).catch(function(err) {
168 |             console.error('Something went wrong when purchasing PointsProduct with ID ' + pointsProductId + '.');
169 |             $pointsProductsDropdown.find('.field').addClass('field--error');
170 |           }).then(function() {
171 |             /**
172 |              * This block runs whether the call succeeds or fails, kind of like finally() in other languages.
173 |              * Source: http://stackoverflow.com/a/35999141/540194
174 |              */
175 | 
176 |             $redeemButton.removeClass('btn--loading');
177 |           });
178 |         });
179 |       }); // fetchPointsProducts
180 |     });
181 |   }());
182 | </script>
183 | 
184 | <style>
185 |   .sweettooth-points-products-dropdown .sweettooth-redeem-label {
186 |     margin-bottom: 10px;
187 |   }
188 | 
189 |   .sweettooth-points-balance-heading {
190 |     margin-bottom: 10px;
191 |   }
192 | 
193 |   .sweettooth-redeem-amount-label {
194 |     padding-bottom: 5px;
195 |   }
196 | 
197 |   .sweettooth-points-products-dropdown .sweettooth-form {
198 |     display: -webkit-box;
199 |     display: -ms-flexbox;
200 |     display: flex;
201 |     -webkit-box-orient: horizontal;
202 |     -webkit-box-direction: normal;
203 |     -ms-flex-direction: row;
204 |     flex-direction: row;
205 |   }
206 | 
207 |   .sweettooth-points-products-dropdown .sweettooth-select-container {
208 |     -webkit-box-flex: 1;
209 |     -ms-flex-positive: 1;
210 |     flex-grow: 1;
211 |     margin-right: 5px;
212 |   }
213 | 
214 |   .sweettooth-points-products-dropdown .sweettooth-redeem-button-container {
215 |     -ms-flex-negative: 1;
216 |     flex-shrink: 1;
217 |   }
218 | </style>
219 | 


--------------------------------------------------------------------------------
/shopify-points-products-dropdown/README.md:
--------------------------------------------------------------------------------
 1 | # Shopify PointsProducts Dropdown
 2 | 
 3 | This file will explain how to get setup.
 4 | 
 5 | ## Implementation
 6 | 
 7 | 1. Create a new **Snippet** in Shopify called `smile-points-products-dropdown.liquid`
 8 | 2. Paste the code from this sample file in your new snippet
 9 | 3. Hide rewards you don't want to offer at checkout using `hidePointsProductIds`
10 | 4. Include the following snippet before the closing `</body>` tag of your `checkout.liquid`
11 | 5. You're all set!
12 | 
13 | ## Snippets
14 | 
15 | ### Code to add to your checkout.liquid
16 | 
17 | ```liquid
18 | {% include 'smile-initializer' %}
19 | {% include 'smile-points-products-dropdown' %}
20 | ```
21 | 


--------------------------------------------------------------------------------
/shopify-points-products-dropdown/smile-points-products-dropdown.liquid:
--------------------------------------------------------------------------------
  1 | <script src="https://js.smile.io/v1/smile-shopify.js"></script>
  2 | 
  3 | <!-- NOTE: Your theme may or may not come with jQuery, if not
  4 |            uncomment this script to load it on the page -->
  5 | <!-- <script
  6 |   src="https://code.jquery.com/jquery-1.12.4.min.js"
  7 |   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  8 |   crossorigin="anonymous"></script> -->
  9 | 
 10 | <script>
 11 |   (function() {
 12 |     // PointsProduct ID's that will be hidden from the dropdown
 13 |     var hidePointsProductIds = [];
 14 | 
 15 |     // The name used for points in your reward program.
 16 |     var pointsLabel = 'points';
 17 | 
 18 |     /**
 19 |      * Build up the order summary section for our points slider to live in.
 20 |      * This is built up in memory so we don't add anything to the dom until
 21 |      * all html content is populated with data from the API.
 22 |      */
 23 |     var buildPointsProductsDropdownOrderSummarySection = function(customer) {
 24 |       var customerPointsBalance = customer.points_balance;
 25 | 
 26 |       var sliderContainerHtml = ' \
 27 |         <div class="order-summary__section order-summary__section--smile-points-products-dropdown"> \
 28 |           <h3 class="smile-points-balance-heading">You have <span class="smile-points-balance">' + customerPointsBalance + '</span> points</h3> \
 29 |           <div class="smile-points-products-dropdown"></div> \
 30 |         </div> \
 31 |       ';
 32 |       var $sliderContainer = $($.parseHTML(sliderContainerHtml));
 33 | 
 34 |       return $sliderContainer;
 35 |     };
 36 | 
 37 |     /**
 38 |      * Automatically apply the PointsPurchase to cart. The PointsPurchase
 39 |      * object is documented here:
 40 |      * https://docs.smile.io/js/other-objects/points-purchase-object.
 41 |      * This is implemented knowing the specific elements of Shopify's
 42 |      * checkout page.
 43 |      */
 44 |     var applyPointsPurchaseToCart = function(pointsPurchase) {
 45 |       var $discountCodeInput = $('#checkout_reduction_code');
 46 | 
 47 |       // Apply the discount code to the checkout's form input
 48 |       $discountCodeInput.val(pointsPurchase.reward_fulfillment.code);
 49 | 
 50 |       // Ensure the discount code form submit button is enabled
 51 |       $discountCodeInput.closest('form').find('[type=submit]').removeClass('btn--disabled').prop('disabled', false);
 52 | 
 53 |       // Submit the form for the discount code
 54 |       $discountCodeInput.closest('form').find('[type=submit]').click();
 55 |     };
 56 | 
 57 |     /**
 58 |      * The function used in the Array filter to determine if the
 59 |      * PointsProduct should be hidden.
 60 |      */
 61 |     var shouldHidePointsProduct = function(pointsProduct) {
 62 |       return hidePointsProductIds.indexOf(pointsProduct.id) === -1;
 63 |     };
 64 | 
 65 |     /**
 66 |      * This function is used as a way to filter out certain PointsProducts
 67 |      * from the dropdown. This is left up to the developer. Just add the
 68 |      * PointsProduct ID's you don't want to show up to the
 69 |      * hidePointsProductIds array.
 70 |      */
 71 |     var filterPointsProducts = function(pointsProducts) {
 72 |       let filteredPointsProducts = pointsProducts;
 73 | 
 74 |       filteredPointsProducts = filteredPointsProducts.filter(shouldHidePointsProduct);
 75 | 
 76 |       return filteredPointsProducts;
 77 |     };
 78 | 
 79 |     $(document).on('smile-ui-loaded', function() {
 80 |       SmileUI.ready().then(function(smileUI) {
 81 |         // Initialized Smile.js instance.
 82 |         var smile = smileUI.smile;
 83 | 
 84 |         // Don't show if there is no logged in customer or if the customer is disabled.
 85 |         if (!smile.customer || smile.customer.state === 'disabled') {
 86 |           return;
 87 |         }
 88 | 
 89 |         var $dropdownContainer = buildPointsProductsDropdownOrderSummarySection(smile.customer);
 90 |         var $pointsProductsDropdown = $dropdownContainer.find('.smile-points-products-dropdown');
 91 | 
 92 |         smile.fetchAllPointsProducts({ exchange_type: 'fixed' }).then(function(pointsProducts) {
 93 |           pointsProducts = filterPointsProducts(pointsProducts);
 94 | 
 95 |           let dropdownHtml = ' \
 96 |             <div class="smile-redeem-label">Redeem ' + pointsLabel + ' for rewards on this order</div> \
 97 |             <div class="fieldset"> \
 98 |               <div data-address-field="province" class="field field--required field--show-floating-label"> \
 99 |                 <div class="field__input-btn-wrapper"> \
100 |                   <div class="field__input-wrapper field__input-wrapper--select" id="pointsProductsDropdown"> \
101 |                     <label class="field__label field__label--visible">Rewards</label> \
102 |                     <select placeholder="Rewards" class="smile-points-products-select field__input field__input--select"> \
103 |           ';
104 | 
105 |           let affordableRewards = $.grep(pointsProducts, function(pointsProduct) {
106 |             return (pointsProduct.points_price <= smile.customer.points_balance);
107 |           });
108 | 
109 |           let unaffordableRewards = $.grep(pointsProducts, function(pointsProduct) {
110 |             return (pointsProduct.points_price > smile.customer.points_balance);
111 |           });
112 | 
113 |           $.each(affordableRewards, function(index, pointsProduct) {
114 |             let reward = pointsProduct.reward;
115 |             dropdownHtml += '<option data-id="' + pointsProduct.id + '" value="' + reward.name + '">' + reward.name + ' • ' + pointsProduct.exchange_description + '</option>';
116 |           });
117 | 
118 |           $.each(unaffordableRewards, function(index, pointsProduct) {
119 |             let reward = pointsProduct.reward;
120 |             dropdownHtml += '<option data-id="' + pointsProduct.id + '" value="' + reward.name + '" disabled>' + reward.name + ' • ' + pointsProduct.exchange_description + '</option>';
121 |           });
122 | 
123 |           dropdownHtml += ' \
124 |                   </select> \
125 |                   <div class="field__caret"> \
126 |                     <svg class="icon-svg icon-svg--color-adaptive-lighter icon-svg--size-10 field__caret-svg" aria-hidden="true" focusable="false"> \
127 |                       <use xlink:href="#caret-down"></use> \
128 |                     </svg> \
129 |                   </div> \
130 |                 </div> \
131 |                 <button type="submit" class="smile-redeem-button field__input-btn btn btn--default"> \
132 |                   <span class="btn__content">Redeem</span> \
133 |                   <i class="btn__content shown-on-mobile icon icon--arrow"></i> \
134 |                   <i class="btn__spinner icon icon--button-spinner"></i> \
135 |                 </button> \
136 |               </div> \
137 |               <p class="field__message field__message--error smile-points-products-dropdown-error">Something went wrong spending your points. Please try again.</p> \
138 |             </div> \
139 |           </div> \
140 |           ';
141 | 
142 |           // Add slider html to the points slider container
143 |           $pointsProductsDropdown.append(dropdownHtml);
144 | 
145 |           var $redeemButton = $pointsProductsDropdown.find('.smile-redeem-button');
146 |           if (affordableRewards.length == 0) {
147 |             $redeemButton.addClass('btn--disabled');
148 |             $redeemButton.attr('disabled', true);
149 |           }
150 | 
151 |           // Handle redeem button click events
152 |           $pointsProductsDropdown.on('click', '.smile-redeem-button', function() {
153 |             var $redeemButton = $(this);
154 |             var $clonedRedeemButton = $redeemButton.clone();
155 |             var $selectedPointsProduct = $pointsProductsDropdown.find('.smile-points-products-select :selected');
156 |             var pointsProductId = $selectedPointsProduct.data('id');
157 | 
158 |             // Start loading indicator
159 |             $redeemButton.addClass('btn--loading');
160 | 
161 |             // Hit the Smile.io API to spend customer's points
162 |             smile.purchasePointsProduct(pointsProductId).then(function(pointsPurchase) {
163 |               // Clear the field error if there was one previously
164 |               $pointsProductsDropdown.find('.field').removeClass('field--error');
165 | 
166 |               applyPointsPurchaseToCart(pointsPurchase);
167 | 
168 |               // Immediately update the customers points balance
169 |               $('.smile-points-balance').text(smile.customer.points_balance - pointsPurchase.points_spent);
170 | 
171 |               /**
172 |                * Update customer's points balance based on the server's value.
173 |                * This should be the same as the above but always nice to confirm.
174 |                */
175 |               smile.fetchCustomer().then(function(customer) {
176 |                 $('.smile-points-balance').text(customer.points_balance);
177 |               });
178 | 
179 |               /**
180 |                * Replace the PointsProducts dropdown with a message about the discount
181 |                * being applied to the cart.
182 |                */
183 |                $redeemButton.replaceWith($clonedRedeemButton);
184 |                $clonedRedeemButton.addClass('btn--disabled');
185 |                $clonedRedeemButton.attr('disabled', true);
186 | 
187 |                $pointsProductsDropdown.find('.smile-redeem-label').text('');
188 | 
189 |                var pointsProductsDropdownHeight = $pointsProductsDropdown.find('#pointsProductsDropdown').height();
190 |                $pointsProductsDropdown.find('#pointsProductsDropdown').replaceWith('<div id="pointsProductsDropdown">Congrats! Your reward has been applied to the cart.</div>');
191 |                $pointsProductsDropdown.find('#pointsProductsDropdown').height(pointsProductsDropdownHeight);
192 |             }).catch(function(err) {
193 |               console.error('Something went wrong when purchasing PointsProduct with id ' + pointsProductId + '.');
194 |               $pointsProductsDropdown.find('.field').addClass('field--error');
195 |             }).then(function() {
196 |               /**
197 |                * This block runs whether the call succeeds or fails, kind of like finally() in other languages.
198 |                * Source: http://stackoverflow.com/a/35999141/540194
199 |                */
200 | 
201 |               $redeemButton.removeClass('btn--loading');
202 |             });
203 |           });
204 | 
205 |           /**
206 |            * Insert the points slider order summary section above the discount code
207 |            * section.
208 |            */
209 |           $('.order-summary__section--discount').before($dropdownContainer);
210 |         }); // fetchPointsProducts
211 |       });
212 |     });
213 |   }());
214 | </script>
215 | 
216 | <style>
217 |   .smile-points-products-dropdown {
218 |     margin: 10px 0;
219 |   }
220 | 
221 |   .smile-points-products-dropdown .smile-redeem-label {
222 |     margin-bottom: 10px;
223 |   }
224 | 
225 |   .smile-points-products-dropdown .smile-form {
226 |     display: -webkit-flex; /* Safari */
227 |     display: flex;
228 |     -webkit-flex-direction: row; /* Safari */
229 |     flex-direction: row;
230 |   }
231 | 
232 |   .smile-points-products-dropdown .smile-form .smile-select-container {
233 |     flex-grow: 1;
234 |     margin-right: 15px;
235 |     margin-bottom: 20px;
236 |   }
237 | 
238 |   .smile-points-products-dropdown .smile-form .smile-range-input {
239 |     margin: 20px 0;
240 |   }
241 | 
242 |   .smile-points-products-dropdown .smile-redeem-button-container {
243 |     flex-shrink: 1;
244 |   }
245 | </style>
246 | 


--------------------------------------------------------------------------------
/shopify-points-products-dropdown/sweettooth-points-products-dropdown.liquid:
--------------------------------------------------------------------------------
  1 | <!-- Smile Shopify points product dropdown v0.0.2 -->
  2 | 
  3 | <!-- Load Storefront.js -->
  4 | <script src="https://cdn.sweettooth.io/assets/storefront.js"></script>
  5 | 
  6 | <!-- NOTE: Your theme may or may not come with jQuery, if not
  7 |            uncomment this script to load it on the page -->
  8 | <!-- <script
  9 |   src="https://code.jquery.com/jquery-1.12.4.min.js"
 10 |   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
 11 |   crossorigin="anonymous"></script> -->
 12 | 
 13 | <script>
 14 |   (function() {
 15 |     // PointsProduct ID's that will be hidden from the dropdown
 16 |     var hidePointsProductIds = [];
 17 | 
 18 |     // The name used for points in your reward program.
 19 |     var pointsLabel = 'points';
 20 | 
 21 |     /**
 22 |      * Build up the order summary section for our points slider to live in.
 23 |      * This is built up in memory so we don't add anything to the dom until
 24 |      * all html content is populated with data from the API.
 25 |      */
 26 |     var buildPointsProductsDropdownOrderSummarySection = function(customer) {
 27 |       var customerPointsBalance = customer.points_balance;
 28 | 
 29 |       var sliderContainerHtml = ' \
 30 |         <div class="order-summary__section order-summary__section--sweettooth-points-products-dropdown"> \
 31 |           <h3 class="sweettooth-points-balance-heading">You have <span class="sweettooth-points-balance">' + customerPointsBalance + '</span> points</h3> \
 32 |           <div class="sweettooth-points-products-dropdown"></div> \
 33 |         </div> \
 34 |       ';
 35 |       var $sliderContainer = $($.parseHTML(sliderContainerHtml));
 36 | 
 37 |       return $sliderContainer;
 38 |     };
 39 | 
 40 |     /**
 41 |      * Automatically apply the PointsPurchase to cart. The PointsPurchase
 42 |      * object is documented here:
 43 |      * https://docs.smile.io/js/other-objects/points-purchase-object.
 44 |      * This is implemented knowing the specific elements of Shopify's
 45 |      * checkout page.
 46 |      */
 47 |     var applyPointsPurchaseToCart = function(pointsPurchase) {
 48 |       var $discountCodeInput = $('#checkout_reduction_code');
 49 | 
 50 |       // Apply the discount code to the checkout's form input
 51 |       $discountCodeInput.val(pointsPurchase.fulfilled_reward.code);
 52 | 
 53 |       // Ensure the discount code form submit button is enabled
 54 |       $discountCodeInput.closest('form').find('[type=submit]').removeClass('btn--disabled').prop('disabled', false);
 55 | 
 56 |       // Submit the form for the discount code
 57 |       $discountCodeInput.closest('form').find('[type=submit]').click();
 58 |     };
 59 | 
 60 |     /**
 61 |      * The function used in the Array filter to determine if the
 62 |      * PointsProduct should be hidden.
 63 |      */
 64 |     var shouldHidePointsProduct = function(pointsProduct) {
 65 |       return hidePointsProductIds.indexOf(pointsProduct.id) === -1;
 66 |     };
 67 | 
 68 |     /**
 69 |      * This function is used as a way to filter out certain PointsProducts
 70 |      * from the dropdown. This is left up to the developer. Just add the
 71 |      * PointsProduct ID's you don't want to show up to the
 72 |      * hidePointsProductIds array.
 73 |      */
 74 |     var filterPointsProducts = function(pointsProducts) {
 75 |       let filteredPointsProducts = pointsProducts;
 76 | 
 77 |       filteredPointsProducts = filteredPointsProducts.filter(shouldHidePointsProduct);
 78 | 
 79 |       return filteredPointsProducts;
 80 |     };
 81 | 
 82 |     $(document).on('sweettooth-initialized', function() {
 83 |       // Don't show if there is no logged in customer
 84 |       // or the customer is excluded from reward programs
 85 |       if (!SweetTooth.customer || SweetTooth.customer.state === 'disabled') {
 86 |         return;
 87 |       }
 88 | 
 89 |       var $dropdownContainer = buildPointsProductsDropdownOrderSummarySection(SweetTooth.customer);
 90 |       var $pointsProductsDropdown = $dropdownContainer.find('.sweettooth-points-products-dropdown');
 91 | 
 92 |       SweetTooth.fetchPointsProducts({ exchange_type: 'fixed' }).then(function(pointsProducts) {
 93 |         pointsProducts = filterPointsProducts(pointsProducts);
 94 | 
 95 |         let dropdownHtml = ' \
 96 |           <div class="sweettooth-redeem-label">Redeem ' + pointsLabel + ' for rewards on this order</div> \
 97 |           <div class="fieldset"> \
 98 |             <div data-address-field="province" class="field field--required field--show-floating-label"> \
 99 |               <div class="field__input-btn-wrapper"> \
100 |                 <div class="field__input-wrapper field__input-wrapper--select" id="pointsProductsDropdown"> \
101 |                   <label class="field__label field__label--visible">Rewards</label> \
102 |                   <select placeholder="Rewards" class="sweettooth-points-products-select field__input field__input--select"> \
103 |         ';
104 | 
105 |         let affordableRewards = $.grep(pointsProducts, function(pointsProduct) {
106 |           return (pointsProduct.points_price <= SweetTooth.customer.points_balance);
107 |         });
108 | 
109 |         let unaffordableRewards = $.grep(pointsProducts, function(pointsProduct) {
110 |           return (pointsProduct.points_price > SweetTooth.customer.points_balance);
111 |         });
112 | 
113 |         $.each(affordableRewards, function(index, pointsProduct) {
114 |           let reward = pointsProduct.reward;
115 |           dropdownHtml += '<option data-id="' + pointsProduct.id + '" value="' + reward.name + '">' + reward.name + ' • ' + pointsProduct.exchange_description + '</option>';
116 |         });
117 | 
118 |         $.each(unaffordableRewards, function(index, pointsProduct) {
119 |           let reward = pointsProduct.reward;
120 |           dropdownHtml += '<option data-id="' + pointsProduct.id + '" value="' + reward.name + '" disabled>' + reward.name + ' • ' + pointsProduct.exchange_description + '</option>';
121 |         });
122 | 
123 |         dropdownHtml += ' \
124 |                 </select> \
125 |                 <div class="field__caret"> \
126 |                   <svg class="icon-svg icon-svg--color-adaptive-lighter icon-svg--size-10 field__caret-svg" aria-hidden="true" focusable="false"> \
127 |                     <use xlink:href="#caret-down"></use> \
128 |                   </svg> \
129 |                 </div> \
130 |               </div> \
131 |               <button type="submit" class="sweettooth-redeem-button field__input-btn btn btn--default"> \
132 |                 <span class="btn__content">Redeem</span> \
133 |                 <i class="btn__content shown-on-mobile icon icon--arrow"></i> \
134 |                 <i class="btn__spinner icon icon--button-spinner"></i> \
135 |               </button> \
136 |             </div> \
137 |             <p class="field__message field__message--error sweettooth-points-products-dropdown-error">Something went wrong spending your points. Please try again.</p> \
138 |           </div> \
139 |         </div> \
140 |         ';
141 | 
142 |         // Add slider html to the points slider container
143 |         $pointsProductsDropdown.append(dropdownHtml);
144 | 
145 |         var $redeemButton = $pointsProductsDropdown.find('.sweettooth-redeem-button');
146 |         if (affordableRewards.length == 0) {
147 |           $redeemButton.addClass('btn--disabled');
148 |           $redeemButton.attr('disabled', true);
149 |         }
150 | 
151 |         // Handle redeem button click events
152 |         $pointsProductsDropdown.on('click', '.sweettooth-redeem-button', function() {
153 |           var $redeemButton = $(this);
154 |           var $clonedRedeemButton = $redeemButton.clone();
155 |           var $selectedPointsProduct = $pointsProductsDropdown.find('.sweettooth-points-products-select :selected');
156 |           var pointsProductId = $selectedPointsProduct.data('id');
157 | 
158 |           // Start loading indicator
159 |           $redeemButton.addClass('btn--loading');
160 | 
161 |           // Hit the Smile.io API to spend customer's points
162 |           SweetTooth.purchasePointsProduct(pointsProductId).then(function(pointsPurchase) {
163 |             // Clear the field error if there was one previously
164 |             $pointsProductsDropdown.find('.field').removeClass('field--error');
165 | 
166 |             applyPointsPurchaseToCart(pointsPurchase);
167 | 
168 |             // Immediately update the customers points balance
169 |             $('.sweettooth-points-balance').text(SweetTooth.customer.points_balance - pointsPurchase.points_spent);
170 | 
171 |             /**
172 |              * Update customer's points balance based on the server's value.
173 |              * This should be the same as the above but always nice to confirm.
174 |              */
175 |             SweetTooth.fetchCustomer().then(function(customer) {
176 |               $('.sweettooth-points-balance').text(customer.points_balance);
177 |             });
178 | 
179 |             /**
180 |              * Replace the PointsProducts dropdown with a message about the discount
181 |              * being applied to the cart.
182 |              */
183 |              $redeemButton.replaceWith($clonedRedeemButton);
184 |              $clonedRedeemButton.addClass('btn--disabled');
185 |              $clonedRedeemButton.attr('disabled', true);
186 | 
187 |              $pointsProductsDropdown.find('.sweettooth-redeem-label').text('');
188 | 
189 |              var pointsProductsDropdownHeight = $pointsProductsDropdown.find('#pointsProductsDropdown').height();
190 |              $pointsProductsDropdown.find('#pointsProductsDropdown').replaceWith('<div id="pointsProductsDropdown">Congrats! Your reward has been applied to the cart.</div>');
191 |              $pointsProductsDropdown.find('#pointsProductsDropdown').height(pointsProductsDropdownHeight);
192 |           }).catch(function(err) {
193 |             console.error('Something went wrong when purchasing PointsProduct with id ' + pointsProductId + '.');
194 |             $pointsProductsDropdown.find('.field').addClass('field--error');
195 |           }).then(function() {
196 |             /**
197 |              * This block runs whether the call succeeds or fails, kind of like finally() in other languages.
198 |              * Source: http://stackoverflow.com/a/35999141/540194
199 |              */
200 | 
201 |             $redeemButton.removeClass('btn--loading');
202 |           });
203 |         });
204 | 
205 |         /**
206 |          * Insert the points slider order summary section above the discount code
207 |          * section.
208 |          */
209 |         $('.order-summary__section--discount').before($dropdownContainer);
210 |       }); // fetchPointsProducts
211 |     });
212 |   }());
213 | </script>
214 | 
215 | <style>
216 |   .sweettooth-points-products-dropdown {
217 |     margin: 10px 0;
218 |   }
219 | 
220 |   .sweettooth-points-products-dropdown .sweettooth-redeem-label {
221 |     margin-bottom: 10px;
222 |   }
223 | 
224 |   .sweettooth-points-products-dropdown .sweettooth-form {
225 |     display: -webkit-flex; /* Safari */
226 |     display: flex;
227 |     -webkit-flex-direction: row; /* Safari */
228 |     flex-direction: row;
229 |   }
230 | 
231 |   .sweettooth-points-products-dropdown .sweettooth-form .sweettooth-select-container {
232 |     flex-grow: 1;
233 |     margin-right: 15px;
234 |     margin-bottom: 20px;
235 |   }
236 | 
237 |   .sweettooth-points-products-dropdown .sweettooth-form .sweettooth-range-input {
238 |     margin: 20px 0;
239 |   }
240 | 
241 |   .sweettooth-points-products-dropdown .sweettooth-redeem-button-container {
242 |     flex-shrink: 1;
243 |   }
244 | </style>
245 | 


--------------------------------------------------------------------------------
/shopify-points-slider/README.md:
--------------------------------------------------------------------------------
 1 | # Shopify Points Slider
 2 | 
 3 | This file will explain how to get setup.
 4 | 
 5 | ## Implementation
 6 | 
 7 | 1. Create a new **Snippet** in Shopify called `smile-points-slider.liquid`
 8 | 2. Paste the code from this sample file in your new snippet
 9 | 3. Set the PointsProduct ID at the top of the snippet you wish to use for the slider at checkout
10 | 4. Include the following snippet before the closing `</body>` tag of your `checkout.liquid`
11 | 5. You're all set!
12 | 
13 | ## Snippets
14 | 
15 | ### Code to add to your checkout.liquid
16 | 
17 | ```liquid
18 | {% include 'smile-initializer' %}
19 | {% include 'smile-points-slider' %}
20 | ```
21 | 


--------------------------------------------------------------------------------
/shopify-points-slider/smile-points-slider.liquid:
--------------------------------------------------------------------------------
  1 | <!-- A third party library for improved slider functionality on mobile.
  2 |      Available at: https://rangetouch.com/. Developers are welcome to host
  3 |      this file in place of using RangeTouch's CDN. -->
  4 | <script src="https://cdn.rangetouch.com/2.0.1/rangetouch.js"></script>
  5 | 
  6 | <!-- A third party library for formatting currencies in multiple locales -->
  7 | <script async src="https://cdnjs.cloudflare.com/ajax/libs/currencyformatter.js/2.2.0/currencyFormatter.min.js"></script>
  8 | 
  9 | <script src="https://js.smile.io/v1/smile-shopify.js"></script>
 10 | 
 11 | <!-- NOTE: Your theme may or may not come with jQuery, if not
 12 |            uncomment this script to load it on the page -->
 13 | <!-- <script
 14 |   src="https://code.jquery.com/jquery-1.12.4.min.js"
 15 |   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
 16 |   crossorigin="anonymous"></script> -->
 17 | 
 18 | <script>
 19 |   (function() {
 20 |     /**
 21 |      * REPLACE THE FOLLOWING WITH THE POINTS PRODUCT AND CURRENCY FROM YOUR ACCOUNT.
 22 |      * Learn more at:
 23 |      * https://docs.smile.io/install-smile/shopify/points-slider-at-checkout
 24 |      */
 25 |     var pointsProductId = null;
 26 | 
 27 |     // Store's currency symbol
 28 |     var currencyCode = 'USD';
 29 | 
 30 |     // Store's currency display type. Can be 'symbol' or 'code'
 31 |     // ex: 'symbol' results in "$15"
 32 |     // ex: 'display' results in "15 USD"
 33 |     var currencyDisplayType = 'symbol';
 34 | 
 35 |     // Optional translation:
 36 |     // Label for main button to apply their points value after using the points slider
 37 |     var translateRedeemLabel = 'Redeem';
 38 | 
 39 |     // Optional translation:
 40 |     // The name used for points in your reward program.
 41 |     var translatePointsLabel = 'points';
 42 | 
 43 |     // Optional translation:
 44 |     // Message when points reward has been added.
 45 |     var translateRewardAppliedLabel = 'Congrats! Your reward has been applied to the cart.';
 46 | 
 47 |     // Optional translation:
 48 |     // This phrase will have SLIDER_VALUE replaced with the points value the customer has currently dragged the slider to
 49 |     // This phrase will also have POINTS_LABEL replaced with your label above.
 50 |     // Ex: 'Redeem SLIDER_VALUE POINTS_LABEL' would show as 'Redeem 120 points'
 51 |     // Do not remove `SLIDER_VALUE` or `POINTS_LABEL` from the phrase, this will happen automatically.
 52 |     var translateRedeemPoints = 'Redeem SLIDER_VALUE POINTS_LABEL';
 53 | 
 54 |     // Optional translation:
 55 |     // This phrase will have NUMBER_POINTS replaced with the number of points the customer has
 56 |     // This phrase will also have POINTS_LABEL replaced with your label above.
 57 |     // Ex: 'You have NUMBER_POINTS POINTS_LABEL' would show as 'You have 120 points'
 58 |     // Do not remove `NUMBER_POINTS` or `POINTS_LABEL` from the phrase, this will happen automatically.
 59 |     var translatePointsBalance = 'You have NUMBER_POINTS POINTS_LABEL';
 60 | 
 61 |     // Optional translation:
 62 |     // This phrase will have MINIMUM_AMOUNT replaced with the number of points the customer needs to redeem.
 63 |     // This phrase will also have POINTS_LABEL replaced with your label above.
 64 |     // Ex: 'You need a minimum of MINIMUM_AMOUNT POINTS_LABEL to redeem.' would show as 'You need a minimum of 10 points to redeem.'
 65 |     // Do not remove `MINIMUM_AMOUNT` or `POINTS_LABEL` from the phrase, this will happen automatically.
 66 |     var translateRewardNameRedeemLabel = 'You need a minimum of MINIMUM_AMOUNT POINTS_LABEL to redeem.'
 67 | 
 68 |     // Optional translation:
 69 |     // This phrase will have DISCOUNT_AMOUNT replaced with the currency amount to be discounted.
 70 |     // Ex: 'DISCOUNT_AMOUNT off' would show as '$15 off' or '15 CAD off' depending on your preference above.
 71 |     // Do not remove `DISCOUNT_AMOUNT` from the phrase, this will happen automatically.
 72 |     var translatedDiscount = 'DISCOUNT_AMOUNT off';
 73 | 
 74 |     // Optional translation:
 75 |     var translateErrorMessage = 'Something went wrong spending your points. Please try again.';
 76 | 
 77 |     var generateRewardNameRedeemLabel = function(min) {
 78 |       var label = translateRewardNameRedeemLabel.replace('MINIMUM_AMOUNT', min);
 79 |       return label.replace('POINTS_LABEL', ` ${translatePointsLabel} `);
 80 |     }
 81 | 
 82 |     var generatePointsBalanceHtml = function(customerPointsBalance) {
 83 |       var html = translatePointsBalance.replace(
 84 |         'NUMBER_POINTS',
 85 |         ` <span class="smile-points-balance">' ${customerPointsBalance} '</span> `
 86 |       );
 87 | 
 88 |       return html.replace('POINTS_LABEL', ` ${translatePointsLabel} `);
 89 |     }
 90 | 
 91 |    var generateRedeemAmountLabelHtml = function(initialSliderValue) {
 92 |       var html = translateRedeemPoints.replace('SLIDER_VALUE', ` <span class="smile-slider-value">' ${initialSliderValue} '</span> `);
 93 |       return html.replace('POINTS_LABEL', ` ${translatePointsLabel} `);
 94 |     }
 95 | 
 96 |     var generateFormattedRewardValue = function(value) {
 97 |       var pattern = currencyDisplayType === 'code' ? '#,##0' : '!#,##0';
 98 |       var opts = { currency: currencyCode, pattern: pattern };
 99 |       var formatted = OSREC.CurrencyFormatter.format(value, opts);
100 | 
101 |       if (currencyDisplayType === 'code') {
102 |         formatted = formatted + ' ' + currencyCode;
103 |       }
104 | 
105 |       return formatted;
106 |     };
107 | 
108 |     var generateRewardName = function(formattedValue) {
109 |       return translatedDiscount.replace('DISCOUNT_AMOUNT', formattedValue);
110 |     }
111 | 
112 |     if (!pointsProductId) {
113 |       console.error('The Smile.io pointsProductId has not been set. Please set this variable in order to show the points slider at checkout. Learn more at https://docs.smile.io/install-smile/shopify/points-slider-at-checkout.');
114 |       return;
115 |     }
116 | 
117 |     /**
118 |      * Build up the order summary section for our points slider to live in.
119 |      * This is built up in memory so we don't add anything to the dom until
120 |      * all html content is populated with data from the API.
121 |      */
122 |     var buildPointsSliderOrderSummarySection = function(customer) {
123 |       var customerPointsBalance = customer.points_balance;
124 |       var pointsBalanceHtml = generatePointsBalanceHtml(customerPointsBalance);
125 | 
126 |       var sliderContainerHtml = ' \
127 |         <div class="order-summary__section order-summary__section--smile-points-slider"> \
128 |           <h3 class="smile-points-balance-heading">' + pointsBalanceHtml + '</h3> \
129 |           <div class="smile-points-slider" \
130 |             data-points-product-id=' + pointsProductId + ' \
131 |           ></div> \
132 |         </div> \
133 |       ';
134 |       var $sliderContainer = $($.parseHTML(sliderContainerHtml));
135 | 
136 |       return $sliderContainer;
137 |     };
138 | 
139 |     /**
140 |      * Automatically apply the PointsPurchase to cart.
141 |      * This is implemented knowing the specific elements of Shopify's
142 |      * checkout page.
143 |      */
144 |     var applyPointsPurchaseToCart = function(pointsPurchase) {
145 |       var $discountCodeInput = $('#checkout_reduction_code');
146 | 
147 |       // Apply the discount code to the checkout's form input
148 |       $discountCodeInput.val(pointsPurchase.reward_fulfillment.code);
149 | 
150 |       // Ensure the discount code form submit button is enabled
151 |       $discountCodeInput.closest('form').find('[type=submit]').removeClass('btn--disabled').prop('disabled', false);
152 | 
153 |       // Submit the form for the discount code
154 |       $discountCodeInput.closest('form').find('[type=submit]').click();
155 |     };
156 | 
157 |     $(document).on('smile-ui-loaded', function() {
158 |       SmileUI.ready().then(function(smileUI) {
159 |         // Initialized Smile.js instance.
160 |         var smile = smileUI.smile;
161 | 
162 |         // Don't show if there is no logged in customer or if the customer is disabled.
163 |         if (!smile.customer || smile.customer.state === 'disabled') {
164 |           return;
165 |         }
166 | 
167 |         var $sliderContainer = buildPointsSliderOrderSummarySection(smile.customer);
168 |         var $pointsSlider = $sliderContainer.find('.smile-points-slider');
169 |         var pointsSliderData = $pointsSlider.data();
170 |         var pointsProductId = pointsSliderData.pointsProductId;
171 | 
172 |         smile.fetchPointsProduct(pointsProductId).then(function(pointsProduct) {
173 |           if (pointsProduct.exchange_type !== 'variable') {
174 |             console.error("Oops! The Smile.io PointsProduct you're using for the points slider does not support variable reward values and thus cannot be displayed as a slider. To use the points slider, setup a PointsProduct that supports variable reward values. Learn more at https://docs.smile.io/install-smile/shopify/points-slider-at-checkout.");
175 |             return;
176 |           }
177 | 
178 |           var reward = pointsProduct.reward;
179 |           var min = pointsProduct.variable_points_min || 0;
180 |           // Max defaults to the customers max points balance
181 |           var max = smile.customer.points_balance;
182 |           var step = pointsProduct.variable_points_step;
183 |           var stepRewardValue = pointsProduct.variable_points_step_reward_value;
184 |           var initialSliderValue = min;
185 | 
186 |           if (pointsProduct.variable_points_max) {
187 |             /**
188 |              * Cap max of the slider as the smaller of the customers points
189 |              * balance and the pointsProducts variable points max
190 |              */
191 |             max = Math.min(pointsProduct.variable_points_max, max);
192 |           }
193 | 
194 |           var rewardValue = (initialSliderValue / step) * stepRewardValue;
195 |           var rewardName = generateRewardName(generateFormattedRewardValue(rewardValue));
196 |           var redeemAmountLabelHtml = generateRedeemAmountLabelHtml(initialSliderValue);
197 | 
198 |           var sliderHtml = ' \
199 |             <div class="smile-redeem-amount-label">' + redeemAmountLabelHtml + '</div> \
200 |             <div class="fieldset"> \
201 |               <div class="field"> \
202 |                 <div class="smile-form"> \
203 |                   <div class="smile-range-input-container"> \
204 |                     <input \
205 |                       class="smile-range-input" \
206 |                       type="range" \
207 |                       min="' + min + '" \
208 |                       max="' + max + '" \
209 |                       step="' + step + '" \
210 |                       value="' + initialSliderValue + '" \
211 |                       data-orientation="horizontal" \
212 |                     > \
213 |                     <div class="smile-reward-name">' + rewardName + '</div> \
214 |                   </div> \
215 |                   <div class="smile-redeem-button-container"> \
216 |                     <button type="submit" class="smile-redeem-button field__input-btn btn btn--default"> \
217 |                       <span class="btn__content">' + translateRedeemLabel + '</span> \
218 |                       <i class="btn__content shown-on-mobile icon icon--arrow"></i> \
219 |                       <i class="btn__spinner icon icon--button-spinner"></i> \
220 |                     </button> \
221 |                   </div> \
222 |                 </div> \
223 |                 <p class="field__message field__message--error smile-points-slider-error">' + translateErrorMessage + '</p> \
224 |               </div> \
225 |             </div> \
226 |             ';
227 | 
228 |           // Add slider html to the points slider container
229 |           $pointsSlider.append(sliderHtml);
230 | 
231 |           // Set up improved touch event handling on the points slider.
232 |           // This is wrapped in a setTimeout call to ensure the element
233 |           // is in the DOM before we try setting up RangeTouch on it.
234 |           window.setTimeout(function() { new RangeTouch('.smile-range-input'); }, 0);
235 | 
236 |           /**
237 |            * Check whether the customer can spend points or if
238 |            * the slider has a value of 0. If one of those is true
239 |            * disable the 'Redeem' button.
240 |            */
241 |            var $redeemButton = $pointsSlider.find('.smile-redeem-button');
242 |            var customerPointsBalance = smile.customer.points_balance;
243 |            if (customerPointsBalance < min) {
244 |              $pointsSlider.find('.smile-reward-name').text(generateRewardNameRedeemLabel(min));
245 |              $redeemButton.addClass('btn--disabled');
246 |              $redeemButton.attr('disabled', true);
247 |            }
248 | 
249 |            if (rewardValue === 0) {
250 |              $redeemButton.addClass('btn--disabled');
251 |              $redeemButton.attr('disabled', true);
252 |            }
253 | 
254 |           /**
255 |            * Handle slider value change events.
256 |            *
257 |            * Listening on two events:
258 |            *   input - To update values as the customer is sliding the slider
259 |            *   change - To update values when the slider is changed via javascript
260 |            *
261 |            * Source: First comment on this answer http://stackoverflow.com/a/19067260/540194
262 |            */
263 |           $pointsSlider.on('input change', '.smile-range-input', function() {
264 |             var sliderValue = $(this).val();
265 |             var rewardValue = (sliderValue / step) * stepRewardValue;
266 | 
267 |             // Update points to be spent based on slider value
268 |             $pointsSlider.find('.smile-slider-value').text(sliderValue);
269 | 
270 |             // Update reward name based on the slider value
271 |             var rewardName = generateRewardName(generateFormattedRewardValue(rewardValue));
272 |             $pointsSlider.find('.smile-reward-name').text(rewardName);
273 | 
274 |             /**
275 |              * Ensure the redeem button is disabled if the slider
276 |              * value is 0.
277 |              */
278 |             var $redeemButton = $pointsSlider.find('.smile-redeem-button');
279 |             if (rewardValue === 0) {
280 |               $redeemButton.addClass('btn--disabled');
281 |               $redeemButton.attr('disabled', true);
282 |             } else {
283 |               $redeemButton.removeClass('btn--disabled');
284 |               $redeemButton.attr('disabled', false);
285 |             }
286 |           });
287 | 
288 |           // Handle redeem button click events
289 |           $pointsSlider.on('click', '.smile-redeem-button', function() {
290 |             var $redeemButton = $(this);
291 |             var sliderValue = $pointsSlider.find('.smile-range-input').val();
292 | 
293 |             // Start loading indicator
294 |             $redeemButton.addClass('btn--loading');
295 | 
296 |             // Hit the Smile.io API to spend customer's points
297 |             smile.purchasePointsProduct(pointsProductId, { points_to_spend: sliderValue }).then(function(pointsPurchase) {
298 |               // Clear the field error if there was one previously
299 |               $pointsSlider.find('.field').removeClass('field--error');
300 | 
301 |               applyPointsPurchaseToCart(pointsPurchase);
302 | 
303 |               // Immediately update the customers points balance
304 |               $('.smile-points-balance').text(smile.customer.points_balance - pointsPurchase.points_spent);
305 | 
306 |               /**
307 |                * Update customer's points balance based on the server's value.
308 |                * This should be the same as the above but always nice to confirm.
309 |                */
310 |               smile.fetchCustomer().then(function(customer) {
311 |                 $('.smile-points-balance').text(customer.points_balance);
312 |               });
313 | 
314 |               /**
315 |                * Replace the points slider with a message about the discount being applied
316 |                * to the cart.
317 |                */
318 |               $pointsSlider.find('.smile-redeem-amount-label').text('');
319 |               $pointsSlider.find('.smile-range-input-container').text(translateRewardAppliedLabel)
320 |             }).catch(function(err) {
321 |               console.error('Something went wrong when purchasing PointsProduct with ID ' + pointsProductId + '.');
322 |               $pointsSlider.find('.field').addClass('field--error');
323 |             }).then(function() {
324 |               /**
325 |                * This block runs whether the call succeeds or fails, kind of like finally() in other languages.
326 |                * Source: http://stackoverflow.com/a/35999141/540194
327 |                */
328 | 
329 |               $redeemButton.removeClass('btn--loading');
330 | 
331 |               $redeemButton.addClass('btn--disabled');
332 |               $redeemButton.attr('disabled', true);
333 | 
334 |               var $rangeInput = $pointsSlider.find('.smile-range-input');
335 |               $rangeInput.val(0);
336 |               $rangeInput.change();
337 |             });
338 |           });
339 | 
340 |           /**
341 |            * Insert the points slider order summary section above the discount code
342 |            * section.
343 |            */
344 |           $('.order-summary__section--discount').before($sliderContainer);
345 | 
346 |         }).catch(function(err) {
347 |           console.error('Something went wrong fetching the Smile.io PointsProduct. Points slider will not be rendered. Learn more at https://docs.smile.io/install-smile/shopify/points-slider-at-checkout.');
348 |         }); // fetchPointsProduct
349 |       });
350 |     });
351 |   }());
352 | </script>
353 | 
354 | <style>
355 |   .smile-points-balance-heading {
356 |     margin-bottom: 20px;
357 |   }
358 | 
359 |   .smile-redeem-amount-label {
360 |     padding-bottom: 5px;
361 |   }
362 | 
363 |   .smile-points-slider .smile-form {
364 |     display: -webkit-box;
365 |     display: -ms-flexbox;
366 |     display: flex;
367 |     -webkit-box-orient: horizontal;
368 |     -webkit-box-direction: normal;
369 |     -ms-flex-direction: row;
370 |     flex-direction: row;
371 |   }
372 | 
373 |   .smile-points-slider .smile-range-input-container {
374 |     -webkit-box-flex: 1;
375 |     -ms-flex-positive: 1;
376 |     flex-grow: 1;
377 |     margin-right: 5px;
378 |   }
379 | 
380 |   .smile-points-slider .smile-range-input-container .smile-range-input {
381 |     margin: 12px 0;
382 |   }
383 | 
384 |   .smile-points-slider .smile-redeem-button-container {
385 |     -ms-flex-negative: 1;
386 |     flex-shrink: 1;
387 |   }
388 | 
389 |   .smile-points-slider .smile-redeem-button {
390 |     height: 42px;
391 |     cursor: pointer;
392 |   }
393 | 
394 |   .smile-points-slider .smile-reward-name {
395 |     text-align: center;
396 |     padding-top: 5px;
397 |   }
398 | 
399 |   .smile-points-slider .smile-range-input {
400 |     display: block;
401 |     width: 100%;
402 | 
403 |     /* Fixes shopify checkout */
404 |     -moz-appearance: range !important;
405 |     -webkit-appearance: slider-horizontal !important;
406 |     appearance: auto !important;
407 |   }
408 | 
409 |   @media (max-width: 767px) {
410 |     .smile-points-slider .smile-form {
411 |       padding-left: 30px;
412 |     }
413 |   }
414 | </style>
415 | 


--------------------------------------------------------------------------------
/shopify-points-slider/sweettooth-points-slider.liquid:
--------------------------------------------------------------------------------
  1 | <!-- Smile Shopify points slider v0.0.2 -->
  2 | 
  3 | <!-- A third party library for improved slider functionality on mobile.
  4 |      Available at: https://rangetouch.com/. Developers are welcome to host
  5 |      this file in place of using RangeTouch's CDN. -->
  6 | <script src="https://cdn.rangetouch.com/1.0.5/rangetouch.js"></script>
  7 | 
  8 | <!-- Load Storefront.js -->
  9 | <script src="https://cdn.sweettooth.io/assets/storefront.js"></script>
 10 | 
 11 | <!-- NOTE: Your theme may or may not come with jQuery, if not
 12 |            uncomment this script to load it on the page -->
 13 | <!-- <script
 14 |   src="https://code.jquery.com/jquery-1.12.4.min.js"
 15 |   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
 16 |   crossorigin="anonymous"></script> -->
 17 | 
 18 | <script>
 19 |   (function() {
 20 |     /**
 21 |      * REPLACE WITH THE POINTS PRODUCT FROM YOUR ACCOUNT.
 22 |      * Learn more at: https://docs.smile.io/docs/install-smile/shopify/points-slider-at-checkout.
 23 |      */
 24 |     var pointsProductId = null;
 25 | 
 26 |     if (!pointsProductId) {
 27 |       console.error('The Smile.io pointsProductId has not been set. Please set this variable in order to show the points slider at checkout. Learn more at https://docs.smile.io/docs/install-smile/shopify/points-slider-at-checkout.');
 28 |       return;
 29 |     }
 30 | 
 31 |     // Store's currency symbol
 32 |     var currencySymbol = '$';
 33 |     // The name used for points in your reward program.
 34 |     var pointsLabel = 'points';
 35 | 
 36 |     /**
 37 |      * Build up the order summary section for our points slider to live in.
 38 |      * This is built up in memory so we don't add anything to the dom until
 39 |      * all html content is populated with data from the API.
 40 |      */
 41 |     var buildPointsSliderOrderSummarySection = function(customer) {
 42 |       var customerPointsBalance = customer.points_balance;
 43 | 
 44 |       var sliderContainerHtml = ' \
 45 |         <div class="order-summary__section order-summary__section--sweettooth-points-slider"> \
 46 |           <h3 class="sweettooth-points-balance-heading">You have <span class="sweettooth-points-balance">' + customerPointsBalance + '</span> ' + pointsLabel + '</h3> \
 47 |           <div class="sweettooth-points-slider" \
 48 |             data-points-product-id=' + pointsProductId + ' \
 49 |           ></div> \
 50 |         </div> \
 51 |       ';
 52 |       var $sliderContainer = $($.parseHTML(sliderContainerHtml));
 53 | 
 54 |       return $sliderContainer;
 55 |     };
 56 | 
 57 |     /**
 58 |      * Create a name that will exist and update under the points slider.
 59 |      * Developers should update this to reflect their reward value and
 60 |      * currency.
 61 |      */
 62 |     var generateFulfilledRewardNameFromValue = function(value) {
 63 |       return currencySymbol + value + ' off';
 64 |     };
 65 | 
 66 |     /**
 67 |      * Automatically apply the PointsPurchase to cart.
 68 |      * This is implemented knowing the specific elements of Shopify's
 69 |      * checkout page.
 70 |      */
 71 |     var applyPointsPurchaseToCart = function(pointsPurchase) {
 72 |       var $discountCodeInput = $('#checkout_reduction_code');
 73 | 
 74 |       // Apply the discount code to the checkout's form input
 75 |       $discountCodeInput.val(pointsPurchase.fulfilled_reward.code);
 76 | 
 77 |       // Ensure the discount code form submit button is enabled
 78 |       $discountCodeInput.closest('form').find('[type=submit]').removeClass('btn--disabled').prop('disabled', false);
 79 | 
 80 |       // Submit the form for the discount code
 81 |       $discountCodeInput.closest('form').find('[type=submit]').click();
 82 |     };
 83 | 
 84 |     $(document).on('sweettooth-initialized', function() {
 85 |       // Don't show if there is no customer
 86 |       // or the customer is excluded from reward programs
 87 |       if (!SweetTooth.customer || SweetTooth.customer.state === 'disabled') {
 88 |         return;
 89 |       }
 90 | 
 91 |       var $sliderContainer = buildPointsSliderOrderSummarySection(SweetTooth.customer);
 92 |       var $pointsSlider = $sliderContainer.find('.sweettooth-points-slider');
 93 |       var pointsSliderData = $pointsSlider.data();
 94 |       var pointsProductId = pointsSliderData.pointsProductId;
 95 | 
 96 |       SweetTooth.fetchPointsProduct(pointsProductId).then(function(pointsProduct) {
 97 |         if (pointsProduct.exchange_type !== 'variable') {
 98 |           console.error("Oops! The Smile.io PointsProduct you're using for the points slider does not support variable reward values and thus cannot be displayed as a slider. To use the points slider, setup a PointsProduct that supports variable reward values. Learn more at https://docs.smile.io/v1/docs/points-slider-at-checkout-in-shopify.");
 99 |           return;
100 |         }
101 | 
102 |         var reward = pointsProduct.reward;
103 |         var min = pointsProduct.variable_points_min || 0;
104 |         // Max defaults to the customers max points balance
105 |         var max = SweetTooth.customer.points_balance;
106 |         var step = pointsProduct.variable_points_step;
107 |         var stepRewardValue = pointsProduct.variable_points_step_reward_value;
108 |         var initialSliderValue = min;
109 | 
110 |         if (pointsProduct.variable_points_max) {
111 |           /**
112 |            * Cap max of the slider as the smaller of the customers points
113 |            * balance and the pointsProducts variable points max
114 |            */
115 |           max = Math.min(pointsProduct.variable_points_max, max);
116 |         }
117 | 
118 |         var rewardValue = (initialSliderValue / step) * stepRewardValue;
119 |         var rewardName = generateFulfilledRewardNameFromValue(rewardValue);
120 | 
121 |         var sliderHtml = ' \
122 |           <div class="sweettooth-redeem-amount-label">Redeem <span class="sweettooth-slider-value">' + initialSliderValue + '</span> ' + pointsLabel + '</div> \
123 |           <div class="fieldset"> \
124 |             <div class="field"> \
125 |               <div class="sweettooth-form"> \
126 |                 <div class="sweettooth-range-input-container"> \
127 |                   <input \
128 |                     class="sweettooth-range-input" \
129 |                     type="range" \
130 |                     min="' + min + '" \
131 |                     max="' + max + '" \
132 |                     step="' + step + '" \
133 |                     value="' + initialSliderValue + '" \
134 |                     data-orientation="horizontal" \
135 |                   > \
136 |                   <div class="sweettooth-reward-name">' + rewardName + '</div> \
137 |                 </div> \
138 |                 <div class="sweettooth-redeem-button-container"> \
139 |                   <button type="submit" class="sweettooth-redeem-button field__input-btn btn btn--default"> \
140 |                     <span class="btn__content">Redeem</span> \
141 |                     <i class="btn__content shown-on-mobile icon icon--arrow"></i> \
142 |                     <i class="btn__spinner icon icon--button-spinner"></i> \
143 |                   </button> \
144 |                 </div> \
145 |               </div> \
146 |               <p class="field__message field__message--error sweettooth-points-slider-error">Something went wrong spending your points. Please try again.</p> \
147 |             </div> \
148 |           </div> \
149 |           ';
150 | 
151 |         // Add slider html to the points slider container
152 |         $pointsSlider.append(sliderHtml);
153 | 
154 |         /**
155 |          * Check whether the customer can spend points or if
156 |          * the slider has a value of 0. If one of those is true
157 |          * disable the 'Redeem' button.
158 |          */
159 |          var $redeemButton = $pointsSlider.find('.sweettooth-redeem-button');
160 |          var customerPointsBalance = SweetTooth.customer.points_balance;
161 |          if (customerPointsBalance < min) {
162 |            $pointsSlider.find('.sweettooth-reward-name').text('You need a minimum of ' + min + ' ' + pointsLabel + ' to redeem');
163 |            $redeemButton.addClass('btn--disabled');
164 |            $redeemButton.attr('disabled', true);
165 |          }
166 | 
167 |          if (rewardValue === 0) {
168 |            $redeemButton.addClass('btn--disabled');
169 |            $redeemButton.attr('disabled', true);
170 |          }
171 | 
172 |         /**
173 |          * Handle slider value change events.
174 |          *
175 |          * Listening on two events:
176 |          *   input - To update values as the customer is sliding the slider
177 |          *   change - To update values when the slider is changed via javascript
178 |          *
179 |          * Source: First comment on this answer http://stackoverflow.com/a/19067260/540194
180 |          */
181 |         $pointsSlider.on('input change', '.sweettooth-range-input', function() {
182 |           var sliderValue = $(this).val();
183 |           var rewardValue = (sliderValue / step) * stepRewardValue;
184 | 
185 |           // Update points to be spent based on slider value
186 |           $pointsSlider.find('.sweettooth-slider-value').text(sliderValue);
187 | 
188 |           // Update reward name based on the slider value
189 |           var rewardName = generateFulfilledRewardNameFromValue(rewardValue);
190 |           $pointsSlider.find('.sweettooth-reward-name').text(rewardName);
191 | 
192 |           /**
193 |            * Ensure the redeem button is disabled if the slider
194 |            * value is 0.
195 |            */
196 |           var $redeemButton = $pointsSlider.find('.sweettooth-redeem-button');
197 |           if (rewardValue === 0) {
198 |             $redeemButton.addClass('btn--disabled');
199 |             $redeemButton.attr('disabled', true);
200 |           } else {
201 |             $redeemButton.removeClass('btn--disabled');
202 |             $redeemButton.attr('disabled', false);
203 |           }
204 |         });
205 | 
206 |         // Handle redeem button click events
207 |         $pointsSlider.on('click', '.sweettooth-redeem-button', function() {
208 |           var $redeemButton = $(this);
209 |           var sliderValue = $pointsSlider.find('.sweettooth-range-input').val();
210 | 
211 |           // Start loading indicator
212 |           $redeemButton.addClass('btn--loading');
213 | 
214 |           // Hit the Smile.io API to spend customer's points
215 |           SweetTooth.purchasePointsProduct(pointsProductId, { points_to_spend: sliderValue }).then(function(pointsPurchase) {
216 |             // Clear the field error if there was one previously
217 |             $pointsSlider.find('.field').removeClass('field--error');
218 | 
219 |             applyPointsPurchaseToCart(pointsPurchase);
220 | 
221 |             // Immediately update the customers points balance
222 |             $('.sweettooth-points-balance').text(SweetTooth.customer.points_balance - pointsPurchase.points_spent);
223 | 
224 |             /**
225 |              * Update customer's points balance based on the server's value.
226 |              * This should be the same as the above but always nice to confirm.
227 |              */
228 |             SweetTooth.fetchCustomer().then(function(customer) {
229 |               $('.sweettooth-points-balance').text(customer.points_balance);
230 |             });
231 | 
232 |             /**
233 |              * Replace the points slider with a message about the discount being applied
234 |              * to the cart.
235 |              */
236 |             $pointsSlider.find('.sweettooth-redeem-amount-label').text('');
237 |             $pointsSlider.find('.sweettooth-range-input-container').text('Congrats! Your reward has been applied to the cart.')
238 |           }).catch(function(err) {
239 |             console.error('Something went wrong when purchasing PointsProduct with ID ' + pointsProductId + '.');
240 |             $pointsSlider.find('.field').addClass('field--error');
241 |           }).then(function() {
242 |             /**
243 |              * This block runs whether the call succeeds or fails, kind of like finally() in other languages.
244 |              * Source: http://stackoverflow.com/a/35999141/540194
245 |              */
246 | 
247 |             $redeemButton.removeClass('btn--loading');
248 | 
249 |             $redeemButton.addClass('btn--disabled');
250 |             $redeemButton.attr('disabled', true);
251 | 
252 |             var $rangeInput = $pointsSlider.find('.sweettooth-range-input');
253 |             $rangeInput.val(0);
254 |             $rangeInput.change();
255 |           });
256 |         });
257 | 
258 |         /**
259 |          * Insert the points slider order summary section above the discount code
260 |          * section.
261 |          */
262 |         $('.order-summary__section--discount').before($sliderContainer);
263 | 
264 |       }).catch(function(err) {
265 |         console.error('Something went wrong fetching the Smile.io PointsProduct. Points slider will not be rendered. Learn more at https://docs.smile.io/docs/install-smile/shopify/points-slider-at-checkout.');
266 |       }); // fetchPointsProduct
267 |     });
268 |   }());
269 | </script>
270 | 
271 | <style>
272 |   .sweettooth-points-balance-heading {
273 |     margin-bottom: 20px;
274 |   }
275 | 
276 |   .sweettooth-redeem-amount-label {
277 |     padding-bottom: 5px;
278 |   }
279 | 
280 |   .sweettooth-points-slider .sweettooth-form {
281 |     display: -webkit-box;
282 |     display: -ms-flexbox;
283 |     display: flex;
284 |     -webkit-box-orient: horizontal;
285 |     -webkit-box-direction: normal;
286 |     -ms-flex-direction: row;
287 |     flex-direction: row;
288 |   }
289 | 
290 |   .sweettooth-points-slider .sweettooth-range-input-container {
291 |     -webkit-box-flex: 1;
292 |     -ms-flex-positive: 1;
293 |     flex-grow: 1;
294 |     margin-right: 5px;
295 |   }
296 | 
297 |   .sweettooth-points-slider .sweettooth-range-input-container .sweettooth-range-input {
298 |     margin: 12px 0;
299 |   }
300 | 
301 |   .sweettooth-points-slider .sweettooth-redeem-button-container {
302 |     -ms-flex-negative: 1;
303 |     flex-shrink: 1;
304 |   }
305 | 
306 |   .sweettooth-points-slider .sweettooth-redeem-button {
307 |     height: 42px;
308 |   }
309 | 
310 |   .sweettooth-points-slider .sweettooth-reward-name {
311 |     text-align: center;
312 |     padding-top: 5px;
313 |   }
314 | 
315 |   .sweettooth-points-slider .sweettooth-range-input {
316 |     display: block;
317 |     width: 100%;
318 | 
319 |     /* Fixes shopify checkout */
320 |     -moz-appearance: range !important;
321 |     -webkit-appearance: slider-horizontal !important;
322 |     appearance: auto !important;
323 |   }
324 | 
325 |   @media (max-width: 767px) {
326 |     .sweettooth-points-slider .sweettooth-form {
327 |       padding-left: 30px;
328 |     }
329 |   }
330 | </style>
331 | 


--------------------------------------------------------------------------------
/smile-dev.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smile-io/code-samples/2d26bf8fb13fe9cf7814b9325fd277bfee17a97c/smile-dev.png


--------------------------------------------------------------------------------
/welcome-developers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smile-io/code-samples/2d26bf8fb13fe9cf7814b9325fd277bfee17a97c/welcome-developers.png


--------------------------------------------------------------------------------
/welcome1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smile-io/code-samples/2d26bf8fb13fe9cf7814b9325fd277bfee17a97c/welcome1.png


--------------------------------------------------------------------------------