changes to search doccs

FlorentijnKnol · Apr 15, 2019 · 74e1e79 · 74e1e79
1 parent 03e5bb1
commit 74e1e79
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 151 deletions.
diff --git a/build/.doctrees/environment.pickle b/build/.doctrees/environment.pickle
diff --git a/build/.doctrees/jibia_search.doctree b/build/.doctrees/jibia_search.doctree
diff --git a/build/_sources/jibia_search.rst.txt b/build/_sources/jibia_search.rst.txt
@@ -6,61 +6,38 @@
 Search
 ====================================   
 
-Simple HTML Example
+HTML implementation
 =============================
+
 This javascript example shows how to implement jibia's search bar. The search bar should have 'searchbar' as its id like this:
 
 ::
 
-	<input type="name" id = "searchbar" class = "zoekbalk" name="Search" placeholder="Zoekbalk van Jibia"></input>
+	<input type="name" id = "formSearch" class = "zoekbalk" name="Search" placeholder="Zoekbalk van Jibia"></input>
 	
-To show the autocomplete results you need an empty div under this input field.
-
-::
-
-    <div id="data"></div>
-
-This div will be filled with the search results. To finalize the implementation add the following script tag to
-the bottom of your html document. Insert your own jibia search token in the token attribute:
+	
+Adding the following script tag to your html will make autocomplete results appear under this search bar.	
 
 ::
 
-	<script src="js/jibia_search.js" token="YOUR TOKEN HERE"/>
-
-The only thing left to do now is downloading jibia_search.js and adding this file to your js folder. Once this is done the
-search bar should be up and running. 
+	<script src="https://cdn.jsdelivr.net/gh/stijnvalkenburg/Jibia-search/search.js" token="cd2957a67f78a76a50c94666e21891"/>
 
-Besides the token parameter, several other parameters can be set in the script tag above. These are detailed below.
-
 .. glossary::
 
-    styled
-      This value can be set to true or false.  If this is set to true the search results will use predefined style. The parameter defaults to true.
-
-    result_classname
-      This parameter can be set to define the class name for autocomplete suggestions. This parameter defaults to "search_result".
-
-
-Example of manual autocomplete handling
-=============================
-
-If you wish to have more control over what happens under the hood, instead you can write the logic for this yourself.
-To do this you first have to load your product feed into Jibia. You can do that with the following request:
-
-::
-
-	curl -X POST \
-	  https://api.jibia.nl/api/initialize_search \
-	  -H 'Content-Type: application/json' \
-	  -d '{"feed_url": FEED_URL}'
+    token
+	  Your authentication token.
+
 
-.. glossary::
 
-    feed_url
-      The URL to your product feed.
+Styling autocomplete results
+===============================
+
+The list of autocomplete results has the class name "search_auto". The products inside this list have "search_element product_element" as their class name. You can style the autocomplete results using these classnames.
 
-This request returns a token you can use for the search. Save this token somewhere. It might take several minutes before your feed is fully initialized.
+Manually handling autocomplete
+===============================
 
+If you wish to have more control over how the products are being handles, you can write the logic for this yourself.
 The autocomplete can be called with the following request:
 
 ::
@@ -71,13 +48,43 @@ The autocomplete can be called with the following request:
 .. glossary::
 
     query
-      The query for the autocomplete.
+      The query for the autocomplete
 
     token
-	  The token from the response of your call to initialize_search
+	  Your authentication token
 
 	n
 	  The amount of autocomplete results
 
-This request will return a list of products.
-
+This request will return the products matching the query. The json with products is formatted like this:
+
+::
+
+	{
+		"result": [
+			{
+				"product": {
+					"img_url": "https://jibia-shop.nl/media/test_product1.png",
+					"name": "Test Product 1",
+					"url": "https://jibia-shop.nl/products/test_product1.html"
+				},
+				"word": "Test"
+			}
+		]
+	}
+	
+.. glossary::
+
+    img_url
+      The product thumbnail url
+
+    name
+	  The name/title of the product
+
+	url
+	  The product page url
+
+	word
+	  The word the search matched on for this product
+
+
diff --git a/build/genindex.html b/build/genindex.html
@@ -80,8 +80,9 @@
 
               <ul>
 <li class="toctree-l1"><a class="reference internal" href="jibia_search.html">Search</a></li>
-<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#simple-html-example">Simple HTML Example</a></li>
-<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#example-of-manual-autocomplete-handling">Example of manual autocomplete handling</a></li>
+<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#html-implementation">HTML implementation</a></li>
+<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#styling-autocomplete-results">Styling autocomplete results</a></li>
+<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#manually-handling-autocomplete">Manually handling autocomplete</a></li>
 <li class="toctree-l1"><a class="reference internal" href="contact.html">Contact</a></li>
 </ul>
 
