ShopSite Forums

Your source for ShopSite user collaboration

Skip to content

Custom Content Filter

Questions and answers about ShopSite Custom Templates
Post a reply

Custom Content Filter

Postby Kapitol » Wed Jan 28, 2015 1:48 am

I am looking for a way to add a Custom Content Filter to a page on our store. I need way to tag each product by color. I thought about just using the product name as that filter, but we have several products that have unique color names so that won't work. We want to group products colors like aquamarine into Blue, etc.

I thought that if I added the template code for Product Field 1 in the class="" I could do that. Then on each product page in the textbox "Product Field 1", I could enter the color name of my choice.

The results of that in the HTML code are:
Code: Select all
<div class="blocks col-md-3 col-sm-6 col-xs-12 Product Field 1 " style="position: absolute; left: 0px; top: 0px;">


I think it is weird that instead of using what I have in that textbox field on the product page in the Product Field 1, it is instead using the word "Product Field 1". Clearly I am doing something wrong. My code looks like this:
Code: Select all
<div class="blocks col-md-3 col-sm-6 col-xs-12 [-- STORE.ProductField1 --] ">


I also tried using this template code "[-- PRODUCT.Field1 --]" and with using this, nothing shows up.
Kapitol
 
Posts: 52
Joined: Mon May 14, 2012 10:26 pm
Top

Re: Custom Content Filter

Postby ShopSite Lauren » Wed Jan 28, 2015 9:57 am

[-- STORE.ProductField1 --] uses the name of the product field found under Preferences > Extra Fields.

You will want to use [-- PRODUCT.Field1 --]. My guess is that the product you looked at when using that option didn't have anything in product field 1.

I would suggest using an IF statement so that if there is something in the product field 1, it will use that.
[-- IF PRODUCT.Field1 --] [-- PRODUCT.Field1 --][-- END_IF --]
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 889
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT
Top

Re: Custom Content Filter

Postby Kapitol » Wed Jan 28, 2015 12:14 pm

I actually do have copy inside the Product Field 1 for the products I am testing.
After, col-xs-12, is where the code below sits.
[-- IF PRODUCT.Field1 --] [-- PRODUCT.Field1 --][-- END_IF --]
I get this:
Code: Select all
<div class="blocks col-md-3 col-sm-6 col-xs-12  " style="position: absolute; left: 0px; top: 0px;">


You can see it live at
Code: Select all
http://www.artandsoulbeads.com/store/swarovski_crystal_cubes_5601.html


Since this doesn't seem to work, do you know of another way I can add a custom category class to each product?
Kapitol
 
Posts: 52
Joined: Mon May 14, 2012 10:26 pm
Top

Re: Custom Content Filter

Postby Kapitol » Wed Jan 28, 2015 12:29 pm

http://imgur.com/lDGdZqI

I took this screen to show you what I am inputting into the field. This for the product, Swarovski Cube 8mm Trio: Black Tie. Beyond merely Publishing the changes I also Regenerate the entire store.
Kapitol
 
Posts: 52
Joined: Mon May 14, 2012 10:26 pm
Top

Re: Custom Content Filter

Postby Kapitol » Thu Jan 29, 2015 11:01 am

I have been experimenting with product.field's and I can't get this thing to work anywhere on this page. Am I missing a prerequisite in the page somewhere to get one of these working?
Code: Select all
[-- DEFINE LINK_TO_PAGE --]
<a href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]">
[-- IF PAGE.LinkGraphic --][-- PAGE.LinkGraphic --]
[-- END_IF --]
[-- IF PAGE.LinkName --][-- PAGE.LinkName --][-- ELSE --][-- PAGE.Name --][-- END_IF --]
[-- IF PAGE.LinkText --]
[-- PAGE.LinkText --][-- END_IF --]
[-- END_DEFINE LINK_TO_PAGE --]

[-- DEFINE PAGE --]
<!DOCTYPE html>

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
[-- IF PAGE.Title --]
  <title>[-- PAGE.Title --]</title>
[-- ELSE --]
  <title>[-- PAGE.Name --]</title>
