{{ content_for_additional_checkout_buttons }} generates inputs with hardcoded img src that reside on another site:

<input type="image" name="goto_pp" value="paypal_express" src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckoutsm.gif">

Please enable us to use other images, either via settings or simply by using local image assets that we can overwrite.

I can't tell if this is just me; it happens for sure in my shop when switch ajax cart to modal; and if I change ID in demo shop to toggle ajax modal it happens there too -- changing the .cart-row .grid-item sizing to .large--one-half for each element seems to provide enough space

Just a suggestion

On the Contact Us page (and Newsletter Subscribe Form), if a customer is logged in, you can automatically populate input fields like "Email" and "Name" by adding the following:

<input type="text" value="{% if customer %}{{ customer.name }}{% endif %}" .... >
<input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" .... >

No sure if that is creepy or a nice addition?

Firstly, this is a great development from Shopify and I'm very grateful. I'm excited to jump in and see how it improves workflow!

I usually develop with Bootstrap and they use .form-horizontal also - but one issue I've had is that Shopify Liquid makes adding certain forms like customer registration or contact easier with the tag {% form 'contact' %} which outputs the HTML form tag. This makes it harder to add a class to the HTML <form>.

I notice in the Timber scss file that the class styles are defined either

/* Horizontal Form */ form.form-horizontal, .form-horizontal {

So testing just now I had no problem making a .form-horizontal by wrapping <div class="form-horizontal"> around the desired html <form> in the docs

Most designer/developers should figure this out quickly, but perhaps the docs could specify more clearly what 'parent' means in case of using the Liquid {% form %} tag if that would be your preferred method?

Been trying to push, pull or align but grid--center doesn't work because you've changed all grid-item to float rather than display-block.

Right now add to cart only works from the product page. Having multiple add to cart buttons on the collections page would be a nice touch too.

On the latest version of Timber, when you have the Ajax drawer enabled, have items in your cart and hit checkout, it does not go to the checkout page, instead the cart expands and is hidden behind the header.

Remove webkit-apperance:none from select elements.

Some people love resets, and some normalize. In both cases, your dev inspector ends up looking like this:

Why reset everything just to overwrite it a few declarations later? A future version of timber will remove the CSS reset near the top of the file in favour of a minimal normalize and add in specific reset values when elements are defined.

Requests, concerns, etc welcome.

I think it could be very useful for theme developers if the "dummy content" from the demo store was included with Timber or available for download. It's a time saver and good for testing themes.

Referring to this reference on breadcrumbs, breadcrumb.liquid could be updated to include ARIA and better semantics than it does currently. Would strip out all of the <span>&rsaquo;</span> in there currently, too.

Hello,

We need to execute some custom JS when the cart is shown in the drawer,
using the ajaxify plugin.

If we put the JS code inside the form, it will be left out when fetching it via AJAX.

Looks best to have a new option here
http://shopify.github.io/Timber/#ajax-cart
toggleOnCallback: name of the function to execute when the cart is toggled ON

Any better alternatives?

Thanks

in future, may want to add a .text-light note in the docs for quick reference.

Hi there,

I need to wrap my page into one div as I am using mmenu for a mobile theme. Since ajaxifyShopify prepends the cart to the body it breaks this requirement.

I had a quick look into the source and changed this to make it work:

on line: 273

        // Default settings
        settings = {
            debug: false,
            method: 'drawer', // Method options are drawer, modal, and flip. Default is drawer.
            formSelector: 'form[action^="/cart/add"]',
            addToCartSelector: 'input[type="submit"]',
            cartCountSelector: null,
            cartCostSelector: null,
            toggleCartButton: null,
            btnClass: null,
            wrapperClass: null,
            useCartTemplate: false,
            moneyFormat: '${{amount}}',
            disableAjaxCart: false,
            enableQtySelectors: true,
            prependTo: 'body'
        };

I added the prependTo option

and on line: 461

$(settings.prependTo).prepend(template(data));

I replace the hardcoded 'body' with the added setting.

So I can use it like this

        <script>
            jQuery(function($) {
                ajaxifyShopify.init({
                    prependTo: '.js-cart-container'
                });
            });
        </script>

Hope that helps someone and/or you can roll this into the master.

Cheers

In Internet Explorer 11 (and lower versions, IE8, IE9, IE10), the alignment is not great:

Maybe this is easy to fix.

Timber's main stylesheet sometimes created a 500 internal server error because of ’ characters. Change them to '.

Should the input type for fields with external links (like: "Twitter Link" & "Facebook Link") be a "url" rather than "text"?

If set to url it will display a form validation error if the value isn't a proper url. Which may help users to identify problems.

I notice on the Contact form, after you hit submit, if there was a problem (such as a missing required field), it completely deletes all of your information. Which means the user needs to retype there message etc.

you want to bundle a small standard set of fonts/glyphs with this framework? I often pull glyphicons or fontawesome into projects on my own. I would imagine the set you'd need to cover as eComm framework would be much smaller than these sets. To name a few, but you decide:

• a few directional
• grid/list toggle
• mail, phone, search
• cart (of course)
• credit card branding
• social branding
• account (user, login, logout, home)
• comment (edit, post, comment, plus/add, delete)

I think it could be a good idea to incorporate best practice code on how to associate product variants with product images. I had a bit of trouble with this when I did my first Shopify theme, and hopefully a lot of web designers could find such boilerplate code very useful. It’s a nice touch to the user experience.

Edit:
I didn't know about http://apps.shopify.com/variant-images. Looks interesting!

Hello,

First off, thanks so much for creating Timber. It's really sped up my theme development.

I'm using this as the basis for themes I'm building to sell in either the theme store or on ThemeForest. A large part of the review process for getting approved at TF is the W3C validation. I notice that the Timber theme has a few validation errors.

http://validator.w3.org/check?uri=https%3A%2F%2Ftimber-demo.myshopify.com&charset=%28detect+automatically%29&doctype=Inline&group=0

I wonder if you could address whether or not these are legitimate errors or if the W3C validator is just behind the times. Thanks!

in the shop.js.liquid to switch main image to thumbnail we have

timber.cache.newImage = $(this).attr('href');
timber.cache.mainImage.attr({ src: timber.cache.newImage });

however, clicking on main image, even after thumbnail switch only links to original mainImage bc we do not change parent href for mainImage. For example, could do:

timber.cache.newImage = $(this).attr('href');
timber.cache.mainImage.attr({ src: timber.cache.newImage });
timber.cache.mainImage.parent().attr({ href: timber.cache.newImage });

still however, the mainImage href loads first to 'original' size but each timber.cache.newImage is linked to 'grande' size. This causes slight issue as clicking on feature image thumbnail vs clicking immediately on full feature image would generate two different links (one to 'original' vs one to 'grande'). Essentially, I think we want ref to three different image links : 'compact' (as thumbs), 'grande' (as mainImage), 'original' (as separate linked page).

In past, to get around this without using js to change urls I have used HTML data-* attributes. Then product.liquid may look like this

<a href="{{ image.src | product_img_url: 'grande' }}" data-original="{{ image.src | product_img_url: 'original' }}" class="product-photo-thumb">
<img src="{{ image.src | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>

and shop.js.liquid like this

  // Product Page
  mainImage: $('#productPhotoImg'),
  thumbImages: $('#productThumbs').find('a.product-photo-thumb'),
  newImage: null,
  newImageOriginal: null
  ...
  timber.cache.newImage = $(this).attr('href');
  timber.cache.newImageOriginal = $(this).attr('data-original');
  timber.cache.mainImage.attr({ src: timber.cache.newImage });
  timber.cache.mainImage.parent().attr({ href: timber.cache.newImageOriginal });

let me know suggestions or changes, but I'd be happy to make a PR for this if you wanted?

Hello Timber.

Is there anyway I can modify the code so that it only shows the itemQty if it is over 1?
So if there is one jacket in the shopping cart, it says "jacket", but if there are more, it says "2 x jacket", in the ajaxified cart?

Thank you for your help. :-)

