Documentation You are here: start » v » 2.0 » snippets » checkout_upsells

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
v:2.0:snippets:checkout_upsells [2017/04/26 07:02] – external edit 127.0.0.1v:2.0:snippets:checkout_upsells [2025/05/30 21:44] (current) – foxybrett
Line 2: Line 2:
  
 Beginning in version 2.0 we've added some basic upsell functionality into the checkout. It allows you to quickly show a modal window to customers on the checkout providing opportunities for them to add additional products to their cart prior to checkout. Beginning in version 2.0 we've added some basic upsell functionality into the checkout. It allows you to quickly show a modal window to customers on the checkout providing opportunities for them to add additional products to their cart prior to checkout.
 +
 +<wrap tip>It also works on subscription cancellations!</wrap> If you want to display a message before a customer cancels their subscription, this functionality can handle that as well. (Sample code at the bottom of the page.)
  
 The upsell modal window is displayed on page load of the checkout, based on conditions you set within your custom Twig logic. The upsell modal window is displayed on page load of the checkout, based on conditions you set within your custom Twig logic.
  
 {{:v:2.0:snippets:foxy_checkout_upsells.png?nolink&500|}} {{:v:2.0:snippets:foxy_checkout_upsells.png?nolink&500|}}
 +
 +
 ===== Step 1: Add custom Twig to your checkout ===== ===== Step 1: Add custom Twig to your checkout =====
  
Line 31: Line 35:
 <code html> <code html>
 {% block upsell_modal %} {% block upsell_modal %}
-    {% set hasUpsell = false %}+    {% set showUpsell = true %}
     {% for item in items %}     {% for item in items %}
         {% if item.code == "my-upsell" %}         {% if item.code == "my-upsell" %}
-            {% set hasUpsell = true %}+            {% set showUpsell = false %}
         {% endif %}         {% endif %}
     {% endfor %}     {% endfor %}
-    {% if not hasUpsell %}+    {% if showUpsell %}
         <h2>Special offer just for you!</h2>         <h2>Special offer just for you!</h2>
         <p>As a limited time offer, we're offering you this unique product for only $12.95. That's $5 off our normal price!</p>         <p>As a limited time offer, we're offering you this unique product for only $12.95. That's $5 off our normal price!</p>
Line 46: Line 50:
  
 A few things happens within this code. A few things happens within this code.
-  - Firstly, we set a variable called ''hasUpsell'' to false +  - Firstly, we set a variable called ''showUpsell'' to true 
-  - Next, we loop through the items in the cart and look for any products with a code of ''my-upsell''. If one is present, we set the ''hasUpsell'' variable to true. +  - Next, we loop through the items in the cart and look for any products with a code of ''my-upsell''. If one is present, we set the ''showUpsell'' variable to false. 
-  - Finally, if ''hasUpsell'' is still false, meaning the customer hasn't previously purchased the upsell - we display some HTML tempting the customer to our upsell product. If they have, and ''hasUpsell'' is true - we don't output any HTML, leaving the block empty and so the modal won't display at all.+  - Finally, if ''showUpsell'' is still true, meaning the customer hasn't previously purchased the upsell - we display some HTML tempting the customer to our upsell product. If they have, and ''showUpsell'' is false - we don't output any HTML, leaving the block empty and so the modal won't display at all.
  
 ==== Important Notes ==== ==== Important Notes ====
