Skip to content

Commit 43e985e

Browse files
acoumbacoumb
authored
Merge pull request #159 from umbraco/feature/shopify-pagination
Add Shopify pagination
2 parents 4723fe3 + 5d2e0d2 commit 43e985e

File tree

16 files changed

+354
-67
lines changed

16 files changed

+354
-67
lines changed

‎src/Umbraco.Cms.Integrations.Commerce.Shopify/App_Plugins/UmbracoCms.Integrations/Commerce/Shopify/Render/Products.cshtml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
{
88
<dt class="product-title">@product.Title</dt>
99
<dd class="product-body">@Html.Raw(product.Body)</dd>
10-
<img class="product-image" src="@product.Image" alt="@product.Title" />
10+
@if (!string.IsNullOrEmpty(product.Image))
11+
{
12+
<img class="product-image" src="@product.Image" alt="@product.Title" />
13+
}
1114
}
1215
</dl>
1316
}

‎src/Umbraco.Cms.Integrations.Commerce.Shopify/App_Plugins/UmbracoCms.Integrations/Commerce/Shopify/Render/ProductsV9.cshtml

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
{
88
<dt class="product-title">@product.Title</dt>
99
<dd class="product-body">@Html.Raw(product.Body)</dd>
10-
<img class="product-image" src="@product.Image" alt="@product.Title" />
10+
@if (!string.IsNullOrEmpty(product.Image))
11+
{
12+
<img class="product-image" src="@product.Image" alt="@product.Title" />
13+
}
1114
}
1215
</dl>
13-
}
14-
15-
16-
16+
}

‎src/Umbraco.Cms.Integrations.Commerce.Shopify/App_Plugins/UmbracoCms.Integrations/Commerce/Shopify/css/shopify.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.shopify-pagination .umb-pagination.pagination li:not(:first-child):not(:last-child) { display: none; }

‎src/Umbraco.Cms.Integrations.Commerce.Shopify/App_Plugins/UmbracoCms.Integrations/Commerce/Shopify/js/productPicker.controller.js

Lines changed: 66 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,43 @@
1414
}
1515
}
1616

17+
// pagination
18+
vm.pagination = {
19+
pageNumber: 1,
20+
totalPages: 1,
21+
previousPageInfo: '',
22+
nextPageInfo: ''
23+
};
24+
vm.nextPage = nextPage;
25+
vm.prevPage = prevPage;
26+
vm.changePage = togglePage;
27+
vm.goToPage = togglePage;
28+
1729
// step 1. check configuration
1830
checkConfiguration(function () {
19-
// step 2. get products
20-
getProducts();
31+
// step 2.1 get total pages
32+
getTotalPages();
33+
// step 2.2 get products
34+
getProducts('');
2135
});
2236

