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
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
...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.
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.
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.
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
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.
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
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:
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.
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"}
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.
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...
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.
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.
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
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... 😃
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...
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
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.
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.
Copy link to clipboard
Copied
BC will always add in that Modulestylesheet and other elements, you can not control this.
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?
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.
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?
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.