Renaming a quick list is currently as simple as clicking on it's name.
An inline editing field will be displayed and the user will be able to rename it or cancel the action.
To see the quick list content in order to remove items or make an order, the user will have to click on the pencil button.
What if I could use the name to open the quicklist?
Some users would like to be able to click directly on the name to go to the quick list instead of renaming it.
This can be changed with our friend Javascript.
This is how it will work after you make the changes described in this article:
The code below will allow the customers to click on the name to go to the quick list and the edit button will be used to rename it instead.
So let's proceed and make the changes:
Log in to Admin
Go to Appearance / Theme Options
Scroll down to Footer Block and paste the code below
Please make sure the code is added outside any existing code you might have already in place.
<script>
$(document).ready(function (e) {
if ($('body').hasClass('ex-quicklists') || $('body').hasClass('quicklists')) {
// Quicklists overwrite EDIT behaviour
$('.c_l_name').editable('destroy');
$('#quicklistgrid tr').each(function () {
var name = $(this).find('.c_name a');
var editUrl = $(this).find('.editquicklist').data('url');
name.attr('href', editUrl);
var self = this;
$(this).find('.editquicklist').click(function (e) {
e.stopPropagation();
$(self).find('.c_l_name').editable('toggle');
});
});
$('.c_l_name').on('hidden', function (e, reason) {
$(this).editable('destroy');
});
$('.c_l_name').addClass('listUpdated');
setInterval(function () {
$('#quicklistgrid tr .editquicklist').click(function (e) {
e.stopPropagation();
});
if ($('.c_l_name').hasClass('editable') && !$('.c_l_name').hasClass('listUpdated')) {
$('.c_l_name').editable('destroy');
$('#quicklistgrid tr').each(function () {
var name = $(this).find('.c_name a');
var editUrl = $(this).find('.editquicklist').data('url');
name.attr('href', editUrl);
var self = this;
$(this).find('.editquicklist').click(function (e) {
e.stopPropagation();
$(self).find('.c_l_name').editable('toggle');
});
});
$('.c_l_name').on('hidden', function (e, reason) {
$(this).editable('destroy');
});
$('.c_l_name').addClass('listUpdated');
}
// Quicklists overwrite EDIT behaviour
}, 10);
}
}); // Document ready
</script>
Here's the whole procedure to add the code.
And that's it, now your customers will be able to open their quick lists by clicking on the name.