kankele wrote:On shopping cart, instead of remove product checkbox, there should be a remove product button or link. Most of the users remove products one by one. Update shopping cart way is old fashioned for deleting product from shopping cart.
I got this idea from
ima9ines.
For wishlist:
Replace in your wishlist.cshtml
@if (Model.IsEditable)
{
<td class="remove-from-cart">
<span class="td-title"></span>
<input type="checkbox" id="
[email protected]" name="removefromcart" value="@(item.Id)" />
<span data-checkbox-id="
[email protected]" class="remove-from-cart-item-action ico ico-delete"></span>
</td>
}
@if (Model.DisplayAddToCart)
{
<td class="add-to-cart">
<span class="td-title"></span>
<input type="checkbox" id="
[email protected]" name="addtocart" value="@(item.Id)" />
<span data-checkbox-id="
[email protected]" class="addtocart-item-action ico ico-add"></span>
</td>
}
----------------------------------------------------------------
end of wishlist.cshtml add:
<script type="text/javascript">
$(document).ready(function () {
var container = '.wishlist-content';
$('.remove-from-cart span.remove-from-cart-item-action', container).on('click', function () {
$('#' + $(this).data('checkbox-id'), container).prop('checked', true);
$('.update-wishlist-button', container).click();
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var container = '.wishlist-content';
$('.add-to-cart span.addtocart-item-action', container).on('click', function () {
$('#' + $(this).data('checkbox-id'), container).prop('checked', true);
$('.wishlist-add-to-cart-button', container).click();
});
});
</script>
-----------------------------------------------------------------
For shopping cart :
Replace in your OrderSummary.cshtml
@if (Model.IsEditable)
{
<td class="remove-from-cart">
<span class="td-title"></span>
<input type="checkbox" id="
[email protected]" name="removefromcart" value="@(item.Id)" />
<span data-checkbox-id="
[email protected]" class="remove-from-cart-item-action ico ico-delete"></span>
</td>
}
----------------------------------------------------------------
end of your OrderSummary.cshtml add
<script type="text/javascript">
$(document).ready(function () {
var container = '.order-summary-content';
$('.remove-from-cart span.remove-from-cart-item-action', container).on('click', function () {
$('#' + $(this).data('checkbox-id'), container).prop('checked', true);
$('.update-cart-button', container).click();
});
});
</script>
-------------------------------------------------------------
in your styles.css:
add following lines
/* Remove button for each item in the shopping-cart */
.order-summary-content .remove-from-cart > input[type='checkbox'] {
display: none;
}
.order-summary-content .ico {
display: inline-block;
height: 16px;
width: 16px;
}
.order-summary-content .remove-from-cart > .ico-delete {
background: url(../images/removecrt.png) center center no-repeat;
cursor: pointer;
}
/* Remove button for each item in the wishlist */
.wishlist-content .remove-from-cart > input[type='checkbox'] {
display: none;
}
.wishlist-content .ico {
display: inline-block;
height: 16px;
width: 16px;
}
.wishlist-content .remove-from-cart > .ico-delete {
background: url(../images/removecrt.png) center center no-repeat;
cursor: pointer;
}
/* Add to cart button for each item in the wishlist */
.wishlist-content .add-to-cart > input[type='checkbox'] {
display: none;
}
.wishlist-content .ico {
display: inline-block;
height: 20px;
width: 20px;
}
.wishlist-content .add-to-cart > .ico-add {
background: url(../images/addtocart.png) center center no-repeat;
cursor: pointer;
}
----------------------------------------------------------------------
You need to change the background images for icons. Just put whatever you want.