All Collections
Advanced Design
Open a Quicklist by Clicking on its Name
Open a Quicklist by Clicking on its Name
Use the edit button to rename it instead
Marc McCall avatar
Written by Marc McCall
Updated over a week ago

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:

  1. Log in to Admin

  2. Go to Appearance / Theme Options

  3. 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.

Did this answer your question?