Not sure what happend but I just reuploaded timber.scss.liquid and started getting a 500 error.

When I accessed timber.scss.liquid directly, the contents of the file was

"\xE2" from ASCII-8BIT to UTF-8 scss

Not sure if relevant but I tried compiling the scss file locally and I kept on getting indentation errors

$ sass timber.scss.liquid
Syntax error: Inconsistent indentation: 2 spaces were used for indentation, but the rest of the document was indented using 4 spaces.
        on line 18 of timber.scss.liquid
  Use --trace for backtrace.

I fixed this by adding @charset "UTF-8"; to timber.scss.liquid.

especially in eComm like printing receipt from order.liquid or clean product.liquid info pages...

.product-price class exists within SCSS section for Product Page styling, however class does not exist on product.liquid.

The corresponding element has already .h2 in markup -- so do you want to:

• eliminate the styling in SCSS for the class?
• Change the styling in SCSS to the ID? (I generally prefer to style with classes not IDs)
• add the class to HTML and style appropriately in SCSS?

...options, options...

Under Product Types in the sidebar, {{ type | link_to_remove_type }} doesn't return a link.

Hey, I've been using Timber to develop a couple of new shops. However I keep randomly running into this error showing up on my pages:

"Liquid error: wrong number of arguments (2 for 1)"

Not entirely sure what could be causing it. I've been using the theme gem tool to sync my theme files back and forth. Any ideas, help or insight would be greatly appreciated

Is there plans on adding Schema support on the collection pages?

currently blog-sidebar pulls tags from blog.tags io blog.all_tags; this is different functionality than currently in collection-sidebar which is collection.all_tags.

also, blog-sidebar does not have a 'catch-all' remove tags link like collection-sidebar does as the first <li>, furthermore bc the tags are not added to the blog breadcrumb, then the only link back to blog is <a> blog title bf the tag

will you look at aligning these two functionalities?

Timber is said to support IE8.

SVG is not supported in IE8.

Fixed here: b12e5de#commitcomment-5667280

Opening the discussion to incorporating Grunt to Timber. Specifically, this task that combines shopify_theme's watch and css concatenation.

This is being proposed because the asset folder cannot have sub folders or use Sass's @import ability. The end result would still be a single .scss.liquid stylesheet.

Pros for including Grunt:

• Modularize CSS into smaller organized files
• Promote more modular style definitions
• Opens up the possibility of customized folder structures during development
• Potential for other Grunt tasks during development
• By only concatenating stylesheets and letting Shopify's server render the Sass, no special syntax is needed for theme settings

Cons for including Grunt:

• Would have to create a src directory, potentially adding confusion
  • Timber should be just as usable without Grunt as with it
• Could appear more complex to less experienced users
• Styles edited in the browser template editor would be overwritten the next time the grunt task runs

Questions to be answered:

1. Should Grunt be included at all?
2. If Grunt is included, what tasks would be the most useful?

Open to more pros, cons, and questions.

Hello there,
I am new to shopify and have been using the Timber dev theme for my client.

I am on the product page and instead of the default click and switch to “Grande View”

I want the product to Image swap the feature image.

I read this comment in the product.liquid file:

{% comment %}
If we have more than one product image, loop through them and create thumbnails.

By default, images will link to their grande size (600x600).
Thumbnail swapping is enabled in shop.js.liquid.
{% endcomment %}

So I went over to the shop.js.liquid and perhaps its my unfamiliarity with js but I can’t see where to enable the feature.

Here is the code below from the shop.js.liquid file:

window.timber = window.timber || {};

timber.cache = {
// General
html: $('html'),
body: $('body'),

// Product Page
mainImage: $('#productPhotoImg'),
thumbImages: $('#productThumbs').find('a.product-photo-thumb'),
newImage: null
}

timber.init = function () {
timber.cache.html.removeClass('no-js').addClass('js');

// Run on load
timber.productImageSwitch();
}

timber.productImageSwitch = function () {
if ( !timber.cache.thumbImages.length ) {
return;
}

// Switch the main image with one of the thumbnails
// Note: this does not change the variant selected, just the image
timber.cache.thumbImages.on('click', function(e) {
e.preventDefault();
timber.cache.newImage = $(this).attr('href');
timber.cache.mainImage.attr({ src: timber.cache.newImage });
});
}

// Initialize Timber's JS on docready
$(function() {
window.timber.init();
});

