Skip to content
This repository has been archived by the owner. It is now read-only.
Ecommerce site for CS 0134 at Pitt
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
favicon
img
slick
src
tests/unit
todos
.travis.yml
License
README.md
cart.html
contact.html
favicon.ico
gulpfile.js
index.html
package.json
pricing.html

README.md

Mock e-commerce Site for CS 0134

Greenkeeper badge

Purely a static e-commerce site for Pitt's CS 0134, Web Development Class

Travis branch GitHub followers Twitter Follow

This site is simple: How do you design and code a functional e-commerce site? By using Bootstrap and customizing it with a few CSS animations and JavaScript thrown in for a quickie site that is up and running fast. We will also use jQuery and a few jQuery plugins for functionality.

Installation

If you want to improve upon what I have done here, there are really not a lot of dependencies. You will need Bootstrap and Slick.js jQuery slider plugin.

Usage examples

You could use this to practice building static sites and hosting them on your free server of choice.

Development setup

If you wish to test each build with Travis CI, you can do so by making a package.json file using

npm init

And filling out the details. You will also need to install Gulp:

npm install gulp --save

You will also need a Gulpfile and a .travis.yml file.

You make the Travis CI YAML file:

language: node_js
node_js:
  - "6.3.1"

Installing Slick

Download Slick from Ken's repo. Add the slick folder to your project. Place the slick.css and slick-theme.css in your <head> tags. You will also need jQuery to use slick.

When adding jQuery and Slick to your project, add the jQuery file first and then slick.min.js afterwards before the closing <body> tag.

A lot of tutorials and instructions tell you to initialize slick in a <script> tag at the bottom of your index.html file. Don't do this. Depending on the slick settings you use, it will slow down the slider. As Ken suggests, try initialzing the slick.js script:

$(document).ready(function() {
  $('.your-class').slick({
    setting-name: setting-value,
  });
});

in another script file. Once you have it set up how you like it, it's smooth sailing after that. Style it as you see fit.

Popover Functionality for Cart Page

I didn't really want or need to include the JavaScript for the popover. I would need to tinker with it, as I found something that would work for this particular site instance somewhere else. If you'd like to play with it, it is:

$(function() {
	var pop = $('.popbtn');
	var row = $('.row:not(:first):not(:last)');


	pop.popover({
		trigger: 'manual',
		html: true,
		container: 'body',
		placement: 'bottom',
		animation: false,
		content: function() {
			return $('#popover').html();
		}
	});


	pop.on('click', function(e) {
		pop.popover('toggle');
		pop.not(this).popover('hide');
	});

	$(window).on('resize', function() {
		pop.popover('hide');
	});

	row.on('touchend', function(e) {
		$(this).find('.popbtn').popover('toggle');
		row.not(this).find('.popbtn').popover('hide');
		return false;
	});

});

Release History

None right now.

Meta

You can follow my dev happenings on Twitter: @TiffanyW_412 or on my blogs Just Another DevBlog and Just Another Software Engineering Blog, or you can email me at hey@tiffanyrwhite.com for any concerns or comments.

Distributed under the MIT License. See LICENSE for more information.

You can’t perform that action at this time.