Close

PDF Files on Custom Tab

tleeman
9 years ago
#5886 Quote
Avatar
  • 6
I would like to add some pdf files to a custom tab on a Product page.  The Nop Attachments plugin adds them to different parts of the Product page depending upon the selected Widget Zone.  Would adding a custom tab as a new Widget Zone be the best way to do this?  If yes, what files would need modification?  I'm using nopCommerce 3.2, thanks.
Deni
9 years ago
#6050 Quote
Avatar
  • Moderator
  • 389
tleeman wrote:
I would like to add some pdf files to a custom tab on a Product page.  The Nop Attachments plugin adds them to different parts of the Product page depending upon the selected Widget Zone.  Would adding a custom tab as a new Widget Zone be the best way to do this?  If yes, what files would need modification?  I'm using nopCommerce 3.2, thanks.


Hello,

I will show you the easiest way to do this:

First you need your QuickTabs to work without Ajax. Go to the admin site - Nop Quick Tabs > Ajax Settings > Enable ajax - uncheck it.

Next you must add a new widget zone to \Plugins\SevenSpikes.Nop.Plugins.Attachments\SupportedWidgetZones.xml file of the Attachments.
Just add this line(you can change the name as you want):

<WidgetZone>quick_tabs_attachment_tab</WidgetZone>


Next you go to: \Plugins\SevenSpikes.Nop.Plugins.NopQuickTabs\Views\ProductTab\_ProductTabsWithoutAjax.cshtml and replace your code with this one:


@** Copyright 2014 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*@

@using Nop.Core.Infrastructure
@using Nop.Core
@using SevenSpikes.Nop.Plugins.NopQuickTabs
@model SevenSpikes.Nop.Plugins.NopQuickTabs.Models.TabUIModel
    
<script type="text/javascript">
    jQuery(function ($) {
        $("#quickTabs").tabs();
    });
</script>
@{
    var attachmentsTabContent = Html.Widget("quick_tabs_attachment_tab");
    bool hasAttachments = true;

    if (attachmentsTabContent == null || attachmentsTabContent == MvcHtmlString.Empty || string.Compare(attachmentsTabContent.ToString().Trim(), string.Empty, StringComparison.InvariantCultureIgnoreCase) == 0)
    {
        hasAttachments = false;
    }
}

<div id="quickTabs" class="productTabs">
    <div class="productTabs-header">
        <ul>
            @foreach (var tabInfo in Model.Tabs)
            {
                <li>
                    <a href="#[email protected]">@tabInfo.Title</a>
                </li>
            }
            @if (hasAttachments)
            {
                <li>
                    <a href="#quickTab-attachments-in-tab">Attachments</a>
                </li>
            }

            @* Uncomment the code below if you want to have a Tab that gets its information from a Topic. This tab will be shown for all products in your store*@
            @*<li><a href="#quickTab-ShippingInfo">@T("ShippingReturns")</a> </li>*@
        </ul>
    </div>
    <div class="productTabs-body">
        @foreach (var tabInfo in Model.Tabs)
        {
            <div id="[email protected]">
                @Html.Raw(tabInfo.Content)
            </div>
        }
        @if (hasAttachments)
        {
            <div id="quickTab-attachments-in-tab">
                @attachmentsTabContent
            </div>
        }

        @* Uncomment the code below if you want to have a Tab that gets its information from a Topic. This tab will be shown for all products in your store *@
        @*<div id="quickTab-ShippingInfo">
                @Html.Action("TopicBlock", "ProductTab", new { systemName = "ShippingInfo" })
            </div>*@
    </div>
</div>


The parts in bold are the new one.

Note that "quick_tabs_attachment_tab" exists on two lines and must be consistent on both of them.

Finally, you rebuild your solution and everything should work ! That is how you can have attachments in tab !
Best Regards,
Mladen Staykov
Nop-Templates.com
tleeman
9 years ago
#6108 Quote
Avatar
  • 6
Hi Deni,

Running the solution creates a new Widget Zone named “quick_tabs_attachment_tab” and a tab labeled “Attachments”.  It works very well if you want all your file attachments listed under one tab, thanks.  I was able to modify the “Attachments” title that would appear on the tab by changing the line “ <a href="#quickTab-attachments-in-tab">Attachments</a> “ to “ <a href="#quickTab-attachments-in-tab">Your Tab Title</a> “.

Your modifications do allow pdf files to be attached to a tab, but not really to a custom tab.  I was hoping to add new custom tabs through the Quick Tabs plugin, enter a Display Name for the tab, add the desired attachments, and map accordingly.  Granted, this seems to be considerably more work than your initial solution, but I can always hope!
Boyko
9 years ago
#6120 Quote
Avatar
  • Moderator
  • 1570
tleeman wrote:
Hi Deni,

Running the solution creates a new Widget Zone named “quick_tabs_attachment_tab” and a tab labeled “Attachments”.  It works very well if you want all your file attachments listed under one tab, thanks.  I was able to modify the “Attachments” title that would appear on the tab by changing the line “ <a href="#quickTab-attachments-in-tab">Attachments</a> “ to “ <a href="#quickTab-attachments-in-tab">Your Tab Title</a> “.

Your modifications do allow pdf files to be attached to a tab, but not really to a custom tab.  I was hoping to add new custom tabs through the Quick Tabs plugin, enter a Display Name for the tab, add the desired attachments, and map accordingly.  Granted, this seems to be considerably more work than your initial solution, but I can always hope!


Hi tleeman,

Unfortunately what you want is not possible because the Tabs can contain only static content.
(HTML), which doesn't allow you to make calls to other plugins. The only way for now to integrate both plugins is to modify the Razor files (as Deni described it), which can contain executable code and you can call the attachments.

Thanks
Regards,
Nop-Templates.com Team
vb_itis
9 years ago
#6174 Quote
Avatar
  • 14
Used this solution and works great.  Wonder if there is ability to further customize the format of what is displayed.  In the short description it says ''This description could also be shown on the public website with the attachment link itself."  How would that be done?  Basically would like to have the format something like

Title (size: MB)
Description
Deni
9 years ago
#6186 Quote
Avatar
  • Moderator
  • 389
vb_itis wrote:
Used this solution and works great.  Wonder if there is ability to further customize the format of what is displayed.  In the short description it says ''This description could also be shown on the public website with the attachment link itself."  How would that be done?  Basically would like to have the format something like

Title (size: MB)
Description


Hello,

You can show the description by changing the view file: ~\Plugins\SevenSpikes.Nop.Plugins.Attachments\Views\ProductAttachment\_Attachments.cshtml

You must find these lines:

<li>
                <a class="attachmentLink attachmentLinkImg" href="@url" title="@attachment.ShortDescription" data-videoembedcode="@videoEmbedCode" target="@openLinksInNewWindow">
                    <img src="@attachment.ImageUrl" alt="@attachment.ImageUrl" />
                </a>
                <a class="attachmentLink" href="@url" title="@attachment.ShortDescription" data-videoembedcode="@videoEmbedCode" target="@openLinksInNewWindow">@attachment.Name</a>
            </li>


and change them to this:

<li>
                <a class="attachmentLink attachmentLinkImg" href="@url" title="@attachment.ShortDescription" data-videoembedcode="@videoEmbedCode" target="@openLinksInNewWindow">
                    <img src="@attachment.ImageUrl" alt="@attachment.ImageUrl" />
                </a>
                <a class="attachmentLink" href="@url" title="@attachment.ShortDescription" data-videoembedcode="@videoEmbedCode" target="@openLinksInNewWindow">@attachment.Name</a>
                <p>@attachment.ShortDescription</p>
            </li>


Next you must rebuild the solution. Finally you can style the description via CSS. That is all.

Best Regards !
Best Regards,
Mladen Staykov
Nop-Templates.com