Всплывающее окно Lightbox при действии add_to_cart в WooCommerce

Question

Всплывающее окно Lightbox при действии add_to_cart в WooCommerce

8 мая 2013 г., 15:28:52

Просмотры: 38.7K

Голосов: 5

Я хотел бы создать модальное "всплывающее" окно в WooCommerce, которое появляется при нажатии кнопки "Добавить в корзину". Это должно происходить после действий WC, которые фактически добавляют товар в корзину, но до/вместо каких-либо перенаправлений.

Я нашел несколько вероятных/возможных хуков, действий и фильтров, которые могут быть полезны, но я не уверен, какие именно мне нужны и как их правильно использовать (извините, я полный новичок в WooCommerce):

woocommerce_template_loop_add_to_cart
woocommerce_template_single_add_to_cart
woocommerce_after_add_to_cart_button
также есть фильтр add_to_cart_redirect для $url

Я также не уверен, как фактически запустить появление лайтбокса из PHP! (В HTML я использую элемент, например, гиперссылку, по которой нужно кликнуть, но как вызвать то же самое в определенный момент выполнения PHP? -- Нужен ли мне AJAX?)

В последнюю очередь я планировал использовать ThickBox, так как он поставляется в комплекте с WordPress. Есть ли причины избегать его или есть лучшая доступная альтернатива, или может быть в WooCommerce уже есть встроенная реализация лайтбокса?

Заранее благодарен за любую помощь!

Bucky

235

jquery плагины thickbox

Комментарии

Спасибо за минус! Я понимаю, что вопрос, возможно, не самый ясный и прямой, но я пытался охватить много незнания в небольшом объеме. В следующий раз не могли бы вы оставить мне несколько советов, как улучшить мой вопрос?

Bucky

9 мая 2013 г. 11:39:08

Все ответы на вопрос

Комментарии

Вау, спасибо за такой блестящий ответ, это идеально!! -- Я пробовал prettyPhoto, но обнаружил, что сложно изменить размеры в CSS, не меняя при этом размеры всплывающих окон галереи (хотя, оглядываясь назад, немного jQuery могло бы это исправить!) -- в любом случае, еще раз спасибо!! :)

Bucky

14 мая 2013 г. 07:49:10

adelval 832 · Accepted Answer · 2013-05-12T17:42:41Z

Следующее решение работает для меня на страницах архивов товаров (это включает как главную страницу магазина, так и страницы архивов категорий товаров).

Оно будет показывать текущее содержимое корзины в thickbox (всплывающем окне). Я выбрал отображение этого в данном примере просто потому, что это данные, которые возвращаются через Ajax после нажатия кнопки "добавить в корзину", но вы можете показывать другой вид информации в своем окне. Например, вы можете получить product_id только что добавленного товара, посмотрев на окружающие HTML-элементы.

В файле functions.php вашей темы (или в определении класса темы, если он у вас есть), вероятно, есть какая-то функция 'enqueue_scripts'. Вам следует добавить это в эту функцию, чтобы убедиться, что скрипт thickbox загружается.

if (is_woocommerce() && is_archive()) {
    wp_enqueue_script( 'frontend-custom', get_template_directory_uri() . '/js/frontend-custom.js', array("jquery"));
    add_thickbox();
}

В файле (в директории вашей темы) js/frontend-custom.js (или там, где у вас хранится JavaScript темы):

jQuery(document).ready(function($) {
    $('body').on('added_to_cart',function(e,data) {
        //alert('Added ' + data['div.widget_shopping_cart_content']);
        if ($('#hidden_cart').length == 0) { //добавляем содержимое корзины только один раз
            //$('.added_to_cart').after('<a href="#TB_inline?width=600&height=550&inlineId=hidden_cart" class="thickbox">View my inline content!</a>');
            $(this).append('<a href="#TB_inline?width=300&height=550&inlineId=hidden_cart" id="show_hidden_cart" title="<h2>Корзина</h2>" class="thickbox" style="display:none"></a>');
            $(this).append('<div id="hidden_cart" style="display:none">'+data['div.widget_shopping_cart_content']+'</div>');
        }
        $('#show_hidden_cart').click();
    });
});

Дополнительные примечания:

Я полагаю, вы также можете выводить JavaScript непосредственно в страницу из PHP. В этом случае, вероятно, вам нужно использовать хук add_action('woocommerce_ajax_added_to_cart', 'myfunction'); Это действие выполняется внутри woocommerce_ajax_add_to_cart() сразу после добавления товара в корзину (после прохождения валидации и т.д.), но перед перенаправлением.
Страницы отдельных товаров работают не так же (кнопка "добавить в корзину" там использует обычную PHP-форму, без Ajax).
Я не тестировал это, но WooCommerce поставляется со своим собственным 'prettyphoto.js', который работает путем добавления 'rel="prettyPhoto"' к ссылке href, почти так же, как работает класс thickbox в примере выше. Возможно, вы захотите попробовать его, чтобы сохранить единообразие дизайна с WooCommerce.