+1 (646) (US) +44 (20) (UK) Product Labels. for Magento 2. ecommerce.aheadworks.com/magento-2-extensions

Transcription

1 Product Labels for Magento 2

2 Table of contents Getting Around...3 Extension Logic...3 Backend Configuration...4 Creating a Label...4 Rule Configuration...7 How to use Variables...10 Label display on different product types...11 Example (with parent and child products)...11 Extension Settings...11 Configuring CSS Parameters...13 Customize CSS Container...13 Customize other CSS Parameters...14 Label Examples (with CSS Parameters)...15 Label Type: Shape...15 Label Type: Text...16 Label Type: Picture...16

3 Getting Around Magento 2 Product Labels extension enables you to perform promotional campaigns in your store with customizable product labels. Choose a label type (CSS shape, text, or uploaded image), and confgure label look (color, size, etc.) in the embedded editor. Put labels in one of the four predefned product image positions or next to product prices for better presentation. Set fexible display rules defning which products and/or product groups your labels should be put on. Compatibility: Magento Open Source 2.2.X, Magento Commerce 2.2.X Extension Logic On the backend, the Product Labels module is divided into labels and their display rules. Labels and rules are confgured separately, meaning that you need to create a label from the dedicated page before defning its display rule. Only one label can be assigned to the same rule, but you can set multiple display rules for the same label. The division between labels and rules is made for a simple reason: rules defne the products labels should be put on. Labels themselves are just visual presentation means. Thus, multiple labels can be displayed on the storefront according to the same rule, and the same label can be shown under multiple rules. You can change the look of your labels any time you need, and they will still be shown under the previously attributed rules.

4 Backend Confguration Creating a Label Start your work with Product Labels by going to Marketing > Product Labels by Aheadworks > Labels. The 'Labels' grid enumerates all the previously confgured labels and contains the following columns: ID - an ID of a label; Name - the label's title; Type - the label's design type; Rule Name - the title of the rule assigned to the label; Label view - the look of the label; Position - the label's position within a product block; Action - a column with the link to the label edit page.

5 If required, you can change the name and position of individual labels right in the grid. To do this, you should click on the corresponding label row and edit values in the 'Name' and 'Position' columns. The 'Actions' drop-down above the grid allows you to Delete the selected label(s) individually or massively. To create a new label, click on the 'Add Label' button at the top right of the page. As we said earlier, the 'View' active link in the 'Action' column redirects you to the 'Edit Label' page. Let's take a look at it.

6 Name - the title of the label; Position - the location of the label within the product block. The Product Labels module allows creating labels of one of the following display Types: CSS shape - a customizable object that can be presented in one of the seven provided forms (selected in the 'Shape Type' drop-down); Uploaded image - an uploaded image that will be your label (the image is uploaded in the original resolution by clicking on the 'Upload' button in the 'Image' section); Text only - a simple text against a custom background (confgured in the CSS editor). Below you can see how each label type looks on the storefront (with the initial label and rule confguration): Having defned the type of your label, confgure the following set of parameters: Test Text - the text of the label shown in real time;

7 Customize Container - CSS shape settings (the text is placed in the center of the container); Customize Label - specifc CSS label parameters. Read more about CSS parameters here. Having completely confgured the look of your label, you can expand the 'Advanced Settings / CSS' tab below each of the above sections. There you will see CSS codes that can be changed manually if required (for advanced users). The label is created. Click on the 'Save' button at the top of the page to apply the label or choose the 'Save and Continue Edit' option if you want to make some amendments to it. Rule Confguration Having created the label, next, you should defne a display rule for it. Go to Marketing > Product Labels by Aheadworks > Rules.

8 The 'Rules' grid lists all the previously confgured display rules. The data presented in the grid is divided into the following columns: ID - an ID of a rule; Rule Name- the rule's title; Priority - the priority of the rule defning the display order of the labels put on the same product(s) and/or product group(s)); Status - the rule's status (active or inactive); Web Site - website(s) the rule is applied to; Label Name - the title of the assigned label; Action- contains the 'View' active link to the edit rule page. If required, you can change name, priority, status, and position of individual rules and reassign labels to them right in the grid. To do this, you should click on the corresponding rule row and edit the values in the corresponding columns. From the 'Actions' drop-down above the grid, you can perform individual or mass actions as follows: Change Status - edit the status of the selected rule(s): enable or disable; Delete - delete the selected rule(s); Replace label - assign a new label to the selected rule(s). To add a new rule, click on the 'Add New Rule' button at the top right of the page. By clicking on the 'Apply Rules' button above the grid, you will update the catalog. The label confguration process starts with indicating the following parameters: To re-index the confgured rules and apply them on the storefront, go to the System > Tools > Index Management and select the 'Aheadworks Product Labels' extension to be reindexed. Now, we will explore the 'Edit Rule' page settings.

9 Rule confguration starts with enabling it in the 'Enable Rule' section. Then, you need to specify the rule's title in the 'Rule Name' feld and assign a label to it from the 'Label' drop-down. The drop-down menu lists all the previously created labels. Next, indicate Rule Priority. In the 'Website' section, you need to select the website(s) the rule should be applied to. The 'Customer Groups' section allows you to select customer group(s) who can view the label assigned to the rule.

