- Add a Miva page with the items/settings described in
control.xml - Put the contents of
miva-custom-searchspring-feed-2.xmlin that Page's Content section. Empty out the other content sections. Configure the Custom Fields & Image Machine settings. - In SearchSpring's admin, setup the AJAX Display template similar to the
SearchSpring_AJAX-Display_Item-Template.twigfile - Some JavaScript is used to take the color data and swatch data and output it into swatches on the page:
mvscreen-searchspring-swatches.js - It can also be helpful to resize large images on demand. A script like this could be useful
Last active
April 19, 2016 17:35
-
-
Save steveosoule/00ca6b5cf8edcbe6e58f97d8ac4ee9af to your computer and use it in GitHub Desktop.
Miva - Custom SearchSpring Feed - 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <PageList> | |
| <Page> | |
| <Code>searchspring-feed</Code> | |
| <Name>Search Spring Feed Generator</Name> | |
| <Title></Title> | |
| <Secure>0</Secure> | |
| <Source>searchspring-feed-page.htm</Source> | |
| <Settings><![CDATA[:all_products:advanced=1,:all_products:b_height=234,:all_products:b_width=234,:all_products:button_add=1,:all_products:button_buy=1,:all_products:col_num=2,:all_products:constrain=B,:all_products:default_sort=disp_order,:all_products:field_code=1,:all_products:field_name=1,:all_products:field_price=1,:all_products:fields_custom[1]:code=comboProductsRequired,:all_products:fields_custom[1]:module=customfields,:all_products:fields_custom[2]:code=exclude,:all_products:fields_custom[2]:module=customfields,:all_products:fields_custom[3]:code=main,:all_products:fields_custom[3]:module=productimagecustomfields,:all_products:fields_custom[4]:code=flag,:all_products:fields_custom[4]:module=customfields,:all_products:fields_custom[5]:code=RETAIL,:all_products:fields_custom[5]:module=customfields,:all_products:fields_custom[6]:code=salesRankBoost,:all_products:fields_custom[6]:module=customfields,:all_products:fields_custom[7]:code=parts_finder_search_spring,:all_products:fields_custom[7]:module=customfields,:all_products:format=X,:all_products:image=T,:all_products:imagemachine_enabled=1,:all_products:invmsg=L,:all_products:items_per_page_filter=1,:all_products:linkexcludecat=0,:all_products:mode=plst,:all_products:page_disp_count=0,:all_products:per_page=100,:all_products:predictdiscounts=0,:all_products:reverse_default_disp_order=0,:all_products:sort_by:best=1,:all_products:sort_by:new=1,:all_products:sort_by:price=1,:all_products:sort_by:switch=0,:all_products:template_filename=searchspring-feed-all_products.mvc,:all_products:template_id=37493,:all_products_imagemachine:closeup_active=0,:all_products_imagemachine:closeup_height=500,:all_products_imagemachine:closeup_size=N,:all_products_imagemachine:closeup_width=500,:all_products_imagemachine:enabled=1,:all_products_imagemachine:head:template_filename=searchspring-feed-all_products_imagemachine-head.mvc,:all_products_imagemachine:head:template_id=37492,:all_products_imagemachine:image_height=250,:all_products_imagemachine:image_size=B,:all_products_imagemachine:image_width=250,:all_products_imagemachine:legacy_image=F,:all_products_imagemachine:preload=0,:all_products_imagemachine:thumb_active=1,:all_products_imagemachine:thumb_height=50,:all_products_imagemachine:thumb_width=50,:product_attributes:template_filename=searchspring-feed-product_attributes.mvc,:product_attributes:template_id=37497,:SITEMAP:TEMPLATE_FILENAME=searchspring-feed-sitemap.mvc]]></Settings> | |
| <ItemList> | |
| <Item>all_products</Item> | |
| <Item>all_products_imagemachine</Item> | |
| <Item>customfields</Item> | |
| <Item>latu_widgets</Item> | |
| <Item>product</Item> | |
| <Item>product_attributes</Item> | |
| <Item>readytheme</Item> | |
| <Item>ry_toolbelt</Item> | |
| <Item>sebenzatools</Item> | |
| <Item>tokenlist</Item> | |
| <Item>toolkit</Item> | |
| </ItemList> | |
| </Page> | |
| </PageList> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <mvt:comment> | |
| <!-- | |
| SearchSpring: Product Data Feed | |
| File Output: /searchspring/searchspring_cssui_miva.txt | |
| date; curl -o NUL --location --max-redirs 1000 --data "continue=redirect" http://www.example.com/cs/searchspring-feed; date; echo -e "\a"; | |
| --> | |
| </mvt:comment> | |
| <mvt:assign name="g.tab" value="asciichar(9)"/> | |
| <mvt:assign name="g.newline" value="asciichar(10)"/> | |
| <mvt:assign name="g.return" value="asciichar(13)"/> | |
| <mvt:assign name="g.pipe" value="asciichar(124)"/> | |
| <mvt:assign name="g.comma" value="asciichar(44)"/> | |
| <mvt:assign name="g.quote" value="asciichar(34)"/> | |
| <mvt:assign name="g.period" value="asciichar(46)"/> | |
| <mvt:assign name="g.delimiter" value="asciichar(9)"/> | |
| <mvt:assign name="g.file_folder" value="'/searchspring/'"/> | |
| <mvt:if expr="ISNULL g.file_name"> | |
| <mvt:assign name="g.file_name" value="'searchspring_cssui_miva.temp'"/> | |
| </mvt:if> | |
| <mvt:assign name="g.file_path" value="g.file_folder $ g.file_name"/> | |
| <mvt:assign name="g.final_file_path" value="glosub( g.file_path, '.temp', '.txt' )"/> | |
| <mvt:assign name="g.header_row" value=" | |
| 'Code' $ g.delimiter $ | |
| 'ProductSku' $ g.delimiter $ | |
| 'Name' $ g.delimiter $ | |
| 'catcode' $ g.delimiter $ | |
| 'parent_catcodes' $ g.delimiter $ | |
| 'cat_order' $ g.delimiter $ | |
| 'Price' $ g.delimiter $ | |
| 'Brand' $ g.delimiter $ | |
| 'Image' $ g.delimiter $ | |
| 'Thumbnail' $ g.delimiter $ | |
| 'SalesRank' $ g.delimiter $ | |
| 'Category' $ g.delimiter $ | |
| 'ID' $ g.delimiter $ | |
| 'Description' $ g.delimiter $ | |
| 'Breadcrumb Trails' $ g.delimiter $ | |
| 'Hierarchy' $ g.delimiter $ | |
| 'RETAIL' $ g.delimiter $ | |
| 'flag' $ g.delimiter $ | |
| 'exclude' $ g.delimiter $ | |
| 'parts_finder_search_spring' $ g.delimiter $ | |
| 'Color' $ g.delimiter $ | |
| 'ColorSwatches' $ g.delimiter $ | |
| 'Size' $ g.delimiter $ | |
| 'facet_hierarchy' $ g.delimiter $ | |
| 'all_parts_finder_search_spring' $ | |
| g.newline | |
| "/> | |
| <mvt:comment><!-- Delete File if it exists, create new file with header row --></mvt:comment> | |
| <mvt:if expr="ISNULL g.Per_Page"> | |
| <mvt:assign name="g.Per_Page" value="100" /> | |
| </mvt:if> | |
| <mvt:if expr="ISNULL g.AllOffset"> | |
| <mvt:assign name="g.AllOffset" value="0" /> | |
| </mvt:if> | |
| <mvt:if expr="g.AllOffset LT g.Per_Page"> | |
| <mvt:assign name="g.file_exists" value="sexists(g.file_path)"/> | |
| <mvt:if expr="g.file_exists EQ 1"> | |
| <mvt:assign name="g.file_deleted" value="sdelete(g.file_path)"/> | |
| <mvt:if expr="g.file_deleted EQ 1"> | |
| <mvt:assign name="g.file_created" value="file_create(g.file_path,'script', g.header_row)"/> | |
| </mvt:if> | |
| <mvt:else> | |
| <mvt:assign name="g.file_created" value="file_create(g.file_path,'script', g.header_row)"/> | |
| </mvt:if> | |
| </mvt:if> | |
| <mvt:comment><!-- Load Valid Make/Model/Year Parts Finder Data --></mvt:comment> | |
| <mvt:item name="readytheme" param="Load_Banner('parts_finder_valid_mmy', g.parts_finder:valid_mmy )" /> | |
| <mvt:do file="g.Module_Library_Utilities" name="l.result" value="SplitString( g.parts_finder:valid_mmy:message, g.newline, g.parts_finder:valid_mmy:array )" /> | |
| <mvt:comment><!-- Loop over all of the products --></mvt:comment> | |
| <mvt:assign name="g.count" value="0"/> | |
| <mvt:foreach iterator="product" array="all_products:products"> | |
| <mvt:comment><!-- Don't add product to feed if it is excluded from searchspring by custom field --></mvt:comment> | |
| <mvt:if expr="l.settings:product:customfields:customfield_values:exclude"> | |
| <mvt:foreachcontinue/> | |
| </mvt:if> | |
| <mvt:comment><!-- Get category codes, names, hierarchy, and breadcrumbs --></mvt:comment> | |
| <mvt:comment><!-- <mvt:item name="toolkit" param="productincategory|incatcount|l.all_settings:product:code" /> --></mvt:comment> | |
| <mvt:item name="ry_toolbelt" param="Product_Categories|g.incatcount|l.all_settings:product:code" /> | |
| <mvt:if expr="incatcount GT 0"> | |
| <mvt:foreach iterator="incategory" array="product_categories"> | |
| <mvt:if expr="l.settings:incategory:code EQ 'discontinued'"> | |
| <mvt:assign name="l.settings:product:discontinued" value="1" /> | |
| </mvt:if> | |
| <mvt:if expr="l.settings:product:catcode AND l.settings:product:category"> | |
| <mvt:assign name="l.settings:product:catcode" value="l.settings:product:catcode $ ',' $ l.settings:incategory:code" /> | |
| <mvt:assign name="l.settings:product:category" value="l.settings:product:category $ ',' $ l.settings:incategory:name" /> | |
| <mvt:else> | |
| <mvt:assign name="l.settings:product:catcode" value="l.settings:incategory:code" /> | |
| <mvt:assign name="l.settings:product:category" value="l.settings:incategory:name" /> | |
| </mvt:if> | |
| <mvt:item name="toolkit" param="breadcrumb|b_count|l.all_settings:incategory:code" /> | |
| <mvt:if expr="b_count GT 0"> | |
| <mvt:foreach iterator="breadcrumb" array="breadcrumbs"> | |
| <mvt:if expr="l.settings:incategory:hierarchy"> | |
| <mvt:assign name="l.settings:incategory:hierarchy" value="l.settings:incategory:hierarchy $ '/' $ l.settings:breadcrumb:name" /> | |
| <mvt:else> | |
| <mvt:assign name="l.settings:incategory:hierarchy" value="l.settings:breadcrumb:name" /> | |
| </mvt:if> | |
| <mvt:if expr="l.settings:product:hierarchy"> | |
| <mvt:assign name="l.settings:product:hierarchy" value="l.settings:product:hierarchy $ ',' $ l.settings:incategory:hierarchy" /> | |
| <mvt:else> | |
| <mvt:assign name="l.settings:product:hierarchy" value="l.settings:incategory:hierarchy" /> | |
| </mvt:if> | |
| <mvt:if expr="l.settings:incategory:breadcrumbtrails"> | |
| <mvt:assign name="l.settings:incategory:breadcrumbtrails" value="l.settings:incategory:breadcrumbtrails $ ' > ' $ l.settings:breadcrumb:name" /> | |
| <mvt:else> | |
| <mvt:assign name="l.settings:incategory:breadcrumbtrails" value="l.settings:breadcrumb:name" /> | |
| </mvt:if> | |
| <mvt:comment><!-- Facet Hierarchy --></mvt:comment> | |
| <mvt:if expr="l.settings:incategory:hideCategoryFromFacets"> | |
| <mvt:foreachcontinue/> | |
| </mvt:if> | |
| <mvt:item name="customfields" param="Read_Category_ID( l.settings:breadcrumb:id, 'hideCategoryFromFacets', l.settings:incategory:hideCategoryFromFacets )" /> | |
| <mvt:if expr="l.settings:incategory:hideCategoryFromFacets"> | |
| <mvt:foreachcontinue/> | |
| </mvt:if> | |
| <mvt:item name="customfields" param="Read_Category_ID( l.settings:breadcrumb:id, 'facetName', l.settings:breadcrumb:facetName )" /> | |
| <mvt:if expr="l.settings:breadcrumb:facetName"> | |
| <mvt:assign name="l.settings:breadcrumb:name" value="l.settings:breadcrumb:facetName" /> | |
| </mvt:if> | |
| <mvt:if expr="l.settings:incategory:facet_hierarchy"> | |
| <mvt:assign name="l.settings:incategory:facet_hierarchy" value="l.settings:incategory:facet_hierarchy $ '/' $ l.settings:breadcrumb:name" /> | |
| <mvt:else> | |
| <mvt:assign name="l.settings:incategory:facet_hierarchy" value="l.settings:breadcrumb:name" /> | |
| </mvt:if> | |
| <mvt:if expr="l.settings:product:facet_hierarchy"> | |
| <mvt:assign name="l.settings:product:facet_hierarchy" value="l.settings:product:facet_hierarchy $ ',' $ l.settings:incategory:facet_hierarchy" /> | |
| <mvt:else> | |
| <mvt:assign name="l.settings:product:facet_hierarchy" value="l.settings:incategory:facet_hierarchy" /> | |
| </mvt:if> | |
| <mvt:comment><!-- END Facet Hierarchy --></mvt:comment> | |
| </mvt:foreach> | |
| <mvt:assign name="l.settings:incategory:hideCategoryFromFacets" value="''" /> | |
| <mvt:if expr="l.settings:product:breadcrumbtrails"> | |
| <mvt:assign name="l.settings:product:breadcrumbtrails" value="l.settings:product:breadcrumbtrails $ ',' $ l.settings:incategory:breadcrumbtrails" /> | |
| <mvt:else> | |
| <mvt:assign name="l.settings:product:breadcrumbtrails" value="l.settings:incategory:breadcrumbtrails" /> | |
| </mvt:if> | |
| </mvt:if> | |
| </mvt:foreach> | |
| </mvt:if> | |
| <mvt:comment><!-- Don't add product to feed if it is discontinued --></mvt:comment> | |
| <mvt:if expr="l.settings:product:discontinued"> | |
| <mvt:item name="customfields" param="Write_Product_ID(l.settings:product:id, 'status', 'Discontinued')" /> | |
| <mvt:foreachcontinue/> | |
| </mvt:if> | |
| <mvt:comment><!-- Look Up Brand and SalesRank --></mvt:comment> | |
| <mvt:assign name="g.sql_select" value="'SELECT sp.brand, stats.counter FROM ' $ g.store_table_prefix $ 'SS_SPProducts sp LEFT JOIN ' $ g.store_table_prefix $ 'ProdStats stats ON sp.product_id = stats.product_id WHERE sp.product_id = ' $ l.settings:product:id" /> | |
| <mvt:item name="ry_toolbelt" param="query|g.sql_select|results" /> | |
| <mvt:assign name="l.settings:product:brand" value="l.settings:results[1]:brand" /> | |
| <mvt:assign name="l.settings:product:salesrank" value="l.settings:results[1]:counter" /> | |
| <mvt:if expr="isdigit(l.settings:product:customfield_values:customfields:salesRankBoost)"> | |
| <mvt:assign name="l.settings:product:salesrank" value="l.settings:product:salesrank + l.settings:product:customfield_values:customfields:salesRankBoost" /> | |
| </mvt:if> | |
| <mvt:comment><!-- Look Up Cat_Order --></mvt:comment> | |
| <mvt:assign name="g.sql_select" value="'SELECT disp_order FROM ' $ g.store_table_prefix $ 'CategoryXProduct WHERE product_id=' $ l.settings:product:id" /> | |
| <mvt:item name="ry_toolbelt" param="query|g.sql_select|results" /> | |
| <mvt:assign name="l.settings:product:cat_order" value="l.settings:results" /> | |
| <mvt:comment><!-- Clean Description --></mvt:comment> | |
| <mvt:assign name="l.settings:product:descrip" value="glosub( l.settings:product:descrip, g.newline, '' )" /> | |
| <mvt:assign name="l.settings:product:descrip" value="glosub( l.settings:product:descrip, g.tab, '' )" /> | |
| <mvt:assign name="l.settings:product:descrip" value="glosub( l.settings:product:descrip, g.return, '' )" /> | |
| <mvt:comment><!-- Get size and color data from attributes --></mvt:comment> | |
| <mvt:item name="product_attributes" param="product:id" /> | |
| <mvt:comment><!-- Combo Product: Required Product Attributes --></mvt:comment> | |
| <mvt:if expr="l.settings:product:customfield_values:customfields:comboProductsRequired"> | |
| <mvt:item name="toolkit" param="vquick|pcount|l.all_settings:product:customfield_values:customfields:comboProductsRequired" /> | |
| <mvt:if expr="g.pcount"> | |
| <mvt:foreach iterator="quicklist" array="quicklists"> | |
| <mvt:assign name="l.settings:parent_product" value="l.settings:product" /> | |
| <mvt:assign name="l.settings:product" value="l.settings:quicklist" /> | |
| <mvt:item name="product_attributes" param="product:id" /> | |
| <mvt:if expr="l.settings:product:colors OR l.settings:product:colorSwatches"> | |
| <mvt:if expr="l.settings:parent_product:colors OR l.settings:parent_product:colorSwatches"> | |
| <mvt:assign name="l.settings:parent_product:colors" value="l.settings:parent_product:colors $ ',' $ l.settings:product:colors" /> | |
| <mvt:assign name="l.settings:parent_product:colorSwatches" value="l.settings:parent_product:colorSwatches $ ',' $ l.settings:product:colorSwatches" /> | |
| <mvt:else> | |
| <mvt:assign name="l.settings:parent_product:colors" value="l.settings:product:colors" /> | |
| <mvt:assign name="l.settings:parent_product:colorSwatches" value="l.settings:product:colorSwatches" /> | |
| </mvt:if> | |
| </mvt:if> | |
| <mvt:if expr="l.settings:product:size"> | |
| <mvt:if expr="l.settings:parent_product:size"> | |
| <mvt:assign name="l.settings:parent_product:size" value="l.settings:parent_product:size $ ',' $ l.settings:product:size" /> | |
| <mvt:else> | |
| <mvt:assign name="l.settings:parent_product:size" value="l.settings:product:size" /> | |
| </mvt:if> | |
| </mvt:if> | |
| <mvt:assign name="l.settings:product" value="l.settings:parent_product" /> | |
| </mvt:foreach> | |
| </mvt:if> | |
| </mvt:if> | |
| <mvt:comment><!-- Filter Parts Finder Data --></mvt:comment> | |
| <mvt:if expr="l.settings:product:customfield_values:customfields:parts_finder_search_spring"> | |
| <mvt:do file="g.Module_Library_Utilities" name="l.result" value="SplitString( l.settings:product:customfield_values:customfields:parts_finder_search_spring, ',', l.settings:product:cf:parts_finder:data:all )" /> | |
| <mvt:foreach iterator="bike" array="product:cf:parts_finder:data:all"> | |
| <mvt:assign name="l.found_index" value="miva_array_find( l.settings:bike, g.parts_finder:valid_mmy:array, 1 )" /> | |
| <mvt:if expr="l.found_index GT 0"> | |
| <mvt:assign name="l.index" value="miva_array_insert( l.settings:product:cf:parts_finder:data:included, l.settings:bike, -1 )" /> | |
| <mvt:else> | |
| <mvt:assign name="l.index" value="miva_array_insert( l.settings:product:cf:parts_finder:data:excluded, l.settings:bike, -1 )" /> | |
| </mvt:if> | |
| </mvt:foreach> | |
| <mvt:item name="customfields" param="Write_Product_ID(l.settings:product:id, 'parts_finder_search_spring_valid', l.settings:product:cf:parts_finder:data:included)" /> | |
| </mvt:if> | |
| <mvt:comment><!-- Write File Row --></mvt:comment> | |
| <mvt:assign name="g.file_row" value=" | |
| l.settings:product:code $ g.delimiter $ | |
| l.settings:product:sku $ g.delimiter $ | |
| l.settings:product:name $ g.delimiter $ | |
| l.settings:product:catcode $ g.delimiter $ | |
| l.settings:product:NA_parent_catcodes $ g.delimiter $ | |
| l.settings:product:cat_order $ g.delimiter $ | |
| l.settings:product:price $ g.delimiter $ | |
| l.settings:product:brand $ g.delimiter $ | |
| l.settings:product:image $ g.delimiter $ | |
| l.settings:product:customfield_values:productimagecustomfields:main $ g.delimiter $ | |
| l.settings:product:salesrank $ g.delimiter $ | |
| l.settings:product:category $ g.delimiter $ | |
| l.settings:product:id $ g.delimiter $ | |
| l.settings:product:descrip $ g.delimiter $ | |
| l.settings:product:breadcrumbtrails $ g.delimiter $ | |
| l.settings:product:hierarchy $ g.delimiter $ | |
| l.settings:product:customfield_values:customfields:retail $ g.delimiter $ | |
| l.settings:product:customfield_values:customfields:flag $ g.delimiter $ | |
| l.settings:product:customfield_values:customfields:exclude $ g.delimiter $ | |
| l.settings:product:cf:parts_finder:data:included $ g.delimiter $ | |
| l.settings:product:colors $ g.delimiter $ | |
| l.settings:product:colorSwatches $ g.delimiter $ | |
| l.settings:product:size $ g.delimiter $ | |
| l.settings:product:facet_hierarchy $ g.delimiter $ | |
| l.settings:product:customfield_values:customfields:parts_finder_search_spring $ | |
| g.newline | |
| "/> | |
| <mvt:if expr="g.output EQ 'debug'"> | |
| <mvt:eval expr="decodeattribute(glosub(miva_array_serialize(l.settings:product), ',', '<br>'))" /> | |
| <mvt:elseif expr="g.output EQ 'screen'"> | |
| &mvt:global:file_row; | |
| <mvt:else> | |
| <mvt:assign name="g.write_line" value="file_append( g.file_path, 'script', g.file_row )"/> | |
| </mvt:if> | |
| <mvt:assign name="g.count" value="g.count + 1"/> | |
| </mvt:foreach> | |
| <mvt:comment><!-- Output Response for SearchSpring Crawler --></mvt:comment> | |
| <mvt:if expr="g.AllNextOffset GT 0"> | |
| Continue|&mvt:global:AllNextOffset; | |
| <mvt:assign name="g.next_url" value="'http://' $ g.domain:name $ '/cs/searchspring-feed?file_name=' $ g.file_name $ '&continue=' $ g.continue $ '&output=' $ g.output $ '&Per_Page=' $ g.Per_Page $ '&AllOffset=' $ g.AllNextOffset" /> | |
| <mvt:if expr="g.continue EQ 'redirect'"> | |
| <mvt:assign name="l.header" value="miva_output_header( 'Status', '301 Moved Permanently' )" /> | |
| <mvt:assign name="l.header" value="miva_output_header( 'Location', g.next_url )" /> | |
| <mvt:elseif expr="g.continue EQ 'refresh'"> | |
| <meta http-equiv="refresh" content="0;URL='&mvte:global:next_url;'" /> | |
| <mvt:elseif expr="g.continue EQ 'link'"> | |
| <a href="&mvte:global:next_url;">Next</a> | |
| </mvt:if> | |
| <mvt:else> | |
| Complete | |
| <mvt:assign name="g.file_exists" value="sexists(g.file_path)"/> | |
| <mvt:if expr="g.file_exists EQ 1"> | |
| <mvt:assign name="g.file_renamed" value="srename(g.file_path, g.final_file_path)"/> | |
| </mvt:if> | |
| </mvt:if> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var searchSpringSwatches = function() { | |
| var pattern = /filter\.color=([^&]+)/, | |
| hash = decodeURIComponent(window.location.hash), | |
| filterColor = (pattern.test(hash)) ? hash.match(pattern)[1] : false; | |
| $(document).on('mouseenter', '.product-tile--swatch-wrapper', function() { | |
| var $this = $(this), | |
| $swatch = $this.find('.product-tile--swatch'), | |
| $productTile = $this.closest('.product-tile'), | |
| $main_image = $productTile.find('.product-tile--image'); | |
| if( !$main_image.data('orig-src') ) { | |
| $main_image.data('orig-src', $main_image.attr('src')); | |
| } | |
| if ($this.hasClass('product-tile--swatch-wrapper--view-more')) { | |
| $productTile.find('.product-tile--name')[0].click(); | |
| } else { | |
| $productTile.find('.product-tile--swatch-wrapper.active').removeClass('active'); | |
| $this.addClass('active'); | |
| $main_image.attr('src', $swatch.data('image')); | |
| } | |
| }); | |
| $(document).on('mouseleave', '.js-product-tile', function() { | |
| var $this = $(this), | |
| $main_image = $this.find('.product-tile--image'); | |
| if( $main_image.data('orig-src') ){ | |
| $main_image.attr('src', $main_image.data('orig-src') ); | |
| } | |
| }); | |
| if ($('.product-tile--data').length) { | |
| $('body').addClass('ss-swatches'); | |
| } | |
| $('.product-tile--data').map(function() { | |
| var $this = $(this), | |
| colors = $this.data('colors').split(',').unique(), | |
| swatches = $this.data('swatches').split(','), | |
| $swatches = $('<div class="product-tile--swatches"/>'), | |
| filterColorIndex = $.inArray(filterColor, colors), | |
| isComboProduct = (colors.length * 2) === swatches.length, | |
| swatchesToShow = 50, | |
| maxLength = (colors.length > swatchesToShow) ? (swatchesToShow - 1) : colors.length, | |
| swatch_size = '90x90', | |
| imageCounter = 0; | |
| if (!swatches[0].length) { | |
| return; | |
| } | |
| for (var index = 0; index < colors.length; index++) { | |
| var color = colors[index], | |
| swatch = (typeof swatches[index] === 'string') ? swatches[index].replace(/resize\/\d+x\d+\//, '') : false, | |
| image = swatch, | |
| $img = $('<img />'), | |
| $swatch; | |
| if( !swatch ){ | |
| continue; | |
| } | |
| if (isComboProduct) { | |
| swatch = 'stack/' + swatch_size + '/top/' + swatches[index].replace(/resize\/\d+x\d+\//, '') + '/bottom/' + swatches[index + colors.length].replace(/resize\/\d+x\d+\//, ''); | |
| image = 'stack/250x250/top/' + swatches[index].replace(/resize\/\d+x\d+\//, '') + '/bottom/' + swatches[index + colors.length].replace(/resize\/\d+x\d+\//, ''); | |
| } else { | |
| swatch = 'resize/' + swatch_size + '/' + swatches[index].replace(/resize\/\d+x\d+\//, ''); | |
| image = 'resize/250x250/' + swatches[index].replace(/resize\/\d+x\d+\//, ''); | |
| } | |
| $img.attr({ | |
| src: swatch, | |
| alt: color, | |
| 'data-image': image, | |
| 'class': 'product-tile--swatch' | |
| }); | |
| imageCounter++; | |
| $swatch = $('<span class="product-tile--swatch-wrapper"/>').append($img); | |
| if (index >= maxLength) { | |
| $swatch = $swatch.hide(); | |
| } | |
| $swatches.append($swatch); | |
| } | |
| if( imageCounter <= 1){ | |
| return; | |
| } | |
| if (colors.length > swatchesToShow) { | |
| $swatches.append('<a class="product-tile--swatch-wrapper product-tile--swatch-wrapper--view-more" title="View product for more images">✚</a'); | |
| } | |
| $($this).siblings('.product-tile--image-link').after($swatches); | |
| $this.closest('.product-tile').addClass('product-tile--has-swatches'); | |
| $this.before('<div class="product-tile--swatch-count">' + imageCounter + ' Colors</div>'); | |
| if (filterColorIndex > -1) { | |
| $($this.closest('.product-tile').find('.product-tile--swatch')[filterColorIndex]).trigger('click'); | |
| } | |
| }); | |
| $('.product-tile--swatches').wrap('<div class="product-tile--swatches-wrapper"/>'); | |
| $('.product-tile--swatches').bxSlider({ | |
| minSlides: 4, | |
| maxSlides: 4, | |
| slideSelector: 'span', | |
| touchEnabled: true, | |
| slideWidth: 45, | |
| slideMargin: 10, | |
| // controls: false, | |
| pager: false, | |
| infiniteLoop: false, | |
| onSlideAfter: function($slideElement){ | |
| if( $('body').hasClass('faster') ){ | |
| $mv.fn.loadVisibleSliderImages($slideElement); | |
| } | |
| } | |
| }); | |
| }; | |
| searchSpringSwatches(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="column half medium-one-third product-tile js-product-tile" data-percent-discount="{{ percent_discount }}" data-salesrank="{{ salesrank }}" data-code="{{ code }}" data-retail="{{ retail }}" data-price="{{ price }}" data-name-sans-make="{{name|preg_replace('/(honda|kawasaki|ktm|susuki|yamaha)/i','')}}"> | |
| <div class="product-tile--inner"> | |
| {% if retail and retail > price %} | |
| <span class="product-tile--flag product-tile--flag--sale">Sale</span> | |
| {% elseif flag %} | |
| <span class="product-tile--flag product-tile--flag--{{ flag|lower }}">{{ flag }}</span> | |
| {% endif %} | |
| <a href="{{ url }}" {{ intellisuggest }} class="product-tile--image-link"> | |
| <img src="{{ imageUrl|strip_http }}" class="product-tile--image vertical-align" alt="{{ name|escape }}"> | |
| </a> | |
| {% if rating %} | |
| <span class="star-rating" style="background-position: 0px -{{ rating * 36 }}px;" title="Rated {{ rating }} Stars"></span> | |
| {% else %} | |
| <span class="star-rating star-rating--0" title="Product Has Not Been Rated Yet"></span> | |
| {% endif %} | |
| <a href="{{ url }}" {{ intellisuggest }} class="product-tile--name">{{ name|escape }}</a> | |
| {% if retail and retail > price %} | |
| <span class="product-tile--price product-tile--price-has-retail"><span class="product-tile--retail">{{ retail|money }}</span>{{ price|money }}</span> | |
| {% else %} | |
| <span class="product-tile--price">{{ price|money }}</span> | |
| {% endif %} | |
| {% if percent_discount and percent_discount > 0 %} | |
| <span class="all-hidden product-tile--percent-discount">SALE {{ percent_discount }}% OFF</span> | |
| {% endif %} | |
| <div class="all-hidden product-tile--data" data-colors="{{ color|join(',') }}" data-swatches="{{ colorswatches|join(',') }}" data-id="{{ uid|escape }}"></div> | |
| <a href="javascript:void(0);" {{ intellisuggest }} title="Quick View" class="product-tile--quick-view bebas" data-product-code="{{ code }}"><span class="icon-eye"></span> Quick View</a> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment