Add Items from a Previous Order to the Cart

help customers find regular purchases and favourite products with the reorder button introduction help customers find regular purchases and favourite products with the reorder button the button can be added to a user orders layout or any other layout where you have access to an order id for this reorder feature to work, the user must be logged in must have been logged in when they originally made the order the feature fetches all products from that order and adds those that are still available to the cart this gives the user a chance to review and adjust quantities before checkout a message can also be displayed to the user to detail any products from that previous order which are no longer available though, this is only possible where an order still exists in the database and has not been deleted developing the order button including the button the following liquid will output the reorder button {% include 'ecommerce/reorder button', layout 'default', order id this id %} parameters layout order id the button can be added in any liquid layout, but you'll need to have access to the id for an order belonging to that user which is most easily available in the user orders layout or the order details layout (note that a user can't be logged in when reading an email, so this feature will not work from an order details layout in an email) in the user orders layout, the exact liquid for the id will depend on the variable you've set in the loop in the following example, the variable assigned to each iteration of the loop is this so the order id is available inside the loop as this id {% for this in orders %} {% include 'ecommerce/reorder button' layout 'default' order id this id %} {% endfor %} the button will only work if the user is logged in, so you may wish to add the following logic to an order details layout to make sure the user is logged in before displaying {% if context current user id %} {% endif %} the button layout adding the button will load a small button layout you can find the default layout or create a custom layout at the following path layouts/modules/module 14/components/reorder button/my layout name liquid adding the function the styling of the button is completely up to you to carry out its main functionality, the button requires an event to be attached to it which will run a javascript function onclick="s e reorder({ order id '{{order id}}' token '{{token}}' cart url '/cart' error cb error success cb success})" the function takes a single argument containing an options object the available arguments are as follows option purpose example/ default required? order id the order id to be looked up and added to cart '{{order id}}' yes token access token from liquid '{{token}}' yes cart url cart url for redirection after successful result '/cart' yes error cb custom error function name error optional success cb custom success function name success optional adding a custom error function the custom error function will be called in the following circumstances (the table also shows the value of the "error" parameter passed back when this occurs) error error parameter value order found but does not belong to this user, or user is not logged in "unauthorized " order does not exist "order was not found " all associated products are disabled, expired, unreleased or deleted "order was found, but no products were available " any other error "could not reorder " parameters returned error see above reorder unavailable products an object containing all products which could not be added to the cart from the order looping over this object can allow you to display the id and/or name of these products expiry dates are also provided, where they exist, for context the default error behaviour is to display an "alert" containing the error message adding a custom success function if you add a custom success function, you must add a custom error function the custom success function will run if an order was successfully found and at least one product was successfully added to the cart not all products related to the order may have been available parameters returned cart url the url of the cart that you passed into the function originally reorder unavailable products an object containing the products which are no longer available and couldn't be added to the cart reorder added an integer representing the number of unique products with either a different product id or the same product id but different attributes, that were successfully added to cart the number ignores the actual quantity of each product added and is more useful as a measure of successfully added rows the default success behaviour is to re direct the page to the cart url you can choose whether to display a message about the unsuccessful items before that, using javascript or display that information via liquid when the user arrives at the cart adding a message to the cart to list the unavailable products successfully added products are automatically added to the user's cart when they arrive at their cart page they can review the quantities and check out when ready the following liquid tags can be used to either confirm the order id which has been added to the cart, or present a detailed breakdown of the products which were not successfully added; this is an alternative to showing this information in the custom success function liquid tag purpose example output {{context session reorder added to cart}} the id of the ( at least partially ) successfully added order this can be used in logic to decide whether to display feedback at all as if it equals blank, there will be no recent reorder "345" {{context session reorder unavailable products}} an object containing details on unsuccessful products if there were any this contains the same information returned to the custom javascript callback functions {"173" {"product id" "173","name" "classical summer album","expiry date" "2145916800"}} {% for this in context session reorder unavailable products %} {{this\[0]}} {% endfor %} by looping over the unavailable products and accessing the \[0] index, you can access their key \ the product id "123" {% for this in context session reorder unavailable products %} {{this\[1] name}} {{this\[1] expiry date}} {{this\[1] expiry date | date "%d/%m/%y" }} {% endfor %} by looping over the unavailable products and accessing the \[1] index, you can access their fields \ the name the expiry date of the product the expiry date of the product (formatted) "classical summer" "2145916800" "01/11/2020" {% session reorder unavailable products = null %} clear the reorder unavailable products data from the session this would only happen automatically if another order is reordered, the cart is emptied, or checkout is completed {% session reorder added to cart = null %} clear the reorder added to cart data from the session this would only happen automatically if another order is reordered, the cart is emptied, or checkout is completed the above liquid tags are accessing the user's session this means they are temporary messages for that user each time an order is reordered the old message will be replaced example of cart liquid after partially or fully successful reorder this example will, if an order was successfully reordered display a message to users confirming the order id which was reordered if any products were not available, these are displayed in a table finally, the session is cleared, so the user only sees this once {% if context session reorder added to cart != blank %} previous order #{{context session reorder added to cart}} added to cart you can review quantities and head to checkout to complete the order {% if context session reorder unavailable products != blank %} unavailable products sorry, the following products were no longer available product idname {% for this in context session reorder unavailable products %} {{this\[0]}}{{this\[1] name}} {% endfor %} {% endif %} {% endif %}