• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

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

Community Beginner ,
Jun 30, 2013 Jun 30, 2013

Copy link to clipboard

Copied

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

TOPICS
Web apps

Views

5.5K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Advocate , Jul 04, 2013 Jul 04, 2013

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:

{t

...

Votes

Translate

Translate
Advocate ,
Jul 02, 2013 Jul 02, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 02, 2013 Jul 02, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 02, 2013 Jul 02, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 03, 2013 Jul 03, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 04, 2013 Jul 04, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 07, 2013 Jul 07, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 07, 2013 Jul 07, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 07, 2013 Jul 07, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 08, 2013 Jul 08, 2013

Copy link to clipboard

Copied

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"}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 08, 2013 Jul 08, 2013

Copy link to clipboard

Copied

{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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 11, 2013 Jul 11, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 11, 2013 Jul 11, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 11, 2013 Jul 11, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 11, 2013 Jul 11, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 25, 2013 Jul 25, 2013

Copy link to clipboard

Copied

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... 😃

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 25, 2013 Jul 25, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 29, 2013 Jul 29, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Jul 30, 2013 Jul 30, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 30, 2013 Oct 30, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 30, 2013 Oct 30, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 31, 2013 Oct 31, 2013

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 31, 2013 Oct 31, 2013

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 06, 2013 Nov 06, 2013

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 06, 2013 Nov 06, 2013

Copy link to clipboard

Copied

Do you mean web apps?

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines