-
1. Re: Individual Product - Small (Backup) template issues?
Liam Dilley Aug 28, 2012 1:27 AM (in response to ramophalatsi)Nope
You just need to target productfeaturelist instead.
-
2. Re: Individual Product - Small (Backup) template issues?
ramophalatsi Aug 28, 2012 1:51 AM (in response to Liam Dilley)Hi Liam,
Thanks for your response, I had that in my mind, but wanted to keep my slider classes seperate to BC's styles. But I suppose I would have to do this, as there is no other way.
I find this as a big limitation in Business catalyst but I guess thats life. Because I would now have to edit the jquery to suit BC, which is not ideal.
Thanks for your help.
-
3. Re: Individual Product - Small (Backup) template issues?
Liam Dilley Aug 28, 2012 2:50 AM (in response to ramophalatsi)I do not find it a real limitation at all. It has a class, it is very easy to update things, it also helps you learn what your doing implementing a plugin for example greatly.
It is CSS and HTML and some jQuery. In other systems you very well may need to go in and modify PHP for example, which with BC you do not need to do and if you did not understand PHP too well may not be able to anyway.
Your not really editing the jQuery at all.
The call for a plugin target is based on the element, so if you had slide plugin called easySlider for example then the call for it would be...
$('.targetElement').easySlider(); As the basic itteration of it, That is nothing
CSS is just as easy to modify. Takes a few minutes. -
4. Re: Individual Product - Small (Backup) template issues?
ramophalatsi Aug 28, 2012 3:24 AM (in response to Liam Dilley)Hi Liam,
Thanks for your feedback.
My default code that I would like to integrate, works statically is as follows:
<div id="myslider" class="touchcarousel three-d load">
<ul class="touchcarousel-container">
<li class="touchcarousel-item">
<a href="#"><img src="images/products/summer/scroll/model1.png"/></a>
<div class="itemContent"><a href="#">Smart Sohisticated</a></div>
</li>
<li class="touchcarousel-item">
<a href="#"><img src="images/products/summer/scroll/model1.png"/></a>
<div class="itemContent"><a href="#">Smart Sohisticated</a></div>
</li>
</ul>
</div>
Code in my javascript file to instantiate the slider:
//product carousel
var productsCarousel = $("#myslider").touchCarousel
({
/* options go here */
itemsPerMove: 1,
scrollbar: false,
scrollToLast: true,
loopItems: true,
DragUsingMouse:false
}).data("touchCarousel");
From the above, the way the slider works is that it seems to target a div id (in my case its called "myslider"), and not a Ul, and it would seem that the script that targets the UL class thats part of the targeted div id and in the default code the UL class is called "touchcarousel-container" and its li class is "touchcarousel-item"
Therefore to get this working in BC in my mind, i would have to modify my jquery slider code and find occurrances of "touchcarousel-container" and "touchcarousel-item" (this is contained in the jquery slider code: http://carvela.businesscatalyst.com/js/touchcarousel/jquery.touchcarousel-1.1.js ) and replace it with BC's "productfeaturelist" and "productItem".
To me this is a limitation because, if I have other slider instances I would be forced used the BC class names in my code.
Unless theres somthing i am not seeing?
Thanks
-
5. Re: Individual Product - Small (Backup) template issues?
Liam Dilley Aug 28, 2012 5:36 AM (in response to ramophalatsi)Wont be targeting those, no. .data elements is a value store.
Unless the plugin specifically references those classes which it does in only two places.
I do not see it as a limitation as in a number of CMS's you have to modify things to get things to work as you want them in the case and situation you want them. A plugin has cool things, be it a jQuery one or a wordpress one or something else. It is very likely it wont work as you want out the box and there is changes, adaptions and tweaks you do. This is web development .
Changing some class names and things to make something work is minor minor small, Take not even 1/4 of the time to have got this to work then this forum thread
There are a heap of more things BC needs to do, work on, get implemented and fixed
-
6. Re: Individual Product - Small (Backup) template issues?
webcr8ive Aug 15, 2014 8:55 AM (in response to ramophalatsi)I had the same issue that you are having, I wanted to customize my products so they could use my own divs and not the automated product feature list. Heres how I did it, To do this I took
Check out my JSFiddle at the bottom - if the results look like a list with bullets click run and that will run it with the script
Must have a link to Jquery <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1. I made a custom template, which is optional you can just use the small_product.html
Then I added:
2. In my shop HTML: I used a producfeatufelist module with a tag in my case "suits" module {module_productfeaturelist,suits,,,,true template="/layouts/onlineshop/product.tpl"}
3. In product.tpl, I layed out the product using my divs the way I wanted to use them, in my example I just made them generic so its easier to follow.
<div class="my_product_div">My product Name,{tag_name_nolink}, any other module tags
<div class="price">$100 - {tag_saleprice} </div>
<div class="description">My Product Description - {tag_description} </div>
</div>
4. Business Class renders it this way with the list around it:
<ul class="productfeaturelist">
<li id="catProdTd_9077052" class="productItem">
<div class="my_product_div">My product Name,{tag_name_nolink}, any other module tags
<div class="price">$100 - {tag_saleprice} </div>
<div class="description">My Product Description - {tag_description} </div>
</div>
</li>
<li id="catProdTd_9087469" class="productItem">
<div class="my_product_div">My product Name,{tag_name_nolink}
<div class="price">$100 - {tag_saleprice} </div>
<div class="description">My Product Description - {tag_description} </div>
</div>
</li>
</ul>
5. Now taking the class name of the list which is .productfeaturelist and my div class .my_product_div and the .replaceWith() | jQuery API Documentation which looks like this:
<script type="text/javascript">
$( "ul.productfeaturelist" ).replaceWith( $( "div.my_product_div" ) );
</script>
6. When you look at the results it will still render the html as the list but your result will look as it should with the use of the div. To test this I added a style tag which will show the Unordered list removed and draw green boxs around each product
.my_product_div{
display: block;
border: 1px solid green;
margin: 10px;
}
Here is my JSFiddle: http://jsfiddle.net/tvaddict/d77swo89/
-
7. Re: Individual Product - Small (Backup) template issues?
Liam Dilley Aug 15, 2014 4:53 PM (in response to webcr8ive)Can I ask you why you need to change that?
A div is by default a block level element.
If it was a UL then you can just to the exact same CSS to it and manipulate it how you want.
Would be interesting to know why you would do all that effort for what is really no gain, could you explain why?
-
8. Re: Individual Product - Small (Backup) template issues?
Canadian World Nov 2, 2014 7:19 AM (in response to webcr8ive)I like this solution from webcr8ive, as I am having the same issue to displaying a simple product without ul.
I think BC should consider to create model something like module_productfeatured without list as out of the box to make life more simple.
-
9. Re: Individual Product - Small (Backup) template issues?
Liam Dilley Nov 2, 2014 1:06 PM (in response to Canadian World)You need to look at the tag options and configure them. But anyway, with the new stuff coming out really soon you can just use Liquid Markup.