not urgent, looks like docs sidebar stops at #notes right now and perhaps intended to stop at #icons or even something more dynamic :last-child() or footer.top ?

Would it be possible to make the following orange words:

... in the Ajax module documentation become links to product pages that show the method in action?

I assume the one Timber demo — looks fantastic by the way — with products: https://timber-demo.myshopify.com/products/womens-long-cardigan uses the drawer method?

The 2 other methods could be enabled in the same account as unpublished themes and you could link to the same product page using ?preview= appendage. Not need to keep lots of shops laying around.

Thanks! :)

https://developers.pinterest.com/rich_pins/

It would help a whole lot if timber comes in modules for easier editing.
Need I say more?

I understand that Shopify has limitations on how to organise its assets folder which greatly limits this. To remedy this we have created a small "clean-timber" repo to show off how this would work in our opinion.
We use grunt to compile all assets into the assets folder while keeping all files modulated within our project. If this, or some version of this idea was to be added into timber I believe the community would benefit from this a lot.

Ajax quantities over 1 character don't validate in Chrome (and other browsers using new HTML5 validation techniques), and return the "Please match the requested format" warning when trying to submit the cart form.

Just a quick thought guys… for a little bit of work, it might be cool to get this hosted on bower for quickly adding to new projects.

http://bower.io/#registering-packages

There is a fork of the skeleton theme that has been added to Bower's registry.

I'm just wondering why this class (no-js) is assigned to the html tag? It seems that Timber doesn't include Modernizer.

Also adding the following line of code in shop.js.liquid doesn't seem to remove the class (no-js)

$('html').removeClass('no-js');

If you check the rendered source, the class remains, even when the browser supports JS.

I've tested it in both Firefox and Safari (the latest versions) on a Mac.

Maybe I misunderstand how it works?

in future, may want to add a .hr--small and/or .hr--clear note in the docs for quick reference.

message says "you cart is empty" instead of "your".

@cshold Hey Carson!

When adding to the cart — using Ajax — the cart total is updated but always formatted using ${{amount}} rather than the shop's currency.

If the shop uses Euros:

I have not looked further than that for now.

A few notes

You may need to pass the shop's currency to your Ajax init function:

ajaxifyShopify.init({
   moneyFormat: {{ shop.money_format | json }},

( Use the json filter in case people add HTML, so straight quotes, to their money formats. )

Also, wherever you are including {{ 'option_selection.js' | shopify_asset_url | script_tag }} — in the Timber theme, that's in product.liquid — you are resetting Shopify.money_format to ${{amount}}. So if you are using Shopify.money_format in your JavaScript you need to be aware of that reset.

I understand that the current single Sass file would be easier for users who aren't familiar with build/task runners and that there are security issues with allowing @import

I was thinking maybe include the separated scss files in a separate folder in the root project directory or maybe bower_components and including a Grunt or Gulp file that would concatenate to /assets/timber.scss.

I think this would allow people who prefer using a single scss file to be unaffected.

Right now, the ajax drawer resizes when the cart loads and again after a timeout (to account for image heights). Would be much smoother if it resized only when the images had loaded.

multiple variants are hidden behind a display none, unless there are 2 (or more) options.

suspect it has to do with:
// Hide the variant dropdown if there is only one
if (variant.options.length == 1) {
$('.selector-wrapper').hide();
}

229-232 in product.liquid

the current {% for collection in collections %} loops through collections alphabetically; therefore the 'Featured Collections' on index.liquid will always be those first in alphabet. Perhaps we could add functionality that this output could also be controlled by a link-list of five specific collections? This way, if isEmpty then index shows the startup placeholders, if no featured linklist then index shows alpha forloop of five (as is currently), or if featured linklist then index shows those five.

I'd be happy to take a swing at it and PR, I'm going to make the change in my site anyway.

Should the input type for the search field be "search" rather than "text"?

Hello.

I have set the wrapperClass to be "site-width" under settings, and then created a class called .site-width {width: 100%; max-width: 1200px; }

My Ajaxified cart has to float left with an absolute position, but within the 1200 px.
However it doesn't work. I don't understand what I am doing wrong.. Can you help me out :-) ?