larva modules: buy-now
Available Variants
prototypebuy-now
README
This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.
buy-now
Twig The markup file.
{% if c_lazy_image %}
<div class="{{ buy_now_div_classes }}">
<hr class="{{ buy_now_hr_top_classes }}">
<div class="{{ buy_now_img_classes }}">
{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
</div>
{% include "@larva/objects/o-icon-button/o-icon-button.twig" with c_icon_button %}
<hr class="{{ buy_now_hr_bottom_classes }}">
{% if buy_now_store_credit_text %}
<span class="{{ buy_now_span_classes }}">
{{ buy_now_store_credit_text }}
</span>
{% endif %}
</div>
{% else %}
<p class="{{ buy_now_p_classes }}">
{% include "@larva/objects/o-icon-button/o-icon-button.twig" with c_icon_button %}
</p>
{% endif %}
buy-now
JSON The data object for this pattern.
{
"buy_now_div_classes": "lrv-a-buy-now lrv-u-font-family-basic",
"buy_now_hr_top_classes": "lrv-a-buy-now__hr lrv-a-buy-now__hr--top",
"buy_now_img_classes": "lrv-a-buy-now__image",
"buy_now_hr_bottom_classes": "lrv-a-buy-now__hr lrv-a-buy-now__hr--bottom",
"buy_now_p_classes": "lrv-a-buy-now__p lrv-u-font-family-basic lrv-u-font-size-14",
"buy_now_span_classes": "lrv-a-buy-now__span lrv-u-font-weight-bold lrv-u-text-transform-uppercase lrv-u-color-grey lrv-u-font-size-10",
"buy_now_store_credit_text": "",
"c_lazy_image": {
"c_lazy_image_classes": "",
"c_lazy_image_link_url": false,
"c_lazy_image_link_classes": "lrv-a-unstyle-link",
"c_lazy_image_crop_class": "lrv-a-crop-1x1",
"c_lazy_image_crop_style_attr": false,
"c_lazy_image_link_tab_index_attr": false,
"c_lazy_image_alt_attr": "Lazy loaded image",
"c_lazy_image_src_url": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg",
"c_lazy_image_placeholder_url": "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==",
"c_lazy_image_srcset_attr": false,
"c_lazy_image_sizes_attr": false,
"c_lazy_image_img_classes": "lrv-u-background-color-grey-lightest lrv-u-width-100p lrv-u-display-block lrv-u-height-auto",
"c_lazy_image_height_attr": "",
"c_lazy_image_width_attr": "",
"c_lazy_image_in_initial_viewport": false,
"c_lazy_image_decoding_attr": "async"
},
"c_icon_button": {
"o_icon_button_classes": "lrv-a-unstyle-button lrv-a-unstyle-link lrv-u-cursor-pointer lrv-u-flex lrv-a-buy-now__button lrv-u-font-size-14 lrv-u-font-weight-bold lrv-u-text-transform-uppercase lrv-u-border-t-3 lrv-u-border-r-1 lrv-u-border-b-3 lrv-u-border-l-1 lrv-u-padding-tb-050 lrv-u-padding-lr-1 lrv-u-background-color-white lrv-u-color-black lrv-u-border-color-currentColor",
"o_icon_button_ga_tracking": {},
"o_icon_button_rel_attr": "nofollow",
"o_icon_button_screen_reader_text": "",
"o_icon_button_target_attr": "_blank",
"c_icon": {
"c_icon_link_classes": "",
"c_icon_name": "triangle-right",
"c_icon_target_attr": "_blank",
"c_icon_link_screen_reader_text": "Icon Link",
"c_icon_url": false,
"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
"c_icon_rel_name": "noopener noreferrer",
"c_icon_screen_reader_tag_text": "",
"c_icon_screen_reader_text": "",
"c_icon_screen_reader_title_attr": "Plus Icon"
},
"c_span": {
"modifier_class": "",
"c_span_classes": "lrv-u-margin-l-050",
"c_span_text": "Buy Now",
"c_span_url": false,
"c_span_link_classes": ""
},
"o_icon_button_url": true,
"o_button_url": "#"
}
}