Introduction
Couponly - Deals and Coupons template is a creative and responsive no-code web-app template suitable for coupons, deals and retail industry. Features credit card and paypal payments, cashbacks, giftcards (Giftbit API) and more
Features
- Stripe and PayPal payments
- Pretty and SEO friendly URLs and
- Giftcard purchase powered by Giftbits
- Optional cashback reward system
- Admin dashboard for managing users, offers, brands, giftcards and more
Data Structure
User
This data contains information about the users like name, photo, phone number etc. It has a cart, list of orders & purchased giftcards, list of saved offers as well as a wallet for storing rewards (cashback earnings).
Brand
Brand data contains the name, logo, description website, gift card of the specific brand. It also contains offers, giftcards and giftcard sales related info. Also it tells the specific categories the brand falls under.
Category
Category data contains information about the list of brands that are under each category, it contains the specific name of the category.
Alpha_num
This is used to categorize brands by the first letter or number in their name. It contains a list of brands with the said alphanumeric as their first character.
Gift Card
This data contains the information on each gift cards supplied by the specific brand, it contains the price of the gift card, an optional cashback amount and also has a field that determines whether the giftcard should be visible for purchase or not.
Offer
Offer data contains information about the various offers of a particular brand, it contains the discount on that offer, the offer type (promo or sale), the offer code or sale link, expiry date of the offer, offer usage and some descriptive info.
Order
Order data contains information on all orders purchased by customers, it contains the basic details of the specific customer and also includes the order_items, date of payment, channel of payment, payment reference, status of the order and additional info.
Order_item
The order item stores a giftcard and the quantity being purchased by the customer. The user's cart contains a list of order items before they are stored in an order.
Purchased_giftcards
These are singular giftcard units that have been purchased (via Giftbit API or other). They contain a unique redemption link for said giftcard amount and some additional info.
Pages
The main pages of this template are the landing page, gift cards, categories, brands and the user account page.
index
This is the homepage of this web template. It is fully responsive and has a slide out mobile menu. It also contains floating thumbnails of some brands. The buttons on the hero section contains an admin and guest login button; which takes you to the dashboard page and login page respectively.
Next on the index page is the abridged offer section that shows you some of the brands top offers.
The next section contains a brief display on the gift card deals offered by brands
Next is the popular category section that shows you an array of the various categories the brands are a part of, each category is clickable so that you can view them specifically.
The next section contains a view of some brands affiliated with the template, then move on to the section where we have an input to subscribe to our newsletter.
The last section on the home page is the footer section that has quick-links, social media profile of the company and a brief information about couponly.
gift cards
This page contains a view of all brands with gift cards and a view for a selected brand with the list of giftcards the brand has. The view that shows is dependent on the URL. If it contains a brand then the detailed view shows otherwise the view for all brands with giftcards is shown. This is handled by the Router plugin.
coupons
This page contains a view of all brand offers and a view for a selected category which shows only offers in that category and a side panel for switching to other categories. The view that shows is dependent on the URL. If it contains a category then the detailed view shows otherwise the view for all offers is shown. This is handled by the Router plugin.
brands
This contains a view for all brands grouped by alphanumeric and a view for a selected brand which contains some descriptive info and the brand's offers. The view that shows is dependent on the URL. If it contains a brand then the detailed view shows otherwise the view for all brands is shown. This is handled by the Router plugin.
cart
This contains your shopping items that you've added to your shopping cart and a payment summary with a checkout button that opens the checkout popup.
account
The account page is for registered and logged in users to see their rewards, purchased giftcards, saved offers and to manage their profile & settings.
receive
This page is where gift card recipients who are not registered users can access their giftcards.
search
This page displays search results for a keyword search from the search boxes in the template. It displays results for brands and categories handled by the Search and Autocorrect plugin.
admin
The dashboard can be used to make changes to the template such as editing brands, adding new brands, editing gift cards, adding and deleting gift cards, editing team, adding and deleting team, adding site details such as logo and description, adding and deleting categories and updating user profile.
The admin page is currently open to all visitors logged in or not but with read-only access (they can't perform any actions). To have full access the user must have their current user's is_admin field set to yes. There is also a disabled workflow that redirects users back to previous page if they don't have admin access. You should enabled this workflow when you get this template. Step by step below:
- Signup as a user
- Find your user in the Bubble database and set is_admin field to yes
- Go to the /admin page workflow tab and enable the 2nd workflow
- Go to the /admin page design tab, click Group Page element, untick "This element is visible on page load"
- Freely visit the admin page with full access as long as you are logged in while users without is_admin set to yes would have no access.
Specific References
Payments
This template supports two payment options, Stripe and PayPal.
To setup your stripe account, go to https://stripe.com, create an account. You will be allowed to access your dashboard once you have successfully verified your email address and activated your account.
Click on Developers and then, API keys. Copy your API keys. Ensure to use a live API key when your template goes live.To setup Paypal, check the Paypal plugin for instructions.
Giftbit API
This template uses the Giftbit API for giftcard purchases. If you want to setup this API you would need one API key for development/test version and another for live version.For Test API key
- In your dashboard hover on your business to click API keys or visit https://testbedapp.giftbit.com/userAccountManagement/apiKeyManagement
- Generate a new API key
- In your Bubble Editor go to plugins -> Giftbit and replace the key after "Bearer " with your newly generated API key
For Live API key
- In your dashboard hover on your business to click API keys or visit https://app.giftbit.com/userAccountManagement/apiKeyManagement
- Generate a new API key
- In your Bubble Editor go to plugins -> Giftbit and replace the key after "Bearer " with your newly generated API key
Before going live you need to replace the API root of all API calls changing from api-testbed.giftbit.com to api.giftbit.com. You should read their API docs and also contact them as they have suggested. https://www.giftbit.com/giftbitapi/#/introduction/getting-started
The giftbit testbed app only has about 3 giftcard brands for testing purposes. You will see them when you try to create a new giftcard in the admin. When you go live you will see all brands in the brand selection popup when you try to create a giftcard in the admin. All brands are listed here https://www.giftbit.com/rewards/
To create giftcards for a new brands you need to follow these simple steps:
- Go to your admin dashboard
- Go to giftcards tab
- Click on add giftcard
- Select a giftbit brand from the list
- Search for the corresponding brand in your bubble database on the next popup
- Confirm to add the giftbit code to your database
- Create giftcards of various prices in the next popup
Navigation
Certain pages in this template make use of the Zeroqode Router for Navigation plugin. These pages are brands, coupons, giftcards and accounts.
The way it works is similar for most pages, on page load the URL is inspected and the value of the path is used to determine what values to given the custom states responsible for changing views and in the case where the url contains a slug (a unique readable string used to identify an object in the database), the slug is used to fetch the data to be displayed to a certain group.
Newsletter Subscription
Subscription to newsletters are enabled via mailchimp. go to mailchimp.com, create an account and get the the api key and add to the plugin. Each subscriber is added to the mail list on mail chimp and newsletters can be sent in bulk to the subscribers.
Reusable Elements
This template has 12 reusable elements listed below:
- Brand_dropdown: This is a dropdown of links to top brands used in the two reusable headers
- Categories_dropdown: This is a dropdown of links to top categories used in the two reusable headers
- User_dropdown_menu: This is a dropdown with two modes. It contains a login form for logged out users and links to key account pages for logged in users.
- Footer: Footer with key links and disclaimer
- Giftcard_box: This is a container for the giftcard brand preview shown on the giftcards page
- Header_main: This is one of the two available headers. This header does not contain a search box and is used on pages with a separate searchbox in their hero section.
- Header_search: This is the second of the two available headers. This header contains a search box and is used on pages without separate searchbox in their hero section.
- Long_offer_box: This is a rectangular container for coupons/offers and is used in the brands page to show offers for the particular brand in view.
- Long_offer_box_logo: This is similar to the container above but contains the logo of the brand that has the offer and is used in the accounts page.
- Offer_box: This is a square container for coupons/offers and is used in the home and coupons page to show offers for the particular brand in view.
- Searchbox: This is used for search and is found in the hero section of some pages like home and coupons page. It links to the /search page.
- Newsletter: This is a fullwidth container with a newsletter subscription call-to-action and form.