Announcement

Collapse
No announcement yet.

Tutorial: making fragments, products and sections go where you want them.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Tutorial: making fragments, products and sections go where you want them.

    AFTER I FOUND A BETTER WAY OF DOING THIS I CHANGED THIS FIRST POST

    This basically means that some things in relies sometimes refer to items that ahve since been corrected. There are some people who replied to this thread that worked their way through the various stages of this code and finally got it working.

    thanks peeps.

    #####################################

    Problem:
    Fragments, products and sections dont want to go where you put them. There is a distinct lack of control over the positioning of certain elements in Actinic.

    Setting it up:
    First, add this to your actinic extras js file at the bottom
    HTML Code:
    function makeitso() {
     //make an array of all the divs on this page.
     MoveUs = document.getElementsByTagName("div"); 
     
     //loop all the divs.
     for( var i = 0; i < MoveUs.length; i++ ) 
     { 
     
     //only if it has the class 'movethis'
     if (MoveUs[i].className=="movethis") {
     ThisItem = MoveUs[i]
     
    	//get the html from inside this div
    	temp = ThisItem.innerHTML;
    	
    	//where is it going?
    	document.write (ThisItem.title);
    	
    	//empty the old div
    	ThisItem.innerHTML = "";
    
    	//append it to the end of the target div, found in the rel attribute
    	document.getElementById(ThisItem.title).innerHTML = document.getElementById(ThisItem.title).innerHTML+temp;
    	}
     } 
    
    }
    and at the footer of your main template, just before the ans /body tag:
    HTML Code:
    <script>makeitso();</script>
    now, create a fragment template, and put this minimal example in it:
    HTML Code:
    <div id="<actinic:variable name="FragmentAnchor" />" class="movethis" title="topbits">
    		<h1 class="subheading"><actinic:variable Name="FragmentTitle"/></h1>
    		<p><actinic:variable Name="FragmentText"/></p>
    </div>
    Now, somewhere in your design, either in a primary template, or anywhere where this code will appear ONLY ONCE, paste this container div:

    HTML Code:
    <div id="topbits"></div>
    how does this work?
    The container elements can be anywhere, and their ID gives them something unique to latch onto. They need to be empty, so that later on, we can fill them up, by moving content into them. In this example, I have used a single div, with the id of 'topbits'. Yours can be called anything, and can be anywhere, so long as it appears in your page only once.

    The block you want to shift needs to have a wrapper around it, with some attributes to tell it where to shift to.

    in this case mine looks like this:

    HTML Code:
    <div id="<actinic:variable name="FragmentAnchor" />" class="movethis" title="topbits">
    		<h1 class="subheading"><actinic:variable Name="FragmentTitle"/></h1>
    		<p><actinic:variable Name="FragmentText"/></p>
    </div>
    look closely at the class of this div. It's called 'movethis'. This tells the script earlier, to take the contents of this wrapper div and move it somewhere else.

    but where? to the location in the title attibute. and in this case, its going to append the contents of itself to a div called 'topbits'. The div then empties itself.

    Move complete!

    Now whats good about this, is that you can have any number of target containers. They can be in your footer, header, sidebars, above your innercontent, or below it.

    And this isnt limited to fragments either. You can move sections too. just enclose anything you want to move with the wrapper div and set its title tag to your target.


    A warning:
    This is a javascript technique and as such cannot help you with your SEO. A search engine cannot see the locations you choose, it only sees the original order that actinic puts the items in the page. too see what I mean, turn off javascript in your browser and reload the page.

    #2
    fragments not quite there

    working well until near the end: i put your code at the top of the new fragment layout code - (image on right of text and title - bottom)

    and nothing happened except a duplicate fragment title.

    <div id="<actinic:variable name="FragmentAnchor" />"> <actinic:variable name="FragmentTitle" /><br /> </div> <script>MoveBlock('<actinic:variable name="FragmentAnchor" />','bottombits');</script>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentAnchor%22%20%2f%3e%20!=%20%22%22" >
    <a name="<actinic:variable name="FragmentAnchor" />"></a>
    </actinic:block>
    <table width="100%" cellspacing="0" cellpadding="10" border="0">
    <tr>
    <td align="left" width="75%" valign="top">
    <b><actinic:variable formatting="font(Name|Verdana|Size|14)" name="FragmentTitle" /></b></br></br>

    <actinic:variable formatting="font(Name|Verdana|Size|12)" name="FragmentText" />
    </td>
    <td width="25%" valign="top" align="center">
    <actinic:variable name="FragmentImage" />
    </td>
    </tr>
    </table>

    then i deleted everything except your code and it all disappeared!
    somewhere it's not picking up the right information or i am putting it in the wrong "fragment template" - which i presumed to be the fragment layout choice?
    Sam
    http://www.originaltouch.co.uk
    http://www.spcb.co.uk

    If you spend your whole life waiting for the storm, you’ll never enjoy the sunshine.

    Failure is the tuition you pay for success.

    Comment


      #3
      ###Please note that this reply is an older one and you shouldnt carry out this step ###

      ultimately, you're going to require a few fragment templates. at least 3.

      all three will have the same content, except the script part that moves the block, will say diffferent thigns. one layout will move it to the top, one to the bottom, and one will be untouched.

      I suggest you duplicate the one you are using and mod that one.

      you'll require the div part, wrapping around your ENTIRE fragment code. and the script part immidiately after it.

      most basic fragment template:
      HTML Code:
      <div id="<actinic:variable name="FragmentAnchor" />">
      [your frag code goes here]
      </div>
      <script>MoveBlock('<actinic:variable name="FragmentAnchor" />','bottombits');</script>

      Comment


        #4
        Now you are making me feel very silly indeed.

        There does not seem to be any 'fragment template' or 'template tab'. (Using Actinic v8)

        Here are screen shots before and after to show you:

        I have made a new fragment layout called "Image on Right of Text and Title Bottom"
        Here you can see the fragment displayed:
        Click image for larger version

