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

Home Forums Support Custom “Add to Cart” banner for Shop archive

  • This topic has 19 replies, 3 voices, and was last updated 1 week ago by Tom.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1413185
    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

    #1413994
    Tom
    Lead Developer
    Lead Developer

    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

    #1424844
    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

    #1425457
    Tom
    Lead Developer
    Lead Developer

    In your javascript, try replacing $ characters with jQuery.

    Let me know 🙂

    #1426067
    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..

    #1426702
    Tom
    Lead Developer
    Lead Developer

    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.

    #1429625
    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.

    #1429890
    Elvin
    Customer Support

    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.

    #1433893
    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/

    #1434462
    Tom
    Lead Developer
    Lead Developer

    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.

    #1443620
    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

    #1444551
    Tom
    Lead Developer
    Lead Developer

    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?

    #1444758
    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?

    #1446040
    Tom
    Lead Developer
    Lead Developer

    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/

    #1447755
    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.

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.