23-
function getProducts() {
37+
function getTotalPages() {
38+
umbracoCmsIntegrationsCommerceShopifyResource.getTotalPages().then(function (response) {
39+
vm.pagination.totalPages = response;
40+
});
41+
}
42+
43+
function getProducts(pageInfo) {
2444
vm.loading = true;
2545

26-
umbracoCmsIntegrationsCommerceShopifyResource.getProductsList().then(function (response) {
46+
umbracoCmsIntegrationsCommerceShopifyResource.getProductsList(pageInfo).then(function (response) {
2747
if (response.isValid) {
28-
48+
if (response.previousPageInfo) {
49+
vm.pagination.previousPageInfo = response.previousPageInfo;
50+
}
51+
if (response.nextPageInfo) {
52+
vm.pagination.nextPageInfo = response.nextPageInfo;
53+
}
2954
vm.productsList = response.result.products;
3055

3156
if ($scope.model.value != undefined && $scope.model.value.length > 0) {
@@ -86,8 +111,9 @@
86111
}
87112

88113
vm.remove = function (node) {
89-
vm.submit(vm.selectedProducts.filter(el => el.id != node.alias));
90-
loadProductsPreview();
114+
vm.previewNodes = vm.previewNodes.filter(el => el.alias != node.alias);
115+
vm.selectedProducts = vm.selectedProducts.filter(el => el.id != node.alias);
116+
vm.submit(vm.previewNodes.length == 0 ? [] : vm.selectedProducts.filter(el => el.id != node.alias));
91117
}
92118

93119
function checkConfiguration(callback) {
@@ -114,19 +140,17 @@
114140
vm.previewNodes = [];
115141

116142
var ids = $scope.model.value.split(",");
117-
118-
var list = vm.productsList.filter(el => {
119-
var id = ids.find(e => e == el.id);
120-
return id !== undefined ? el : null;
121-
});
122-
vm.selectedProducts = list;
123-
124-
list.forEach(el => {
125-
vm.previewNodes.push({
126-
icon: "icon-shopping-basket",
127-
name: el.title,
128-
alias: el.id
129-
});
143+
umbracoCmsIntegrationsCommerceShopifyResource.getProductsByIds(ids).then(function (response) {
144+
if (response.isValid) {
145+
response.result.products.forEach(el => {
146+
vm.selectedProducts.push(el);
147+
vm.previewNodes.push({
148+
icon: "icon-shopping-basket",
149+
name: el.title,
150+
alias: el.id
151+
});
152+
})
153+
}
130154
});
131155
}
132156

@@ -146,6 +170,28 @@
146170
if (vm.config.validationLimit.max != null)
147171
return vm.config.validationLimit.max >= updatedCount;
148172
}
173+
174+
// pagination events
175+
function nextPage(pageNumber) {
176+
getProducts(vm.pagination.nextPageInfo);
177+
}
178+
179+
function prevPage(pageNumber) {
180+
getProducts(vm.pagination.previousPageInfo);
181+
}
182+
183+
function togglePage(pageNumber) {
184+
if (pageNumber > vm.pagination.pageNumber) {
185+
// go to next
186+
getProducts(vm.pagination.nextPageInfo);
187+
vm.pagination.pageNumber = vm.pagination.pageNumber + 1;
188+
}
189+
else {
190+
// go to previous
191+
getProducts(vm.pagination.previousPageInfo);
192+
vm.pagination.pageNumber = vm.pagination.pageNumber - 1;
193+
}
194+
}
149195
}
150196

151197
angular.module("umbraco")

‎src/Umbraco.Cms.Integrations.Commerce.Shopify/App_Plugins/UmbracoCms.Integrations/Commerce/Shopify/js/shopify.resource.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,17 @@
2929
$http.get(`${apiEndpoint}/ValidateAccessToken`),
3030
"Failed");
3131
},
32-
getProductsList: function() {
32+
getProductsList: function(pageInfo) {
3333
return umbRequestHelper.resourcePromise(
34-
$http.get(`${apiEndpoint}/GetList`), "Failed to get resource");
34+
$http.get(`${apiEndpoint}/GetList?pageInfo=${pageInfo}`), "Failed to get resource");
35+
},
36+
getProductsByIds: function (ids) {
37+
return umbRequestHelper.resourcePromise(
38+
$http.post(`${apiEndpoint}/GetListByIds`, { ids: ids }), "Failed to get resource");
39+
},
40+
getTotalPages: function () {
41+
return umbRequestHelper.resourcePromise(
42+
$http.get(`${apiEndpoint}/GetTotalPages`), "Failed to get resource");
3543
}
3644
};
3745
});

‎src/Umbraco.Cms.Integrations.Commerce.Shopify/App_Plugins/UmbracoCms.Integrations/Commerce/Shopify/package.manifest

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,8 @@
77
"~/App_Plugins/UmbracoCms.Integrations/Commerce/Shopify/js/productPickerSettings.controller.js",
88
"~/App_Plugins/UmbracoCms.Integrations/Commerce/Shopify/js/shopify.resource.js",
99
"~/App_Plugins/UmbracoCms.Integrations/Commerce/Shopify/js/shopify.service.js"
10+
],
11+
"css": [
12+
"~/App_Plugins/UmbracoCms.Integrations/Commerce/Shopify/css/shopify.css"
1013
]
1114
}