@@ -149,49 +150,40 @@
 <h1 id="index">Index</h1>
 
 <div class="genindex-jumpbox">
- <a href="#F"><strong>F</strong></a>
+ <a href="#I"><strong>I</strong></a>
+ | <a href="#N"><strong>N</strong></a>
  | <a href="#Q"><strong>Q</strong></a>
- | <a href="#R"><strong>R</strong></a>
- | <a href="#S"><strong>S</strong></a>
  | <a href="#T"><strong>T</strong></a>
 
 </div>
-<h2 id="F">F</h2>
+<h2 id="I">I</h2>
 <table style="width: 100%" class="indextable genindextable"><tr>
   <td style="width: 33%; vertical-align: top;"><ul>
-      <li><a href="jibia_search.html#term-feed-url"><strong>feed_url</strong></a>
+      <li><a href="jibia_search.html#term-img-url"><strong>img_url</strong></a>
 </li>
   </ul></td>
 </tr></table>
 
-<h2 id="Q">Q</h2>
-<table style="width: 100%" class="indextable genindextable"><tr>
-  <td style="width: 33%; vertical-align: top;"><ul>
-      <li><a href="jibia_search.html#term-query"><strong>query</strong></a>
-</li>
-  </ul></td>
-</tr></table>
-
-<h2 id="R">R</h2>
+<h2 id="N">N</h2>
 <table style="width: 100%" class="indextable genindextable"><tr>
   <td style="width: 33%; vertical-align: top;"><ul>
-      <li><a href="jibia_search.html#term-result-classname"><strong>result_classname</strong></a>
+      <li><a href="jibia_search.html#term-name"><strong>name</strong></a>
 </li>
   </ul></td>
 </tr></table>
 
-<h2 id="S">S</h2>
+<h2 id="Q">Q</h2>
 <table style="width: 100%" class="indextable genindextable"><tr>
   <td style="width: 33%; vertical-align: top;"><ul>
-      <li><a href="jibia_search.html#term-styled"><strong>styled</strong></a>
+      <li><a href="jibia_search.html#term-query"><strong>query</strong></a>
 </li>
   </ul></td>
 </tr></table>
 
 <h2 id="T">T</h2>
 <table style="width: 100%" class="indextable genindextable"><tr>
   <td style="width: 33%; vertical-align: top;"><ul>
-      <li><a href="jibia_search.html#term-token"><strong>token</strong></a>
+      <li><a href="jibia_search.html#term-2"><strong>token</strong></a>, <a href="jibia_search.html#term-token"><strong>[1]</strong></a>
 </li>
   </ul></td>
 </tr></table>

diff --git a/build/index.html b/build/index.html
@@ -80,8 +80,9 @@
 
               <ul>
 <li class="toctree-l1"><a class="reference internal" href="jibia_search.html">Search</a></li>
-<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#simple-html-example">Simple HTML Example</a></li>
-<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#example-of-manual-autocomplete-handling">Example of manual autocomplete handling</a></li>
+<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#html-implementation">HTML implementation</a></li>
+<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#styling-autocomplete-results">Styling autocomplete results</a></li>
+<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#manually-handling-autocomplete">Manually handling autocomplete</a></li>
 <li class="toctree-l1"><a class="reference internal" href="contact.html">Contact</a></li>
 </ul>
 
@@ -159,8 +160,9 @@ <h1>Contact<a class="headerlink" href="#contact" title="Permalink to this headli
 <div class="toctree-wrapper compound">
 <ul>
 <li class="toctree-l1"><a class="reference internal" href="jibia_search.html">Search</a></li>
-<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#simple-html-example">Simple HTML Example</a></li>
-<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#example-of-manual-autocomplete-handling">Example of manual autocomplete handling</a></li>
+<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#html-implementation">HTML implementation</a></li>
+<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#styling-autocomplete-results">Styling autocomplete results</a></li>
+<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#manually-handling-autocomplete">Manually handling autocomplete</a></li>
 <li class="toctree-l1"><a class="reference internal" href="contact.html">Contact</a></li>
 </ul>
 </div>

diff --git a/build/jibia_search.html b/build/jibia_search.html
@@ -81,8 +81,9 @@
 
               <ul class="current">
 <li class="toctree-l1 current"><a class="current reference internal" href="#">Search</a></li>
