mivaecommerce / elements Goto Github PK

View Code? Open in Web Editor NEW

3.0 7.0 1.0 977 KB

Elements is the base developer framework and methodology used for creating our ReadyThemes as well as custom websites.

Home Page: http://elements.mivareadythemes.com/

License: MIT License

HTML 85.13% CSS 8.75% JavaScript 6.12%

methodology ecss bem itcss html5 css3 responsive miva framework flexbox

elements's Introduction

Elements is the base developer framework and methodology used for creating our ReadyThemes.

This framework is designed to be used as a foundation for building custom websites or your own ReadyThemes. While the core of the framework is a tested, CSS base, we also include quality tested JavaScript functionality and extensions like tabs, accordions, and carousels.

Installing / Getting started

There are two different ways to get started with Elements. Choose the method that is most appropriate to your project and environment.

git clone https://github.com/mivaecommerce/Elements.git

You can also download Elements from the Miva AppStore.

Demonstration

http://elements.mivareadythemes.com/

Documentation

https://docs.miva.com/elements/index.html

Features

Extensible

Includes the necessary building blocks to create many of the common UX design patterns. Unique components can easily be created by extending the framework.

BEM-IT-ECSS

Developed with the BEMIT methodology in mind. BEM promotes component modularity, IT helps control the architecture, and ECSS helps to make extending the framework more manageable.

Modern Grid

Elements is an evergreen-browser framework with a modern Flexbox grid system. No more having to remember to clear your floats or use conditional classes.

Browser Support

Elements uses current coding structures and standards. This framework may not be best suited for you if you are looking to support legacy browsers.

Chrome v49+ (or last two)
Firefox v31+ (or last two)
Safari v9.1+ (or last two)
iOS Safari v9.3+ (or last two)
Opera v36+ (or last two)
Edge (or last two)
- Internet Explorer 11 has minimal support.

Contributing

You can help make Elements better. Please read CONTRIBUTING.md to see how you can participate.

Licensing

The code in this project is licensed under MIT license.

elements's People

Contributors

Stargazers

Watchers

Forkers

influxweb

elements's Issues

Should "HOME" be in the drop down menu?

Or do people just know they can click on the logo and get back home? Thinking specifically on mobile view...

Text formatting issue / tablet mode

On the "Add to Wish List" button - the text isn't centering.

double message

When I signed up for an account it gave me a double message.

Price getting cut off / tablet mode

you can't scroll to see the price, it's getting cut off

Shipping Estimate Display UPS Rate?

https://www.miva.com/forums/forum/designers-and-developers/readytheme/elements-framework/694378-shipping-estimate-display-ups-rate

Expected Behavior

UPS rate should be shown

Current Behavior

The shipping estimator on the basket page will display flat rate options fine. The shipping selection page displays the UPS rates just fine. However, UPS rates in the basket page estimate window do not display.

Issue with changing email

I tried changing my email and it keeps giving me an "Invalid customer token" error message.

Potential XSS Error on CACT

A bug has been discovered on the CACT page where the return URLs were not being properly encoded. Without the encoding, there is a possibility of an XSS attack. To correct for this, replace the code for the CACT page with the following:

<mvt:assign name="l.settings:new_customer:login" value="''" />
<mvt:assign name="l.settings:new_customer:pw_email" value="g.register_email" />
<mvt:assign name="l.settings:new_customer:password" value="g.register_password" />
<mvt:assign name="l.settings:new_customer:pgrpcount" value="0" />
<mvt:assign name="l.settings:new_customer:ship_fname" value="g.register_fname" />
<mvt:assign name="l.settings:new_customer:ship_lname" value="g.register_lname" />
<mvt:assign name="l.settings:new_customer:saved_password" value="l.settings:new_customer:password" />
<mvt:do file="g.Module_Feature_CUS_DB" name="l.settings:test" value="Customer_Load_Email(l.settings:new_customer:pw_email, l.settings:existing_customer)" />

<mvt:if expr="g.current_location">
	<mvt:assign name="g.return_link" value="g.current_location" />
<mvt:else>
	<mvt:assign name="g.return_link" value="l.settings:urls:SFNT:rr_sep" />
</mvt:if>

<mvt:if expr="l.settings:existing_customer:id GT 0">
	<mvt:comment>USER EXISTS</mvt:comment>
	<mvt:assign name="g.Customer_Password" value="g.register_password" />
	<mvt:assign name="g.Customer_LoginEmail" value="g.register_email" />
	<mvt:do file="g.Module_Feature_CUS_RT" name="l.settings:login_success" value="Action_Customer_Login()" />
	&mvt:global:MvDO_Error;
	<mvt:if expr="g.Customer_Login_Invalid EQ 1 OR g.Customer_Password_Invalid EQ 1">
	<mvt:else>
		<meta http-equiv="refresh" content="0;url=&mvt:global:return_link;logon=1" />
	</mvt:if>
<mvt:else>
	<mvt:do file="g.module_library_utilities" name="g.is_valid_email" value="Email_Validate(l.settings:new_customer:pw_email)" />
	<mvt:do file="g.Module_Feature_CUS_DB" name="l.settings:testPW" value="CustomerSettings_Load(l.customersettings)" />
	<mvt:do file="g.Module_Admin" name="g.is_valid_pw" value="Validate_Password(l.customersettings, l.settings:new_customer:password)" />
	<mvt:assign name="g.invalidEmailMessage" value="crypto_base64_encode('You have entered an invalid email address.')" />
	<mvt:assign name="g.invalidPasswordMessage" value="crypto_base64_encode(g.Validation_Message)" />
	<mvt:if expr="g.is_valid_email EQ 1 AND g.is_valid_pw EQ 1">
		<mvt:do file="g.Module_Feature_CUS_UT" name="l.settings:test" value="CustomerLogin_Generate_Email(l.settings:new_customer:pw_email, l.settings:new_customer:login)" />
		<mvt:do file="g.Module_Feature_CUS_DB" name="l.settings:test" value="Customer_Insert(l.settings:new_customer)" />
		<mvt:assign name="g.Customer_Password" value="l.settings:new_customer:saved_password" />
		<mvt:assign name="g.Customer_LoginEmail" value="l.settings:new_customer:pw_email" />
		<mvt:do file="g.Module_Feature_CUS_RT" name="l.settings:login_success" value="Action_Customer_Login()" />
		&mvt:global:MvDO_Error;
		<meta http-equiv="refresh" content="0;url=&mvte:global:return_link;registration=1&NewAccount=1&Customer_ShipFirstName=&mvte:global:register_fname;" />
	<mvt:elseif expr="g.is_valid_email EQ 0 AND g.is_valid_pw EQ 1">
		<meta http-equiv="refresh" content="0;url=&mvte:global:return_link;registration=0&iem=&mvte:global:invalidEmailMessage;" />
	<mvt:elseif expr="g.is_valid_email EQ 1 AND g.is_valid_pw EQ 0">
		<meta http-equiv="refresh" content="0;url=&mvte:global:return_link;registration=0&ipm=&mvte:global:invalidPasswordMessage;" />
	<mvt:else>
		<meta http-equiv="refresh" content="0;url=&mvte:global:return_link;registration=0&iem=&mvte:global:invalidEmailMessage;&ipm=&mvte:global:invalidPasswordMessage;" />
	</mvt:if>
</mvt:if>

Internet Explorer 11 lacks support for NodeList.forEach()

In researching a separate issue posted on the Miva forums, it was discovered there was an issue with Internet Explorer 11 when iterating over a NodeList. To correct this issue, in core/js/scripts.js, replace the site: function () { with the following code:

	site: function () {
		/**
		 * Load the `polyfills.js` file and initialise functions.
		 * NOTE: This may be removed in future versions of the framework as
		 * browser compatibility and support changes.
		 */
		if (!window.CSS || !window.CSS.supports('(--foo: red)')) {
			$.loadScript(theme_path + 'core/js/polyfills.js', function () {
				sessionStorage.setItem('outdated', true);
				cssCapabilities.init();
			});
		}


		/**
		 * Load the `mini-modal.js` file and initialize functions.
		 * This is the default set of modal/light box functionality supplied with the framework.
		 */
		$.loadScript(theme_path + 'core/js/mini-modal.js', function () {
			var targets = document.querySelectorAll('[data-mini-modal]');

			for (var i = 0; i < targets.length; i += 1) {
				var modal = minimodal(targets[i], {
					// If you are using, and have, a Google Maps API Key, enter it here.
					googleMapsAPIKey: ''
				});

				modal.init();
			}
		});


		/**
		 * Although NodeList is not an Array, it is possible to iterate on it using forEach().
		 * It can also be converted to an Array using Array.from().
		 * However some older browsers have not yet implemented NodeList.forEach() nor Array.from().
		 * But those limitations can be circumvented by using Array.prototype.forEach().
		 * This polyfill adds compatibility to browsers which do not support NodeList.forEach(). [IE11]
		 */
		if (window.NodeList && !NodeList.prototype.forEach) {
			NodeList.prototype.forEach = function (callback, thisArg) {
				thisArg = thisArg || window;
				for (var i = 0; i < this.length; i++) {
					callback.call(thisArg, this[i], i, this);
				}
			};
		}

	},

This update will be part of the 1.0.2 maintenance release.