Developers

CSS SELECTORS

[data-adsguncode]

Targeting Applied Discount Codes

AdsGun provides a powerful way to style elements based on applied discount codes using CSS attribute selectors. This allows you to dynamically change the appearance of your site when specific codes are active.

1
2
3
4
5
6
7
8
9
10
‍

[data-adsguncode~="DISCODE"] {
/* Your styles here */
‍}

This selector targets elements when the discount code "DISCODE" is applied.

Key Points:

The ~= operator matches elements with an attribute value containing a given word, delimited by spaces.

To target multiple codes, you need to chain the selectors.

The order of the chained selectors doesn't matter, as it will match regardless of the order the codes were applied.

Examples:

Targeting a single code or multiple codes:

1
2
3
4
5
6
7
8
9
10
‍

[data-adsguncode~="SUMMER2024"] .product-notification,
[data-adsguncode~="BLACKFRIDAY"] .product-notification{
display: block;
background-color: #ffff00;
padding: 10px;
text-align: center;
}

Adding a site-wide banner for a major sale:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
‍

[data-adsguncode~="BIGANNUAL"]::before {
content: "Annual Big Sale - Extra 20% Off Everything!";
display: block;
background-color: #ff0000;
color: white;
text-align: center;
padding: 10px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}

[data-adsguncode~="BIGANNUAL"] {
padding-top: 40px;
}

This corrected version applies the ::before pseudo-element directly to the element with the data-adsguncode attribute (which is the body tag in this case), ensuring that the banner is correctly displayed when the "BIGANNUAL" code is active.
‍
Remember:The data-adsguncode attribute is added to the body tag.
‍
When using pseudo-elements like ::before or ::after, apply them directly to the selector with the data-adsguncode attribute.
‍
Adjust other styles (like padding-top) on the same selector to accommodate the added elements.

JS EVENTS

* AdsGun::ready

This event fires when the AdsGun library is loaded and the AdsGun object is attached to the window, but before initialization begins.

1
2
3
4
5
6
7
8
9
10
‍

window.addEventListener('AdsGun::ready', () => {
// AdsGun object is available, but not yet initialized
// Use this for early setup if needed
});

* AdsGun::init

This event is dispatched after the initialization completes. The initialization checks for applicable discount codes, applies them, and displays savings.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

window.addEventListener('AdsGun::init', () => {
// AdsGun is fully initialized
// Discounts have been applied and savings are displayed
// Safe to use all AdsGun features now
});

JS FUNCTIONS

AdsGun.activate

The activate function is an asynchronous method that applies discount codes using JavaScript.

It accepts a string parameter containing one or more codes, separated by commas if multiple codes are provided.
‍
Parameters
‍
* codes (string): A single code or multiple codes separated by commas (e.g.,
"CODE" or "CODE1,CODE2,CODE3")

Returns
‍
A Promise that resolves when the activation process is complete.

Examples
‍
Using async/await:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
‍

async function applyDiscounts () {
try {
await AdsGun.activate("SUMMERSALE");
console.log("Discount applied successfully");
} catch (error) {
console.error("Error applying discount:", error);
}
}

Using .then():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
‍

AdsGun.activate("SUMMERSALE,BLACKFRIDAY")
.then(() => {
console.log("Discounts applied successfully");
})
.catch((error) => {
console.error("Error applying discounts:", error);
});

AdsGun.deactivate

The deactivate function is an asynchronous method that deactivates all applied codes.

By default, it reloads the page after deactivation, but this behavior can be prevented.

Parameters

preventReload (boolean, optional): If set to true, prevents the page from reloading after deactivation. Default is false.

Returns

A Promise that resolves when the deactivation process is complete.

Examples

Using async/await:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

async function removeDiscounts () {
try {
await AdsGun.deactivate();
// Page will reload by default
} catch (error) {
console.error("Error removing discounts:", error);
}
}

‍async function removeDiscountsWithoutReload() {
try {
await AdsGun.deactivate(true);
console.log("Discounts removed without page reload");
} catch (error) {
console.error("Error removing discounts:", error);
}
}

Using .then():
‍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

AdsGun.deactivate()
.then(() => {
// Page will reload by default
})
.catch((error) => {
console.error("Error removing discounts:", error);
});

AdsGun.deactivate(true)
.then(() => {
console.log("Discounts removed without page reload");
})
.catch((error) => {
console.error("Error removing discounts:", error);
});