[-- END_IF --]
<style>body {font-size: 14px;line-height: 1.42857143;color: #777;background-color: #e2e2e2;}</style>
[-- IF PAGE.MetaKeywords --]
<meta name="keywords" content="[-- PAGE.MetaKeywords --]">
[-- END_IF --]

[-- IF PAGE.MetaDescription --]
<meta name="description" content="[-- PAGE.MetaDescription --]">
[-- END_IF --]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="[-- OUTPUT_DIRECTORY_URL --]/media/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="[-- OUTPUT_DIRECTORY_URL --]/media/crystal.css" />
<script type="text/javascript" src="[-- OUTPUT_DIRECTORY_URL --]/media/modernizr.custom.42216.js"></script>
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Roboto+Slab:400,300:latin', 'Open+Sans:300italic,400,300,700,800:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
<!--[if lte IE 7]><link rel="stylesheet" href="[-- OUTPUT_DIRECTORY_URL --]/media/ies.css" type="text/css" media="screen"/><![endif]-->
<!--[-- OUTPUT_DIRECTORY_URL --]/-->
<script type="text/javascript">
(function() {
var hm = document.createElement('script'); hm.type ='text/javascript'; hm.async = true;
hm.src = ('++u-heatmap-it+log-js').replace(/[+]/g,'/').replace(/-/g,'.');
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body class="home-page">
<script>
    // Masony
        $('#setup').masonry({
            itemSelector: '.blocks'
    });
    </script>   
<div id="page" class="container-fluid">   
[-- INCLUDE Boostrap-Menu PROCESS --]
<div class="row">
    <div class="adspace"></div>
    </div>   
<div class="row">   
<div class="container home-cont">
<div class="row">
 [-- IF PAGE.DisplayName --]
  [-- IF PAGE.Name --]
   <h1 itemprop="name">[-- PAGE.Name --]</h1>
  [-- END_IF --]
 [-- END_IF --]
 [-- IF PAGE.Text1 --]
  <p itemprop="description">[-- PAGE.Text1 --]</p>
 [-- END_IF --]
 </div>
<div class="row fullback lineui">
<div class="breadcru col-md-7" itemprop="breadcrumb"><a href=[-- MyStoreURL --]>[-- STORE.Home --]</a> &rsaquo; <a href="[-- OUTPUT_DIRECTORY_URL --]/beads.html">Beads</a> &rsaquo; Swarovski &rsaquo; [-- PAGE.Name --]</div>
[-- IF PAGE.ProductsPerPage "0" --]
 [-- ELSE --]
  <div class="pagination col-md-3">[-- PREVNEXT --]</div>
 [-- END_IF --]
 <div class="catmenu col-md-2">
 <span><img src="[-- OUTPUT_DIRECTORY_URL --]/media/menu.png"> Swarovski Menu</span>
 <ol>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_cubes_5601.html">Cubes</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_saucers_5305.html">Saucers</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_top_drill_bicone_6301.html">Top Drill Bicone</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_round_pearls_5810.html">Round Pearls</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/RingBead.html">Ring Beads</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/column_pendant.html">Column Pendant</a></li>   
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_bicones_5301_xilion_5328.html">Bicones &amp; Xilion</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_butterfly_beads_5754.html">Butterfly Beads</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_cosmic_rings_4139.html">Cosmic Rings</a></li>
    <li><a href="[-- OUTPUT_DIRECTORY_URL --]/swarovski_crystal_polygon_drops_6015.html">Polygon Drops</a></li>
    </ol>
 </div>
 </div>   
  <div class="row fullback">
  [-- INCLUDE Page-Layout PROCESS --]
 [-- IF PAGE.NumLinks 0 --]
 [-- ELSE --]
 <div class="odd_links">
  [-- LOOP LINKS PAGE.Columns --]
   [-- LINK --]
 [-- END_LOOP LINKS --]
 </div>
 [-- END_IF --]
 
 [-- IF PAGE.Text2 --]
  <p>[-- PAGE.Text2 --]</p>
 [-- END_IF --]
 
 [-- IF PAGE.NumProducts "0" --]
[-- ELSE --]
<div class="itemListing [-- IF PRODUCT.field2 --][-- PRODUCT.field2 --][-- END_IF --]"><div id="setup">

[-- VAR.ProductCounter "0" --]
[-- LOOP PRODUCTS --]
<article itemscope itemtype="http://schema.org/IndividualProduct" itemid="#product"><div class="blocks col-md-3 col-sm-6 col-xs-6" >
        <div class="pods thumbnail">[-- PRODUCT --]</div></div></article>[-- VAR.ProductCounter INC --]
[-- END_LOOP PRODUCTS --]
</div>
[-- END_IF --]
 
 [-- IF PAGE.ProductsPerPage "0" --]
 [-- ELSE --]
  <div class="pagination pagebtm">[-- PREVNEXT --]</div>
 [-- END_IF --]
 
 [-- IF PAGE.Text3 --]
  <p>[-- PAGE.Text3 --]</p>
 [-- END_IF --]
 </div>
 </div>
 <div class="totop"><a href="#top"></a></div>
<!--[if IE 7]>
<div class="iealert">We see you are using a lightly supported browser. For a more complete experience consider upgrading to <a href="https://www.google.com/chrome/" target="_blank">Chrome</a>, <a href="http://www.apple.com/safari/" target="_blank">Safari</a>, <a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a> or <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="_blank">Internet Explorer 11</a>.</div>
<![endif]-->
    </div>
<div class="row">   
[-- INCLUDE Bootstrap-menu-footer PROCESS --]
    </div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="[-- OUTPUT_DIRECTORY_URL --]/media/masonry.pkgd.min.js"></script>
<script src="[-- OUTPUT_DIRECTORY_URL --]/media/imagesloaded.pkgd.min.js"></script>   
<script>
    jQuery.fn.removeInlineCss = function(property){

        if(property == null)
            return this.removeAttr('style');

        var proporties = property.split(/\s+/);

        return this.each(function(){
            var remover =
                this.style.removeProperty   // modern browser
                || this.style.removeAttribute   // old browser (ie 6-8)
                || jQuery.noop;  //eventual

            for(var i = 0 ; i < proporties.length ; i++)
                remover.call(this.style,proporties[i]);

        });
    };
 
    $(document).ready(function () {
      $('[data-toggle=offcanvas]').click(function () {
        $('.row-offcanvas').toggleClass('active')
      });
    });
   $("#numz div").removeInlineCss();

    $(".open-panel").click(function(){
    $("html").addClass("openNav");
        });
    $(".close-panel, #content").click(function(){
    $("html").removeClass("openNav");
        });
    var elem = document.getElementById( 'numz' );
    elem.innerHTML = elem.innerHTML.replace( /\b(\d+)\b/g, '<span class="itemsin">$1</span>' );
    $('.itemsin').each(function() {
        $(this).next('a').add(this.nextSibling).wrapAll('<div class="hidden"></div>');
});
    // Masonry
    $(document).ready(function () {
        var $container = $('#setup');

        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector: '.blocks',
                columnWidth: '.blocks',
                transitionDuration: 0
            });
        });
    });
    // Show Search Box
    $("#toggle").click(function() {
      $(this).toggleClass("on");
      $("#showSearch").slideToggle();
    });
    </script>
</body>
</html>
[-- END_DEFINE PAGE --]
Kapitol
 
Posts: 52
Joined: Mon May 14, 2012 10:26 pm
Top

Re: Custom Content Filter

Postby Jim » Thu Jan 29, 2015 11:40 am

Product.<anything> template tags can only be used in the product template. The code you show is for a page template so no product tags will work..
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah
Top

Re: Custom Content Filter

Postby Kapitol » Thu Jan 29, 2015 11:56 am

Okay, thanks. If I want to be able to do what I want I'll just have to figure out a way to move the looped code in the page template into the product template.
Kapitol
 
Posts: 52
Joined: Mon May 14, 2012 10:26 pm
Top

Re: Custom Content Filter

Postby Kapitol » Thu Jan 29, 2015 12:10 pm

That did the trick. Thank again.
Kapitol
 
Posts: 52
Joined: Mon May 14, 2012 10:26 pm
Top
Post a reply

Return to Custom Template Questions

Who is online

Users browsing this forum: No registered users and 45 guests

Powered by phpBB® Forum Software © phpBB Group