如何使用 timber.RightDrawer.open();在自定义添加到购物车成功打开抽屉？

Question

我正在使用带有自定义 ajax 代码的添加到购物车并且它工作正常，问题是我需要使用 timber.RightDrawer.open(); 在成功功能上打开购物车抽屉；现在我在表单中使用 "js-drawer-open-right" class，但在单击“添加到购物车”按钮时它会同时打开抽屉。添加到购物车成功后我需要打开抽屉。

我的Ajax代码是：

                function addItem(button) {
                var postData = $(button).closest('.add-to-cart').serialize();
                  $.ajax({
                    type: 'POST',
                    url: '/cart/add.js',
                    dataType: 'json',
                    data: postData,
                    success: addToCartOk,
                    error: addToCartFail
                  });
                }
                function addToCartOk(product) {
                //Want to open drawer here on success
                  timber.RightDrawer.open();
                }
                function addToCartFail(obj, status) {
                }

我的表格是：

在这里您可以勾选加入购物车https://soft-theme.myshopify.com/collections/all

Answer 1

与 timber.RightDrawer.open();

相比，我找到了不同且非常简单的解决方案

我在成功函数中用 jQuery 单击了 "js-drawer-open-right"，并从我之前放置的表单中删除了 class。

成功函数现在是：

         function addToCartOk(product) {
            //drawer open here by click on that class on success
              jQuery('.js-drawer-open-right').click();
            }

它工作得很好。

Answer 2

@barjinder 解决方案但更清洁：

$(document).on("click", ".add-to-cart-button", function(event) {
    event.preventDefault();
    var form = $(this).closest('form');
    jQuery.ajax({
        type: 'POST',
        url: '/cart/add.js',
        data: form.serialize(),
        dataType: 'json',
        success: function(cart) {
            jQuery('.js-drawer-open-right').click();
        },
        error: function(XMLHttpRequest, textStatus) {
            alert("An error occurred: can't reach server");
        },
    });
});

您可以使用下面的表格

<form action="/cart/add" method="POST">
    <input type="hidden" name="quantity" value="1">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}">
    <button type="submit" class="add-to-cart-button">
        Add to cart
    </button>
</form>

如何使用 timber.RightDrawer.open();在自定义添加到购物车成功打开抽屉？

How to use timber.RightDrawer.open(); in custom add to cart success to open drawer?

ajax

jquery

shopify

timber