UB Instant Layered Navigation

There’re a few required steps to enable Amazon S3 feature in UB Instant Layered Navigation:

• Step 1: Install AWS Resource APIs (required step)
• Step 2: Fill in Access key ID and secret access key
• Step 3: Set up buckets
• Step 4: Select Regions

Step 1: (Required) Install AWS Resource APIs

You must install the AWS Resource APIs using Composer by requiring the aws/aws-sdk-php-resources package in your project. You can check out How to install AWS Resource APIs here.

Step 2: Set up access for Amazon S3 usage:

2.1 Fill in Access key ID and Secret access Key

Log into AWS management console (which is available at Https://aws.amazon.com/console), under the user menu, click on My Security Credentials as shown in the following screenshot:

Navigate to Access keys (access key ID and secret access key) section:

Click Create New Access Key, you should see like the following one:

Here, you can click on Show Access Key to view both access key and secret key.

2.2. Bucket Name

S3 consists of buckets. We can think of a bucket as the first level directory within our S3 account. You then can create your own bucket and new folders to store your product data; and set the permissions and other options on that directory (bucket).

To create a new bucket, you start by logging in to the AWS management console.

Under the Storage group, click on S3. You should see a screen similar to the following:

For the purpose of this guide, we create a sample bucket called ‘ubertheme-data’ with a sub folder ‘pub/ub-layered-navigation’:

2.3. Select Region:
AWS S3’s data centers are organized by geographical region around the world. For best performance, you can choose any AWS Region that is geographically close to you to reduce latency, minimize costs, or address regulatory requirements.

Now that you’ve completed all steps to enable Amazon S3 storage, simply move to the next step 4.1.2 How to export data. Once you run the CLI command to export data, your product data will automatically be exported and synced into the S3 bucket you’ve created above. All changes in your exported product data later on will be auto-synced to S3 as well.

4.1.2. How to export data (required step)

Once done, you should see the successful notice as Done!

4.2. How to manage Product attributes

4.2.1. How to add a new Product Attribute into UB Instant Layered Navigation After the installation is complete, UB Instant Layered Navigation has no product attribute in the list yet as in the screenshot below:

You need to add your own Product attributes to fit with your Magento store.Let’s see an example -- Adding a new ‘Color’ attribute. You just need follow the same steps to add other product attributes.Step 1: On the Admin sidebar, tap Stores | (Under Attributes) choose Product. Then click on the Color attribute.You should see the Catalog Input Type for Store Owner setting with 3 types -- Dropdown, Visual Swatch, Text Swatch.

Set Catalog Input Type for Store Owner with a value you wish:

• Dropdown: Dropdown allows listing all values for the field at the same time and accepts only one value.
• Visual Swatch: The visual swatches can describe the true color, texture, or pattern with a hexadecimal color value, or an image.
• Text Swatch: A text swatch is like a button that is used for an attribute value as size.

Step 2: In the same Color attribute configuration panel, move to the Storefront Properties tab, In the Use in Layered Navigation, choose to Filterable(with results). Once done, make sure you clear Cache.

Now the Color attribute should be added into UB Instant Layered Navigation extension.

To check the newly added Color attribute, in the UB Instant Layered Navigation setting panel | General Settings | Sidebar, click Add button (in the Attribute Settings field), then click ‘Select Attribute’ dropdown list, you should see the Color attribute as follows:

4.2.2 How to enable a Product Attribute to display in the store frontend.

Now let’s start enabling the Color attribute added in the previous step to show in your frontend (You apply the same for other attributes)

Step 1: In the Admin Panel, navigate to UB Instant Layered Navigation setting panel | General Settings | Sidebar, click Add button (1):

Then you select Color attribute in the Select Attribute dropdown list (2) and define its Match Type with Swatch value accordingly (3). Depending on specific product attributes, UB Instant Layered Navigation automatically list available types in accordance with such product attribute. For instance, you will see Price attribute with type ‘Range Values’; Categories with types: Single, Dropdown or Multiple and so on.

It’s possible to add one or multiple product attributes at your choice. Simply edit or remove any product attribute as you wish.

To change the order of product attributes shown in the frontend, just drag and drop each product attribute to define your own priority order.

Step 2: After you’re finished, click “Save config” button (4). Make sure you clear cache as well.

Now open up an anchor category on your frontend, you should see the UB Instant Layered Navigation in place:

4.3. How to enable Cron Jobs to update JSON data automatically

As noted in Step 4 -- How to use UB Instant Layered Navigation above, our extension creates an extra JSON database to store your product data. At present, UB Instant Layered Navigation instantly updates key chances of your product data including new products, out-of-stock status, updated price and so on.However, for new added reviews/rating, you need to enable cron job to update such changes to make sure the UB Instant Layered Navigation returns the latest reviews/ratings to your users while filtering. The step is simple.First, in the Admin Panel, navigate to Content | (UB Instant Layered Navigation) Setting | Set the setting “Cron jobs Enabled” to Yes

Second, you activate Magento cron job in the background. If you’re new to this step, learn more on how to set Magento cron jobs in the background follwing this guideline.

5.1.1. Add a new brand
In the Admin Panel, navigate to Content | (UB Instant Layered Navigation) Manage Brands| Click Add New Brand buttona. Basic information
Tap to open Basic Information:

• Status: To enable/disable the brand
• Brand Title: Enter your brand name here
• URL key: If empty, an initial URL key is automatically generated, based on the brand name.
• Logo: Upload your brand logo here. Allow image types: jpg, jpeg, gif, png. If empty, a default placeholder logo is used. To delete a logo, simply check the “Delete image’ checkbox, and click Save Config.
• Store View: Determine scope of store view to display the brand
• Description: Enter brief introduction of the brand
• Position: Enter a number to determine the order of this brand when being listed with other brands.
• Is Featured: set “Yes” to show the brand in the Feature Brand slideshow. Default option is “No”.

b. Products tab:

The Products tab lets you assign multiple products to a brand in one go.

• (1) Select multiple products to assign to the brand
• (2) Check the Featured option, if you want to list the product(s) in the featured products section.
• (3) Check the Bestseller option, if you want the product to be listed on the sidebar Bestseller widget.

Beside, you can also narrow down the products by different criteria, including Categories, Attribute Set, Product Type, Visibility, SKU, Name.

NOTE: There’s another way to manually assign a product to a brand, following steps below:

In your Admin sidebar, tap Products | (Under Inventory) choose Catalog. Then click on the Edit the product:

• Select a brand available in the dropdown list. Or you can create a new Brand at your choice, by clicking the ‘New Brand’ button.
• Set Featured to Yes, if you want to list the product(s) in the featured products section.
• Switch the Bestseller option to Yes, if you want the product to be listed on the sidebar Bestseller widget.

Click Save to save your configurations.

c. SEO Meta Data

• Meta Title: The title appears in the title bar and tab of your browser, and is also used as the title on a search engine results page.
• Meta Keywords: lists the keywords related to the brand. But it is necessary to consider which keywords are relevant for customers to find the brand.
• Meta Description: is a brief overview of the page for search results listings.

Then you click Save Brand, or Save and Continue Edit button if you want to continue edit value. One done, you should go to Cache Management and clean cache.

5.1.2 Import Brands
In the Admin Panel, navigate to Content | (UB Instant Layered Navigation) Manage Brands| Click Import Brands button.

Then you choose your CSV file to import (At present, only CSV file is supported). You can download sample file CSV here. Once done, go to Cache Management and clean cache.
Supposed you add a few more brands and assign related products to such brands, on the frontend, you should see the all-brand page as per our demo.

NOTE: The default url for the all-brand page is yourdomain.com/brands.html. You can use your custom URL for search engine optimization following the section 5.2.2. SEO- Search Engine Optimization below.

Frontend appearance:

5.2. Shop By Brand Configuration

5.2.1 General Settings for all-brand page In the Admin Panel, navigate to Content | (UB Instant Layered Navigation) Settings, you should see the Shop By Brand Settings section:

• Enable: Enable / disable Shop By Brand functionality
• Display link On Top Menu: Enable / disable the All-brand menu in the top navigation
• Top Menu Title: Enter the title for the All-brand menu item
• Show Brand Logo on Product Page: Set Yes, if you want to show the brand logo on Product detail page that links to all products under such brand.
• Default Logo: Allowed file types: png, gif, ipg, jpeg, svg. To delete a logo image, check the “Delete image’ checkbox, and click Save Config.

5.2.2. SEO- Search Engine Optimization

• Brand Url Path: Set the frontend URL path for the Brand listing page. You can also add a key before brand name in URL, for instance /[key]/brand-name.html
• Brand URL Suffix: The suffix can be any combination of lowercase letter (a-z), a period and dash
• Page Title: Enter the brand page title that appears in the title bar and tab of your browser.
• Meta Keywords: lists the keywords related to the listing page. But it is necessary to consider which keywords are relevant for customers to find the brands.
• Meta Description: is a brief overview of the page for search results listings.

5.2.3. Brand Listing page
This section refers to the settings of the all-brand page.a. General settings:

• Brand Listing Text: Enter title of brand listing
• Layout: supports 3 layout options for your choice: Layout -- 1 Column; Layout -- 2 Columns; Layout -- 3 Columns:
  
• Display Brand Title: Set ”Yes” to show title on brand listing page
• Show Number of products: Set “Yes” to show number of products
• Hide Brand Without Product: Set “Yes” to hide brand without product.

b. Default Brand Sorting:

This setting refers to default sorting criteria that Brands will be displayed on the frontpage: by Brand position, Brand title or Featured Brands; and in ascending / descending order. Users can switch easily among these criteria.

Frontend Appearance:

c. Featured Brands

• Show Featured Brand Label: Set “Yes” to show Featured Label on brands.
• Label Text: Enter your own custom Featured Label.

Frontend Appearance:

5.2.4 Brand Detail Page
Once user clicks a specific brand from the all-brand page, they will be directed to a brand detail page that lists all available products under such brand.a. General settings

• Layered Navigation: Determine whether you want to use UB Layered Navigation or default Magento layered navigation functionality. If you use Default Layered Navigation, you will see two layout options for your choice: Layout — 2 Columns Left and Layout-- 2 Columns right
• Display Brand Logo: Set “Yes” to show Brand logo on the Brand detail page
• Display Description: Set “Yes” to show Brand’s brief introduction on the Brand detail page

b. Featured products

Featured Product Display Mode:

• Display By Block: Place featured products on a static block of Brand detail page, beyond the regular product listing.
  • Block Position: Set the position of the block that shows featured products, either at the top or bottom position of the brand detail page.
  • Block Title: Enter the title to show on the Featured product’s section
  • Number of product shown: Specifies the number of products to be shown in featured products section of the Brand detail page. Default value is 4.

  Frontend appearance:

  
• Display Featured Label: Show your custom Featured product label only.
  

  Label text: Enter the text label you want to show on each featured productFront-end Appearance:

  

c. Bestseller Products

• Display Bestseller Products: Set “Yes” to show the bestseller widget on the sidebar of the Brand detail page.
• Block Title: Enter Title of the bestseller widget
• Number of Products Shown: Specifies the number of products to be shown in the sidebar section of the Brand detail page. Default value is 5.

Front-end Appearance:

5.2.5 How to show Brand on the Layered Navigation side bar, with Visual swatch and Text Swatch

Step 1: In the Admin Panel, navigate to Stores| (Attributes) Product. Then search Brand attribute by filtering Attribute code with value ‘ub_brand_id’:

Open the Brand attribute, you set the Catalog Input Type for Store Owner setting with either Visual Swatch or Text Swatch.

Step 2: In the same Brand attribute configuration panel, move to the Storefront Properties tab, In the Use in Layered Navigation, choose to Filterable (with results). Once done, make sure you clear Cache.

Step 3: Navigate back to UB Instant Layered Navigation configuration panel | General Settings | Sidebar, click Add button (in the Attribute Settings field), then click ‘Select Attribute’ dropdown list, you should see the Brand attribute as follows. Simply select the type Swatch, the Visual Swatch or Text Swatch will be applied, based on which one you selected in the Step 1 above.

5.2.6. How to add Featured Brand Widget

• Step 1. In the admin panel of your store, navigate to Content | Widgets | Add Widget. Then select UB Featured Brands type.
  
• Step 2. In the Storefront Properties tab, fill in the widget configuration.
  
  • Type: refers to Default type UB Featured Brands
  • Design Package/Theme: the Name of the theme you selected when creating this widget
  • Widget Title: Enter the title of featured brand widget.
  • Assign to Store Views: Default is All Store View
  • Sort order: Sort Order of widget instances in the same container.
  • Add Layout Update: This section to set up the display of featured brand block. You can configure to show Featured Brand on sidebar page or any position at your choice. In this sample, we set Display on ‘Specified Page’, with Page ‘UB Brand Listing Page’ and Container “Main Content Top”
• Step 3. In the Widget Options tab, define with your own settings:
  
  • Show Block Title: To enable/disable of block title
  • Block Title: Enter the title of featured brand widget to show on frontend.
  • Hide Brand Without Products: Set No, if you want to hide brand that has no associated products.
  • Number of Brand Shown: Specifies the number of brands to be shown in Featured slideshow in the Brand listing page. Default value is 5.

Frontend appearance: