Skip to content

Commit

Permalink
#41 "Color squares" for specification attributes. Allow filtering by …
Browse files Browse the repository at this point in the history 
…color.
  • Loading branch information
@AndreiMaz
AndreiMaz committed Mar 14, 2016
1 parent 363fba0 commit a0c2f79
Show file tree
Hide file tree
Showing 18 changed files with 196 additions and 18 deletions.
5 changes: 5 additions & 0 deletions src/Libraries/Nop.Core/Domain/Catalog/SpecificationAttributeOption.cs
View file
Expand Up @@ -17,6 +17,11 @@ public partial class SpecificationAttributeOption : BaseEntity, ILocalizedEntity
/// </summary>
public string Name { get; set; }

/// <summary>
/// Gets or sets the color RGB value (used when you want to display "Color squares" instead of text)
/// </summary>
public string ColorSquaresRgb { get; set; }

/// <summary>
/// Gets or sets the display order
/// </summary>
Expand Down
5 changes: 5 additions & 0 deletions src/Libraries/Nop.Core/Domain/Catalog/SpecificationAttributeOptionFilter.cs
View file
Expand Up @@ -31,6 +31,11 @@ public class SpecificationAttributeOptionFilter
/// </summary>
public string SpecificationAttributeOptionName { get; set; }

/// <summary>
/// Gets or sets the specification attribute option color (RGB)
/// </summary>
public string SpecificationAttributeOptionColorRgb { get; set; }

/// <summary>
/// Gets or sets the specification attribute option display order
/// </summary>
Expand Down
3 changes: 2 additions & 1 deletion src/Libraries/Nop.Data/Mapping/Catalog/SpecificationAttributeOptionMap.cs
View file
Expand Up @@ -9,7 +9,8 @@ public SpecificationAttributeOptionMap()
this.ToTable("SpecificationAttributeOption");
this.HasKey(sao => sao.Id);
this.Property(sao => sao.Name).IsRequired();

this.Property(sao => sao.ColorSquaresRgb).HasMaxLength(100);

