[Resolved] Custom “Add to Cart” banner for Shop archive

[nik9]

Hello GP Team,

Is it possible to add a Custom banner on shop archive on scroll (Like the banner “Add to chart” on single product page)? Would be nice if we can use the same scripts for this.

We want to provide the product filter there. On klick in a button in the banner a canvas will open with the filter in it. So a customer has always the option to filter even if he scrolls down and down.

Is this in a way possible?

Cheers

[Tom]

Hi there,

It’s not possible to use the same script, unfortunately.

This has some good info on how to do it: https://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px

[nik9]

Hi Tom,

Thanks. I play a round with the stuff and it seems this is what I was looking for.

Now I want to implement this code here: https://jsfiddle.net/ZyKar/

HTML goes into GP elements: Hook = wp_footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll down... </p>
<div class="bottomMenu"></div>

CSS goes into the Customitzer

body {
  height: 1600px;
}
.bottomMenu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
}

jQuery goes into GP elemets: Hook = wp_footer

<script>
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});
</script>

But it does not work. No change on the site.

Do I miss something here?

Cheers

[Tom]

In your javascript, try replacing $ characters with jQuery.

Let me know 🙂

[nik9]

Hi Tom,

Hmm.. no success..

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script&gt;

<script>
jQuery(document).scroll(function() {
  var y = jQuery(this).scrollTop();
  if (y > 800) {
    jQuery('.bottomMenu').fadeIn();
  } else {
    jQuery('.bottomMenu').fadeOut();
  }
});
</script>

But I noticed, that now we have some strange sticky header and footer behavior. The sticky nav and the footer are very slow in loading. But maybe this is because it Dev System..

[Tom]

Any console errors? Custom javascript isn’t something we can support here, but if you’d like to link me to the page I can see if there’s anything obvious.

[nik9]

Hi Tom

Sure, Here is the link: https://dev.brewmee.ch/

I Saw a few errors.. but don’t know if this is related to this.

Cheers.

[Elvin]

Hi,

I’ve checked your site and the error and it seemed related to this. https://github.com/elementor/elementor/issues/12299

Perhaps, updating Elementor might address this error.

As for your JS code, were you able to make it work?

You seem to be using different jQuery libraries. You might wanna try adding “.noConflict()”.
To know more about it, visit this documentation. https://api.jquery.com/jquery.noconflict/

Let us know if it works for you.

[nik9]

Hey Elvin

Thanks.

So I tried this code here in Elements with the hook wp_footer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomMenu">sdfs</div>

<script>
.noConflict()
jQuery(document).scroll(function () {
    var y = jQuery(this).scrollTop();
    if (y > 20) {
        jQuery('.bottomMenu').fadeIn();
    } else {
        jQuery('.bottomMenu').fadeOut();
    }

});
</script>

And this CSS:

body {
    height:1600px;
}
.bottomMenu {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    background: red;
    z-index: 1;
}

But no success. Dispalyrule is set to “entire Site”. Is this working on your site in a test system with GP theme?

Here is the link to the test code: https://jsfiddle.net/apaul34208/ZyKar/3/

[Tom]

Hi there,

I would remove this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Then try this:

<script>
jQuery(document).scroll(function () {
    var y = jQuery(this).scrollTop();
    if (y > 20) {
        jQuery('.bottomMenu').fadeIn();
    } else {
        jQuery('.bottomMenu').fadeOut();
    }

});
</script>

If that doesn’t work, you may have some conflicting JS on the page.

[nik9]

Hi tom,

This does also not work as expected.
I never get the “new” custom banner.

I also think the website is slower when I add this to wp_footer.

Is there a other way to get this? Can I somehow extend the sticky navigation on shop archive? If yes, then I can add the stuff there which I need.

What, i’m trying to do is, that the filter button on mobile (which open the off canvas with the filters) always is on top on shop archive. So that the user can open the filter anytime even if he is scrolling down.

Is there maybe a better way to do this?

Cheers

[Tom]

The way it’s currently set up I don’t believe it’s possible without custom javascript, unfortunately. Do you have any control over where the button displays in the HTML?

[nik9]

Hi Tom

Yes because I add the button via GP elements as a hook.

<?php
echo do_shortcode('[ocs_trigger id="productfilter01" icon="fa fa-bars" element="button" text="FILTERN" class="hide-on-desktop"]');
?>

Hook: woocommerce_archive_description

Is there a way to do this here somewhere?

[Tom]

Just played around with a couple of different locations and couldn’t make position: sticky work, unfortunately.

You could try a plugin like this that handles the JS for you: https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

[nik9]

Thanks Tom,

Now it works. This is the code.

<div class="customsticky">
[ocs_trigger id="productfilter01" icon="fa fa-bars" element="button" text="PRODUKTE FILTERN" class="hide-on-desktop"]
</div>

But now I have two little issue. I used a div around the shortcode to style this like a banner. But I’m not able to get this 100% to work. There are some white spaces around. This spaces are not the div it self. This is from the template I guess. Can I do something to change that?

Link to page: https://dev.brewmee.ch/shop/

The Button is only on mobile or tablet view visible.

Secondly, we want to have the shortcode button on the right side instad of the right (atm). But all my tests was not sucessfull. How can I do this?

Cheers & Thanks.

[Author]

Posts