10 Then, select rule duration in the 'From To' felds. In the 'Product Conditions' section, you can exactly set products or product group(s) the rule will be applied to. Do this by setting the 'Product Attributes' and/or 'Product Special' parameters. The latter parameter set allows you to defne the stock range the rule will be applied to. You can defne the stock range value to be greater, lesser, or within a particular interval. If you have multiple stores, you can defne individual label texts for each store view. Do this in the 'Frontend Label Text' section. The rule is confgured. Click on the 'Save' button to proceed to the grid where it should be applied. Alternatively, you can apply the rule right from the page by clicking on the 'Save and Apply' button. How to use Variables The Product Labels extension allows you to implement different variables for your label texts. Those include: {attribute: code} - attribute value (example: 'Black items on sale'); {save_percent} - discount percentage (example: 'Save 5%'); {save_amount} - discount amount (example: 'Save 50$'); {price} - regular price (example: 'Price is 10$'); {special_price} - special price (example: 'For 10$ only'); {stock} - stock amount (example: '3 items left'); {br} - new line (used to move some part of the text to a new line) {sku} - product SKU (used to specify stock keeping units of the product(s) ) {spdl} - X days left for a special price (example: '10 days left for a special price'); {sphl} - X hours left for a special price (example: '3 hours left for a special price'). Thus, you can dynamically change the text of your labels depending on a view.

11 Label display on different product types Every child product in your catalog can be covered by multiple conditions. Thus, child products may have multiple labels put on them. This way, many labels can be displayed on the same parent (confgurable) product. Example (with parent and child products) Put one label on child items whose stock is greater than 50 and another one - on items with stock less than 50. As a result, different child products will have different stock conditions. The question is: which labels should be displayed? Thus, if you need to put labels on parent items only, set their attributes in product settings. By doing this, you will pinpoint products that should have labels put on them. For stock conditions, this will work in the following way: frst, you should sum up stock values of all child products. Then, defne whether this sum meets the previously specifed conditions. If yes, display a label on the parent product. Extension Settings To confgure the general extension parameters, go to Stores > Confguration > AHEADWORKS EXTENSIONS > Product Labels by Aheadworks.

12 The 'Confguration' page includes four parameters (particularly valuable if you need to put several labels on the same product(s) and/or product group(s)): Distance from Label with Higher Priority, px - the margin between two labels that overlap each other (those ones with the same rule priority); Label Alignment - how overlapping labels should line up: horizontally or vertically; Max. Number of Labels Over Product Image - the maximum number of labels that can be put on product images; Max. Number of Labels Next to Price - the maximum number of labels that can be put next to product prices. Labels can be aligned vertically by one of the ways introduced below.

13 Horizontal alignment implies the following options: Labels with higher priority will remain in the position defned in the rule parameters. The rest of the labels will utilize the distance and alignment parameters set in the general confguration settings. Confguring CSS Parameters Besides the WYSIWYG editor settings, you can confgure almost any visual aspect of your labels. Customize CSS Container The 'Customize Container' section allows you to tweak the following main parameters: background - shape color (alphabetic, HEX, RGB, RGBA, HSL, or HSLA values); border-radius - shape round radius; margin - shape external indent (in pixels); transform:rotate - shape rotation angle (in degrees);

14 width - shape width (in pixels); height - shape height (in pixels); max-width - maximum shape width (in pixels); max-height - maximum shape height (in pixels); min-width - minimum shape width (in pixels); min-height - minimum shape height (in pixels); opacity - shape opacity (numerical value). Customize other CSS Parameters In addition to the CSS container, you can confgure the look of your labels with the following main parameters: color - text color (alphabetic, HEX, RGB, RGBA, HSL, or HSLA values); border - border width and color (alphabetic and/or pixel values); padding - internal indent (in pixels); font - text font (alphabetic values); font-size - text size (alphabetic and/or pixel values). The scope of available fonts can be specifc for each individual Magento theme. You can see the full CSS parameter list here.

15 Label Examples (with CSS Parameters) Label Type: Shape

16 Label Type: Text Label Type: Picture

17 The Product Labels extension is compliant with Magento themes that not supporting LESS. To enable the compliance, in app/code/aheadworks/onestepcheckout/view/frontend/layout/onestepcheckout_ind ex_index.xml, fnd the following lines: <head> <!-- Uncomment for enable compatibility with themes which not supported LESS compilation --> <!-- <css src="aheadworks_onestepcheckout::css/aw_osc_styles.css"/> --> </head> and convert them to the following: <head> <!-- Uncomment for enable compatibility with themes which not supported LESS compilation --> <css src="aheadworks_onestepcheckout::css/aw_osc_styles.css"/> </head> For an in-depth look visit Product Labels demo store at the extension s product page. Feel free to contact our support team with any questions: Submit a help desk ticket Call us: US: +1 (646) UK: +44 (20)