this.HasRequired(sao => sao.SpecificationAttribute)
.WithMany(sa => sa.SpecificationAttributeOptions)
.HasForeignKey(sao => sao.SpecificationAttributeId);
Expand Down
9 changes: 9 additions & 0 deletions src/Presentation/Nop.Web/Administration/Controllers/SpecificationAttributeController.cs
View file
Expand Up @@ -281,6 +281,9 @@ public ActionResult OptionCreatePopup(string btnId, string formId, Specification
if (ModelState.IsValid)
{
var sao = model.ToEntity();
//clear "Color" values if it's disabled
if (!model.EnableColorSquaresRgb)
sao.ColorSquaresRgb = null;

_specificationAttributeService.InsertSpecificationAttributeOption(sao);
UpdateOptionLocales(sao, model);
Expand All @@ -307,6 +310,8 @@ public ActionResult OptionEditPopup(int id)
return RedirectToAction("List");

var model = sao.ToModel();
//"Color" value
model.EnableColorSquaresRgb = !String.IsNullOrEmpty(sao.ColorSquaresRgb);
//locales
AddLocales(_languageService, model.Locales, (locale, languageId) =>
{
Expand All @@ -330,6 +335,10 @@ public ActionResult OptionEditPopup(string btnId, string formId, SpecificationAt
if (ModelState.IsValid)
{
sao = model.ToEntity(sao);
//clear "Color" values if it's disabled
if (!model.EnableColorSquaresRgb)
sao.ColorSquaresRgb = null;

_specificationAttributeService.UpdateSpecificationAttributeOption(sao);

UpdateOptionLocales(sao, model);
Expand Down
6 changes: 6 additions & 0 deletions src/Presentation/Nop.Web/Administration/Models/Catalog/SpecificationAttributeOptionModel.cs
View file
Expand Up @@ -22,6 +22,12 @@ public SpecificationAttributeOptionModel()
[AllowHtml]
public string Name { get; set; }

[NopResourceDisplayName("Admin.Catalog.Attributes.SpecificationAttributes.Options.Fields.ColorSquaresRgb")]
[AllowHtml]
public string ColorSquaresRgb { get; set; }
[NopResourceDisplayName("Admin.Catalog.Attributes.SpecificationAttributes.Options.Fields.EnableColorSquaresRgb")]
public bool EnableColorSquaresRgb { get; set; }

[NopResourceDisplayName("Admin.Catalog.Attributes.SpecificationAttributes.Options.Fields.DisplayOrder")]
public int DisplayOrder { get; set; }

Expand Down
4 changes: 2 additions & 2 deletions src/Presentation/Nop.Web/Administration/Views/SpecificationAttribute/_CreateOrUpdate.cshtml
View file
Expand Up @@ -161,7 +161,7 @@
field: "Id",
title: "@T("Admin.Common.Edit")",
width: 100,
template: "<input type='submit' value='@T("Admin.Common.Edit")' onclick=\"javascript:OpenWindow('@Url.Content("~/Admin/SpecificationAttribute/OptionEditPopup/")#=Id#?btnId=btnRefresh&formId=specificationattribute-form', 800, 250, true); return false;\" class='k-button' />"
template: "<input type='submit' value='@T("Admin.Common.Edit")' onclick=\"javascript:OpenWindow('@Url.Content("~/Admin/SpecificationAttribute/OptionEditPopup/")#=Id#?btnId=btnRefresh&formId=specificationattribute-form', 800, 350, true); return false;\" class='k-button' />"
}, {
command: {name: "destroy", text: "@T("Admin.Common.Delete")"},
title: "@T("Admin.Common.Delete")",
Expand All @@ -174,7 +174,7 @@
</tr>
<tr>
<td width="100%">
<input type="submit" id="btnAddNewOption" value="@T("Admin.Catalog.Attributes.SpecificationAttributes.Options.AddNew")" onclick="javascript:OpenWindow('@(Url.Action("OptionCreatePopup", "SpecificationAttribute", new { specificationAttributeId = Model.Id, btnId = "btnRefresh", formId = "specificationattribute-form" }))', 800, 250, true); return false;" class="k-button" />
<input type="submit" id="btnAddNewOption" value="@T("Admin.Catalog.Attributes.SpecificationAttributes.Options.AddNew")" onclick="javascript:OpenWindow('@(Url.Action("OptionCreatePopup", "SpecificationAttribute", new { specificationAttributeId = Model.Id, btnId = "btnRefresh", formId = "specificationattribute-form" }))', 800, 350, true); return false;" class="k-button" />
<input type="submit" id="btnRefresh" style="display: none" />
<script type="text/javascript">
$(document).ready(function () {
Expand Down
50 changes: 49 additions & 1 deletion ...entation/Nop.Web/Administration/Views/SpecificationAttribute/_CreateOrUpdateOption.cshtml
View file
@@ -1,8 +1,18 @@
@model SpecificationAttributeOptionModel
@{
Html.AddScriptParts("~/Scripts/farbtastic.js");
Html.AddCssFileParts("~/Content/farbtastic/farbtastic.css");
}
@Html.ValidationSummary(false)
@Html.HiddenFor(model => model.Id)
@Html.HiddenFor(model => model.SpecificationAttributeId)

@{
//pre-set some color (required for farbtastic)
if (String.IsNullOrEmpty(Model.ColorSquaresRgb))
{
Model.ColorSquaresRgb = "#FFFFFF";
}
}

@if (ViewBag.RefreshPage == true)
{
Expand All @@ -13,6 +23,20 @@
</script>
}

<script type="text/javascript">
$(document).ready(function() {
$("#@Html.FieldIdFor(model => model.EnableColorSquaresRgb)").click(toggleEnableColorSquaresRgb);
toggleEnableColorSquaresRgb();
});
function toggleEnableColorSquaresRgb() {
if ($('#@Html.FieldIdFor(model => model.EnableColorSquaresRgb)').is(':checked')) {
$('#pnlColorSquaresRgb').show();
} else {
$('#pnlColorSquaresRgb').hide();
}
}
</script>
@(Html.LocalizedEditor<SpecificationAttributeOptionModel, SpecificationAttributeOptionLocalizedModel>("specificationattribute-localized",
@<table class="adminContent">
<tr>
Expand Down Expand Up @@ -44,6 +68,30 @@
</table>
))
<table class="adminContent">
<tr>
<td class="adminTitle">
@Html.NopLabelFor(model => model.EnableColorSquaresRgb):
</td>
<td class="adminData">
@Html.EditorFor(model => model.EnableColorSquaresRgb)
@Html.ValidationMessageFor(model => model.EnableColorSquaresRgb)
</td>
</tr>
<tr id="pnlColorSquaresRgb">
<td class="adminTitle">
@Html.NopLabelFor(model => model.ColorSquaresRgb):
</td>
<td class="adminData">
@Html.EditorFor(model => model.ColorSquaresRgb)
<div id="color-picker"></div>
<script type="text/javascript">
$(document).ready(function(){
$('#color-picker').farbtastic('#@Html.FieldIdFor(model => model.ColorSquaresRgb)');
});
</script>
@Html.ValidationMessageFor(model => model.ColorSquaresRgb)
</td>
</tr>
<tr>
<td class="adminTitle">
@Html.NopLabelFor(model => model.DisplayOrder):
Expand Down
12 changes: 12 additions & 0 deletions src/Presentation/Nop.Web/App_Data/Localization/defaultResources.nopres.xml
View file
Expand Up @@ -1542,12 +1542,24 @@
<LocaleResource Name="Admin.Catalog.Attributes.SpecificationAttributes.Options.EditOptionDetails">
<Value>Edit option details</Value>
</LocaleResource>
<LocaleResource Name="Admin.Catalog.Attributes.SpecificationAttributes.Options.Fields.ColorSquaresRgb">
<Value>RGB color</Value>
</LocaleResource>
<LocaleResource Name="Admin.Catalog.Attributes.SpecificationAttributes.Options.Fields.ColorSquaresRgb.Hint">
<Value>Choose color to be used instead of an option text name (it'll be displayed as "color square").</Value>
</LocaleResource>
<LocaleResource Name="Admin.Catalog.Attributes.SpecificationAttributes.Options.Fields.DisplayOrder">
<Value>Display order</Value>
</LocaleResource>
<LocaleResource Name="Admin.Catalog.Attributes.SpecificationAttributes.Options.Fields.DisplayOrder.Hint">
<Value>The display order of the option.</Value>
</LocaleResource>
<LocaleResource Name="Admin.Catalog.Attributes.SpecificationAttributes.Options.Fields.EnableColorSquaresRgb">
<Value>Specify color</Value>
</LocaleResource>
<LocaleResource Name="Admin.Catalog.Attributes.SpecificationAttributes.Options.Fields.EnableColorSquaresRgb.Hint">
<Value>Check to choose color to be used instead of an option text name (it''ll be displayed as "color square").</Value>
</LocaleResource>
<LocaleResource Name="Admin.Catalog.Attributes.SpecificationAttributes.Options.Fields.Name">
<Value>Name</Value>
</LocaleResource>
Expand Down
1 change: 1 addition & 0 deletions src/Presentation/Nop.Web/Extensions/ControllerExtensions.cs
View file
Expand Up @@ -42,6 +42,7 @@ public static class ControllerExtensions
{
SpecificationAttributeId = psa.SpecificationAttributeOption.SpecificationAttributeId,
SpecificationAttributeName = psa.SpecificationAttributeOption.SpecificationAttribute.GetLocalized(x => x.Name),
ColorSquaresRgb = psa.SpecificationAttributeOption.ColorSquaresRgb
};
switch (psa.AttributeType)
Expand Down
23 changes: 17 additions & 6 deletions src/Presentation/Nop.Web/Models/Catalog/CatalogPagingFilteringModel.cs
View file
Expand Up @@ -408,6 +408,7 @@ public virtual List<int> GetAlreadyFilteredSpecOptionIds(IWebHelper webHelper)
SpecificationAttributeDisplayOrder = sa.DisplayOrder,
SpecificationAttributeOptionId = sao.Id,
SpecificationAttributeOptionName = sao.GetLocalized(x => x.Name, workContext.WorkingLanguage.Id),
SpecificationAttributeOptionColorRgb = sao.ColorSquaresRgb,
SpecificationAttributeOptionDisplayOrder = sao.DisplayOrder
};
})
Expand Down Expand Up @@ -444,18 +445,24 @@ public virtual List<int> GetAlreadyFilteredSpecOptionIds(IWebHelper webHelper)

this.AlreadyFilteredItems = alreadyFilteredOptions.ToList().Select(x =>
{
var item = new SpecificationFilterItem();
item.SpecificationAttributeName = x.SpecificationAttributeName;
item.SpecificationAttributeOptionName = x.SpecificationAttributeOptionName;
var item = new SpecificationFilterItem
{
SpecificationAttributeName = x.SpecificationAttributeName,
SpecificationAttributeOptionName = x.SpecificationAttributeOptionName,
SpecificationAttributeOptionColorRgb = x.SpecificationAttributeOptionColorRgb
};
return item;
}).ToList();

this.NotFilteredItems = notFilteredOptions.ToList().Select(x =>
{
var item = new SpecificationFilterItem();
item.SpecificationAttributeName = x.SpecificationAttributeName;
item.SpecificationAttributeOptionName = x.SpecificationAttributeOptionName;
var item = new SpecificationFilterItem()
{
SpecificationAttributeName = x.SpecificationAttributeName,
SpecificationAttributeOptionName = x.SpecificationAttributeOptionName,
SpecificationAttributeOptionColorRgb = x.SpecificationAttributeOptionColorRgb
};
//filter URL
var alreadyFilteredOptionIds = GetAlreadyFilteredSpecOptionIds(webHelper);
Expand Down Expand Up @@ -518,6 +525,10 @@ public partial class SpecificationFilterItem : BaseNopModel
/// </summary>
public string SpecificationAttributeOptionName { get; set; }
/// <summary>
/// Specification attribute option color (RGB)
/// </summary>
public string SpecificationAttributeOptionColorRgb { get; set; }
/// <summary>
/// Filter URL
/// </summary>
public string FilterUrl { get; set; }
Expand Down
19 changes: 18 additions & 1 deletion src/Presentation/Nop.Web/Models/Catalog/ProductSpecificationModel.cs
View file
Expand Up @@ -2,13 +2,30 @@

namespace Nop.Web.Models.Catalog
{
/// <summary>
/// Specification attribute model
/// </summary>
public partial class ProductSpecificationModel : BaseNopModel
{
/// <summary>
/// Specificartion attribute ID
/// </summary>
public int SpecificationAttributeId { get; set; }

/// <summary>
/// Specificartion attribute name
/// </summary>
public string SpecificationAttributeName { get; set; }

//this value is already HTML encoded
/// <summary>
/// Option value
/// this value is already HTML encoded
/// </summary>
public string ValueRaw { get; set; }

/// <summary>
/// Option color (if specified). Used to display color squares
/// </summary>
public string ColorSquaresRgb { get; set; }
}
}
3 changes: 3 additions & 0 deletions src/Presentation/Nop.Web/Themes/DefaultClean/Content/css/styles.css
View file
Expand Up @@ -1314,6 +1314,9 @@ label, label + * {
height: 5px;
background-color: #ddd;
}
.product-filter .group li.color-item:before {
top: 25px;
}

.filtered-items .title {
margin: 0 0 5px;
Expand Down
3 changes: 3 additions & 0 deletions src/Presentation/Nop.Web/Themes/DefaultClean/Content/css/styles.rtl.css
View file
Expand Up @@ -1322,6 +1322,9 @@ label, label + * {
height: 5px;
background-color: #ddd;
}
.product-filter .group li.color-item:before {
top: 25px;
}

.filtered-items .title {
margin: 0 0 5px;
Expand Down
18 changes: 15 additions & 3 deletions src/Presentation/Nop.Web/Views/Catalog/_FilterSpecsBox.cshtml
View file
Expand Up @@ -21,11 +21,23 @@
<li class="title">
<strong>@groupList[0].SpecificationAttributeName</strong>
</li>

@foreach (var spec in groupList)
{
<li class="item">
<a href="@spec.FilterUrl">@spec.SpecificationAttributeOptionName</a>
<li class="item @(!String.IsNullOrEmpty(spec.SpecificationAttributeOptionColorRgb) ? "color-item" : null)">
<a href="@spec.FilterUrl">
@if (String.IsNullOrEmpty(spec.SpecificationAttributeOptionColorRgb))
{
@spec.SpecificationAttributeOptionName
}
else
{
<div class="color-squares">
<span class="color-container" title="@spec.SpecificationAttributeOptionName">
<span class="color" style="background-color: @(spec.SpecificationAttributeOptionColorRgb);">&nbsp;</span>
</span>
</div>
}
</a>
</li>
}
</ul>
Expand Down
16 changes: 13 additions & 3 deletions src/Presentation/Nop.Web/Views/Product/CompareProducts.cshtml
View file
Expand Up @@ -100,12 +100,22 @@
@foreach (var product in Model.Products)
{
var foundProductSpec = product.SpecificationAttributeModels.FirstOrDefault(psa => psa.SpecificationAttributeId == specificationAttribute.SpecificationAttributeId);
var specValue = foundProductSpec != null ? foundProductSpec.ValueRaw : "";

<td style="width: @columnWidth;">
@if (!String.IsNullOrEmpty(specValue))
@if (foundProductSpec != null)
{
@Html.Raw(specValue)
if (String.IsNullOrEmpty(foundProductSpec.ColorSquaresRgb))
{
@Html.Raw(foundProductSpec.ValueRaw)
}
else
{
<div class="color-squares">
<span class="color-container" title="@Html.Raw(foundProductSpec.ValueRaw)">
<span class="color" style="background-color: @(foundProductSpec.ColorSquaresRgb);">&nbsp;</span>
</span>
</div>
}
}
else
{
Expand Down
13 changes: 12 additions & 1 deletion src/Presentation/Nop.Web/Views/Product/_ProductSpecifications.cshtml
View file
Expand Up @@ -21,7 +21,18 @@
@item.SpecificationAttributeName
</td>
<td class="spec-value">
@Html.Raw(item.ValueRaw)
@if (String.IsNullOrEmpty(item.ColorSquaresRgb))
{
@Html.Raw(item.ValueRaw)
}
else
{
<div class="color-squares">
<span class="color-container" title="@Html.Raw(item.ValueRaw)">
<span class="color" style="background-color: @(item.ColorSquaresRgb);">&nbsp;</span>
</span>
</div>
}
</td>
</tr>
}
Expand Down
2 changes: 2 additions & 0 deletions src/Tests/Nop.Data.Tests/Catalog/SpecificationAttributeOptionPersistenceTests.cs
View file
Expand Up @@ -13,6 +13,7 @@ public void Can_save_and_load_specificationAttributeOption()
var specificationAttributeOption = new SpecificationAttributeOption
{
Name = "SpecificationAttributeOption name 1",
ColorSquaresRgb = "ColorSquaresRgb 2",
DisplayOrder = 1,
SpecificationAttribute = new SpecificationAttribute
{
Expand All @@ -24,6 +25,7 @@ public void Can_save_and_load_specificationAttributeOption()
var fromDb = SaveAndLoadEntity(specificationAttributeOption);
fromDb.ShouldNotBeNull();
fromDb.Name.ShouldEqual("SpecificationAttributeOption name 1");
fromDb.ColorSquaresRgb.ShouldEqual("ColorSquaresRgb 2");
fromDb.DisplayOrder.ShouldEqual(1);

fromDb.SpecificationAttribute.ShouldNotBeNull();
Expand Down

0 comments on commit a0c2f79

Please sign in to comment.