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?
Announcement
Collapse
No announcement yet.
Want to use the Product Custom Field Span Flag Tag for the Price
Collapse
X
-
Want to use the Product Custom Field Span Flag Tag for the Price
Leslie Kirk
Miva Certified Developer
Miva Merchant Specialist since 1997
Previously of Webs Your Way (aka Leslie Nord leslienord)
Email me: [email protected]
www.lesliekirk.com
Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr
Tags: None
-
Hi Leslie,
You should be able to pirate the CSS of the flags to create what you are looking for.Matt Zimmermann
Miva Web Developer
Alchemy Web Development
https://www.alchemywebdev.com
Site Development - Maintenance - Consultation
Miva Certified Developer
Miva Professional Developer
https://www.dev4web.net | Twitter
-
Originally posted by Matt Zimmermann View PostHi Leslie,
You should be able to pirate the CSS of the flags to create what you are looking for.
Leslie Kirk
Miva Certified Developer
Miva Merchant Specialist since 1997
Previously of Webs Your Way (aka Leslie Nord leslienord)
Email me: [email protected]
www.lesliekirk.com
Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr
Comment
-
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/
Bruce Golub
Phosphor Media - "Your Success is our Business"
Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
phosphormedia.com
- 1 like
Comment
-
Originally posted by Bruce - PhosphorMedia View Postyou 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/
Leslie Kirk
Miva Certified Developer
Miva Merchant Specialist since 1997
Previously of Webs Your Way (aka Leslie Nord leslienord)
Email me: [email protected]
www.lesliekirk.com
Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr
Comment
-
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"/>
Bruce Golub
Phosphor Media - "Your Success is our Business"
Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
phosphormedia.com
Comment
-
Originally posted by Bruce - PhosphorMedia View PostIf 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"/>
Code:.flag--sale:after { content: "SALE"; }
Leslie Kirk
Miva Certified Developer
Miva Merchant Specialist since 1997
Previously of Webs Your Way (aka Leslie Nord leslienord)
Email me: [email protected]
www.lesliekirk.com
Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr
Comment
-
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.
Code:<style>.flag--sale:after { content: "ACTUAL CONTENT";}</style>
Matt Zimmermann
Miva Web Developer
Alchemy Web Development
https://www.alchemywebdev.com
Site Development - Maintenance - Consultation
Miva Certified Developer
Miva Professional Developer
https://www.dev4web.net | Twitter
Comment
-
Originally posted by Matt Zimmermann View PostYou 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.
Code:<style>.flag--sale:after { content: "ACTUAL CONTENT";}</style>
Leslie Kirk
Miva Certified Developer
Miva Merchant Specialist since 1997
Previously of Webs Your Way (aka Leslie Nord leslienord)
Email me: [email protected]
www.lesliekirk.com
Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr
Comment
-
Hey Leslie,
I just thought of a work-around you could use. In your FLAG element, add the attributeCode:data-flag="CONTENT TO DISPLAY"
Code:.flag--sale:after { content: attr(data-flag);}
Matt Zimmermann
Miva Web Developer
Alchemy Web Development
https://www.alchemywebdev.com
Site Development - Maintenance - Consultation
Miva Certified Developer
Miva Professional Developer
https://www.dev4web.net | Twitter
Comment
-
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)Leslie Kirk
Miva Certified Developer
Miva Merchant Specialist since 1997
Previously of Webs Your Way (aka Leslie Nord leslienord)
Email me: [email protected]
www.lesliekirk.com
Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr
- 1 like
Comment
Comment