Create your own ecommerce website and start selling successfully with ShopWired today
Activating soft add to basket from a category page
Theme Customisations - Coding
Before you proceed: |
Normally, the addition of a product to a basket, will lead the customer straight through to the checkout page. However, if you have the soft add to basket app enabled the customer will remain on the product page after clicking the 'add to basket' button.
Products can also be added to the basket from category/search results pages through a customisation described below. These instructions also include the utilisation of the soft add to basket system to keep the user on the category page.
Please note, the customisation described below will not work if your products have variations. It also does not envisage giving users the option to select a product variation, extra or product choice (or entering customisation text or uploading a file). For this to work, you would need to construct a modal window which allows a user to select from these options (this is described in another customisation help guide).
1. Locate your theme's application.js file and find the productAddToBasketButton() plugin.
2. Check the file to see if the plugin is 'bound' to a className, e.g.
| $('.product-soft-add-button').productAddToBasketButton(); |
3. Within the products.twig partial file you'll then need to add a link to add the product to the basket.
A check needs to be in place to ensure that the product doesn't have variations, if it does we'll need to redirect them to the product page to make their selections.
| {% if product.options %} <a href="{{ product.url }}"> view product </a> {% else %} <a class="{{ global.features.ajax_basket ? ' product-soft-add-button' : '' }}" href="{{ product.url }}?add-to-basket&quantity=1"> add to basket </a> {% endif %} |
The code within the class checks to see whether the soft add to basket app is enabled and, if it is, adds the corresponding class to activate the soft add to basket system.
(You will also need to add your own classes/styling to this button to make it appear how you'd like to).
4. The button needs to be wrapped within a form which has a quantity input (which is hidden in our example, but could be displayed if you'd like the user to be able to select a quantity).
| {% if product.options %} <a href="{{ product.url }}"> view product </a> {% else %} <form action="{{ product.url }}" method="post"> <input type="hidden" name="quantity" value="1"> <a class="button{{ global.features.ajax_basket ? ' product-soft-add-button' : '' }}" href="{{ product.url }}?add-to-basket&quantity=1"> Add to basket </a> </form> {% endif %} |
5. Create the modal box that will display the items in the basket (i.e. the soft add to basket window), once a product is added to the basket.
| {% if global.features.ajax_basket %} <div class="shopwired-basket-modal"> <div class="inner"> <h2>The item has been added to your basket</h2> <div class="items"></div> <div class="buttons"> <div class="close-button shopwired-basket-modal-button">Continue Shopping</div> <a href="/checkout/basket" class="shopwired-basket-modal-button main-background-color">Proceed To Checkout</a> </div> <div class="close close-button alternative-background-color"></div> </div> </div> {% endif %} |
This markup needs to be added to page files which need to render the soft add to basket window (e.g. the home page, category/search results pages).