Isaac Janzen
554f03f3da
# Description
This PR adds the ability to apply **group** and **category** restrictions to a **house ad**.
# What is included
- In order to get the group and category selectors to work within `admin/assets/javascripts/discourse/controllers/admin-plugins-house-ads-show.js` I needed to modernize the file.
- I dropped the `bufferedProperty` implementation in favor of a vanilla ember approach
- I added `category_ids` and `group_ids` to our house ads model
- I added tests for group / category restrictions
- I added a preview button to display the house ad
- `/site.json` would return a object called `house_creatives` and a list of key value pairs that matched the ad name with the html, like so:
```js
{ AD_KEY: ad.html }
```
I need access to the category ids on the client to conditionally render the house ads so the new format will be:
```js
{ AD_KEY: { html: ad.html, category_ids: ad.category_ids } }
```
# Screenshots
<img width="658" alt="Screenshot 2024-04-08 at 2 39 22 PM" src="https://github.com/discourse/discourse-adplugin/assets/50783505/b44b386d-65a1-4a2a-a487-d735b13357dd">
# Preview Video
https://github.com/discourse/discourse-adplugin/assets/50783505/6d0d8253-afef-4e15-b6fc-c6f696efd169
132 lines
3.2 KiB
JavaScript
132 lines
3.2 KiB
JavaScript
import { isBlank } from "@ember/utils";
|
|
import discourseComputed from "discourse-common/utils/decorators";
|
|
import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
|
|
|
|
const adIndex = {
|
|
topic_list_top: null,
|
|
topic_above_post_stream: null,
|
|
topic_above_suggested: null,
|
|
post_bottom: null,
|
|
topic_list_between: null,
|
|
};
|
|
|
|
export default AdComponent.extend({
|
|
classNames: ["house-creative"],
|
|
classNameBindings: ["adUnitClass"],
|
|
attributeBindings: ["colspanAttribute:colspan"],
|
|
adHtml: "",
|
|
|
|
@discourseComputed
|
|
colspanAttribute() {
|
|
return this.tagName === "td" ? "5" : null;
|
|
},
|
|
|
|
@discourseComputed("placement", "showAd")
|
|
adUnitClass(placement, showAd) {
|
|
return showAd ? `house-${placement}` : "";
|
|
},
|
|
|
|
@discourseComputed(
|
|
"showToGroups",
|
|
"showAfterPost",
|
|
"showAfterTopicListItem",
|
|
"showOnCurrentPage"
|
|
)
|
|
showAd(
|
|
showToGroups,
|
|
showAfterPost,
|
|
showAfterTopicListItem,
|
|
showOnCurrentPage
|
|
) {
|
|
return (
|
|
showToGroups &&
|
|
(showAfterPost || showAfterTopicListItem) &&
|
|
showOnCurrentPage
|
|
);
|
|
},
|
|
|
|
@discourseComputed("postNumber", "placement")
|
|
showAfterPost(postNumber, placement) {
|
|
if (!postNumber && placement !== "topic-list-between") {
|
|
return true;
|
|
}
|
|
|
|
return this.isNthPost(
|
|
parseInt(this.site.get("house_creatives.settings.after_nth_post"), 10)
|
|
);
|
|
},
|
|
|
|
@discourseComputed("placement")
|
|
showAfterTopicListItem(placement) {
|
|
if (placement !== "topic-list-between") {
|
|
return true;
|
|
}
|
|
|
|
return this.isNthTopicListItem(
|
|
parseInt(this.site.get("house_creatives.settings.after_nth_topic"), 10)
|
|
);
|
|
},
|
|
|
|
chooseAdHtml() {
|
|
const houseAds = this.site.get("house_creatives"),
|
|
placement = this.get("placement").replace(/-/g, "_"),
|
|
adNames = this.adsNamesForSlot(placement);
|
|
|
|
if (adNames.length > 0) {
|
|
if (!adIndex[placement]) {
|
|
adIndex[placement] = 0;
|
|
}
|
|
let ad = houseAds.creatives[adNames[adIndex[placement]]] || "";
|
|
adIndex[placement] = (adIndex[placement] + 1) % adNames.length;
|
|
// check if the ad includes the current category, or if no category restrictions are set for the ad
|
|
// otherwise don't show it
|
|
if (
|
|
!ad.category_ids?.length ||
|
|
ad.category_ids.includes(this.currentCategoryId)
|
|
) {
|
|
return ad.html;
|
|
}
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
|
|
adsNamesForSlot(placement) {
|
|
const houseAds = this.site.get("house_creatives");
|
|
|
|
if (!houseAds || !houseAds.settings) {
|
|
return [];
|
|
}
|
|
|
|
const adsForSlot = houseAds.settings[placement];
|
|
|
|
if (Object.keys(houseAds.creatives).length > 0 && !isBlank(adsForSlot)) {
|
|
return adsForSlot.split("|");
|
|
} else {
|
|
return [];
|
|
}
|
|
},
|
|
|
|
refreshAd() {
|
|
this.set("adHtml", this.chooseAdHtml());
|
|
},
|
|
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
|
|
if (!this.get("showAd")) {
|
|
return;
|
|
}
|
|
|
|
if (adIndex.topic_list_top === null) {
|
|
// start at a random spot in the ad inventory
|
|
Object.keys(adIndex).forEach((placement) => {
|
|
const adNames = this.adsNamesForSlot(placement);
|
|
adIndex[placement] = Math.floor(Math.random() * adNames.length);
|
|
});
|
|
}
|
|
|
|
this.refreshAd();
|
|
},
|
|
});
|