‎src/Umbraco.Cms.Integrations.Commerce.Shopify/App_Plugins/UmbracoCms.Integrations/Commerce/Shopify/views/productPickerOverlay.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,16 @@
7676
position="center">
7777
<localize key="content_listViewNoItems">There are no products in the list.</localize>
7878
</umb-empty-state>
79+
<!-- Pagination -->
80+
<div class="shopify-pagination flex justify-center" ng-show="!vm.loading">
81+
<umb-pagination page-number="vm.pagination.pageNumber"
82+
total-pages="vm.pagination.totalPages"
83+
on-next="vm.nextPage"
84+
on-prev="vm.prevPage"
85+
on-change="vm.changePage"
86+
on-go-to-page="vm.goToPage">
87+
</umb-pagination>
88+
</div>
7989

8090
<!-- Min Max help messages-->
8191
<div class="umb-contentpicker__min-max-help" ng-if="(model.config.validationLimit.max > 1 || model.config.validationLimit.min > 0)">

‎src/Umbraco.Cms.Integrations.Commerce.Shopify/Constants.cs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ public static class Constants
99

1010
public const string ProductsApiEndpoint = "https://{0}.myshopify.com/admin/api/{1}/products.json";
1111

12+
public const string ProductsCountApiEndpoint = "https://{0}.myshopify.com/admin/api/{1}/products/count.json";
13+
14+
public const int DEFAULT_PAGE_SIZE = 10;
15+
1216
public static class RenderingComponent
1317
{
1418
public const string DefaultV8ViewPath = AppPluginFolderPath + "/Render/Products.cshtml";

‎src/Umbraco.Cms.Integrations.Commerce.Shopify/Controllers/ProductsController.cs

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
using Umbraco.Cms.Integrations.Commerce.Shopify.Configuration;
77

88
using static Umbraco.Cms.Integrations.Commerce.Shopify.ShopifyComposer;
9+
using System.Linq;
10+
911

1012
#if NETCOREAPP
1113
using Microsoft.Extensions.Options;
@@ -63,6 +65,17 @@ public async Task<string> GetAccessToken([FromBody] OAuthRequestDto authRequestD
6365
[HttpPost]
6466
public void RevokeAccessToken() => _apiService.RevokeAccessToken();
6567

66-
public async Task<ResponseDto<ProductsListDto>> GetList() => await _apiService.GetResults();
68+
public async Task<ResponseDto<ProductsListDto>> GetList(string pageInfo) => await _apiService.GetResults(pageInfo);
69+
70+
public async Task<ResponseDto<ProductsListDto>> GetListByIds([FromBody] RequestDto dto) =>
71+
await _apiService.GetProductsByIds(dto.Ids.Select(p => (long.Parse(p))).ToArray());
72+
73+
[HttpGet]
74+
public async Task<int> GetTotalPages()
75+
{
76+
var productsCount = await _apiService.GetCount();
77+
78+
return productsCount / Constants.DEFAULT_PAGE_SIZE + 1;
79+
}
6780
}
6881
}

‎src/Umbraco.Cms.Integrations.Commerce.Shopify/Editors/ShopifyProductPickerValueConverter.cs

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -48,21 +48,20 @@ public override object ConvertIntermediateToObject(IPublishedElement owner, IPub
4848
{
4949
if (inter == null) return null;
5050

51-
var ids = (long[]) inter;
51+
var ids = (long[])inter;
5252

53-
var t = Task.Run(async () => await _apiService.GetResults());
53+
var t = Task.Run(async () => await _apiService.GetProductsByIds(ids));
5454

5555
var result = t.Result;
5656

5757
var products = from p in result.Result.Products
58-
where ids.Contains(p.Id)
59-
select new ProductViewModel
60-
{
61-
Id = p.Id,
62-
Title = p.Title,
63-
Body = p.Body,
64-
Image = p.Image.Src
65-
};
58+
select new ProductViewModel
59+
{
60+
Id = p.Id,
61+
Title = p.Title,
62+
Body = p.Body,
63+
Image = p.Image?.Src
64+
};
6665

6766
return products.ToList();
6867
}

0 commit comments

Comments
 (0)