Skip to content
This repository has been archived by the owner on Aug 30, 2018. It is now read-only.

Ajax cart grid #47

Closed
wants to merge 4 commits into from
Closed

Ajax cart grid #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
77e0983
Added helper classes as it's own section
cshold Apr 22, 2014
a9c69bc
Default cart template is now responsive. Uses Timber's grid
cshold Apr 22, 2014
8cb1ad6
Modal now works responsively as well
cshold Apr 22, 2014
cd4efb5
Updated version number
cshold Apr 22, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion assets/ajaxify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -514,7 +514,7 @@ var ajaxifyShopify = (function(module, $) {

sizeDrawer = function ($empty) {
if ($empty) {
$drawerContainer.css('height', '0px');
$drawerContainer.css('height', '0px');
} else {
$drawerHeight = $cartContainer.outerHeight();
$drawerContainer.css('height', $drawerHeight + 'px');
Expand Down Expand Up @@ -704,6 +704,12 @@ var ajaxifyShopify = (function(module, $) {
case 'drawer':
if (cart.item_count > 0) {
sizeDrawer();

// Since the template might use larger images, resize again.
// ** Will work on a better solution to image loading here soon. **
setTimeout(function() {
sizeDrawer();
}, 1000);
} else {
sizeDrawer(true);
}
Expand Down
150 changes: 27 additions & 123 deletions assets/ajaxify.scss.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
// (c) Copyright 2013 Jaded Pixel. Author: Carson Shold (@cshold). All Rights Reserved.

/*
* Ajaxify Shopify
*
* Ajaxify the add to cart experience and flip the button so it looks cool,
* show the cart in a modal, or a 3D drawer.
*
* This file includes
* - Sass helpers
* - Colour variables to customize
* - Ajaxify styles
* Shopify Ajax Cart
* Copyright 2014 Shopify Inc.
* Author Carson Shold @cshold
* Built with Sass - http://sass-lang.com/

* Some things to know about this file:
- This file uses the same grid as timber.scss.liquid.
- If you want to use this separately, please include the following sections from timber.scss.liquid:
* #Breakpoint and Grid Variables
* #Grid Setup
- You may need to massage the code so it doesn't reference any non-existent mixins.
*
* This file includes
* - Sass helpers
* - Colour variables to customize
* - Styles for cart drawer, modal, and the flipped add to cart button
*/

// ==============================================================================
Expand Down Expand Up @@ -252,14 +257,15 @@ form[action^="/cart/add"] {
@include transition(all 550ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
}

* {
@include border-box();
form {
margin-bottom: 0;
}
}

// Row and column spacing
.ajaxifyCart--products {
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px solid $ajaxifyGreyDark;
}

Expand Down Expand Up @@ -287,123 +293,42 @@ form[action^="/cart/add"] {
}

.ajaxifyCart--row {
display: table;
width: 100%;
clear: both;
@include clearfix;

& > div {
padding-left: 45px;
display: table-cell;
vertical-align: middle;

&:first-child {
padding-left: 0;
}

&.ajaxifyCart--col1 {
padding-left: 20px;
}
}

&.ajaxifyCart--summary {

& > div {
padding-top: 20px;
}
}
}

.ajaxifyCart--row {

// General typography
h1, h2, h3, h4, h5, p {
margin: 0;
}

p {
font-size: 16px;
}

a {
text-decoration: none;

&.ajaxifyCart--remove {
text-decoration: underline;
font-size: 12px;
}
}
}

.ajaxifyCart--col2,
.ajaxifyCart--col3,
.ajaxifyCart--col4 {
text-align: right;
}


// Default column widths
.ajaxifyCart--media {
width: 7%;

& > a {
display: block;
overflow: hidden;
height: 80px;
}
.ajaxCart--product-image {
display: block;
overflow: hidden;
margin-bottom: 15px;

img {
display: block;
margin: 0 auto;
max-width: 100%;
}
}

.ajaxifyCart--col1 {
width: 48%;
}

.ajaxifyCart--col2 {
width: 14%;
}

.ajaxifyCart--col3 {
width: 15%;
}

.ajaxifyCart--col4 {
text-align: center;
width: 16%;

input[type="submit"] {
margin: 0;
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
}
}

.ajaxifyCart--total {
width: 69%;
text-align: right;
color: $ajaxifyGrey;
}

.ajaxifyCart--qty {
position: relative;
top: -5px;
right: -30px;
// right: -30px;
border: 1px solid transparent;
border-radius: 2px;
overflow: hidden;
font-size: 16px;
max-width: 90px;
margin: 0 auto;
@include transition(all 0.4s ease-out);
@include backface();

.ajaxifyCart--row & {
top: 0;
}

.ajaxifyCart--product:hover &,
.ajaxify-touch &,
&:hover {
Expand Down Expand Up @@ -536,26 +461,6 @@ form[action^="/cart/add"] {
border-bottom-color: $ajaxifyGreyLight;
}

.ajaxifyCart--col1 {
width: 36%;
}

.ajaxifyCart--col2 {
width: 17%;
}

.ajaxifyCart--col3 {
width: 17%;
}

.ajaxifyCart--col4 {
width: 23%;
}

.ajaxifyCart--total {
width: 60%;
}

// Quantity selectors
.ajaxifyCart--product:hover .ajaxifyCart--qty {
border-color: $ajaxifyGreyLight;
Expand Down Expand Up @@ -609,7 +514,6 @@ form[action^="/cart/add"] {

#ajaxifyModal .ajaxifyCart--content {
background-color: #fff;
min-width: 700px;
@include transform(scale(0.7));
opacity: 0;
}
Expand Down
23 changes: 20 additions & 3 deletions assets/timber.scss.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Shopify Timber v1.1.3
* Shopify Timber v1.2.0
* Copyright 2014 Shopify Inc.
* Author Carson Shold @cshold
* Built with Sass - http://sass-lang.com/
Expand All @@ -22,6 +22,7 @@
#Reset
#Grid Setup
#Basic Styles
#Helper Classes
#Typography
#Rich Text Editor
#Links
Expand Down Expand Up @@ -655,12 +656,24 @@ body {
padding-bottom: $gutter*2;
}

// ==============================================================================
// #Helper Classes
// ==============================================================================
.left { float: left; }
.right { float: right; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.hidden { display: none; }

.display-table {
display: table;
}

.display-table-cell {
display: table-cell;
vertical-align: middle;
}


// ==============================================================================
// #Typography
Expand All @@ -681,10 +694,9 @@ select {

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
display: block;
font-family: $headerFontStack;
font-weight: normal;
margin-bottom: 10px;
margin-top: 0.2em;
margin-bottom: 0.5em;
line-height: 1.4;

Expand All @@ -695,6 +707,11 @@ h1, h2, h3, h4, h5, h6,
text-decoration: underline;
}
}

// Add some top margin to headers from the rich text editor
.rte & {
margin-top: 0.2em;
}
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a { font-weight: inherit; }
Expand Down
61 changes: 33 additions & 28 deletions snippets/ajax-cart-template.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,40 +13,45 @@
{{#items}}
<div class="ajaxifyCart--product">
<div class="ajaxifyCart--row" data-id="{{id}}">
<div class="ajaxifyCart--media">
<a href="{{url}}"> <img src="{{img}}" width="60" alt=""></a>
</div>
<div class="ajaxifyCart--col1">
<p><a href="{{url}}">{{name}}</a></p>
<p><small>{{variation}}</small></p>
</div>
<div class="ajaxifyCart--col2">
<div class="ajaxifyCart--qty">
<input type="text" class="ajaxifyCart--num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*">
<span class="ajaxifyCart--qty-adjuster ajaxifyCart--add" data-id="{{id}}" data-qty="{{itemAdd}}">+</span>
<span class="ajaxifyCart--qty-adjuster ajaxifyCart--minus" data-id="{{id}}" data-qty="{{itemMinus}}">-</span>
<div class="grid">
<div class="grid-item large--two-thirds">
<div class="grid">
<div class="grid-item one-quarter">
<a href="{{url}}" class="ajaxCart--product-image"><img src="{{img}}" alt=""></a>
</div>
<div class="grid-item three-quarters">
<a href="{{url}}" class="h4">{{name}}</a>
<p>{{variation}}</p>
</div>
</div>
</div>
<div class="grid-item large--one-third">
<div class="grid">
<div class="grid-item one-third">
<div class="ajaxifyCart--qty">
<input type="text" class="ajaxifyCart--num" value="{{itemQty}}" min="0" data-id="{{id}}" aria-label="quantity" pattern="[0-9]*">
<span class="ajaxifyCart--qty-adjuster ajaxifyCart--add" data-id="{{id}}" data-qty="{{itemAdd}}">+</span>
<span class="ajaxifyCart--qty-adjuster ajaxifyCart--minus" data-id="{{id}}" data-qty="{{itemMinus}}">-</span>
</div>
</div>
<div class="grid-item one-third text-center">
<p>{{price}}</p>
</div>
<div class="grid-item one-third text-right">
<p>
<small><a href="/cart/change?id={{id}}&amp;quantity=0" class="ajaxifyCart--remove" data-id="{{id}}">Remove</a></small>
</p>
</div>
</div>
</div>
</div>
<div class="ajaxifyCart--col3">
<p>{{price}}</p>
</div>
<div class="ajaxifyCart--col4">
<p><a href="/cart/change?id={{id}}&amp;quantity=0" class="ajaxifyCart--remove" data-id="{{id}}">Remove from cart</a></p>
</div>
</div>
</div>
{{/items}}
</div>
<div class="ajaxifyCart--row ajaxifyCart--summary">
<div class="ajaxifyCart--total">
<p>Subtotal</p>
</div>
<div class="ajaxifyCart--col3">
<p>{{totalPrice}}</p>
</div>
<div class="ajaxifyCart--col4">
<input type="submit" class="{{btnClass}}" name="checkout" value="Checkout">
</div>
<div class="ajaxifyCart--row text-right medium-down--text-center">
<span class="h3">Subtotal {{totalPrice}}</span>
<input type="submit" class="{{btnClass}}" name="checkout" value="Checkout">
</div>
</form>
{% endraw %}
Expand Down
Loading