Option Filter Integration (Check Stock and Update Price)

By: Mel R. Penetrante

Front-end templates

You need the following JS file and HTML template file to integrate product options.

  1. option-combinations.js – This file contains the Ajax call, event funtions and generate the template based on the data response.
  2. dropckick.js – dropkick can be included as a separate js file or can be added to plugins.js file. dropkick is used to style the drop-down form and it is binded to the change event of select input form.
  3. product.html – this file is used to display the product details of the selected product.

  4. show_variant_filters.html – Contains the options available for the selected product. This file is called inside product.html via block function call.

    Block function
    <{show_block module='prodcatalogue'
    block='show_variant_filters'
    product_id=$product->getID()
    options=''
    template_name='show_variant_filters'
    }>

Front-end Integration

How to display product options

First, you need to setup the variable to mapped the html element in the front-end (/modules/prodcatalogue/templates/product.html). To modify the variable open the option-combinations.js and change the variables. See image below. Each line is the class/id name of the element found in the html tags.

Check for Out of stock.

Items that has quality 0 in the response should be be mark as out of stock in the front-end. This is to tell the user that the selected item with specific option is not available.

How to check for out of of stock.

in the file option-combinations.js on line 302 you will see this code:

Code
if (response.variant.quantity == "0") {
 $submit.val('Out of stock');
 $submit.attr( 'disabled', true );
}

How to change the price

Everytime a user change the option or quantity the price gets updated. This is to give idea to the user on how much the cost of the selected option.


How to update the price

In the file option-combinations.js on line 299 you will see this code:

Code
$total.html( finalPriceTemplate( { price: dollas(price * quantity) } ) );

Please note that if an option has special price you need to update the price as well. The code that check the special price starts at line 292 – 296

Code
if (typeof response.variant.prices[ 0 ].special_value !== 'undefined' && response.variant.prices[ 0 ].special_value != "0.00") {
 var price = parseFloat( response.variant.prices[ 0 ].special_value );
 var quantity = parseInt($quantity.val());
 $total.html( 'Now: '+finalPriceTemplate( { price: dollas(price * quantity) } ) );
}

File Reference: OptionFilter.zip