Name:	screen1.jpg
Views:	1
Size:	90.5 KB
ID:	542239

        When I put your div tags and script around this code, the fragment disappears:
        Click image for larger version

Name:	screen2.jpg
Views:	1
Size:	88.8 KB
ID:	542240

        I am used to coding html but not Actinic so laymans terms based on this screen shot of where exactly the template tab is would be appreciated without making me feel even sillier than I do already!

        Here is a shot of layouts to the right of the screen:
        Click image for larger version

Name:	screen3.jpg
Views:	1
Size:	89.4 KB
ID:	542241

        It is probably hidden in a very conspicuous place - derr!!


        By the way, it seems that we are conversing on 2 threads - maybe we should concentrate on this one?
        Sam
        http://www.originaltouch.co.uk
        http://www.spcb.co.uk

        If you spend your whole life waiting for the storm, you’ll never enjoy the sunshine.

        Failure is the tuition you pay for success.

        Comment


          #5
          just a single thread would do it.

          here is a pic.

          it dissapeares, becasue its supposed to!

          the code then puts the contents of the fragment into the divs you placed before and after your sections and products.
          Attached Files

          Comment


            #6
            I don't have those tabs for fragment actifeed beneath the layout code if you look at the screenshots.

            I have put the divs and script around the layout code and uploaded them put that fragment has still disappeared?

            http://trials.actinic.com/trials/tri...Treatment.html
            Sam
            http://www.originaltouch.co.uk
            http://www.spcb.co.uk

            If you spend your whole life waiting for the storm, you’ll never enjoy the sunshine.

            Failure is the tuition you pay for success.

            Comment


              #7
              dude.... you cant possibly have a fragment called that.

              thats in my catalog.

              Comment


                #8
                okay - I do see now where your fragment template is - just a little different position to mine - this confirms in fact that I have done exactly that - changed a new layout called 'Image on Right of Text and Title' and put in your div tags and script.

                <div id="<actinic:variable name="FragmentAnchor" />">
                <actinic:block if="%3cactinic%3avariable%20name%3d%22FragmentAnchor%22%20%2f%3e%20!=%20%22%22" >
                <a name="<actinic:variable name="FragmentAnchor" />"></a>
                </actinic:block>
                <table width="100%" cellspacing="0" cellpadding="10" border="0">
                <tr>
                <td align="left" width="75%" valign="top">
                <b><actinic:variable formatting="font(Name|Verdana|Size|14)" name="FragmentTitle" /></b></br></br>

                <actinic:variable formatting="font(Name|Verdana|Size|12)" name="FragmentText" />
                </td>
                <td width="25%" valign="top" align="center">
                <actinic:variable name="FragmentImage" />
                </td>
                </tr>
                </table>
                </div>
                <script>MoveBlock('<actinic:variable name="FragmentAnchor" />','bottombits');</script>


                [COLOR]
                but this fragment is not showing.

                maybe it is where i have put the div position in the page layout?[/COLOR]

                <div align="center">
                <div id="topbits"></div>
                <actinic:variable name="SubSectionListTop" if="%3cactinic%3avariable%20name%3d%22IsSearchInterfaceUsed%22%20%2f%3e%20%3d%3d%20False" />
                </div>

                <actinic:variable name="CartErrorListXML" />

                <actinic:block if="%3cactinic%3avariable%20name%3d%22DiscountDescriptionIsShownForSection%22%20%2f%3e">
                <actinic:variable name="SectionDiscountList" />
                </actinic:block>

                <div align="center">
                <actinic:variable name="ProductList" />

                </div>

                <actinic:block if="%3cactinic%3avariable%20name%3d%22SingleAddToCartButtonIsUsed%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22SectionHasVisibleProduct%22%20%2f%3e" >
                <div align="right">
                <actinic:variable name="SingleAddToCartButton" />
                </div>
                </actinic:block>

                <div align="center">
                <actinic:variable name="SubSectionListBottom" if="%3cactinic%3avariable%20name%3d%22IsSearchInterfaceUsed%22%20%2f%3e%20%3d%3d%20False" />
                </div>

                <div id="bottombits"></div>
                Sam
                http://www.originaltouch.co.uk
                http://www.spcb.co.uk

                If you spend your whole life waiting for the storm, you’ll never enjoy the sunshine.

                Failure is the tuition you pay for success.

                Comment


                  #9
                  reason: the div 'bottombits' is defined AFTER the fragment. try setting it to go to the topbits to see if that works.

                  i'll have to have a think about this. the script cant move the block to a place it has not seen yet.

                  Comment


                    #10
                    For your info:

                    topbits seems to work and puts the fragment at the top of the page.

                    I changed bottombits to the same location and that worked putting it there too.

                    it only doesn't work when i move the div id bottombits to the bottom of the page!
                    Sam
                    http://www.originaltouch.co.uk
                    http://www.spcb.co.uk

                    If you spend your whole life waiting for the storm, you’ll never enjoy the sunshine.

                    Failure is the tuition you pay for success.

                    Comment


                      #11
                      found a new and smarter way of doing this, and i'v changed the first post to reflect it.

                      try that one instead, its simpler and works in more browsers too.

                      Comment


                        #12
                        I really do understand the concept of this but it just aint working.
                        The div aint moving - can you just check the script for me?
                        Sam
                        http://www.originaltouch.co.uk
                        http://www.spcb.co.uk

                        If you spend your whole life waiting for the storm, you’ll never enjoy the sunshine.

                        Failure is the tuition you pay for success.

                        Comment


                          #13
                          ok, firstly, the changes I made are a radical departure from the one i showed earlier, you'll need to remove the offending code, sorry about that.

                          you got the script in place and its good, well done.

                          the ONLY thing you need to do afterwards, is create a couple of divs with some special attributes to get this to work.

                          for an experiment, (after you have removed all the old code) put this immidiately after the <body> tag.
                          HTML Code:
                          <div id="atthetop"></div>
                          then, make a new fragment, with the template 'text only' its in your list. No extra templates. no mucking about.

                          in its description do this:
                          HTML Code:
                          !!<<div id="<actinic:variable name="FragmentAnchor" />" class="movethis" title="atthetop">TEST!!!</div>>!!
                          now, this should take the rather excitable word 'test' and move it to the top of your page, before everything.

                          now, take this example and move the target div to where in your design you want the data to arrive at.

                          Comment


                            #14
                            Good morning!

                            Right - I think I have removed any old code.
                            Definitely did from the actinicextras.js
                            Maybe you could check that all is removed from the templates.

                            Left new script before /body tag where it was
                            Made a new fragment and put your div code in the description.
                            made a div id and put it after the body tag
                            In fact everything you said and in theory it should work

                            You will see that the excitable TEST still prefers its own location at the bottom!
                            http://trials.actinic.com/trials/tri...Treatment.html

                            There must be something somewhere stopping it working?
                            Sam
                            http://www.originaltouch.co.uk
                            http://www.spcb.co.uk

                            If you spend your whole life waiting for the storm, you’ll never enjoy the sunshine.

                            Failure is the tuition you pay for success.

                            Comment


                              #15
                              I'm following this because I have to admit that, in my quick test, it didn't work for me either...but apparently I'm being thick this morning ( Gabe) so it might just be me
                              Tracey

                              Comment

                              Working...
                              X