Line 82: Line 86:
   * On page load of the checkout, you could send off a [[v:2.0:json|JSONP request]] setting a custom session attribute of the current date/time. You could then check against that variable when deciding whether to show the upsell or not, and include a countdown timer within the modal showing how much longer the offer would be valid for.   * On page load of the checkout, you could send off a [[v:2.0:json|JSONP request]] setting a custom session attribute of the current date/time. You could then check against that variable when deciding whether to show the upsell or not, and include a countdown timer within the modal showing how much longer the offer would be valid for.
   * If you wanted to also trigger the upsell modal off of other events on the checkout - such as removing a product from their cart or clicking a button or link - it can be shown by calling ''FC.checkout.showUpsellModal()''. This function will re-render the upsell block and display if it's enabled and has at least one HTML element within the block to display.   * If you wanted to also trigger the upsell modal off of other events on the checkout - such as removing a product from their cart or clicking a button or link - it can be shown by calling ''FC.checkout.showUpsellModal()''. This function will re-render the upsell block and display if it's enabled and has at least one HTML element within the block to display.
 +
 +==== Only showing the upsell window once across customer sessions ====
 +
 +If you want to ensure the customer only sees the upsell modal once across multiple different checkout attempts, you can utilise cookies to store details about the customer that can be retrieved in future checkout sessions. As an example, the following code will add a cookie that will last for 30 days if the customer either closes the upsell modal or submits the add to cart form, preventing the customer from seeing it again for that timeframe. 
 +
 +You would include this code in the "footer" textarea of the "Add custom header and footer code to the templates" option found on the "configuration" page of your stores administration:
 +
 +<code javascript>
 +{% if context == "checkout" %}
 +<script>
 +    var upsell_cookie_name = "fc_completed_upsell",
 +        cookie_expires_in = 30; // default, in days
 + 
 +    $(function() {
 +        var has_upsell_cookie = document.cookie.split(';').filter(function(item) {
 +                return item.indexOf(upsell_cookie_name + '=') >= 0
 +            }).length;
 +        if (has_upsell_cookie) {
 +            $('[data-fc-id="block-upsell-modal"]').html("");
 +            if (FC.checkout.upsell_modal) {
 +                FC.checkout.upsell_modal.close();
 +            }
 +        }
 + 
 +        // On closing the modal
 +        $('body').on("mousedown", '[data-fc-id="block-upsell-modal"] [data-remodal-action="cancel"]', function() { addUpsellCookie(); });
 +        // On submitting a form in the modal
 +        $('body').on("submit", '[data-fc-id="block-upsell-modal"] form', function() { addUpsellCookie(); });
 +    });
 + 
 +    function addUpsellCookie(days) {
 +        var expires = "",
 +            date = new Date(),
 +            days = parseInt(days);
 +        
 +        if (typeof days !== "number" || !isFinite(days) || Math.floor(days) !== days) {
 +            days = cookie_expires_in;
 +        }
 +
 +        date.setTime(date.getTime() + (days*24*60*60*1000));
 +        expires = "; expires=" + date.toUTCString();
 +        document.cookie = upsell_cookie_name + "=true" + expires + "; path=/";
 +    }
 +</script>
 +{% endif %}
 +</code>
 +
 +You can modify this script as needed, updating the ''cookie_expires_in'' variable to change the number of days they shouldn't see the upsell for. 
 +
 +The script also supports passing a custom cookie length, in days, to the ''addUpsellCookie()'' function, so you could customise the number of days the customer shouldn't see the upsell modal for depending on what they interact with. If no parameter is passed, then the default value is used from the top of the script (30 days in the example code above). For example, if you wanted to just hide the modal if cancelled for the default amount, but hide for a year if the customer submits the form - you could edit the form submission event hook like this:
 +
 +<code javascript>    $('body').on("submit", '[data-fc-id="block-upsell-modal"] form', function() { addUpsellCookie(365); });</code>
 +
 +Finally, you can also comment out either of the event hooks that are triggered on closing the modal or submitting a form, depending on your needs. For example if you only wanted to prevent the upsell from showing again if the customer submits the form, you would comment out this line like this:
 +
 +<code javascript>
 +    // $('body').on("mousedown", '[data-fc-id="block-upsell-modal"] [data-remodal-action="cancel"]', function() { addUpsellCookie(); });
 +</code>
 +
 +
 +
 +===== Displaying a Subscription Cancellation Upsell or Message =====
 +
 +All the steps above should be followed, but here's code tailored to display the message based on the ''is_subscription_cancel'' value. This will //only// display when a customer uses a subscription cancellation link:
 +
 +<code html>
 +{% block upsell_modal %}
 +    {% if is_subscription_cancel %}
 +    <div id="cancelConfirmModal">
 +        <h2>Hi there! Before You Cancel...</h2>
 +        <p>We understand things change, but if you're cancelling because:</p>
 +        <ul>
 +            <li>You're not getting the value you expected?</li>
 +            <li>Encountering technical difficulties?</li>
 +            <li>Finding it complex to use?</li>
 +            <li>Have questions about your plan or billing?</li>
 +        </ul>
 +        <p>We're here to help you get the most out of our service! And we're happy to help.</p>
 +        <div>
 +            <ul>
 +            <li>
 +                <a href="mailto:hello@example.com">✉️ Email Support or Schedule a Call</a>
 +            </li>
 +            <li>
 +                <a data-remodal-action="cancel">No Thanks, Continue to Cancel…</a>
 +            </li>
 +            </ul>
 +        </div>
 +    </div>
 +    {% endif %}
 +{% endblock %}
 +</code>

Page Tools

Site Tools