How to add the 'size' filed to the product?


First of all, we should update our item's model: 

1. Open the 'js/products/models/itemModel.js' file.

2. Add a new property called sizes and set it to an empty array like in the screenshot.

 

Next, we should specify some sizes on our items:

1. Open the 'js/products/categories/bags.js' file.

2. Add a new property called sizes and fill it with some sizes like in the screenshot.

 

Now, once we have our sizes specified, we can try do display them in our product's modal.

1. Open the 'js/products/views/modalView.js' file.

2. Just before the 'add-to-cart-btn' paste our select, like in the screenshot. Copy paste the code below

'<% if(sizes.length) { %>',
        '<select name="select" class="js-product-size">',
                '<% _.each(sizes, function(size){ %>',
                        '<option value="<%= size %>"><%= size %></option> ',
                '<% }) %>',
        '</select>',
'<% } %>',

3. Inside the '.button' click bind, add a new variable called 'size' and give it this value.

4. Our 'addToCart' trigger will look now differently. See the code of bouth elements below:

var size = that.$el.find('.js-product-size').val();
 
$(window).trigger('addToCart', {
        target: $(this).data('target'),
        size: size
});

 

Next we should catch our information and prepare it for sending:

1. Open the 'js/products/products.js' file.

2. Go to line 64, where the 'addToCart' event is binded.

3. Replace the entire binding with the code below:

$(window).on('addToCart', function(e, data) {
        e.preventDefault();
        var item = window.ItemsCollection.get({cid: data.target});
 
        Products.addToCart.addToList(item.get('name'), item.get('price').current, item.get('code'), data.target, data.size);
        s.formCollection.trigger('itemAdded');
});

4. Search for 'addToList: function' and replace with the updated one (that should be around the line 146):

addToList: function (name, price, code, id, size) {
        var newItem = new FormModel({
                name: name,
                price: price,
                parent: id,
                code: code,
                size: size
        });
        s.formCollection.add(newItem);                         
},

5. Search for 'fillField' and follow the instructions from the screenshot.

 

Now we are done with the JavaScript part, here it comes the PHP part, we are nearly done.

1. Open the 'sendmail.php' file.

2. Go to line 45 and replace the existing code with this updated one (see below). You should have something similar.

$item = '<tr '.$background.' align="center" style="border-bottom: 1px solid #eeeeee;">';
$item .= '<td width="50%" style="border-right: 1px solid #eeeeee;"><p style="line-height: 52px; margin: 0; font-size: 12px; color: #363636;">'.$product->title.'</p></td>';
$item .= '<td width="25%" style="border-right: 1px solid #eeeeee;"><p style="line-height: 52px; margin: 0; font-size: 12px; color: #363636;">'.$product->code.'</p></td>';
$item .= '<td width="25%"><p style="line-height: 52px; margin: 0; font-size: 12px; color: #363636;">'.$product->size.'</p></td>';
$item .= '</tr>';

3. Open the 'templates/mail.html' file.

4. Go to line 107 and replace the existing <tr> and it's content with the new one listed below. Now you should have something similar.

<tr align="center">
    <td width="50%" bgcolor="#363636" style="border-right: 1px solid #5b5b5b;"><p style="line-height: 52px; margin: 0; font-size: 16px; color: #ffffff;">Item name</p></td>
    <td width="25%" bgcolor="#363636" style="border-right: 1px solid #5b5b5b;"><p style="line-height: 52px; margin: 0; font-size: 16px; color: #ffffff;">Item ID</p></td>
    <td width="25%" bgcolor="#363636"><p style="line-height: 52px; margin: 0; font-size: 16px; color: #ffffff;">Item size</p></td>
</tr>

 

Now once we have this new filed, the 'Quick add to Cart' mode doesn't make sens anymore so we should remove the '+' button from the items on the front page and here's how we can achieve it.

1. Open the 'js/products/views/itemView.js'.

2. Go to line 25 or search for 'add-product-code' and comment/remove the next three lines, like shown in the screenshot.

 

 That's it, now all you have to do is to update all your products with correct sizes.

Tags: filed, size, triablo

Last update:
2015-10-21 17:03
Author:
Vlad Sargu
Revision:
1.1
Average rating: 5 (3 Votes)