Class: Www::ProductCardComponent

Inherits:
ApplicationComponent show all
Includes:
ActionView::Helpers::AssetTagHelper, ActionView::Helpers::SanitizeHelper, ActionView::Helpers::TagHelper, ActionView::Helpers::UrlHelper, ApplicationHelper
Defined in:
app/components/www/product_card_component.rb

Overview

ViewComponent: renders the product card block.

Renders a product card on the public site in vertical or horizontal
layouts, with optional SKU, feature collapse, "what's included",
pricing, CTA button, motion animation, and per-item JSON-LD schema.

Constant Summary

Constants included from ApplicationHelper

ApplicationHelper::CF_WEB_ANALYTICS_SKIP_PATHS, ApplicationHelper::MARKDOWN_ALLOWED_ATTRIBUTES, ApplicationHelper::MARKDOWN_ALLOWED_TAGS

Constants included from SeoHelper

SeoHelper::AWARDS, SeoHelper::CA_ADDRESS, SeoHelper::CA_BUSINESS_HOURS, SeoHelper::CA_CONTACT_POINT, SeoHelper::CA_CURRENCIES, SeoHelper::CA_DESCRIPTION, SeoHelper::CA_FOUNDING_DATE, SeoHelper::CA_GLOBAL_LOCATION_NUMBER, SeoHelper::CA_LEGAL_NAME, SeoHelper::CA_LOCAL_BUSINESS, SeoHelper::CA_ONLINE_STORE, SeoHelper::CA_RETURN_POLICY, SeoHelper::CA_SALES_DEPARTMENT, SeoHelper::CA_SERVICE_AREA, SeoHelper::CA_URL, SeoHelper::CA_VAT_ID, SeoHelper::CA_WAREHOUSE_DEPARTMENT, SeoHelper::CA_WAREHOUSE_HOURS, SeoHelper::COMPANY_EMAIL, SeoHelper::COMPANY_LOGO, SeoHelper::COMPANY_NAME, SeoHelper::COMPANY_SLOGAN, SeoHelper::EXPERTISE, SeoHelper::FAX_NUMBER, SeoHelper::GS1_COMPANY_PREFIX, SeoHelper::ISO6523_CODE, SeoHelper::PAYMENT_METHODS, SeoHelper::PHONE_NUMBER, SeoHelper::PRIMARY_NAICS, SeoHelper::REFUND_TYPE, SeoHelper::RETURN_FEES, SeoHelper::RETURN_METHOD, SeoHelper::RETURN_POLICY_CATEGORY, SeoHelper::SECONDARY_NAICS, SeoHelper::SOCIAL_PROFILES, SeoHelper::US_ADDRESS, SeoHelper::US_BUSINESS_HOURS, SeoHelper::US_CONTACT_POINT, SeoHelper::US_CURRENCIES, SeoHelper::US_DESCRIPTION, SeoHelper::US_FOUNDING_DATE, SeoHelper::US_GLOBAL_LOCATION_NUMBER, SeoHelper::US_IMAGE, SeoHelper::US_LEGAL_NAME, SeoHelper::US_LOCAL_BUSINESS, SeoHelper::US_ONLINE_STORE, SeoHelper::US_RETURN_POLICY, SeoHelper::US_SALES_DEPARTMENT, SeoHelper::US_SERVICE_AREA, SeoHelper::US_TAX_ID, SeoHelper::US_URL, SeoHelper::US_WAREHOUSE_DEPARTMENT, SeoHelper::US_WAREHOUSE_HOURS

Constants included from IconHelper

IconHelper::CUSTOM_ICON_MAP, IconHelper::CUSTOM_SVG_DIR, IconHelper::DEFAULT_FAMILY

Instance Method Summary collapse

Methods included from ApplicationHelper

#better_number_to_currency, #cf_web_analytics?, #check_or_cross, #check_or_times, #embedded_tab_frame_id, #error_messages, #general_disclaimer_on_product_installation_and_local_codes, #markdown_to_html, #parent_layout, #pass_or_fail, #render_error_messages_list, #render_video_card, #resolved_auth_form_turbo_frame, #return_path_or, #safe_css_color, #set_return_path_if_present, #set_section_if_present, #tab_frame_id, #to_underscore, #turbo_section_wrapper, #turbo_tabs_request?, #url_on_same_domain_as_request, #working_hours?, #yes_or_no, #yes_or_no_highlighted, #yes_or_no_with_check_or_cross

Methods included from UppyUploaderHelper

#file_uploader, #image_uploader, #large_file_uploader_s3, #lead_sketch_uploader, #public_warranty_card_uploader, #rma_image_uploader, #rma_image_uploader_s3, #uppy_uploader, #video_uploader, #warranty_card_uploader

Methods included from ImagesHelper

#image_asset_tag, #image_asset_url, #picture_asset_tag

Methods included from SeoHelper