-<li class="toctree-l1"><a class="reference internal" href="#simple-html-example">Simple HTML Example</a></li>
-<li class="toctree-l1"><a class="reference internal" href="#example-of-manual-autocomplete-handling">Example of manual autocomplete handling</a></li>
+<li class="toctree-l1"><a class="reference internal" href="#html-implementation">HTML implementation</a></li>
+<li class="toctree-l1"><a class="reference internal" href="#styling-autocomplete-results">Styling autocomplete results</a></li>
+<li class="toctree-l1"><a class="reference internal" href="#manually-handling-autocomplete">Manually handling autocomplete</a></li>
 <li class="toctree-l1"><a class="reference internal" href="contact.html">Contact</a></li>
 </ul>
 
@@ -151,60 +152,67 @@
   <div class="section" id="search">
 <h1>Search<a class="headerlink" href="#search" title="Permalink to this headline">¶</a></h1>
 </div>
-<div class="section" id="simple-html-example">
-<h1>Simple HTML Example<a class="headerlink" href="#simple-html-example" title="Permalink to this headline">¶</a></h1>
+<div class="section" id="html-implementation">
+<h1>HTML implementation<a class="headerlink" href="#html-implementation" title="Permalink to this headline">¶</a></h1>
 <p>This javascript example shows how to implement jibia’s search bar. The search bar should have ‘searchbar’ as its id like this:</p>
-<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>&lt;input type=&quot;name&quot; id = &quot;searchbar&quot; class = &quot;zoekbalk&quot; name=&quot;Search&quot; placeholder=&quot;Zoekbalk van Jibia&quot;&gt;&lt;/input&gt;
+<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>&lt;input type=&quot;name&quot; id = &quot;formSearch&quot; class = &quot;zoekbalk&quot; name=&quot;Search&quot; placeholder=&quot;Zoekbalk van Jibia&quot;&gt;&lt;/input&gt;
 </pre></div>
 </div>
-<p>To show the autocomplete results you need an empty div under this input field.</p>
-<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="n">div</span> <span class="nb">id</span><span class="o">=</span><span class="s2">&quot;data&quot;</span><span class="o">&gt;&lt;/</span><span class="n">div</span><span class="o">&gt;</span>
+<p>Adding the following script tag to your html will make autocomplete results appear under this search bar.</p>
+<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="n">script</span> <span class="n">src</span><span class="o">=</span><span class="s2">&quot;https://cdn.jsdelivr.net/gh/stijnvalkenburg/Jibia-search/search.js&quot;</span> <span class="n">token</span><span class="o">=</span><span class="s2">&quot;cd2957a67f78a76a50c94666e21891&quot;</span><span class="o">/&gt;</span>
 </pre></div>
 </div>
-<p>This div will be filled with the search results. To finalize the implementation add the following script tag to
-the bottom of your html document. Insert your own jibia search token in the token attribute:</p>
-<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="n">script</span> <span class="n">src</span><span class="o">=</span><span class="s2">&quot;js/jibia_search.js&quot;</span> <span class="n">token</span><span class="o">=</span><span class="s2">&quot;YOUR TOKEN HERE&quot;</span><span class="o">/&gt;</span>
-</pre></div>
-</div>
-<p>The only thing left to do now is downloading jibia_search.js and adding this file to your js folder. Once this is done the
-search bar should be up and running.</p>
-<p>Besides the token parameter, several other parameters can be set in the script tag above. These are detailed below.</p>
 <dl class="glossary docutils">
-<dt id="term-styled">styled</dt>
-<dd>This value can be set to true or false.  If this is set to true the search results will use predefined style. The parameter defaults to true.</dd>
-<dt id="term-result-classname">result_classname</dt>
-<dd>This parameter can be set to define the class name for autocomplete suggestions. This parameter defaults to “search_result”.</dd>
+<dt id="term-token">token</dt>
+<dd>Your authentication token.</dd>
 </dl>
 </div>
-<div class="section" id="example-of-manual-autocomplete-handling">
-<h1>Example of manual autocomplete handling<a class="headerlink" href="#example-of-manual-autocomplete-handling" title="Permalink to this headline">¶</a></h1>
-<p>If you wish to have more control over what happens under the hood, instead you can write the logic for this yourself.
-To do this you first have to load your product feed into Jibia. You can do that with the following request:</p>
-<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">curl</span> <span class="o">-</span><span class="n">X</span> <span class="n">POST</span> \
-  <span class="n">https</span><span class="p">:</span><span class="o">//</span><span class="n">api</span><span class="o">.</span><span class="n">jibia</span><span class="o">.</span><span class="n">nl</span><span class="o">/</span><span class="n">api</span><span class="o">/</span><span class="n">initialize_search</span> \
-  <span class="o">-</span><span class="n">H</span> <span class="s1">&#39;Content-Type: application/json&#39;</span> \
-  <span class="o">-</span><span class="n">d</span> <span class="s1">&#39;{&quot;feed_url&quot;: FEED_URL}&#39;</span>
-</pre></div>
+<div class="section" id="styling-autocomplete-results">
+<h1>Styling autocomplete results<a class="headerlink" href="#styling-autocomplete-results" title="Permalink to this headline">¶</a></h1>
+<p>The list of autocomplete results has the class name “search_auto”. The products inside this list have “search_element product_element” as their class name. You can style the autocomplete results using these classnames.</p>
 </div>
