Develop Reference

How to connect my variant swatches to my option value?

I want to connect my option value to my swatches like when I click the variant swatches the option value will change also.
Example when I click on the swatches[circle color] dropdown options will change also.
image sample
Here's my code below and site link:
https://strokes-test.myshopify.com/collections/frontpage
and Im using JQuery v1.8.1
HTML
<form action="/cart/add" method="post">
{% if product.variants.size == 1 %}
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />
{% else %}
<select name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}</select>
{% endif %}
<ul class="item-swatch color_swatch_Value">
{% for option in product.options %}
{% if option == 'Shades' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign text = color | handleize %}
<li>
<label value="{{ variant.id}}" style="{% if text == 'white' %}border: 1px solid #cbcbcb; {% endif %}background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ text | append: '.png' | file_url }});"></label>
{% if variant.image != null %}
<div class="hidden">
<img src="{{ variant.image.src | product_img_url: 'grande' }}" alt="{{ text }}"/>
</div>
{% endif %}
</li>
{% capture tempList %}
{{ colorlist | append: color | append: ' ' }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
<div><button type="submit" name="add">Add to cart</button></div>
</form>
JS
initColorSwatchGrid: function() {
jQuery('.item-swatch li label').click(function(){
var newImage = jQuery(this).parent().find('.hidden img').attr('src');
jQuery(this).parents('.item-row').find('.featured-image').attr({ src: newImage });
return false;
});
}

Try this one
initColorSwatchGrid: function() {
jQuery('.item-swatch li label').click(function () {
var newImage = jQuery(this).next().find('img').attr('src');
jQuery(this).parents('.product-detail').prev().find('.featured-image').attr({ src: newImage });
// JS code for product switching
jQuery(this).parents('ul.item-swatch').prev().val(jQuery(this).attr('value'));
return false;
});
}

Rename size variant titles in shopify

I am trying to figure out a way to automatically rename the size variants "Small" "Medium" "large" "x-large" "xx-large" "xxx-large", to "S" "M" "L" "XL "XXL" .. etc.
The reason why I want to rename the size variants is because of the amount of extra space that is being taken up.
I am creating products from an app that doesn't let me change the name of the size variants prior to creating the products in shopify. It wouldn't make sense to manually go and change each product's variant titles because it's not time efficient.
I'm thinking the best way to do this is by using Javascript, but I don't know exactly how to go about doing this so it doesn't break anything.
Here is an example of the HTML source code of the Medium size variant.
<div data-value="Medium" class="swatch-element medium-swatch available"> <label for="swatch-1-medium-286472667159">
Medium <span class="crossed-out"></span></label></div>
Liquid Source for the swatches.
<div class="swatch clearfix" data-option-index="{{ option_index }}">
<div class="option_title">{{ swatch }}</div>
{% assign values = '' %}
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
<input id="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} />
<div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }}-swatch {% if variant.available %}available{% else %}soldout{% endif %}">
{% if is_color %}
<div class="tooltip">{{ value }}</div>
{% endif %}
{% if is_color %}
<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" style="background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' }}); background-color: {{ value | split: ' ' | last | handle }};">
<span class="crossed-out"></span>
</label>
{% else %}
<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}">
{{ value }}
<span class="crossed-out"></span>
</label>
{% endif %}
</div>
{% endunless %}
{% endfor %}
</div>

As the workaround, I can suggest you this way:
Export products from Shopify in plain CSV
Open CSV file in excel
Rename all size variants in excel with "find and replace"
Import again into Shopify (make sure, you selected Overwrite existing products that have the same handle)

AngularJS/HTML/CSS - Slideshow to show different link buttons and url links

I am experimenting with creating a slideshow that has four images, for example. And the thing is I want to create a link button with its own url link for each image. But what I have done is created four link buttons that appears on the slideshow, instead of the one link button that changes along with each image, and with its own url link.
{% if settings.show_block_lookbook %}
<div id="lookbook-section" class="section-full lookbook-section">
<div class="lookbook-wrapper">
<div class="lookbook-text">
<div class="lookbook-container">
<div class="container">
<div class="lb-text">
{% assign lbText1 = settings.block_lookbook_text_1 %}
{% assign lbText2 = settings.block_lookbook_text_2 %}
{% assign lbText3 = settings.block_lookbook_text_3 %}
{% assign lbText4-1 = settings.block_lookbook_text_4_1 %}
{% assign lbText4-2 = settings.block_lookbook_text_4_2 %}
{% assign lbText4-3 = settings.block_lookbook_text_4_3 %}
{% assign lbText4-4 = settings.block_lookbook_text_4_4 %}
{% assign lbLink-1 = settings.block_lookbook_link_1 %}
{% assign lbLink-2 = settings.block_lookbook_link_2 %}
{% assign lbLink-3 = settings.block_lookbook_link_3 %}
{% assign lbLink-4 = settings.block_lookbook_link_4 %}
{% if lbText1 != blank %}<h3>{{ lbText1}}</h3>{% endif %}
<div class="bg-slider-arrows">
<span class="button-prev no-border"></span>
<span class="button-next no-border"></span>
</div>
{% if lbText2 != blank %}<h2>{{ lbText2 }}</h2>{% endif %}
{% if lbText3 != blank %}<p>{{ lbText3 }}</p>{% endif %}
{% if lbText4-1 != blank %}{{ lbText4-1 }}{% endif %}
{% if lbText4-2 != blank %}{{ lbText4-2 }}{% endif %}
{% if lbText4-3 != blank %}{{ lbText4-3 }}{% endif %}
{% if lbText4-4 != blank %}{{ lbText4-4 }}{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="lookbook-bg">
{% for i in (1..4) %}
{% assign newShow = 'block_lookbook_img_' | append: i %}
{% if settings[newShow] %}
{% assign newImage = 'block_lookbook_img_' | append: i %}
<div class="lookbook-item">
<img src = "{{ newImage | append: '.jpg' | asset_url}}" alt="" />
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
I am totally lost as to what to do, as I am very very new to this. I would think I somehow need to link the images with the urls and link buttons etc, but have no idea how to code it so that each image has its own link button and url link...Any help? Any examples?

Hold on, you are not using much of angular here. I think its django or some other template with {% if %} .
Use something like:
<div ng-repeat="object in objects">
{{object.name }}
<img src="{{ object.img_path}}" />
</div>
For look try this link for ng-repeat
For the functionality u need, I would recommend you to look into cleaner approach of Carousel

Cycle through all products within a collection | SHOPIFY

Running into issues adjusting the 'previous product' and 'next product' functionality within Shopify.
I'd like to set it up so that the 'previous' and 'next' loops through all products, carousel style.
Once you're at the last product,'next' will take you back to the first. At the moment, once you reach the end, you can only go to a previous product and backwards through the list.
Any thoughts?
Here's my base code:
{% if collection.previous_product %}
{{ '«' | link_to: collection.previous_product }}
{% endif %}
{% if collection.next_product %}
{% if collection.previous_product %} | {% endif %}
{{ '»' | link_to: collection.next_product }}
{% endif %}

Try something like this:
{% if collection.previous_product %}
{{ '«' | link_to: collection.previous_product }}
{% else %}
{% assign last_product_url = collection.products.last.url | within:collection %}
{{ '«' | link_to: last_product_url }}
{% endif %}
{% if collection.next_product %}
{{ '»' | link_to: collection.next_product }}
{% else %}
{% assign first_product_url = collection.products.first.url | within:collection %}
{{ '»' | link_to: first_product_url }}
{% endif %}
If you have more than 50 products in your collection, you should note that collection.products is paginated.
See here for info on the within filter.

I'm not super familiar with Shopify, but I took a look at their docs and see the collections object includes colection.products_count and collection.products. If collection.products contains an array of the products, with their methods bound to them, you could do something like this:
{% if collection.previous_product %}
{{ '«' | link_to: collection.previous_product }}
{% else %}
{{ '«' | link_to: collection.products[collection.products_count - 1].url }}
{% endif %}
{% if collection.next_product %}
{{ '»' | link_to: collection.next_product }}
{% else %}
{{ '»' | link_to: collection.products[0].url }}
{% endif %}
I can't seem to find a shopify sandbox to test in, but assuming collection.products returns an array, this should work.

symfony form collection : how to figure out if allow_delete is set o true

I have built a javascript macro and a form theme to render form collections on my website with symfony2.
{{ if prototype is defined }}, I add a 'Add button'.
So far I also have a delete button.
I would like to remove this delete button if 'allow_delete' is not set to true but I can't figure out how to find this in twig.
When I look at my field.vars, there is no allow_delete option. field.vars.attr does not either. How can I do this?

The allow_delete option is a children of you form field.
{% for widget in form.YOURFIELD.children %}
{% if widget.get('allow_delete') %}
//Do your stuff
{% endif %}
{% endfor %}

For those who might be interested, here is my complete solution:
Collections are rendered as tables. Headers are labels or the string
'option' in case of a checkbox.
If the attribute data-label is set in the form, the option is
replaced by the value of data-label.
If allow_add is set to true, an add button is added
if allow_delete is set to true, a delete button is added.
{% block collection_widget %}
{% spaceless %}
<div class="collection">
{% if prototype is defined %}
{% set attr = attr|merge({'data-prototype': block('collection_item_widget') }) %}
{% endif %}
{% if form.vars.allow_delete is defined and form.vars.allow_delete %}
{% set allow_delete = true %}
{% else %}
{% set allow_delete = false %}
{% endif %}
<div {{ block('widget_container_attributes') }} class="protoype">
{% if prototype is defined %}
Ajouter <i class="fa fa-plus"></i>
{% endif %}
{{ form_errors(form) }}
<table class="subtable table">
<thead>
<tr class="headers" style="display: none;">
{% if form.children|length > 0 %}
{% if form.children[0]|length > 0 %}
{% set header = form.children[0] %}
{{ block('collection_header') }}
{% endif %}
{% endif %}
</tr>
</thead>
<tbody class="container_rows">
{% for rows in form %}
{% spaceless %}
{% if rows.children|length > 0 %}
<tr class="row_to_delete child_collection">
{% set body = rows %}
{{ block('collection_body') }}
</tr>
{% endif %}
{% endspaceless %}
{% endfor %}
</tbody>
</table>
{#{{ form_rest(form) }}#}
</div>
</div>
{% endspaceless %}
{% endblock collection_widget %}
{% block collection_item_widget %}
{% set header = prototype %}
{% set body = prototype %}
{% spaceless %}
{{ block('collection_body') }}
{% endspaceless %}
{% endblock collection_item_widget %}
{% block collection_header %}
{% for field in header %}
<th>
{% if 'checkbox' not in field.vars.block_prefixes %}
{{ form_label(field)|raw }}
{% else %}
{% if field.vars.attr['data-label'] is defined %}
{{ field.vars.attr['data-label'] }}
{% else %}
Options
{% endif %}
{% endif %}
</th>
{% endfor %}
{% if allow_delete %}
<th class="fmu_table_center">Supprimer</th>
{% endif %}
{% endblock %}
{% block collection_body %}
{% set fieldNum = 1 %}
{% for field in body %}
<td class="field{{ fieldNum }} data-label">
{% if field.vars.attr['class'] is defined %}
{% set class = field.vars.attr['class'] ~ ' input-sm' %}
{% else %}
{% set class = 'input-sm' %}
{% endif %}
{% set attr = field.vars.attr|merge({'class': class }) %}
{{ form_widget(field, {'attr' : attr}) }}
{{ form_errors(field) }}
</td>
{% set fieldNum = fieldNum + 1 %}
{% endfor %}
{% if allow_delete %}
<td class="fmu_table_center fmu_table_middle"><i class="fa fa-times"></i></td>
{% endif %}
{% endblock %}
and my javascript :
{% macro javascript_form_collection() %}
{#ass the necessary javascript to handle a collection#}
<script>
$(function() {
$('.collection').each(function(){
var $container = $(this).children('div:first-child');
var $addButton = $container.children('.add_button').eq(0);
$addButton.on('click', function(e) {
addElement($container,index);
count++;
index++;
showHeaders($container, count);
e.preventDefault();
return false;
});
var count = $container.find('.child_collection').length;
var index = $container.find('.child_collection').length;
if (count == 0)
{
populateHeaders($container)
}
$container.on('click','.fmu_delete_button', function(e){
e.preventDefault();
var $row = $(this).closest('.row_to_delete');
$row.next('.sibling_row_to_delete').remove();
$row.next('.sibling_row_to_delete_2').remove();
$row.remove();
count--;
showHeaders($container, count);
});
showHeaders($container, count);
});
function populateHeaders($container)
{
var $headers = $container.find('.headers').eq(0);
var $prototype = $($container.attr('data-prototype'));
var $headerPrototype = $($prototype[0]).attr('data-label');
$headers.html($headerPrototype);
}
function showHeaders($container, count)
{
if (count > 0)
{
$container.find('.subtable .headers').show();
}
else
{
$container.find('.subtable .headers').hide();
}
}
function addElement($container, index) {
var $prototype = $($container.attr('data-prototype')
.replace(/__name__label__/g, 'n°' + (index+1))
.replace(/__name__/g, index));
$container.find('.container_rows').eq(0).append($prototype);
$('.timepicker').timepicker();
$('.datetimepicker').datetimepicker();
$prototype.find('.select2').each(function(){
$(this).select2();
});
$('[data-toggle="tooltip"]').tooltip();
return $prototype;
}
});
</script>
<style type="text/css">
.subtable {
width: 100%;
}
.subtable th {
font-weight: normal;
}
</style>
{% endmacro %}