#add_page_schema, #add_webpage_schema, #canada?, #collect_schema, #company_social_links, #ensure_context_json, #json_ld_script_tag, #local_business_schema, #online_store_id, #online_store_schema, #page_main_entity, #page_main_entity_json, #render_auto_collection_page_schema, #render_collection_page_schema, #render_local_business_schema, #render_online_store_schema, #render_page_schemas, #render_page_video_schemas, #render_webpage_schema, #render_webpage_schema_with_collections, #usa?

Methods included from UrlsHelper

#catalog_breadcrumb_links, #catalog_link, #catalog_link_for_product_line, #catalog_link_for_sku, #cms_link, #delocalized_path, #path_to_sales_product_sku, #path_to_sales_product_sku_for_product_line, #path_to_sales_product_sku_for_product_line_slug, #product_line_from_catalog_link, #protocol_neutral_url, #sanitize_external_url, #valid_external_url?

Methods included from IconHelper

#account_nav_icon, #fa_icon, #star_rating_html

Methods inherited from ApplicationComponent

#cms_link, #fetch_or_fallback, #image_asset_tag, #image_tag, #number_to_currency, #number_with_delimiter, #post_path, #post_url, #strip_tags

Constructor Details

#initialize(option:, index: 0, simple_card: false, include_sku: false, include_feature_collapse: false, include_whats_included: false, show_page_description: false, show_price: false, hide_cta: false, cta_label: 'Learn More', cta_modal_target: nil, open_sections: false, render_schema: true, layout: :vertical, motion: true, image_fit: nil, wrapper_class: nil, wrapper_data: nil) ⇒ ProductCardComponent

Builds the product card component.

image_fit: :contain (default) fits image with bg-light, nil for natural sizing

Parameters:

  • option (Hash) —

    product card option data (title/name, link/url,
    image, price, sku, presenter, etc.)

  • index (Integer) (defaults to: 0) —

    zero-based position of the card in its grid

  • simple_card (Boolean) (defaults to: false) —

    render the stripped-down card variant

  • include_sku (Boolean) (defaults to: false) —

    show the product SKU

  • include_feature_collapse (Boolean) (defaults to: false) —

    render the collapsible feature list

  • include_whats_included (Boolean) (defaults to: false) —

    render the "what's included" section

  • show_page_description (Boolean) (defaults to: false) —

    render the page description block

  • show_price (Boolean) (defaults to: false) —

    show the formatted price

  • hide_cta (Boolean) (defaults to: false) —

    suppress the call-to-action button

  • cta_label (String) (defaults to: 'Learn More') —

    label for the call-to-action button

  • cta_modal_target (String, nil) (defaults to: nil) —

    optional modal target for the CTA

  • open_sections (Boolean) (defaults to: false) —

    render collapsible sections expanded

  • render_schema (Boolean) (defaults to: true) —

    emit per-item JSON-LD collection-page schema

  • layout (Symbol, String) (defaults to: :vertical) —

    :vertical, :horizontal, or :horizontal_full

  • motion (Boolean) (defaults to: true) —

    attach the motion Stimulus controller for scroll-in animation

  • image_fit (Symbol, String, nil) (defaults to: nil) —

    :contain fits image with bg-light,
    nil for natural sizing

  • wrapper_class (String, nil) (defaults to: nil) —

    extra CSS classes appended to the wrapper column

  • wrapper_data (Hash, nil) (defaults to: nil) —

    extra data attributes merged onto the wrapper element



37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
# File 'app/components/www/product_card_component.rb', line 37

def initialize(option:, index: 0, simple_card: false,
               include_sku: false, include_feature_collapse: false,
               include_whats_included: false, show_page_description: false,
               show_price: false, hide_cta: false, cta_label: 'Learn More',
               cta_modal_target: nil,
               open_sections: false, render_schema: true, layout: :vertical,
               motion: true, image_fit: nil,
               wrapper_class: nil, wrapper_data: nil)
  @option = option
  @index = index
  @simple_card = simple_card
  @include_sku = include_sku
  @include_feature_collapse = include_feature_collapse
  @include_whats_included = include_whats_included
  @show_page_description = show_page_description
  @show_price = show_price
  @hide_cta = hide_cta
  @cta_label = cta_label
  @cta_modal_target = cta_modal_target
  @open_sections = open_sections
  @render_schema = render_schema
  @layout = layout.to_sym
  @motion = motion
  @image_fit = image_fit&.to_sym
  @wrapper_class = wrapper_class
  @wrapper_data = wrapper_data || {}
end

Instance Method Details

#horizontal? ⇒ Boolean

Whether the card renders in a horizontal layout variant.

Returns:

  • (Boolean) —

    true when layout is :horizontal or :horizontal_full



68
69
70
 
# File 'app/components/www/product_card_component.rb', line 68

def horizontal?
  @layout.to_s.start_with?('horizontal')
end

#horizontal_full? ⇒ Boolean

Whether the card renders in the full-width horizontal layout.

Returns:

  • (Boolean) —

    true when layout is :horizontal_full



75
76
77
 
# File 'app/components/www/product_card_component.rb', line 75

def horizontal_full?
  @layout == :horizontal_full
end