Announcement

Collapse
No announcement yet.

EmporiumPlus Toolkit Brief Description Display with Read More...

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

    EmporiumPlus Toolkit Brief Description Display with Read More...

    I'm wanting to use the EmporiumPlus Toolkit function that says it will display a "specified number if sentences" and include a Read More function.


    Brief description display. Display a specified number of sentences from the beginning of the description or header fields, e.g. product briefs on category pages or the category page meta description from its header.
    First, I seem to not be able to find the function that would limit the description to the first 3 sentences - what am I overlooking? Next, I want to be able to include the "Read More" that will display the rest of the description on the same page with a jquery Read More/Less function.

    Thanks,
    Leslie
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Re: EmporiumPlus Toolkit Brief Description Display with Read More...

    Not sure how one measures sentances, unless you are going on searching for periods...which may not work. (I.e, This 4.5 inch. 5.5 ft. pole...)

    We usually count raw characters, and then trim to last space. You can use this (converted from mivascript so, not tested, but should work)


    [code]
    <mvt:assign name="l.text" value="Here's a great big long sentance. great big long sentance. long sentance. sentance.">
    <mvt:assign name="l.trimText" value="substring(l.text, 1, 30)"> (Here's a great big long sentan)
    <mvt:assign name="l.findSpace" value="' ' EIN l.text"> (24)
    <mvt:assign name="l.theText" value="substring(l.text, 1, l.findSpace )"> (Here's a great big long)
    [\code]

    As for the rest of the display, you could just use a CSS Show/Hide feature which just exposes another div with the complete content, or search for jQuery methods that manipulate HTML content within a DIV (i.e, will read in the content from a hidden DIV, into the currently viable DIV>
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


      #3
      Re: EmporiumPlus Toolkit Brief Description Display with Read More...

      Leslie,

      I have been trying to wrap my brain around the new built-in functionality, as it has taken me forever and a day to wrap my non-coder brain around Toolkit all these years.

      Here is another thread that you should be able to adapt for the description if you still want to use the Toolkit (old habits die hard in my case):
      http://extranet.miva.com/forums/show...-the-number-40

      Thank you as always Bruce for your code snippets. Greatly appreciated.
      Last edited by eldon99; 04-14-15, 07:21 AM.

      Comment


        #4
        Re: EmporiumPlus Toolkit Brief Description Display with Read More...

        This functionality is for a CTGY page. There would be no way to "staple" a jQuery function to it since the idea of the built-in (Toolkit) "More Info" is to forward you to the actual PROD page.

        We use Readmore (http://jedfoster.com/Readmore.js/) to do what you're wanting to do.

        The example in the download is really helpful and this is a very easy bit of code to use. However, it won't parse anything since that defeats the purpose of a readmore-type function. You can control the height of the initial display very easily.

        Let me know if you need help.
        Last edited by nottheusual1; 04-14-15, 11:24 AM.

        Comment


          #5
          Re: EmporiumPlus Toolkit Brief Description Display with Read More...

          Originally posted by Bruce - PhosphorMedia View Post
          Not sure how one measures sentences, unless you are going on searching for periods...which may not work. (I.e, This 4.5 inch. 5.5 ft. pole...)
          You know, I was wonder that too. I guess Bill knows since it's part of the Toolkit description Store Morph Language Extensions > Brief description display.

          So I'm guess it's not going to work on the SFNT if it's a CTGY function

          Okay, so I'll play with it a bit more. I'm thinking the Read More show be linked to the full review (since this is for reviews that are being displayed on the home page).
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #6
            Re: EmporiumPlus Toolkit Brief Description Display with Read More...

            Interesting cause the snippet I provided is from code we've included on our Easy Review module "random" review function. Not sure what you mean by CTGY function unless you are referring to the review module in use or toolkit. The SMT code could be used anywhere. Also, as far as "length" of the displayed text, there are several approaches. The one I provided was just something that works 'well' overall.
            Bruce Golub
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment


              #7
              Re: EmporiumPlus Toolkit Brief Description Display with Read More...

              Originally posted by nottheusual1 View Post

              We use Readmore (http://jedfoster.com/Readmore.js/) to do what you're wanting to do.

              The example in the download is really helpful and this is a very easy bit of code to use. However, it won't parse anything since that defeats the purpose of a readmore-type function. You can control the height of the initial display very easily.

              Let me know if you need help.
              So I'm playing with this. I can't seem to get the javascript to fire even though it seems so very straight forward. I'm trying to keep it super simple to start with and am going with all the defaults

              Code:
              $('article').readmore();
              The script readmore.js is being found (and is placed just before the default script).

              Firebug seems to be reporting a problem with the readmore.js file itself (around line 194) "TypeError: $(...).on is not a function" which is
              Code:
              current.after($(useLink)
              My javascript foo is weak. Did you encounter this error? I'm going to see if I may have an older version of the file.
              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment


                #8
                Re: EmporiumPlus Toolkit Brief Description Display with Read More...

                Quick follow up on my attempts to use the Readmore (http://jedfoster.com/Readmore.js/) javascript. I had thought the script was not firing, but I discovered that it is, but only for the first <article>.

                Is there a way to get this to work with the mvt:foreach loop?

                Code:
                <div class="reviews">
                  <mvt:foreach iterator="reviews" array="topreviews">
                    <div class="review">
                      <div class="revimage">
                        <mvt:item name="toolkit" param="prodthumb|imgurl|l.all_settings:reviews:product_code" />
                        <mvt:if expr="g.imgurl"> <a href="http://&mvt:global:domain:name;/&mvt:reviews:product_code;.html"><img src="&mvte:global:imgurl;" border="0" width="110" height="110"></a>
                          <mvt:else>
                        </mvt:if>
                      </div>
                      <div class="revtext">
                        <h3><a href="http://&mvt:global:domain:name;/&mvt:reviews:product_code;.html">&mvt:reviews:title;</a></h3>
                        <article>
                          <p>&mvt:reviews:review; &mvt:reviews:month;.&mvt:reviews:day;.&mvt:reviews:year;</p>
                        </article>
                        <div class="revmeta">
                          <div class="revstars">&mvt:reviews:stars;</div>
                          <div class="revauth">- &mvt:reviews:name;</div>
                        </div>
                      </div>
                      <div class="cclear"></div>
                      <a class="fulllink" href="http://&mvt:global:domain:name;/&mvt:reviews:product_code;.html"></a> </div>
                  </mvt:foreach>
                </div>
                Thoughts?
                Leslie Kirk
                Miva Certified Developer
                Miva Merchant Specialist since 1997
                Previously of Webs Your Way
                (aka Leslie Nord leslienord)

                Email me: [email protected]
                www.lesliekirk.com

                Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                Comment


                  #9
                  Re: EmporiumPlus Toolkit Brief Description Display with Read More...

                  Just saw this - didn't get an email. Let me look at your code.

                  Comment


                    #10
                    Re: EmporiumPlus Toolkit Brief Description Display with Read More...

                    So, is the loop failing or is it writing the <article> divs and the script isn't being applied?

                    Can you post what you get as the rendered output?

                    Thanks.

                    Also, you might need a little more vroom in your script, and put it at the bottom of your page (before closing body tag):

                    Code:
                    <script type="text/javascript">
                        $('article').readmore({
                          speed: 500,
                          afterToggle: function(trigger, element, expanded) {
                            if(! expanded) { // The "Close" link was clicked
                              $('html, body').animate({scrollTop: $(element).offset().top}, {duration: 100});
                            }
                          }
                        });
                    </script>
                    Seeing the output you get when the page renders will help a bunch.

                    Comment


                      #11
                      Re: EmporiumPlus Toolkit Brief Description Display with Read More...

                      You'd need to set a counter inside the loop

                      <mvt:assign name="l.settings:thisCount" value="l.settings.thisCount + 1" />


                      Then write the wrapper as:

                      <article data-readmore="" aria-expanded="false" id="rmjs-&mvt:thisCount;" style="max-height: none; height: 216px;">


                      <a href="#" data-readmore-toggle="" aria-controls="rmjs-&mvt:thisCount;">Read More</a>
                      </article>
                      Bruce Golub
                      Phosphor Media - "Your Success is our Business"

                      Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                      phosphormedia.com

                      Comment


                        #12
                        Re: EmporiumPlus Toolkit Brief Description Display with Read More...

                        Bruce, the wrapper is supposed to be dynamically generated by the javascript...
                        Leslie Kirk
                        Miva Certified Developer
                        Miva Merchant Specialist since 1997
                        Previously of Webs Your Way
                        (aka Leslie Nord leslienord)

                        Email me: [email protected]
                        www.lesliekirk.com

                        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                        Comment


                          #13
                          Re: EmporiumPlus Toolkit Brief Description Display with Read More...

                          Hmm, looking at the code examples on the page, the "action" declaration has a unique value...as one would expect...unless we are talking about two different things.

                          <a href="#" data-readmore-toggle="" aria-controls="rmjs-1">Read More</a>

                          <a href="#" data-readmore-toggle="" aria-controls="rmjs-2">Read More</a>
                          Bruce Golub
                          Phosphor Media - "Your Success is our Business"

                          Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                          phosphormedia.com

                          Comment


                            #14
                            Re: EmporiumPlus Toolkit Brief Description Display with Read More...

                            That part is generated by the script. And only if the <article> needs the script applied. Based on settings, not all <article> instances meet criteria.

                            Comment


                              #15
                              Re: EmporiumPlus Toolkit Brief Description Display with Read More...

                              Leslie - I'm thinking it's a default settings issue. The <article> divs that aren't being styled aren't big enough to need it. Which makes sense - why add stuff when it's not needed.

                              Try this instead of the default script call:

                              Code:
                              <script type="text/javascript">
                                  $('article').readmore({
                                    max-height: 100,
                                    speed: 500,
                                    afterToggle: function(trigger, element, expanded) {
                                      if(! expanded) { // The "Close" link was clicked
                                        $('html, body').animate({scrollTop: $(element).offset().top}, {duration: 100});
                                      }
                                    }
                                  });
                              </script>
                              Adjust the value of max-height to control how much text can be seen before the script kicks in. The "100" value is pretty small so it should make just about everything trigger the script. Adjust up until you see the number of lines you need. The other stuff makes the transitions and closing work better than the defaults.

                              Comment

                              Working...
                              X