10 Replies Latest reply: Jul 19, 2014 6:58 AM by Helen Eichel RSS

    pushState() and Product Search

    jsbalmer Community Member
    jsbalmer May 4, 2014 1:44 PM

      Hi all,

       

      have been pondering ways of tweaking the browsepanel to do what I need it to, and it occurred to me that .pushState() might be the way to go.

       

      The idea is that users use browsepanel to navigate catalogues, I basically strip some buttons from Product Search, and then use {module_url} and .pushState() to simply tweak the url to my needs - mostly for on the fly sorts, including sort by price and the usual Product Search sortTypes.

       

      I had previously considered including product_results module with different sortType defaults, but then I'd need to get the catalogue ID from the URL anyways (correct?), so might as well try pushState()?

       

      I was hoping that others may have experimented with this and be able to tell me if this is workable within BC. Alternatively, any insight in to other successful approaches would be good.

       

      Thoughts, suggestions, and experiences relating to the above, all very strongly appreciated (this is the last big problem to solve before launch).

       

      I will let you know that while I'm pretty comfortable with html and css, my js is pretty basic, but I'm happy doing the legwork to learn it. I'm not after a tutorial here, just hoping to find out if the approach is workable before committing too much time to it. Oh, and I do already have a menu set up for catalogue navigation, and product and quick searches in the appropriate places, just fyi.

       

      Cheers,

       

      Jason

        • 1. Re: pushState() and Product Search
          Liam Dilley CommunityMVP
          Liam Dilley May 4, 2014 3:23 PM (in response to jsbalmer)

          You would loose browser compatibility on your site using that for one and the page refreshing would be a bit of a pain for the users.

           

          The key thing you have missed is what your actually wanting that for, what are you trying to achieve?

          • 2. Re: pushState() and Product Search
            jsbalmer Community Member
            jsbalmer May 4, 2014 6:07 PM (in response to Liam Dilley)

            Liam,

             

            appreciate the quick response. I am well aware of your significantly greater expertise with BC than mine, but I've written the below to show my thought process first and foremost.

             

            So, page_content.html currently has both tag_browsepanel and tag_productlist. Browsepanel (as you may well know) is a bit buggy and not very flexible, while tag_productlist is a bit more useful to me. The Product Search form is better yet but is stuck in form mode and requires the user to select the catalogue.

             

            I would like to take the flexibility of Product Search and apply it to the catalogue the user selects through navigating through the browsepanel. Drawbacks with tag_productlist are that it defines just one sort order,and I would like that sort order to be user-selected (eg Sort by Price, Weighting, Alphabetical etc) without navigating away from the current page.

             

            I have considered just adding a cat_dropdown to the tag_productlist, but I would need to set the catalogue to the current catalogue, which I think I would need to use module_url to do anyways, so on that basis, if I'm reading the url, it occured to me to wonder why I couldn't just change the query string in the url to accomplish the job. Which brings us here. Without having ever played around with it, pushState () sounds like it may be able to do that, in conjunction with some buttons or text fields inserted in the page html.

             

            The other option is removing tag_browsepanel completely and using tag_catalogue list with the tag_productlist, provided I can still find some way of doing custom price sorts, as well as changing the tag_productlist set sort type. Bear in mind I currently have over 3000 products, and that will climb significantly over time, so any and all tools for my customers to quickly narrow their searches is vital.

             

            If this is still unclear, please accept my apologies (and don't give up!). Think of it as a contribution to posterity.

             

            Jason

             

            Oh, btw, I do know how to set price ranges within catalogues using tag_browsepanel, but my product range is weighted very heavily toward the bottom 50% of my overall price ranges, and I need much more precision than browsepanel is able to provide. Plus, it's buggy. Have already submitted the bug btw, if you're wondering.

            • 3. Re: pushState() and Product Search
              Liam Dilley CommunityMVP
              Liam Dilley May 4, 2014 7:15 PM (in response to jsbalmer)

              Pushstate will trigger new pages and not what your after.

              You need to be using the data from this sort of stuff with Ajax so your updating but keeping on the same page.

              Not finished site but we did this for someone:

              http://lemonzebrakids.businesscatalyst.com/products/girls/accessories

               

              And done several variations of this, some more complicated then others.

              • 4. Re: pushState() and Product Search
                jsbalmer Community Member
                jsbalmer May 4, 2014 11:25 PM (in response to Liam Dilley)

                Appreciate the response, Liam. That is pretty much exactly what I'm trying to accomplish.

                 

                Alas, the learning curve is a bit too steep given time available, so kinda stuck with what I don't have, from the looks of it. Unless you have an App store version ready to go?That might be a hint of sorts...

                • 5. Re: pushState() and Product Search
                  Liam Dilley CommunityMVP
                  Liam Dilley May 4, 2014 11:54 PM (in response to jsbalmer)

                  Apps are not really for this sort of thing.

                  This is front end development work, Apps are for backend features BC is missing or any custom elements using API etc people need out of their sites.

                   

                  This is ajax work where your using a combination of the product search and other elements to create a dynamic filtering system.

                  • 6. Re: pushState() and Product Search
                    jsbalmer Community Member
                    jsbalmer May 5, 2014 12:30 AM (in response to Liam Dilley)

                    Cheers. Found your JQuery guide at http://forums.adobe.com/docs/DOC-1721 btw, linking here seems appropriate. The Jquery.com site in particular looks pretty useful, so... nose to the grindstone I guess. Thanks for the hints btw

                    • 7. Re: pushState() and Product Search
                      Helen Eichel Community Member
                      Helen Eichel Jul 8, 2014 2:15 PM (in response to jsbalmer)

                      Very nice implementation Liam! (on lemonzebrakids site)

                      • 8. Re: pushState() and Product Search
                        Helen Eichel Community Member
                        Helen Eichel Jul 11, 2014 11:17 AM (in response to jsbalmer)

                        Hi Liam - Would really like to have that filtered search functionality on a BC site - but am not fluent in Ajax.

                         

                        I would like to be able to emulate what is on this site www[.]yakima[.]com[/]bike[/]hitch within BC, or using filtered pulldowns. I know that Pretty Pollution offers training, is this something they  would offer training in, or even implement as a service? Thanks Liam!

                        • 9. Re: pushState() and Product Search
                          Liam Dilley CommunityMVP
                          Liam Dilley Jul 11, 2014 4:46 PM (in response to Helen Eichel)

                          We offer training on BC but we do not offer training as such on programming. I believe Brett has already emailed on that.

                          • 10. Re: pushState() and Product Search
                            Helen Eichel Community Member
                            Helen Eichel Jul 19, 2014 6:58 AM (in response to Liam Dilley)

                            Thanks very much for getting back Liam. And for all your helpful direction within the forum.