Want to use the Product Custom Field Span Flag Tag for the Price

[lesliekirk]

I like how the custom field Flag works. I'd like to use something similar to dynamically place the product price over thumbnails. I'm probably trying to make this harder than It needs to be and I should probably just use CSS to place the product price over the image. So I figured I'd do a little thinking out loud and see if anyone else might have some creative ideas. FYI - this would be for related products, and a number of other thumbnails generated by the EP Toolkit. Maybe I should start with those and bring that design back over to the related products?

[Matt Zimmermann]

Hi Leslie,

You should be able to pirate the CSS of the flags to create what you are looking for.

[lesliekirk]

Hi Leslie,

You should be able to pirate the CSS of the flags to create what you are looking for.

Yeah, I'm trying. The pirate is fighting back...arrrggghhhh....

[Bruce - PhosphorMedia]

you could cheat and just assign the price to the flag custom field variable...or use something like this:
https://css-tricks.com/snippets/css/corner-ribbon/

[lesliekirk]

you could cheat and just assign the price to the flag custom field variable...or use something like this:
https://css-tricks.com/snippets/css/corner-ribbon/

It's the "cheat" of trying to assign the price to the custom field variable that I'm working on - but I don't want to have to go through and add the price to that field in addition to the product price field.

[Bruce - PhosphorMedia]

If I understand what you are trying to do, this *should* work:

<mvt:foreach iterator="product" array="category_listing:products">
<mvt:assign name="l.settings:product:customfield_values:custom fields:product_flag" value="l.settings:product:price"/>

[lesliekirk]

If I understand what you are trying to do, this *should* work:

<mvt:foreach iterator="product" array="category_listing:products">
<mvt:assign name="l.settings:product:customfield_values:custom fields:product_flag" value="l.settings:product:price"/>

I'm still battling this demon - the issue may reside in the CSS being used. For example - in order to display the flag "SALE" this line of CSS is used:

.flag--sale:after {
content: "SALE";
}

I'm wondering if I can somehow put this inline and have it dynamically generate the price but I'm having trouble wrapping my head around part of it.

[Matt Zimmermann]

You cannot specify inline styles for pseudo-elements because pseudo-elements, like pseudo-classes, are defined in CSS using selectors as abstractions of the document tree that cannot be expressed in HTML. An inline style attribute, on the other hand, is specified within HTML for a particular element. Since inline styles can only occur in HTML, they will only apply to the HTML element that they're defined on, and not to any pseudo-elements it generates.

While frowned upon by browser, you could add an in-context style tag before the element you wish to modify which should override that being called in your style-sheet.

<style>.flag--sale:after { content: "ACTUAL CONTENT";}</style>

[lesliekirk]

You cannot specify inline styles for pseudo-elements because pseudo-elements, like pseudo-classes, are defined in CSS using selectors as abstractions of the document tree that cannot be expressed in HTML. An inline style attribute, on the other hand, is specified within HTML for a particular element. Since inline styles can only occur in HTML, they will only apply to the HTML element that they're defined on, and not to any pseudo-elements it generates.

While frowned upon by browser, you could add an in-context style tag before the element you wish to modify which should override that being called in your style-sheet.

<style>.flag--sale:after { content: "ACTUAL CONTENT";}</style>

Thanks Matt - I think that's why I wasn't getting anywhere. I knew there was something I couldn't do. I have been playing with putting the style within the loop - I'm getting weird results. As soon as I clean up a few things I'll post a link.

[Matt Zimmermann]

Hey Leslie,

I just thought of a work-around you could use. In your FLAG element, add the attribute

data-flag="CONTENT TO DISPLAY"

and modify your CSS to

.flag--sale:after { content: attr(data-flag);}

[lesliekirk]

Thank you Matt!!! That worked. You'll have to click a few products before it displays the "You Recently Viewed":

http://leslie-kirk.mivamerchantdev.com/JT-CAESUE.html


Once I clean the code up I'll post what I did (for future generations - LOL)