A Pen by Alan David Garcia on CodePen.
Last active
May 6, 2016 06:38
-
-
Save adg29/8e1dd742b155f159fc01b30de5ebb0b8 to your computer and use it in GitHub Desktop.
Contentful Visual Search with Paid Post Components
This file contains hidden or 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
| <body> | |
| '<h1>Paid Posts <small>Component Search</small></h1>' | |
| <div class="visual_search"></div> | |
| <div id="content" class="content-container"></div> | |
| </body> |
This file contains hidden or 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 visualSearch = null; | |
| var visualSearchConfig = { | |
| brands: [], | |
| headlines: [], | |
| components: [] | |
| } | |
| var componentCollection = []; | |
| var contentfulClient = contentful.createClient({ | |
| accessToken: 'cb2d1ccda77c6be4b80150ddb76eb076161f639ce02985a7a2e0e184a1859a57', | |
| space: "h9i3k26tk6x1", | |
| host: "api.contentful.com" | |
| }) | |
| var PRODUCT_CONTENT_TYPE_ID = '2PqfXUJwE8qSYKuM0U6w8M'; | |
| var PAIDPOST_CONTENT_TYPE_ID = 'paidPost'; | |
| var COMPONENT_CONTENT_TYPE_ID = 'component'; | |
| var container = document.getElementById('content'); | |
| contentfulClient.getEntries({ | |
| content_type: COMPONENT_CONTENT_TYPE_ID | |
| }) | |
| .then(function(entries) { | |
| console.log(entries); | |
| _.each(entries.items,function(c,i) { | |
| if (typeof(c.fields.type) == 'undefined') { | |
| console.log('c.fields.type undefined'); | |
| console.log(c); | |
| } else { | |
| visualSearchConfig.components.push(c.fields.type["en-US"]); | |
| componentCollection.push({ | |
| type: c.fields.type["en-US"], | |
| id: c.sys.id | |
| }); | |
| } | |
| }); | |
| }) | |
| contentfulClient.getEntries({ | |
| content_type: PAIDPOST_CONTENT_TYPE_ID | |
| }) | |
| .then(function(entries) { | |
| console.log(entries); | |
| container.innerHTML = renderPaidPosts(entries.items) | |
| }) | |
| function renderPaidPosts(posts) { | |
| return '<div class="products">' + | |
| posts.map(renderSinglePost).join('\n') + | |
| '</div>' | |
| } | |
| function renderSinglePost(post) { | |
| visualSearchConfig.headlines.push(post.fields.title["en-US"]); | |
| visualSearchConfig.brands.push(post.fields.brand["en-US"]); | |
| var fields = post.fields | |
| //console.log(fields) | |
| return '<div class="product-in-list">' + | |
| '<div class="product-image">' + | |
| '</div>' + | |
| '<div class="product-details">' + | |
| renderPostDetails(fields) + | |
| '</div>' + | |
| '</div>' | |
| } | |
| function renderPostDetails(fields) { | |
| return renderPostHeader(fields) + | |
| ['<ol>', | |
| fields.component['en-US'].map(function(component) { | |
| return ['<li>',componentFields(component.sys.id).type,'</li>'].join(' '); | |
| }).join(' ') + | |
| '</ol>'].join(' ') | |
| // '' + fields.component['en-US'].length + ' counted components' + '' | |
| // '' + fields.title['en-US'] + ' ' | |
| } | |
| function renderPostHeader(fields) { | |
| return '<div class="product-header">' + | |
| '<h2>' + | |
| '<a target="_blank" href="' + fields.url['en-US'] + '">' + | |
| fields.title['en-US'] + | |
| '</a>' + | |
| '</h2>' + | |
| ' by ' + | |
| fields.brand['en-US'] + | |
| '</div>' | |
| } | |
| function componentFields(id) { | |
| //console.log('search for header',id); | |
| var component = _.find(componentCollection, function(c) { | |
| //console.log('iterating',c); | |
| return c.id == id; | |
| }); | |
| if (typeof component=='undefined') { console.log('toHeader',component); return 'awry';} | |
| if(component.type=="Infographic/Chart") component.type = "infographic_chart"; | |
| return component; | |
| } | |
| $(document).ready(function() { | |
| visualSearch = VS.init({ | |
| container: $('.visual_search'), | |
| query: '', | |
| callbacks: { | |
| search: function(query, searchCollection) { | |
| console.log(query); | |
| console.log(searchCollection); | |
| console.log(visualSearch.searchQuery.facets()); | |
| }, | |
| facetMatches: function(callback) { | |
| callback([ | |
| 'brand', 'headline', 'component' | |
| ]); | |
| }, | |
| valueMatches: function(facet, searchTerm, callback) { | |
| switch (facet) { | |
| case 'brand': | |
| callback(visualSearchConfig.brands); | |
| break; | |
| case 'headline': | |
| callback(visualSearchConfig.headline); | |
| break; | |
| case 'component': | |
| callback(visualSearchConfig.components); | |
| break; | |
| } | |
| } | |
| } | |
| }); | |
| }); |
This file contains hidden or 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
| <script src="https://npmcdn.com/[email protected]/browser-dist/contentful.js"></script> | |
| <script src="https://npmcdn.com/[email protected]/marked.min.js"></script> | |
| <script src="https://documentcloud.github.io/visualsearch/build/dependencies.js"></script> | |
| <script src="https://documentcloud.github.io/visualsearch/build-min/visualsearch.js"></script> |
This file contains hidden or 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
| body { | |
| padding: 0; | |
| margin: 0; | |
| border: none; | |
| font-family: 'Avenir', sans-serif; | |
| } | |
| a { | |
| border-bottom: 1px dotted #5B9FEF; | |
| color: #4A90E2; | |
| text-decoration: none; | |
| } | |
| .products { | |
| display: flex; | |
| flex-direction: column; | |
| margin-top: 20px; | |
| } | |
| .product-in-list { | |
| display: flex; | |
| margin-bottom: 60px; | |
| } | |
| .product-image a { | |
| border-bottom: none; | |
| } | |
| .product-header h2 { | |
| display: inline; | |
| } | |
| .product-header h2 a { | |
| border-bottom: none; | |
| } | |
| .product-details { | |
| padding-left: 10px; | |
| } | |
| .product-details > * { | |
| margin-bottom: 10px; | |
| } | |
| .product-categories { | |
| font-weight: bold; | |
| } | |
| .product-tags span { | |
| font-weight: bold; | |
| } |
This file contains hidden or 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
| <link href="https://documentcloud.github.io/visualsearch/build-min/visualsearch-datauri.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment