Add System Content
In this guide, I outline the steps required to add administrable content to a system page in the Storefront. I use the example of adding content to the cart, as shown below.
Create System Content
Start by creating a content instance with one or more blocks within your seeds. I use the following decorator to add a Cart content instance.
# app/seeds/workarea/system_content_seeds.decorator
module Workarea
decorate SystemContentSeeds do
def perform
super
add_cart
end
def add_cart
styles = 'background: yellow; text-align: center; padding: 1em;'
html = "<p style='#{styles}'>Cart System Content</p>"
content = Content.for('Cart')
content.blocks.create!(type: 'html', data: { html: html })
end
end
end
Test Admin
You can search for this system page in the Admin.
And view the content to confirm your content and blocks exist.
Extend or Create View Model
To display this content in the Storefront, find (or create) the view model used for the particular Storefront page. Include Workarea::Storefront::DisplayContent
in the view model and then implement content_lookup
, returning the name
of the content to be displayed.
For my example, I decorate the cart view model, associating it with the Cart content.
# app/view_models/workarea/storefront/cart_view_model.decorator
module Workarea
module Storefront
decorate CartViewModel do
decorated do
include DisplayContent
end
def content_lookup
'Cart'
end
end
end
end
Render Blocks in Storefront
Now you can call content_blocks
on the view model to retrieve the blocks to render in the Storefront. Override or append to the view to render the blocks.
The Storefront's cart view includes the following append point.
= append_partials('storefront.cart_additional_information', cart: @cart)
So I can append a partial here and access the cart view model using the local variable cart
within my partial. I use the following partial.
/ app/views/workarea/storefront/carts/_content.html.haml
= render_content_blocks(cart.content_blocks)
And I use the following initializer to append the partial.
# config/initializers/appends.rb
Workarea.append_partials(
'storefront.cart_additional_information',
'workarea/storefront/carts/content'
)
Test Storefront
You can now test the feature end-to-end in your browser to confirm it is working as expected.
To catch regressions, write a system test confirming the correct blocks are rendered in the Storefront. I use the following test.
# test/system/workarea/storefront/cart_system_test.decorator
module Workarea
module Storefront
decorate CartSystemTest do
def test_cart_content
styles = 'background: yellow; text-align: center; padding: 1em;'
html = "<p style='#{styles}'>Cart System Content</p>"
create_content(
name: 'cart',
blocks: [
{
type: 'html',
data: { html: html }
}
]
)
visit storefront.product_path(@product)
select @product.skus.first, from: 'sku'
click_button t('workarea.storefront.products.add_to_cart')
click_link t('workarea.storefront.carts.view_cart')
assert(page.has_content?('Cart System Content'))
end
end
end
end
Help Us Improve this Doc
Was this helpful? Open a GitHub issue to report a problem with this doc, suggest an improvement, or otherwise provide feedback. Thanks!