Add static products to the cart in one click - xmpie-users/uStore-js GitHub Wiki

The uStore ordering process is designed so that the customer:

  • selects a product
  • selects the quantity
  • selects any product properties (paper type, binding, wrapping, etc)
  • adds the product to the shopping cart
  • repeats the process to add any other products
  • checks out

When your customers have to order many static products that have no product properties, it can be annoying and time consuming to have to go through the finalize steps for each product.

This trick uses both custom JavaScript and an HTML Generic product property to add items to the cart in one click.

The trick works by:

  • Changing the onclick function of the product thumbnail on the store product grid/list view page. (In this example, any products which have "quick" in the product name will have their onclick function changed. You could choose some other selection method if needed.)
  • Turning off the product details step on the product setup (edit product page)
  • Adding a HTML Generic control to the product properties so the page will automatically advance when the finalize page is loaded.
  • Showing some feedback to the user to indicate the product is added to the cart. (In this case we just use a JavaScript alert() - but you could use other nicer UI mechanism to inform the customer.)

First, add the JavaScript to the storefront - :

<script type="text/javascript">
function makeItQuick()
{
  // adds hidden frame, so the execution will happen on that hidden frame instead of the main frame
  $("body").append("<iframe id='hiddenFrameForLink' name='hiddenFrameForLink' style='display:none'></iframe>");
  // find all links that are buy it now ("place an order").
  $("a[tid*='btnBuyItNow']").each(function (index, value)
  { 
    // check if the product name contains the word "quick" – we decided that only products with the word quick will go quickly
    if ($(this).attr("onclick").toLowerCase().indexOf("quick") > -1) {
      // changes the on click link to be executed on the new iframe, and adds an alert.
      $(this).attr("onclick", $(this).attr("onclick").replace("location.href", "alert('Product added to the shopping cart');hiddenFrameForLink.location.href"));
      // replaces the a target to remote location
      $(this).attr("target", "hiddenFrameForLink");
      // changes the caption of the button.
      $(this).text("Quick Order");
    }
  });
    //new skin
    $("a[role='button']").each(function (index, value) {
        // check if the product name contains the word "quick" – we decided that only products with the word quick will go quickly
        if (this.innerText.toLowerCase().indexOf("more") > -1) {
            // changes the on click link to be executed on the new iframe, and adds an alert.
            // replaces the a target to remote location
            $(this).attr("target", "hiddenFrameForLink");
            // changes the caption of the button.
            $(this).text("Quick Order");
        }
    });

}

$(document).ready(function(){
  // wait a second after the page loads before making the changes
  setTimeout("makeItQuick()", 1000);
})
</script>

Second, edit the static product in question. Take it offline and edit:

Alt

Turn off (uncheck) the "Show Product Details Step":

Alt

Save the change, then click "Product Properties Setup".

Create a new product property - doesn't matter what it is called, the user will never see the page:

Alt

You can copy the markup code from below:

<script type="text/javascript">
$(document).ready (function () {
  var referrer =  document.referrer;
  if (referrer.indexOf("/Cart") > -1)
    return;
  window.location.href = $("#ctl00_cphMainContentFooter_WizardStepsNextPrev1_ButtonFinish").attr("href");
});
</script>

Don't forget to set the callback function as shown in the screen shot.

Save your property, and put your product back online.

Also, don't forget the script is looking for products that have "quick" in the document name, so you might need to edit your static product's name...

⚠️ **GitHub.com Fallback** ⚠️