"On Sale" User Guide

Last modified by aheadWorks on Tue, November 17, 2009 07:03
Source|Old Revisions  

1. Introducing On Sale

The On Sale extension allows you to attract customers’ attention to any product by adding graphical labels to product images. Labels can be displayed on the Category page as well as on the Product page. The label image and text are easily customized for each product: you can use a label that comes with the package or upload your own; you can not only write plain text for the label but also use the predefined variables:

• #DA# – discount amount, e.g. 10%

• #RP# – regular price, e.g. $100

• #SP# – special price, e.g. $90

• #SA# – save amount, e.g. $10

• #NL# – inserts line break

• #ND# – lifetime in days (how many days the product exists in your store)

• #NH# – lifetime in hours (how many hours the product exists in your store)

• #SK# – product SKU

• #ST# – in stock amount

• #CA:attribute_code# – custom attribute

On Sale makes it possible to label your products with texts like “Save $10 on this item today”, “Buy for $29, save $10!”, “Hurry up! 3 phones are left!”, “Only 3 days on the market” – all variables are calculated for each product individually and automatically.

This way the On Sale extension saves your time when running e.g. seasonal discount campaigns, promoting new products or items with special price. In this guide you can find the detailed and illustrated description of each step of the general On Sale label configuration and the examples of three label types’ settings:

• labels for products with special price;

• labels for new products;

• labels for any custom-defined products.

2. On Sale Label Configuration

1. Go to the System → Configuration → aheadWorks Extensions → On Sale backend page.

2. The Product On Sale Label section allows specifying settings of the label displayed on the Product page:

a. In the Display field, set Yes.

b. In the Position field, define the label position relative to the product image.

c. The Image field allows you to specify the image for the label. The predefined label is displayed by default. If you want to use your own image, click the Browse button and upload it.

d. In the Text field, enter the text shown on the image label. Here you can apply all your advertising skills – type any plain text or use the product-dependent variables.

3. The Category On Sale Label section contains the same fields as the Product On Sale Label section. The settings here control the label layout aspects for displaying on the Category page.

4. The Product New Label section allows setting up a label for a new product and has two additional fields:

a. the Days field, where you can set the number of days the label is displayed on the new product image;

b. the Overrides On Sale Label field, where you can set whether the new product label overrides the On Sale label if both of them are enabled.

5. The Category New Label section possesses the same fields as the Product New Label section and serves to set up the new product label for the Category page.

3. Product with Special Price Label Settings

Label Settings

1. To set up the label displayed on each product with special price image, go to the System → Configuration → aheadWorks Extensions → On Sale backend page and set up the Product On Sale Label and Category On Sale Label sections:

a. In the Display field, set Yes.

b. In the Position field, define the label position on the product image.

c. The Image field allows you to specify the image for the label. The predefined label is displayed by default. If you want to use your own image, click the Browse button and upload it.

d. In the Text field, enter the text which will be shown on the image label. Here you can type plain text or use the predefined product-dependent variables.

2. Click the Save Config button.

Special Price Settings

1. Go to the Catalog → Manage Products backend page.

2. Click the Edit link on the right side of the row of the required product.

3. Select the Prices tab in the panel on the left.

4. In the Special Price field, enter the special price.

5. Optionally, in the Special Price From/To Date fields, set the period of time for special price existing.

6. Click the Save button.

Now we can see the On Sale label on the product image of the Category page. The label is placed on the bottom-left of the product image and includes the automatically calculated variable #DA# (discount amount):

The On Sale label on the Product page is displayed on the top-right of the product image. For the label text the variables #SA# (save amount) and #NL# (line break) are used:

Note: to learn how to add a particular label to a specific product with special price (to set it off from other products with special price), see the Any Product Label Settings chapter below.

4. New Product Label Settings

1. To set up the label for a new product go to the System → Configuration → aheadWorks Extensions → On Sale backend page and in the Product New Label and Category New Label sections set the following:

a. In the Display field, set Yes.

b. In the Position field, specify the position of the label on the product image.

c. In the Image field, you can upload your own image for label or use the predefined one.

d. In the Text field, specify the text displayed on the label. You can use plain text or the predefined variables.

e. In the Days field, specify the number of days for label displaying.

f. In the Overrides On Sale Label field, set whether the new product label will override the On Sale label if both of them are enabled.

2. Click the Save Config button.

Now every time when we add a new product, it gets a label with the predefined variable #NH# which calculates the product lifetime automatically and displays it in hours; the variable #NL# takes over words to new lines:

For the Product page we specified the predefined variable #ND# which allows displaying the product lifetime in days:

Note: to specify a label for some particular new product, follow the steps described in the Any Product Label Settings chapter below.

5. Any Product Label Settings

The On Sale extension adds two options in the Product Information panel – Product Label and Category Label. They allow adding labels to any product.

1. Go to the Catalog → Manage Products backend page and click the required product.

2. In the Product Information page, open the Product Label section.

3. In the Display field, set Yes.

4. In the Position field, specify the position of the label on the product image.

5. In the Image field, you can upload your own image for the label or use the predefined one.

6. In the Text field, specify the text displayed on the label. You can use plain text or the predefined variables.

7. Click the Save And Continue Edit button.

Select the Category Label option. It has the same fields as the Product Label option:

Note: the label settings in the Product/Category Label options override the settings configured on the System → Configuration → aheadWorks Extensions → On Sale page.

The variable #NL# inserts line break; the predefined variable #ST# – in stock amount – informs about the number of items left in the store and it is displayed on the Category page:

and on the Product page:

6. Formatting Label Text (for users experienced in CSS only!)

There are two files in the skin/frontend/default/default/onsale/css/ folder – “category_onsale_label.css” and “product_onsale_label.css” – where you can change label text style for the Category and Product page accordingly.

Category Page

To change the label text style for the Category page, open the following file: skin/frontend/default/default/onsale/css/category_onsale_label.css

There are three CSS class definitions where you can specify label text styles for products with special price (onsale-onsale-category-label-text), new products (new-onsale-category-label-text) and any custom-defined product (custom-onsale-category-label-text):

Let’s specify the text style of custom-defined product:

All the changes made are applied to the product image label on the Category page only:

Product Page

To specify the label text style for the Product page, open the following file: skin/frontend/default/default/onsale/css/product_onsale_label.css

There are the same CSS class definitions as in the category_onsale_label.css file: “onsale-onsale-product-label-text” for products with special price, “new-onsale-product-label-text” for new products and “custom-onsale-product-label-text” for any custom-defined product.

To attract more attention to a new product, for example, you can make the label text blink by inserting proper CSS style:




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs