In this video, we'll edit our Shop view and add a block that will contain the most recent products. We'll use AJAX to page through products, and we'll clone the block display so that we can display the block in different locations on different pages.

  • Go to "Structure => Views => Shop" (admin/structure/views/view/shop)
  • Click "+ Add" in the display section
  • Choose "Block"

Title

  • Title
    • Click "Shop"
    • For: This block(override) (This settings will affect the block only. Be careful when working with multiple displays, always override those settings that you want to be different than other displays. It’s not uncommon to be editing one display and realize you’re changing all of the other displays as well.)
    • Title: Most recent products
  • (Apply (this display))

Notice that the title setting is in italics, this indicates that this setting is overriding the defaults.

Format

We'll override the format settings from Grid to Unformatted list of fields

  • Format
    • Click "Grid"
    • For: This block(override)
    • [x] Unformatted list
  • (Apply(this display))
  • (Apply(this display))

Fields

We'll simplify the display by showing only the Title field, so we’ll remove the other fields.

  • Click the dropdown arrow next to “Add”
  • Choose “Rearrange”
  • For: This block (override)
  • Click “Remove” next to:
    • Content: Product Image
    • Content: Price
    • Content: Availability
    • (author) User: Name Posted by
  • (Apply (this display))

Filter Criteria

Remove the exposed filter

  • Click "Content: Availability (exposed)"
  • For: This block(override)
  • (Remove)

Sort Criteria

Let's sort our items by post date with most recent contents first.

  • Click "Add"
  • For: This block(override)
  • [x] Content: Post date
  • (Apply(this display))
    • [x] Sort descending
  • (Apply(this display))

We won't be sorting by price this time, so let's remove the "Content: Price (asc)"

  • Click "Content: Price"
  • (Remove)

Header

We don't need a header for this block, so let's remove the text

  • Click "Global: Text area"
  • For: This block(override)
  • (Remove)

Footer

We'll also remove the footer

  • Click "Global: Text area"
  • For: This block(override)
  • (Remove)

Pager

  • Use pager
    • Click "Full" next to User pager
    • For: This block override
    • [x] Paged output, mini pager
    • (Apply(this display))
    • Items to display: 5
    • Number of pages: 3
  • (Apply(this display))

Use AJAX

For this block display we will enable AJAX. AJAX is a nice feature that enables paging, table sorting and exposed filters to be used without refreshing the entire page. It is not recommended to use this if the view is the main content of the page, but is very useful for side content. To use AJAX:

  • Click "Advance"
  • Use AJAX
    • Click "No"
    • For: This block (override)
    • [x] Yes
  • (Apply(this display))
  • (Save) (Save the view)

Finally, let's display the block

Display Most recent products block

  • Go to "Structure => Blocks" (admin/structure/block)
  • Scroll down to Disabled
    • Block: View: Shop
    • Region: Choose "Sidebar second"
  • Rearrange the blocks
  • Scroll up to "Sidebar second"
  • Rearrange blocks:
    • View: Shop
    • View: Event Advertisement
    • View: Archive
  • (Save blocks)

Let's go to homepage to see our block.

We now have a block that displays the most recent items on the page. We can also use the pager to view additional products without refreshing the entire page.

Specifying Pages to Display Blocks

Now, if we check the shop page, we’ll notice that these blocks are displaying over our grid. We could select a different option here, but what I think I’ll do is just disable these block for this page.

  • Click “Configure block” for the Archive block
  • Show block on specific pages
    • [x] All pages except those listed: Shop
  • (Save block)
  • Click “Configure block” for the Event Advertisement block
  • Show block on specific pages
    • [x] All pages except those listed: Shop
  • (Save block)

And now I come to the “Most Recent Products” block, but I actually do want to display this on this page. It’s just that I want to display it in the left sidebar on this page. We don’t have the option to put it in multiple regions, so this is a case where we’ll want to clone the display.

If you’re using something like Panels or Context, you’ll already be able to display this in multiple places, but since we’re just using the regular block system, let’s clone this display and display it in multiple places. First, I’ll tell this one to display on all pages except /shop.

  • Click “Configure block” for the Most recent products block
  • Show block on specific pages
    • [x] All pages except those listed: Shop
  • (Save block)

Cloning the Block Display

Now, let’s clone the display.

  • Go to “Structure => Views => Shop” (admin/structure/views/view/shop)
  • Click the Block display
  • Click “Clone block” (You’ll notice the machine name is “block_2” and the original display is) “block_1”.
  • (Save) (Save the view)

And now, let’s display the new block.

  • Go to “Structure => Blocks” (admin/structure/block)
  • Scroll down to the “Disabled” section
  • Find the “View: Shop” block
  • Select the “Sidebar first” region
  • (Save blocks)
  • Click “Configure” for the block in the Sidebar first region
  • Show block on specific pages
    • [x] Only the listed pages: Shop
  • (Save block)

Now when we head home, we have the “Most recent products” block on the right. And when we go to the Shop page, we have the Most recent products on the left. This is a good reason you might want to clone a display if you’re not using Panels or Context.