Question 246299 in Shopify Question posted in
The Shopify help center can be found here.

Shopify – Calling slide out cart from sticky add to cart bar button

  • I have a sticky add-to-cart button based on https://www.youtube.com/watch?v=loRbZ2hOzhY.

  • I changed the code of the Dawn 11.0 theme based on the above video and the sticky add-to-cart bar is working.

The problem is, when I click the "Add to Cart" button of the sticky add to cart bar, the slide-out drawer cart does not appear. But when I click the regular "Add to cart" button on the product page, the slide-out drawer cart appears with animation as it should.

I have done the following but it is not working. If someone can help, it would be great…

  1. I have added an asset and called it CartDrawerPull.js

  2. For the above script, I added the script reference in the theme. liquid

  3. Wrote the following code for capturing /cart/add an action for all forms and added an event listener and allowed it to handle default and added animate and active class.

document.querySelectorAll('form[action="/cart/add"]').forEach((form) => {
form.addEventListener("submit", (e) => {
// e.preventDefault(); 
document.querySelector('.cart-drawer').classList.add ('animate','active');
});
}) ```
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Cheers! I could make it work with lot of trial on debugging but not without code from @bryan89tran to whom I a owe big thank. I modified @bryan89tran code after debugging and code I am using is as below now :

    Instruct for anyone who wants to replicate

    1. Add an asset. Let's call is CartDrawerPull.js
    2. Put below code in CartDrawerPull.js
    3. Ensure theme.liquid has following line <script src="{{ 'CartDrawerPull.js' | asset_url }}" defer="defer"></script>
    4. Save CartDrawerPull.js and theme.liquid
    5. Now when Add to Cart button is clicked on sticky add to cart bar, slide out drawer will appear.

    I am happy for me as I am learning Shopify customisation and this is my third hit.

    Below is code for CartDrawerPull.js :

      document.addEventListener('DOMContentLoaded', function()
{
  var variantBut = document.querySelector('.sticky-bar-form .variant-button');  
    
 variantBut.addEventListener('click', function() 
 {
        var cart = document.querySelector(".drawer");
   

        let addToCartForms = document.querySelectorAll('form[action$="/cart/add"]');

      addToCartForms.forEach((form) => 
      {
        form.addEventListener("submit",async (e) => 
        {
          e.preventDefault();
          let formData = new FormData(e.target);

          const config = {};
          if (cart) 
          {
            formData.append("sections", cart.getSectionsToRender().map((section) => section.id) );
            formData.append("sections_url", window.location.pathname);
            cart.setActiveElement(document.activeElement); 
          }

          config.body = formData;

          fetch(window.Shopify.routes.root + "cart/add.js", {method: "POST", body: formData,})
            .then((response) => {return response.json();})
            .then((response) => { console.log(response); cart.renderContents(response);})
            .catch((error) => {console.error("Error:", error); });
        });
      });
    });
    });```

  2. 0

    I just installed a fresh install of dawn 11.0.0.

    I am assuming that you still have the asset cart-notification.js still configured in the Dawn theme.

    But the following code works for me.

    The cart.renderContents(response); is the method that renders the cart drawer. But you need the getSectionsToRender to render correctly.

    const cart = document.querySelector("cart-notification");

let addToCartForms = document.querySelectorAll('form[action$="/cart/add"]');

addToCartForms.forEach((form) => {
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    let formData = new FormData(e.target);

    const config = {};
    if (cart) {
      formData.append(
        "sections",
        cart.getSectionsToRender().map((section) => section.id)
      );
      formData.append("sections_url", window.location.pathname);
      cart.setActiveElement(document.activeElement);
    }
    config.body = formData;

    fetch(window.Shopify.routes.root + "cart/add.js", {
      method: "POST",
      body: formData,
    })
      .then((response) => {
        return response.json();
      })
      .then((response) => {
        console.log(response);
        cart.renderContents(response);
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  });
});

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search