EmporiumPlus Toolkit Brief Description Display with Read More...

[lesliekirk]

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

[Bruce - PhosphorMedia]

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>

[eldon99]

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.

[nottheusual1]

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.

[lesliekirk]

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

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).

[Bruce - PhosphorMedia]

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.

[lesliekirk]

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

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

$('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

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.

[lesliekirk]

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?

<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?

[nottheusual1]

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

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

[nottheusual1]

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):

<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.

[Bruce - PhosphorMedia]

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>

[lesliekirk]

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

Bruce, the wrapper is supposed to be dynamically generated by the javascript...

[Bruce - PhosphorMedia]

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>

[nottheusual1]

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.

[nottheusual1]

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:

<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.