26 Replies Latest reply on Nov 24, 2013 9:09 PM by madmudskipper959

    How to triger "buynow" or "add to cart" tag from a web apps?

    madmudskipper959 Level 1

      i'm trying to add the buy now or add to cart tag to a app, but can't get it to work for me. Have been reading the other disucussions but can't make any sense from them. I'm only new to bc and would really appreciate some step by step screenshots of how to achieve this. Thanks in advance

        • 1. Re: How to triger "buynow" or "add to cart" tag from a web apps?
          thetrickster888 Level 4

          The add to cart button is tied to a product in BC. You can only use the add to cart tag in a product layout, I believe.  When someone clicks "add to cart" on a product, that product's information is sent to the Checkout form.  I think it's impossible to add an add to cart button to a web app unless you use insert a product into your web app detail or list layout.

           

          Make sure you create a product in BC first, then try going to your Web App > Settings > Layouts and editing the layout you want your add to cart button to appear and inserting the product module into your web app layout. This will insert your product along with the add to cart button into your web app view.

           

          You can then use some CSS to hide the rest of the product information if you want and let the CSS keep showing the add to cart button associated with your web app item.

           

          I'm not sure what your goal is, ultimately.  Are you going to have many web app items and each will be associated with a different product? Are you trying to sell web app items? Why not use the standard eCommerce feature to sell a product if that's what you want? Why are you using web apps for this?

           

          Also, if you have an add to cart button successfully added to your web app items, make sure that you use the Cart Summary module somewhere on your page or page template because when they click the add to cart button that module will update with the number of items in the cart.  I'm pretty sure the add to cart button won't function unless the Cart Summary module is somewhere on your page or template, but I could be wrong.

          1 person found this helpful
          • 2. Re: How to triger "buynow" or "add to cart" tag from a web apps?
            madmudskipper959 Level 1

            Hi trickster, and thanks for replying to me. I'm building a website for a client who is in the cattle industry and she requires many custom fields to be displayed on the product item a bit like the image below but with the eCommerce components, that's why the web app items looked like a good idea at the time it gave me the option of adding as many custom fields as i liked. I did try the eCommerce feature but could not find how to add my own custom fields, don't really know if bc has an limits in this area? I guess what i'm trying to achieve is one place for my client to go fill in the desired fields and hit save, keeping it simple. Anyway if i have gone out on some weird tangent i would really appreciate the guidance.

             

            Screen Shot 2013-07-03 at 2.35.14 PM.png

            • 3. Re: How to triger "buynow" or "add to cart" tag from a web apps?
              thetrickster888 Level 4

              Thanks for the reply.  I think I know what you are trying to achieve now.  I think you should put your basic product information for the cattle as a product.  Add the price and all that you need to be able to sell the cattle as a product.  Then, as your client or you are creating the cattle product, look up at the browser's addressbar-- if you are editing/creating a product in the BC Admin you should see a ProductID -- copy or make note of the ProductID number. Also, you can find the Catalog ID by drilling down to the store catalog in BC and it will be in the address bar too.

               

              My suggestion is to create two custom fields in your web app: Product ID & Catalog ID

               

              Then, in your web app item layout you can insert the product module using your custom fields.

               

              {module_product,{tag_Product ID},{tag_Catalog ID}}

               

              You can use a custom layout ".tpl" file for this product module in your web app view too by passing in the template file's location to the module:

               

              {module_product,{tag_Product ID},{tag_Catalog ID} template="/path/to/your/custom/product/module.tpl"}

               

              In your custom product template you need not include anything but the {tag_addtocart} or {tag_buynow} if you don't want and those buttons will now be in your web app item view.

               

              Its a bit of a workaround for adding new cattle... you have to add the product and take note of the product id and catalog id and then create the web app item and insert those ids into your new custom fields but it should work.

              1 person found this helpful
              • 4. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                madmudskipper959 Level 1

                Hey trickster, spent yesterday afternoon putting a test file together with your suggestions and it worked, i added the Product ID & Catalog ID to the app as custome fields and created a test product. The only thing i found was i need the switch the two Product ID & Catalog ID around in the module ( eg for all the kids playing along at home: {module_product,{tag_catalog id},{tag_product id}} ) and then i had the two "buy now" and "add to cart" buttons in the layout, but they dont do anything when you click on them =(  any suggestions!

                 

                PS. you totally lost me with this bit

                 

                You can use a custom layout ".tpl" file for this product module in your web app view too by passing in the template file's location to the module:

                {module_product,{tag_Product ID},{tag_Catalog ID} template="/path/to/your/custom/product/module.tpl"}

                 

                dose it go into the app layout and i have never seen a .tpl file where are they found?

                 

                Thanks for the reply

                1 person found this helpful
                • 5. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                  thetrickster888 Level 4

                  Your buy now buttons might work if you use the shopping cart summary module

                  which will update and reflect the number of items in your cart. Make sure

                  that module is in your page template or page.

                   

                  BC recently added the ability to have custom templates for some module

                  layouts... like the product module.  The custom templates use ".tpl" file

                  extensions.

                   

                  The ".tpl" file can't be found on the site... you create it yourself.

                  Create a file named "cart-buttons.tpl" and have it contain ONLY the

                  following code:

                   

                  {tag_addtocart} {tag_buynow}

                   

                   

                  Then upload it to the root of your site. Once you've got your .tpl file in

                  place, let's tell your product module to use that template file: (and sorry

                  about the order of product and category id.. you're right. Good lookin'

                  out!)

                   

                  {module_product,{tag_Category ID},{tag_Product ID} template="/cart-buttons.tpl"}

                   

                  Now you can use just that custom layout for your product module without

                  having to change or mess with the default small product layout if you want

                  to use the small product layout elsewhere.

                  • 6. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                    madmudskipper959 Level 1

                    Hi Trickster, made a whole new bc site and remade the app following your steps but still having troubles getting the add to cart and buy now buttons to work. Made a video of the steps, you maybe able to spot where i went wrong.... thanks

                     

                    • 7. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                      thetrickster888 Level 4

                      Yea -- there's a javascript error on your site-- for some reason in your template there's a space in the URL where it calls the main javascript for the BC online shopping functions and then add to cart doesn't work.  I've created a screencast for you to check out the issue:

                       

                      http://screencast.com/t/z37a3rktzD9

                      1 person found this helpful
                      • 8. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                        madmudskipper959 Level 1

                        you sir are a god among all men!.... it works!  thank you so much for all your help i really appreciate it.. and now i can start to build the actual site it's all very exciting, it will be my first bc site and my first e-commerce site.

                        • 9. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                          madmudskipper959 Level 1

                          Hey Trickster, would it be possible to load the poplets from a product like you showed me with the add to cart and buy now buttons?

                          Or do i need some js to make this work? Or does this only work once per web app?

                           

                          eg: {module_product,{tag_category_id},{tag_product_id} template="/poplets.tpl"}

                          • 10. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                            thetrickster888 Level 4

                            {tag_poplets} can only be used in the large product view-- you can try adding {tag_poplets} to your /cart-buttons.tpl file but I don't think it will work since {module_product} can only use tags used in the small product layout.

                             

                            Since you've gone down the path of webapps to show your products you might as well use web apps to create custom poplets yourself.

                             

                            Create a few fields in your web app... poplet_1, poplet_2, poplet_3, etc. and make them image fields and then in your web app detail view you can build your own poplets with some javascript.  You could even do the javascript inline because it's so basic.

                             

                            <div class="poplet-large">

                              <img id="poplet-image" src="{tag_poplet_1_value}" />

                            </div>

                            <div class="poplets">

                                  <div class="item">

                                      <a href="javascript:;" onclick="document.getElementById('poplet-image').src = '{tag_poplet_1_value}';">{tag_poplet_1}</a></div>

                                 </div>

                                 <div class="item">

                                      <a href="javascript:;" onclick="document.getElementById('poplet-image').src = '{tag_poplet_2_value}';">{tag_poplet_2}</a></div>

                                 </div>

                                 <div class="item">

                                      <a href="javascript:;" onclick="document.getElementById('poplet-image').src = '{tag_poplet_3_value}';">{tag_poplet_3}</a></div>

                                 </div>

                            </div>

                             

                            Then, just use some CSS to set the style on your .poplet-large container and the image inside it and style your .poplets container to float left and the images inside them.

                             

                            I made a mistake in the markup-- make sure you grab it again if you started working on it.

                            • 11. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                              madmudskipper959 Level 1

                              Hello Trickster, as always really appreciate you answering me and i thank you for the above answer. Will be giving it a go. Have another question to ask (surprise, surprise) under "media downloads" how can you customize the icon and where is it located as a .png file with in the file structure?  Been looking everywhere but no luck...

                              Screen Shot 2013-07-12 at 10.53.24 AM.png

                              • 12. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                thetrickster888 Level 4

                                I don't think you can.. those images are in the /CatalystImages/ folder which is a system folder you don't have access to.  Normally, you'd do it via CSS but there's no hooks on those icons to tell you what type of icon it is so you'll need some jQuery.  First off, you should probably duplicate the filename of the current icon being used.. so the icon for PDFs is: "/CatalystImages/Literature/pdf.png" then you should upload your own "pdf.png" to another place like "/images/Literature/" so that your new images have the same name and are in a similar subfolder.  Then, with jQuery, go and change the URLs to all the images from their /CatalystImages/ folder to your /images/ folder. 

                                 

                                Now, before we do the jQuery we don't want a flash of the old images to come up before our jQuery gets to working so add this CSS to your site css file:

                                 

                                /* Hide the original icons */

                                .literature-container .icon img {

                                     display: none;

                                }

                                 

                                /* Show the new icons when our jQuery is done */

                                 

                                .literature-container.loaded .icon img {

                                     display: block;

                                }

                                 

                                Now, add this jQuery to your site's js file or at the bottom of your page that uses the literature module:

                                 

                                (function($){

                                    $(document).ready(function() {

                                       var LitContainer = $(".literature-container");

                                       var CatalystDir = "/CatalystImages/";

                                       var CustomDir = "/images/";

                                       var iconWidth = "";

                                       var iconHeight = "";

                                 

                                        $.each(LitContainer, function(i,val) {

                                            var icon = $(this).find("img");

                                            var imageURL = icon.attr("src");

                                            imageURL = imageURL.replace(CatalystDir, CustomDir);

                                            console.log(imageURL);

                                            icon.attr("src", imageURL);

                                            if (iconWidth && iconWidth != "" ) {

                                                icon.css("width", iconWidth);  

                                            }

                                            if (iconHeight && iconHeight != "") {

                                                icon.css("height", iconHeight);               

                                            }

                                            $(this).addClass("loaded");

                                        });

                                    });

                                })(jQuery);

                                 

                                 

                                You can see my fiddle of it in action (the images aren't working because we are using relative image urls and they won't work on jsfiddle but you'll see the images are updated to your new path.

                                 

                                http://jsfiddle.net/thetrickster/Hsue6/

                                 

                                If you need to change the image size to anything other than 16x16 like the stock icons are, just update the variables "iconWidth" and "iconHeight" accordingly.  For instance, if you loaded new icon images like pdf.png and they are 24px by 24px then your variable should be:

                                 

                                var iconWidth = "24px";

                                var iconHeight = "24px";

                                 

                                Good luck.

                                • 13. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                  thetrickster888 Level 4

                                  Actually, I just realized that you can customize the media downloads list template... but you still cannot change the icon that they use nor is there a tag like {tag_filetype} or something similar so we can add that to our <span class="icon {tag_filetype}"> so we can target the icon via CSS to replace it depending on the filetype so I think my solution is still the best that you can do with BC's limitations.

                                  • 14. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                    thetrickster888 Level 4

                                    I decided to add this to my collection of BC workarounds.. i made a Gist that you can checkout where the solution is more fleshed out including a list of the filenames BC uses and a few options to create your own custom icons as well.

                                     

                                    Peep it: https://gist.github.com/thetrickster/1dd069beb6becf56e891

                                    • 15. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                      madmudskipper959 Level 1

                                      Hey Guys, me again! built an app for the services section on the website and have included some custom css styles for the client to be able to style the text and it works, but when i save and close the app and then go back it to it the highlighted text is just plain black and the css classes are not in the dropdown menu anymore however the <span class="bold300"></span> class in still around the text but just not showing up. Any ideas why? Is this a glitch with in bc? I also tried logging in as a user but the same thing happend. Ps your workaround solution for the custom icons was fantastic tickster... =)

                                       

                                      • 16. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                        madmudskipper959 Level 1

                                        ok it turns out it a bit of a bug you have to apply the template to the app that has the css classes...

                                        • 17. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                          madmudskipper959 Level 1

                                          Hey, does anyone have idea where the <table class="productTable productSmall" cellspacing="0"> come from that's around the module_product used for the price?

                                           

                                           

                                          http://ecommerceinsidewebappexample.businesscatalyst.com/animal-1

                                           

                                          Screen Shot 2013-07-30 at 9.35.03 AM.png

                                          • 18. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                            thetrickster888 Level 4

                                            That should be in the markup for your small product layout.  Goto BC Admin > Site Manager > Module Templates > Online Shop > Product Small and see what the markup is there.

                                            • 19. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                              madmudskipper959 Level 1

                                              Hey guys, had a bit of a brake from building the bc site but back on it and hoping to get it all finished before xmas. Anyway have built the apps, menu and templates now on to putting the pages together but id notice that bc is rewriting/restyling my code. it's adding an extra stylesheet and making the page XHTML 1.0 Transitional when i have marked it as html5. Any idea or solutions are welcome, or is this something that cannot be changed.

                                               

                                              http://rockyrepro.businesscatalyst.com/index?Preview=True

                                               

                                              Screen Shot 2013-10-31 at 9.42.23 am.pngScreen Shot 2013-10-31 at 9.43.14 am.png

                                              • 20. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                                Liam Dilley Adobe Community Professional & MVP

                                                BC will always add in that Modulestylesheet and other elements, you can not control this.

                                                • 21. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                                  madmudskipper959 Level 1

                                                  Cool thanks for the feed back, i can live with the Modulestylesheet elements but is there no way of stopping the change from html5 to XHTML 1.0 Transitional?

                                                  • 22. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                                    Liam Dilley Adobe Community Professional & MVP

                                                    I have never had that

                                                    IF your editing templates in the editor I think this might happen - but you should not be coding in the editor in the admin.

                                                    Others like myself do not have issues on this. BC does not just change the doctype of the template.

                                                    • 23. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                                      madmudskipper959 Level 1

                                                      Hi Liam, thanks for for the heads up on the template issues. I did build the templates in DW but i did edit them in the BC admin, so went back and remade them and not is all working really well.

                                                      I'm also making a few custom Apps and have two that are quite similar and i would like to use the fields from one App in another, would you know where BC keeps the fields in the file structure so i can copy them to another App?

                                                      • 24. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                                        Liam Dilley Adobe Community Professional & MVP

                                                        Do you mean web apps?

                                                        You can not use fields from one in another, you will need to replicate them.

                                                        • 25. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                                          madmudskipper959 Level 1

                                                          Hey Guys thanks for all your help, have one last request from the client they would like to see a list of products on the page down the side.

                                                           

                                                          The products are all in a custom web app with custom fields all set up, the problem is i've already used the list template, alt template and the detail template in the layout. Is there any other way to get a list of web app onto a page?

                                                          • 26. Re: How to triger "buynow" or "add to cart" tag from a web apps?
                                                            madmudskipper959 Level 1

                                                            Just noticed another problem i'm having, under the pages i'm seeing four of the layout files from my Web Apps that were created. They weren't there the other day and can't workout how to make them go away again, don't really want the client to see the layout pages or to accidentally delete them.

                                                             

                                                            Screen Shot 2013-11-25 at 2.57.01 pm.jpg