-<dl class="glossary docutils">
-<dt id="term-feed-url">feed_url</dt>
-<dd>The URL to your product feed.</dd>
-</dl>
-<p>This request returns a token you can use for the search. Save this token somewhere. It might take several minutes before your feed is fully initialized.</p>
-<p>The autocomplete can be called with the following request:</p>
+<div class="section" id="manually-handling-autocomplete">
+<h1>Manually handling autocomplete<a class="headerlink" href="#manually-handling-autocomplete" title="Permalink to this headline">¶</a></h1>
+<p>If you wish to have more control over how the products are being handles, you can write the logic for this yourself.
+The autocomplete can be called with the following request:</p>
 <div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">curl</span> <span class="o">-</span><span class="n">X</span> <span class="n">GET</span> \
   <span class="s1">&#39;https://api.jibia.nl/api/do_search?query=</span><span class="si">{QUERY}</span><span class="s1">&amp;token=</span><span class="si">{TOKEN}</span><span class="s1">&amp;n=</span><span class="si">{N}</span><span class="s1">&#39;</span>
 </pre></div>
 </div>
 <dl class="glossary docutils">
 <dt id="term-query">query</dt>
-<dd>The query for the autocomplete.</dd>
-<dt id="term-token">token</dt>
-<dd><p class="first">The token from the response of your call to initialize_search</p>
+<dd>The query for the autocomplete</dd>
+<dt id="term-2">token</dt>
+<dd><p class="first">Your authentication token</p>
 <p class="last">The amount of autocomplete results</p>
 </dd>
 </dl>
-<p>This request will return a list of products.</p>
+<p>This request will return the products matching the query. The json with products is formatted like this:</p>
+<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="p">{</span>
+        <span class="s2">&quot;result&quot;</span><span class="p">:</span> <span class="p">[</span>
+                <span class="p">{</span>
+                        <span class="s2">&quot;product&quot;</span><span class="p">:</span> <span class="p">{</span>
+                                <span class="s2">&quot;img_url&quot;</span><span class="p">:</span> <span class="s2">&quot;https://jibia-shop.nl/media/test_product1.png&quot;</span><span class="p">,</span>
+                                <span class="s2">&quot;name&quot;</span><span class="p">:</span> <span class="s2">&quot;Test Product 1&quot;</span><span class="p">,</span>
+                                <span class="s2">&quot;url&quot;</span><span class="p">:</span> <span class="s2">&quot;https://jibia-shop.nl/products/test_product1.html&quot;</span>
+                        <span class="p">},</span>
+                        <span class="s2">&quot;word&quot;</span><span class="p">:</span> <span class="s2">&quot;Test&quot;</span>
+                <span class="p">}</span>
+        <span class="p">]</span>
+<span class="p">}</span>
+</pre></div>
+</div>
+<dl class="glossary docutils">
+<dt id="term-img-url">img_url</dt>
+<dd>The product thumbnail url</dd>
+<dt id="term-name">name</dt>
+<dd><p class="first">The name/title of the product</p>
+<p>l
+The product page url</p>
+<p class="last">rd
+The word the search matched on for this product</p>
+</dd>
+</dl>
 </div>
 
 

diff --git a/build/objects.inv b/build/objects.inv
diff --git a/build/search.html b/build/search.html
@@ -79,8 +79,9 @@
 
               <ul>
 <li class="toctree-l1"><a class="reference internal" href="jibia_search.html">Search</a></li>
-<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#simple-html-example">Simple HTML Example</a></li>
-<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#example-of-manual-autocomplete-handling">Example of manual autocomplete handling</a></li>
+<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#html-implementation">HTML implementation</a></li>
+<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#styling-autocomplete-results">Styling autocomplete results</a></li>
+<li class="toctree-l1"><a class="reference internal" href="jibia_search.html#manually-handling-autocomplete">Manually handling autocomplete</a></li>
 <li class="toctree-l1"><a class="reference internal" href="contact.html">Contact</a></li>
 </ul>