Profile: Stefan

Hi insity,

I understand what you need. Unfortunately there is no setting about it, but can be achieved fairly easy with some lines of css and js. In order to do this just follow the instructions below in case you are using nopCommerce version 3.50:

1. Open the Plugins\SevenSpikes.Nop.Plugins.RealOnePageCheckout\Themes\Motion\Content\RealOnePageCheckout.css file and add the following on line 77 :

.ropc .order-summary-content .section-body {
        display: block;
    }

<script type="text/javascript">
    $(document).ready(function () {

        if ($.getSpikesViewPort().width <= 768) {
            $('.panel-group.panel-group-right-middle').detach().insertBefore('.panel-group.panel-group-left');
        }

        $('.page-body').on('click', '.ropc .section-title', function () {
            var e = window, a = 'inner';
            if (!('innerWidth' in window)) {
                a = 'client';
                e = document.documentElement || document.body;
            }


            var result = { width: e[a + 'Width'], height: e[a + 'Height'] };

            if (result.width < 769) {
                $(this).siblings('.section-body').slideToggle('slow');
            }
        });
    });
</script>

Hi chrisADK,

You can do this by a very simple cut and paste. Just open your Themes/Motion/Views/Product/ProductTemplate.Simple.cshtml file and locate the code for the attributes:

  @{
                    var dataDictAttributes = new ViewDataDictionary();
                    dataDictAttributes.TemplateInfo.HtmlFieldPrefix = string.Format("attributes_{0}", Model.Id);
                    @Html.Partial("_ProductAttributes", Model.ProductAttributes, dataDictAttributes)
                }

Just cut it and paste it right before the following line:

@Html.Widget("productdetails_before_collateral", Model.Id)

This will make the attributes be displayed below the image and before the quick tabs. So now you will just need to add your css in order to make the dropdowns full width as you need.

Hope that helps.

$(document).ready(function () {

    $(window).on("scroll", function () {

        if ($(window).scrollTop() > 100) {// 100px - go to top scroll barier
            $("#goToTop").show();
        }
        else {
            $("#goToTop").hide();
        }
    });

     $("#goToTop").on("click", function () {
        $('html,body').animate({ scrollTop: 0 }, 400);
     });

});

Hi Jakubz,

As you know all plugins in a theme are designed and implemented according to the theme design. So that is why all the functionality from the plugins that come with the Smart theme is different than the one that comes with the default clean theme. Actually as the default clean theme is not ours we cannot implement the default plugins to work like the plugins in the Smart theme - to have a navigation bar at the top on mobile so that the filters and menu are opened as they are in the Smart theme. Such customization will not be straightforward, so I believe it will be easier to change the Smart theme instead of changing the default clean theme to have the functionality of the smart theme.

Hope that makes sense.

Hi,

By design when you hover over the product, there is an overlay displayed showing that the image becomes not clickable and the buttons are displayed in the center of the product box. The name of the product remains clickable though. If you think is it confusing for the customers, we can change that so that the overlay is still clickable.

Thanks in advance.