9 Replies Latest reply: Nov 2, 2014 1:06 PM by Liam Dilley RSS

    Individual Product - Small (Backup) template issues?

    ramophalatsi Community Member

      Hi There,

       

      I'm using business catalyst and am trying to create a slider for my webpage that pulls in products by tag using {module_productfeaturelist} tag.

       

      This is the example of my code:

      <ul class="touchcarousel-container">

          {module_productfeaturelist,summer2012,,,,true}

      </ul>

       

      The problem that I am having is that Business catalyst outputs its own Ul  and Li list e.g the copy marked orange below is Business catalyst generated code from my above snippet

       

      <ul class="touchcarousel-container">

           <ul class="productfeaturelist">

                <li id="catProductTd_5166618">
                     <li>my item</li>

                </li>

           </ul>

      </ul>

       

      Is there a way for me to remove this auto generated Business catalyst code, as its is breaking my Slider script?

        • 1. Re: Individual Product - Small (Backup) template issues?
          Liam Dilley CommunityMVP

          Nope

          You just need to target productfeaturelist  instead.

          • 2. Re: Individual Product - Small (Backup) template issues?
            ramophalatsi Community Member

            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 CommunityMVP

              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 Community Member

                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 CommunityMVP

                  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 Community Member

                    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 CommunityMVP

                      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 Community Member

                        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 CommunityMVP

                          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.