Offers

Description

Offers modules surface marketing campaigns. There are two parts: a featured offer block that highlights a single campaign, and a carousel that shows the current active offers.

How to edit

1. Manage the offer content on the campaign itself (see Offers & campaigns).
2. In Marketing Settings, make sure the offers you want are in the offers list and marked as active — only active offers appear. The campaign's own schedule applies as well, so an active offer only shows while its campaign is live.
3. Go to Elementor → Editor → Templates and search for Offer to edit the surrounding content, such as the section title, description, and captions.
4. Save, then check a page that uses the template.

The offer cards themselves are generated from your campaign data, so edit the campaign rather than the card.

Variants

Sections

Offer page templates

These are whole-page templates used for offer pages, chosen to suit the audience the page is for:

Featured offer

The section is made up of a title and a featured offer card.

The title is static content and can be edited in Elementor.

The featured offer card is generated from the campaign and uses:

• Campaign title and link, from the campaign post itself
• Campaign image — desktop and mobile versions are set separately on the campaign
• Campaign description and disclaimer
• Q Card / Q Mastercard product data, plus a customer type tag when the campaign's Customer Type Badge is turned on

Captions on the card are static content and can be edited in Elementor.

Badges

Where a card only shows the Q Mastercard badge, that badge is highlighted. To apply this, add the q-mastercard-badge class to the element and it will override the border, background, and text colour.

Offers carousel

The carousel is made up of:

• Title
• Description
• Carousel loader — a Dynamic Posts widget that fetches the offer data
• Carousel container — holds the offer slides
• Carousel script — builds the carousel (see below)

The offer cards are created by the Dynamic Posts widget using the CK – Offers – Dynamic template component template, then moved into the carousel container by the script.

Classes

Primary classes used by the offers components:

Styling is done through a combination of the built-in page builder options as well as custom CSS where needed.

Script

This script moves the loaded offer cards into the carousel container and starts the carousel. It is compiled to JavaScript and added using the HTML editor template.

import Swiper from "swiper";

function moveContent() {
  const cards = document.querySelectorAll(
    ".offer-carousel-content-loader .dce-posts-wrapper .dce-post-item",
  );
  const target = document.querySelector(".offers-swiper .swiper-wrapper");

  if (target) {
    cards.forEach((card) => {
      target.appendChild(card);
      card.classList.add("swiper-slide");
    });
  }
}

function createPagination() {
  const paginationCount = document.querySelectorAll(
    ".offer-carousel-content-loader .dce-posts-wrapper .dce-post-item",
  ).length;
  let paginationHtml = "";
  for (let i = 0; i < paginationCount; i++) {
    paginationHtml += `<span class="swiper-pagination-bullet"><div class="display-dot"></div></span>`;
  }

  const target = document.querySelector(".offer-carousel-interactions");
  if (target) {
    target.insertAdjacentHTML(
      "beforeend",
      `<div class="offers-pagination">
            ${paginationHtml}    
        </div>`,
    );
  }
}

function initailiseSwiper() {
  const swiper = new Swiper(".offers-swiper", {
    spaceBetween: 12,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    pagination: {
      el: ".offers-pagination",
      clickable: true,
      renderBullet: function (index: number, className: string) {
        return (
          '<span class="' + className + '"><div class="display-dot"></div></span>'
        );
      },
    },
    breakpoints: {
      768: {
        slidesPerView: 2,
      },
      1024: {
        slidesPerView: "auto",
      },
    },
  });
}

function waitForSwiper(method: () => void) {
  if (typeof Swiper !== "undefined") {
    method();
  } else {
    const checkInterval = setInterval(() => {
      if (typeof Swiper !== "undefined") {
        clearInterval(checkInterval);
        method();
      }
    }, 100);
  }
}

document.addEventListener("DOMContentLoaded", async () => {
  waitForSwiper(() => {
    createPagination();
    moveContent();
    initailiseSwiper();
  });
});