Close

Feature Requests

Support
5 years ago
#4246 Quote
Avatar
  • Moderator
  • 1002
Help make Nop-Templates products better. Share your ideas or feature requests related to the Nop HTML Widgets plugin for nopCommerce.
ron.richardson
4 years ago
#8033 Quote
Avatar
  • 6
I would like to see another option for COndition Type for Topics.  I'd like to put a widget zone on the generic topics view, but be able to show different content in that widget zone on each page.

For example, on topic page A, show one image in the widget zone, but on topic page B show a different image in the same widget zone.
hristian.dimov
4 years ago
#8038 Quote
Avatar
  • Moderator
  • 386
ron.richardson wrote:
I would like to see another option for COndition Type for Topics.  I'd like to put a widget zone on the generic topics view, but be able to show different content in that widget zone on each page.

For example, on topic page A, show one image in the widget zone, but on topic page B show a different image in the same widget zone.


Hi Ron,

thank you for your feedback !

Please suggest this idea to our uservoice portal and we might consider adding it in the future releases of the plugin.
Regards,
Hristian Dimov
Nop-Templates.com
ezzat2k
4 years ago
#8242 Quote
Avatar
  • 33
Greetings Gentlemen,

Just purchased the HTML Widgets Plugin, Works really great on desktop, but is there any way we can eliminate the widgets from showing on the mobile version?!  Perhaps a CSS code to add?!


Thank you
Stefan
4 years ago
#8246 Quote
Avatar
  • Moderator
  • 157
ezzat2k wrote:
Greetings Gentlemen,

Just purchased the HTML Widgets Plugin, Works really great on desktop, but is there any way we can eliminate the widgets from showing on the mobile version?!  Perhaps a CSS code to add?!


Thank you


Hi ezzat2k,

Thank you for the kind words.

You can do the following:

Open the Plugins\SevenSpikes.Nop.Plugins.HtmlWidgets\Views\HtmlWidget\_HtmlWidget.cshtml view and add a class to the div, i.e. 

<div class="html-widget">
                @Html.Raw(htmlwidget.HtmlContent)
            </div>


Then you can add a css media query to hide the widget under a specific view port, i.e.

@media all and (max-width: 768px) {
    .html-widget {display: none;}
}


Thus all html widgets will be hidden under 768px viewport which is the view port of a tablet in portrait mode.

Hope that helps!
Best Regards,

Stefan Hristov
Nop-Templates.com
ezzat2k
4 years ago
#8254 Quote
Avatar
  • 33
Thank you for the quick response, this did hide the widgets on mobile, but I noticed on mobile devices if you flip your phone horizontal (even though the widget is not showing) its not allowing the theme to stretch (Right column Categories i.e.) it only does when I remove the widget completely (Make it not visible in Html Widget Settings)

https://www.dropbox.com/s/oz482px1fjxrq7m/IMG_20141113_105113.png?dl=0


Thank you

Stefan
4 years ago
#8272 Quote
Avatar
  • Moderator
  • 157
Hi ezzat2k,

You see the html widget because when you turn the tablet in landscape mode, the viewport gets bigger than 768px and according to the media query it will be displayed.

So you have two options in general:

1. Remove the html widgets on mobile devices regardless the width of the display. Just open the _Root.Head.cshtml from your theme or from the general Views folder of nopCommerce and add the following:

in the <head>

Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/SevenSpikesExtensions.js");


and then in the <body> the following js

<script type="text/javascript">
        $(document).ready(function () {
            if ($.isMobile())
            {
                $('.html-widget').hide();
            }
        })
    </script>



2. If you want to hide the html widgets depending on the width of the viewport just change the 768 from the media query from my previous post.

Hope that helps! 
Best Regards,

Stefan Hristov
Nop-Templates.com
ezzat2k
4 years ago
#8279 Quote
Avatar
  • 33


Thank you for your time and effort, however this this didn't work, I mean it does work to hid the widget but that wasn't my issue, using the CSS to hide the widget worked, except in both methods, CSS and JS while the widget was hidden it effected the mobile layout (horizontally only).

If I hide the widget, using CSS or JS everything looks fine (vertically), But Horizontally the (Categories) and (popular tags) don't stretch please see attached pic.

However If I Uncheck (Visible)  from the (Html Widget Settings) everything show right on the (horizontal mobile layout)  Very strange

https://www.dropbox.com/s/oz482px1fjxrq7m/IMG_20141113_105113.png?dl=0
Stefan
4 years ago
#8286 Quote
Avatar
  • Moderator
  • 157
Hi ezzat2k,

Can you try the following approach using the js method. Just change the js function as shown below:

<script type="text/javascript">
        $(document).ready(function () {
            if ($.isMobile())
            {
                $('.html-widget').remove();
            }
        })
    </script>


Please let us how it goes!

Thanks!
Best Regards,

Stefan Hristov
Nop-Templates.com
ezzat2k
4 years ago
#8295 Quote
Avatar
  • 33

I can't thank you enough, but this worked perfect, hid the HTML widgets on mobile and did not effect the layout.

You guys are the best.

Thank you again.