Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Minimize text block below product categorie overview page

‎09-04-2018 02:39 AM
‎09-04-2018 02:39 AM

Minimize text block below product categorie overview page

Hi,

 

I have some text information below my products in the product category pages. See screenshot example: http://prntscr.com/kqe99z.
I was wondering if anybody could help me with an example code on how to show this text minimized. Because i treid to use js script for it, but somehow it won't work. Not sure what i'm missing here.

Regards  

0 Kudos
Reply
17 REPLIES 17
‎09-05-2018 12:23 AM
‎09-05-2018 12:23 AM

Re: Minimize text block below product categorie overview page

Anyone?

0 Kudos
Reply
‎09-05-2018 11:28 PM
‎09-05-2018 11:28 PM

Re: Minimize text block below product categorie overview page

@Jojobaa

 

You can use jquery here to show or hide your content.

 

Write the following jquery code in the file where you added this text.

 

See the example given below.

 

 

<p><button class="show-hide-minimized-content">Show/Hide Text</button></p>
<p class="minimize-text" style="display: none;">This is the content which you want to minimize.</p>


<script type="text/javascript">
    require(['jquery'], function($){
        jQuery(document).ready(function(){
            jQuery('body').on("click", ".show-hide-minimized-content", function(){
                jQuery(".minimize-text").toggle();
            });
        });
    });
</script>

 

If you find my answer useful, Please click Kudos & Accept as Solution.
Reply
‎09-19-2018 02:30 AM
‎09-19-2018 02:30 AM

Re: Minimize text block below product categorie overview page

Thanks you for the reply. I'm not sure why the js script isn't working. It should work, but can't find the issue?

I know where to put the html code for that specific category: http://prntscr.com/kw53j6

Now I still need to add the js file somewhere. Is it somewhere over here? html/app/design/frontend/theme/default/Magenot_Catalog/layout

And do I need to add it as a new file or something? And do I need to add the js file for every category?

Can somebody point me in the right direction?

0 Kudos
Reply
‎09-22-2018 02:21 AM
‎09-22-2018 02:21 AM

Re: Minimize text block below product categorie overview page

Anyone??

@Jojobaa wrote:

Thanks you for the reply. I'm not sure where to add the js script to get this working?

I know where to put the html code for that specific category: http://prntscr.com/kw53j6

Now I still need to add the js file somewhere. Is it somewhere over here? html/app/design/frontend/theme/default/Magenot_Catalog/layout

And do I need to add it as a new file or something? And do I need to add the js file for every category?

Can somebody point me in the right direction?

I added the html code in the category content block. http://prntscr.com/kxcggm
Then I added the js script in the default store view footers Miscellaneous HTML block: http://prntscr.com/kxcgyj

But the script doens't seem to do anything on front-end, there is no collapse button visible for the category text: http://prntscr.com/kxch89 

Anyone a suggestion or can see what I did wrong?

0 Kudos
Reply
‎09-23-2018 11:11 PM
‎09-23-2018 11:11 PM

Re: Minimize text block below product categorie overview page

Anyone??

0 Kudos
Reply
‎09-24-2018 05:33 AM
‎09-24-2018 05:33 AM

Re: Minimize text block below product categorie overview page

Anyone alive out there? Smiley Very Happy

0 Kudos
Reply
‎09-25-2018 11:38 PM
‎09-25-2018 11:38 PM

Re: Minimize text block below product categorie overview page

Somebody? ;-)

0 Kudos
Reply
‎09-26-2018 09:32 PM
‎09-26-2018 09:32 PM

Re: Minimize text block below product categorie overview page

@Jojobaa

 

I suggest you mention the username when you reply. It will notify that particular user about your reply so you can get the response very fast.

 

Do you need any help?

 

If you find my answer useful, Please click Kudos & Accept as Solution.
0 Kudos
Reply
‎09-26-2018 09:47 PM
‎09-26-2018 09:47 PM

Re: Minimize text block below product categorie overview page

@Jojobaa

 

You can call your custom js file in 

app/design/frontend/vendor/theme/Magento_Catalog/layout/catalog_category_view.xml

 

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Magento_Catalog::js/custom.js" />
    </head>
    <body>

    </body>
</page>

Now create your custom.js file at following location 

 

app/design/frontend/venodr/theme/Magento_Catalog/web/js/custom.js

 

Now add the javascript code in this custom.js file.

 

After that, run the deploy command 

 

php bin/magento s:s:d -f

 

If you find my answer useful, Please click Kudos & Accept as Solution.
0 Kudos
Reply