You have no items in your shopping cart.

Saturday, December 3, 2022 11:58:58 PM

Place text & images above & below product picture when "listing" product in a category

Avatar

Posted: 5 years ago

#5418 Quote

kh

Posted: 5 years ago

#5418 Quote

Google does not like text within a product image.  I would like to use Content Manager to show additional text above & below product image when show product list within category.  Example below has text as part of image.  I would like to break it out of image.



Avatar

Posted: 5 years ago

#5419 Quote

kh

Posted: 5 years ago

#5419 Quote

https://mebulbs.biz/a/cd/full-power-4  is example.  Image did not show up in first post.
Avatar

Posted: 5 years ago

#5423 Quote

Support

Posted: 5 years ago

#5423 Quote

I'll see and answer you after 10 minutes.
Avatar

Posted: 5 years ago

#5424 Quote

Support

Posted: 5 years ago

#5424 Quote

What nopcommerce version do you use?
We plan to add new feature in this plugin and we want to know about the minimum release number...
Avatar

Posted: 5 years ago

#5425 Quote

kh

Posted: 5 years ago

#5425 Quote

Currently on 3.7
Avatar

Posted: 5 years ago

#5426 Quote

Support

Posted: 5 years ago

#5426 Quote

Ok.


You should add new lines in the file WidgetZones.xml.
  <WidgetZone>productdetails_before_one_picture</WidgetZone>
  <WidgetZone>productdetails_after_one_picture</WidgetZone>


Open the file _ProductDetailsPictures.cshtml
and add the next lines:

        @Html.Widget("productdetails_before_one_picture", Model.Id)
....
        @Html.Widget("productdetails_after_one_picture", Model.Id)


Example

    <div class="picture">
        @Html.Widget("productdetails_before_one_picture", Model.Id)
        @if (Model.DefaultPictureZoomEnabled)
        {
            <a href="@Model.DefaultPictureModel.FullSizeImageUrl" title="@Model.DefaultPictureModel.Title" id="main-product-img-lightbox-anchor-@Model.Id">
                <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
            </a>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#main-product-img-lightbox-anchor-@Model.Id').magnificPopup(
                    {
                        type: 'image',
                        removalDelay: 300,
                        gallery: {
                            enabled: true,
                            tPrev: '@T("Media.MagnificPopup.Previous")',
                            tNext: '@T("Media.MagnificPopup.Next")',
                            tCounter: '@T("Media.MagnificPopup.Counter")'
                        },
                        tClose: '@T("Media.MagnificPopup.Close")',
                        tLoading: '@T("Media.MagnificPopup.Loading")'
                    });
                });
            </script>
        }
        else
        {
            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
        }
        @Html.Widget("productdetails_after_one_picture", Model.Id)
    </div>

Avatar

Posted: 5 years ago

#5427 Quote

Support

Posted: 5 years ago

#5427 Quote

Use CSS for styling.

Powered by nopCommerce

Copyright © 2019 FoxNetSoft. All rights reserved